/* =================================================================== STUDIO NIM — PROJECT (CASE STUDY) TEMPLATE Shares the homepage design language: paper/ink, one yellow accent, the S\N backslash seam. This page is the reusable pattern for all 34 projects — swap the content tokens at the top of and the image list; everything else stays identical. SLASH RULE: backslash "\" only. Vertical bar = negative rotation, horizontal bar = positive rotation. Yellow slash appears once (the hero monogram); everywhere else the seam is ink/white. =================================================================== */ :root{ --paper: #FFFFFF; --soft: #F5F5F3; --ink: #111111; --ink-2: #555555; --line: #E7E7E5; --accent: #FFF300; --font-display: 'Optima', 'Optima Nova LT', Candara, 'Noto Sans', Calibri, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --container: 1680px; --pad: clamp(1.4rem, 5vw, 5rem); --ease: cubic-bezier(.22,.61,.36,1); } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; background:var(--paper); overflow-x:hidden; } body{ background:var(--paper); color:var(--ink); font-family:var(--font-display); font-weight:400; font-size:1.05rem; line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; cursor:url("data:image/svg+xml;utf8,") 4 2, auto; } a, button{ cursor:url("data:image/svg+xml;utf8,") 4 2, pointer; } img, video{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } section{ position:relative; } .container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); } ::selection{ background:var(--ink); color:var(--accent); } .grain{ position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.04; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); } /* ---- reading progress: a "\" that stands upright at 100% ---- */ .seam-progress{ position:fixed; right:calc(var(--pad) * .5); bottom:1.6rem; z-index:400; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:.55rem; mix-blend-mode:difference; } .seam-progress .slash{ width:2px; height:44px; background:#fff; transform:rotate(-30deg); transition:transform .15s linear; } .seam-progress .pct{ font-family:var(--font-mono); font-size:.72rem; color:#fff; letter-spacing:.05em; } @media (max-width:900px){ .seam-progress{ display:none; } } /* ---- nav (difference blend: auto white on dark hero, black on paper) ---- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:900; display:flex; align-items:center; justify-content:space-between; padding:clamp(1rem,2vw,1.5rem) var(--pad); mix-blend-mode:difference; color:#fff; } .nav-logo{ font-weight:500; font-size:1.1rem; letter-spacing:.16em; } .nav-back{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; display:inline-flex; align-items:center; gap:.5rem; } .nav-back:hover{ opacity:.7; } .nav-links{ display:flex; gap:clamp(1.4rem,2.4vw,2.8rem); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; } .nav-links a{ position:relative; padding-bottom:3px; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#fff; transition:width .3s var(--ease); } .nav-links a:hover::after{ width:100%; } .nav-toggle{ display:none; background:none; border:none; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; color:#fff; mix-blend-mode:difference; } .nav-mobile{ position:fixed; inset:0; background:var(--ink); color:var(--paper); z-index:1200; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem; padding:var(--pad); transform:translateY(-100%); transition:transform .5s var(--ease); } .nav-mobile.is-open{ transform:translateY(0); } .nav-mobile a{ font-size:2.2rem; font-weight:500; } .nav-mobile a span{ color:var(--paper); opacity:.5; margin-right:.4rem; } .nav-mobile-close{ position:absolute; top:1.6rem; right:var(--pad); background:none; border:none; color:var(--paper); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; } .eyebrow{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; color:var(--ink-2); } .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.from-left{ transform:translateX(-40px); } .reveal.from-right{ transform:translateX(40px); } .reveal.is-visible{ opacity:1; transform:translate(0,0); } /* =================================================================== 01 · HERO — typographic only, no project photography here by design: the fold (black triangle + S\N monogram) opens on scroll exactly like the homepage, over plain paper. The project's cover photograph appears right after, in its own dedicated Cover section. =================================================================== */ .p-hero{ height:200vh; } .p-hero-stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:flex-end; } .p-hero-fold{ position:absolute; inset:0; will-change:transform; pointer-events:none; } .p-hero-tri{ position:absolute; inset:0; background:var(--ink); clip-path:polygon(34% 0, 100% 0, 100% 66%); } .p-hero-mark{ position:absolute; top:13%; right:8%; z-index:1; color:var(--paper); font-size:clamp(2rem,5vw,4.4rem); font-weight:500; } .p-hero-mark i{ font-style:normal; color:var(--accent); } .p-hero-content{ position:relative; z-index:2; width:100%; padding:0 var(--pad) clamp(5rem,10vh,8rem); } .p-hero-meta{ display:flex; gap:1.4rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; color:var(--ink-2); margin-bottom:1.2rem; } .p-hero-meta .dot{ color:var(--ink); } h1.p-hero-title{ font-size:clamp(2.8rem,8vw,7.2rem); font-weight:500; letter-spacing:-.01em; line-height:1.14; max-width:16ch; } .p-hero-sub{ margin-top:1.2rem; max-width:42ch; font-size:clamp(1.05rem,1.4vw,1.3rem); color:var(--ink-2); } /* Same minimal scroll-mouse used on Home/About: black outline, the wheel ticking down in the brand yellow, fading as the fold opens. */ .p-hero-mouse{ position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); z-index:2; width:28px; pointer-events:none; will-change:opacity; } .p-hero-mouse svg{ display:block; width:100%; height:auto; overflow:visible; } .p-hero-mouse .wheel{ animation:p-wheel 2s infinite var(--ease); } @keyframes p-wheel{ 0% { transform:translateY(0); opacity:1; } 55% { transform:translateY(13px); opacity:0; } 56% { transform:translateY(0); opacity:0; } 100% { transform:translateY(0); opacity:1; } } /* =================================================================== · COVER — the project's first photograph, right after the hero. A single full-bleed reveal, not a background: it earns its own moment instead of sitting behind text. =================================================================== */ .cover{ padding-block:clamp(2rem,4vw,3rem); } .cover-frame{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--soft); border:1px solid var(--line); } .cover-frame img{ width:100%; height:100%; object-fit:cover; } .cover-cap{ margin-top:1rem; padding-inline:var(--pad); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; color:var(--ink-2); } /* ---- fact bar ---- */ .facts{ border-bottom:1px solid var(--line); } .facts-grid{ display:grid; grid-template-columns:repeat(4,1fr); } .fact{ padding:clamp(1.6rem,3vw,2.4rem) var(--pad); border-left:1px solid var(--line); } .fact:first-child{ border-left:none; } .fact span{ display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink-2); margin-bottom:.6rem; } .fact b{ font-weight:500; font-size:clamp(1rem,1.3vw,1.15rem); } /* =================================================================== 02 · OVERVIEW — the lede, set large; a sticky side label. =================================================================== */ .overview{ padding-block:clamp(5rem,10vw,8rem); } .overview-grid{ display:grid; grid-template-columns:.4fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; } .overview-label{ position:sticky; top:clamp(6rem,12vh,8rem); } .overview-label .k{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em; color:var(--ink-2); } .overview-label h2{ margin-top:.8rem; font-size:clamp(1.5rem,2.4vw,2.2rem); font-weight:500; line-height:1.25; max-width:16ch; } .overview-body p{ font-size:clamp(1.25rem,2vw,1.8rem); font-weight:500; line-height:1.5; letter-spacing:-.005em; } .overview-body p + p{ margin-top:1.6rem; } .overview-body em{ font-style:normal; box-shadow:inset 0 -0.4em var(--accent); } /* =================================================================== 03 · MOTION — full-bleed video, the centrepiece. =================================================================== */ .motion{ padding-block:clamp(1rem,2vw,2rem); } .motion-frame{ position:relative; overflow:hidden; background:var(--ink); border:1px solid var(--line); } .motion-frame video{ width:100%; height:auto; display:block; } .motion-cap{ margin-top:1rem; padding-inline:var(--pad); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; color:var(--ink-2); } /* =================================================================== 04 · GALLERY — an editorial rhythm, not a uniform grid. Rows alternate: full-bleed, then 2-up, then offset single, etc. Each image reveals and lifts slightly on scroll. =================================================================== */ .gallery{ padding-block:clamp(3rem,6vw,5rem); display:flex; flex-direction:column; gap:clamp(1.4rem,3vw,2.4rem); } .g-full img{ width:100%; } .g-two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem); } .g-three{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.4rem); } .g-wide-narrow{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(1.4rem,3vw,2.4rem); } .g-narrow-wide{ display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(1.4rem,3vw,2.4rem); } .frame{ overflow:hidden; background:var(--soft); border:1px solid var(--line); } .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); } .frame:hover img{ transform:scale(1.04); } .frame.cut{ clip-path:polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); } /* pull-quote between gallery blocks */ .pull{ padding-block:clamp(4rem,8vw,7rem); text-align:center; } .pull p{ font-size:clamp(1.6rem,4vw,3rem); font-weight:500; letter-spacing:-.01em; line-height:1.28; max-width:24ch; margin-inline:auto; } .pull .credit{ margin-top:1.4rem; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; color:var(--ink-2); } /* =================================================================== 05 · CREDITS =================================================================== */ .credits{ padding-block:clamp(4rem,8vw,6rem); border-top:1px solid var(--line); } .credits-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; } .credits-grid div span{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--ink-2); margin-bottom:.6rem; } .credits-grid div p{ font-size:1.02rem; } /* =================================================================== 06 · NEXT PROJECT — full-bleed teaser, invites the next scroll. =================================================================== */ .next{ position:relative; height:70vh; min-height:440px; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--paper); } .next img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; will-change:transform; } .next::after{ content:""; position:absolute; inset:0; background:rgba(17,17,17,.55); z-index:1; } .next-inner{ position:relative; z-index:2; padding-inline:var(--pad); } .next-inner .k{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.16em; color:rgba(255,255,255,.8); } .next-inner h2{ margin-top:1rem; font-size:clamp(2.4rem,6vw,5rem); font-weight:500; letter-spacing:-.01em; } .next-inner .go{ display:inline-flex; margin-top:1.6rem; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; border-bottom:2px solid var(--accent); padding-bottom:.3rem; } /* =================================================================== 07 · CTA + FOOTER =================================================================== */ .cta{ background:var(--ink); color:var(--paper); padding-block:clamp(5rem,11vw,9rem); text-align:center; } .cta h2{ font-size:clamp(2rem,5vw,4rem); font-weight:500; letter-spacing:-.01em; max-width:18ch; margin-inline:auto; } .cta .btns{ margin-top:2.4rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:.6rem; padding:1.05rem 1.9rem; border:1px solid currentColor; color:inherit; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .cta .btn:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); } .site-footer{ padding:1.6rem var(--pad); display:flex; justify-content:space-between; gap:1rem; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-2); } /* ===================== responsive ===================== */ @media (max-width:1024px){ .facts-grid{ grid-template-columns:1fr 1fr; } .fact:nth-child(3){ border-left:none; } .fact:nth-child(n+3){ border-top:1px solid var(--line); } .overview-grid{ grid-template-columns:1fr; gap:1.6rem; } .overview-label{ position:relative; top:0; } .g-three{ grid-template-columns:1fr 1fr; } .credits-grid{ grid-template-columns:1fr; gap:1.4rem; } /* Tablet: ease the aggressive desktop skew into a gentler, more legible split rather than jumping straight to single-column. */ .g-wide-narrow, .g-narrow-wide{ grid-template-columns:1fr 1fr; } } @media (max-width:900px){ .nav-links{ display:none; } .nav-toggle{ display:block; } } @media (max-width:768px){ .p-hero{ height:170vh; } .p-hero-stage{ min-height:520px; } .p-hero-tri{ clip-path:polygon(58% 0, 100% 0, 100% 32%); } .p-hero-mark{ top:6%; right:6%; font-size:clamp(1.4rem,6.5vw,2rem); } .p-hero-content{ padding-bottom:clamp(6rem,14vh,7rem); } .facts-grid{ grid-template-columns:1fr; } .fact{ border-left:none; border-top:1px solid var(--line); } .fact:first-child{ border-top:none; } .g-two, .g-three, .g-wide-narrow, .g-narrow-wide{ grid-template-columns:1fr; } .frame.cut{ clip-path:polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); } .next{ height:56vh; min-height:360px; } .cta .btns{ flex-direction:column; align-items:stretch; } .cta .btn{ justify-content:center; } .site-footer{ flex-direction:column; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .reveal{ transition:opacity .3s linear; transform:none; } .frame img, .next img{ transition:none !important; transform:none !important; } .p-hero-mouse .wheel{ animation:none; } } /* =================================================================== PORTFOLIO GRID (work/index.html) — lists every project, filterable by service tag, sorted newest first. Shares all tokens/nav/cursor with the rest of the site. =================================================================== */ .pf-hero{ padding:clamp(7rem,14vw,10rem) 0 clamp(2.5rem,5vw,4rem); } .pf-hero h1{ font-size:clamp(2.4rem,6.6vw,5.4rem); font-weight:500; letter-spacing:-.01em; max-width:16ch; line-height:1.08; } .pf-hero p{ margin-top:1.2rem; max-width:52ch; color:var(--ink-2); font-size:clamp(1.02rem,1.3vw,1.2rem); } .pf-count{ margin-top:1.6rem; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; color:var(--ink-2); } .pf-count b{ color:var(--ink); font-weight:500; } .pf-filters{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:1rem; } .pf-filters-inner{ display:flex; gap:.6rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } .pf-filters-inner::-webkit-scrollbar{ display:none; } .pf-chip{ flex:0 0 auto; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.05em; padding:.55rem 1rem; border:1px solid var(--line); background:var(--paper); color:var(--ink-2); white-space:nowrap; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .pf-chip.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .pf-chip .n{ color:var(--accent); text-shadow:0 0 0 .5px currentColor; margin-left:.35rem; } .pf-chip.is-active .n{ color:var(--accent); text-shadow:none; } .pf-grid{ padding-block:clamp(3rem,6vw,5rem); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.4rem); } .pf-card{ display:block; } .pf-card .frame{ aspect-ratio:4/3; position:relative; } .pf-card .frame img{ transition:transform .7s var(--ease), filter .5s var(--ease); } .pf-card:hover .frame img{ transform:scale(1.06); } .pf-card .pf-year{ position:absolute; top:.9rem; left:.9rem; background:var(--paper); padding:.28rem .6rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; z-index:2; } .pf-card-info{ padding-top:1rem; } .pf-card-info h3{ font-size:clamp(1.1rem,1.5vw,1.35rem); font-weight:500; } .pf-card-info p{ margin-top:.4rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; color:var(--ink-2); text-transform:uppercase; } .pf-empty{ grid-column:1/-1; text-align:center; padding-block:4rem; color:var(--ink-2); font-family:var(--font-mono); font-size:.85rem; } @media (max-width:1100px){ .pf-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .pf-grid{ grid-template-columns:1fr; gap:2.2rem; } .pf-filters{ top:0; } }