/* ============================================================= Chandler Destura — Portfolio Achromatic editorial system. Switzer (Neue Montreal alt) + Geist Mono. Sharp everywhere, pill (75px) only on buttons/badges. Zero shadows, zero chroma outside real work imagery. ============================================================= */ /* ---------- Fonts ---------- Switzer is served from Fontshare's CDN (see the in ) — Fontshare's free-font license permits their hosted embed but not self-hosting/redistributing the font files. DM Mono is OFL-licensed and fine to self-host. */ @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } /* ---------- Tokens ---------- */ :root { /* Achromatic palette (from DESIGN.md) */ --paper: #ffffff; --ink: #000000; --carbon: #181818; --ash: #6d6d6d; --pewter: #808080; --smoke: #9a9a9a; --graphite: #636363; --hairline: rgba(0, 0, 0, 0.12); --hairline-on-dark: rgba(255, 255, 255, 0.16); /* Type families — one family throughout (Switzer), mono for labels */ --font-display: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: var(--font-display); --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Weights */ --w-light: 300; --w-regular: 400; --w-medium: 500; /* Type scale (locked spec) */ --text-label: 12px; --text-slogan: 13px; --text-body: 16px; --text-body-lg: 18px; --text-subheading: 30px; --text-heading: 54px; --text-section: clamp(40px, 6vw, 94px); --text-hero: clamp(52px, 9vw, 132px); --lead-hero: 0.9; --lead-section: 0.95; --lead-heading: 1.15; --lead-subheading: 1.25; --lead-body: 1.5; --lead-body-lg: 1.55; /* Spacing scale (4px base, from DESIGN.md) */ --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-28: 28px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-68: 68px; --sp-96: 96px; --sp-120: 120px; --sp-152: 152px; /* Layout */ --page-max: 1440px; --gutter: clamp(24px, 5vw, 68px); /* Radius — sharp everywhere; pill only on buttons/badges */ --radius-sharp: 0px; --radius-pill: 75px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x lives on html only — setting it on body too would trigger the CSS overflow spec's axis-pairing rule twice, turning body into a second, independent scroll container nested inside html's. */ html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; background: var(--paper); color: var(--carbon); font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--text-body-lg); line-height: var(--lead-body-lg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ::selection { background: var(--ink); color: var(--paper); } /* ---------- Shared primitives ---------- */ .shell { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); } /* Monospace bracket label — the recurring signature element */ .label { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); margin: 0; } .label--on-dark { color: rgba(255, 255, 255, 0.68); } /* Pill button — the ONLY curved element in the system */ .btn { display: inline-flex; align-items: center; gap: var(--sp-8); border-radius: var(--radius-pill); padding: 14px 28px; font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--text-body); line-height: 1; letter-spacing: 0.01em; transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); } .btn--primary { background: var(--ink); color: var(--paper); } .btn--primary:hover { background: var(--carbon); } .btn--ghost { border: 1px solid var(--hairline); color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); } /* Liquid-glass primary CTA on dark backdrops (hero, contact) — frosted, translucent, glows outward on hover. Needs rich content behind it to read as "glass," so this stays off the flat-white services CTA. */ .btn--on-dark.btn--primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient( 120deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.26) 100% ); color: var(--paper); border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(24px) saturate(190%) brightness(1.12); -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 10px 20px -10px rgba(255, 255, 255, 0.28); transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.45s var(--ease), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); } /* Specular sweep — the "liquid" light pass across the glass */ .btn--on-dark.btn--primary::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: -70%; width: 45%; z-index: -1; background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100% ); transform: skewX(-20deg); animation: btn-sheen 5s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes btn-sheen { 0%, 55% { left: -70%; } 100% { left: 170%; } } @media (prefers-reduced-motion: reduce) { .btn--on-dark.btn--primary::after { animation: none; } } .btn--on-dark.btn--primary:hover { background: linear-gradient( 120deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0.32) 100% ); border-color: rgba(255, 255, 255, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.12), inset 0 10px 20px -10px rgba(255, 255, 255, 0.34), -20px 0 32px -8px rgba(255, 255, 255, 0.5), 20px 0 32px -8px rgba(255, 255, 255, 0.5); } .btn--on-dark.btn--ghost { border-color: var(--hairline-on-dark); color: var(--paper); } .btn--on-dark.btn--ghost:hover { border-color: var(--paper); } /* ============================================================= NAV — ghost, transparent over hero, solidifies on scroll ============================================================= */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 102; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-24) var(--gutter); transition: background 0.45s var(--ease), border-color 0.45s var(--ease); border-bottom: 1px solid transparent; } .nav.is-solid { background: var(--paper); border-bottom-color: var(--hairline); } .nav__logo { position: relative; z-index: 101; display: grid; align-items: center; height: 28px; } .nav__logo-mark, .nav__logo-word { grid-area: 1 / 1; transition: opacity 0.45s var(--ease); } .nav__logo-mark { height: 28px; width: auto; opacity: 1; } .nav__logo-word { font-family: var(--font-body); font-weight: var(--w-medium); font-size: 22px; letter-spacing: 0.01em; color: var(--paper); opacity: 0; transition: opacity 0.45s var(--ease), color 0.45s var(--ease); } .nav.is-solid .nav__logo-mark { opacity: 0; } .nav.is-solid .nav__logo-word { opacity: 1; color: var(--ink); } /* ---------- Dropdown menu (click-triggered, right side) ---------- */ .nav__toggle { position: relative; z-index: 101; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 28px; height: 28px; } .nav__toggle span { display: block; height: 1px; width: 100%; background: var(--paper); transition: background 0.45s var(--ease), transform 0.35s var(--ease-expo), opacity 0.35s var(--ease-expo); } .nav.is-solid .nav__toggle span { background: var(--ink); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* toggle sits above the dark dropdown panel once open — force paper bars */ .nav__toggle[aria-expanded="true"] span { background: var(--paper) !important; } .nav__scrim { position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease); } .nav__scrim.is-open { opacity: 1; pointer-events: auto; } .nav__dropdown { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(320px, 88vw); padding: calc(var(--sp-96) + var(--sp-16)) var(--sp-24) var(--sp-24); background: var(--ink); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-24); transform: translateX(100%); transition: transform 0.55s var(--ease-expo); } .nav__dropdown.is-open { transform: translateX(0); } .nav__dropdown .nav__link { font-family: var(--font-mono); font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--paper); } /* monopo-style roll-up hover: label slides up, duplicate rises in */ .nav__link .roll { display: inline-block; position: relative; overflow: clip; vertical-align: top; } .nav__link .roll > span { display: block; transition: transform 0.45s var(--ease-expo); } .nav__link .roll::after { content: attr(data-text) / ""; display: block; position: absolute; top: 100%; left: 0; transition: transform 0.45s var(--ease-expo); } .nav__link:hover .roll > span, .nav__link:hover .roll::after { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { .nav__link .roll > span, .nav__link .roll::after { transition: none; } .nav__dropdown, .nav__scrim, .nav__toggle span { transition: none; } } @media (max-width: 420px) { .nav__dropdown { width: 100vw; } } /* ============================================================= HERO — dark immersive frame, smoke render, white statement ============================================================= */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .hero--dark { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media canvas { width: 100%; height: 100%; display: block; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.25) 100% ); pointer-events: none; } .hero__content { position: relative; z-index: 1; padding-top: var(--sp-120); padding-bottom: clamp(var(--sp-64), 8vh, var(--sp-120)); } .hero--dark .hero__statement { color: var(--paper); } .hero--dark .hero__slogan { color: rgba(255, 255, 255, 0.75); } .hero--dark .hero__meta { color: rgba(255, 255, 255, 0.6); } .hero__set { display: flex; flex-direction: column; gap: var(--sp-12); margin-bottom: var(--sp-40); } .hero__slogan { font-family: var(--font-mono); font-size: var(--text-slogan); letter-spacing: 0.14em; text-transform: lowercase; color: var(--carbon); margin: 0; } .hero__statement { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--text-hero); line-height: var(--lead-hero); letter-spacing: -0.015em; color: var(--ink); margin: 0; max-width: 20ch; } .hero__statement em { font-style: normal; font-weight: var(--w-medium); } /* ---------- Looping hero headline: crossfades between two phrases ---------- */ .hero__phrases { position: relative; min-height: calc(var(--text-hero) * var(--lead-hero) * 2); } .has-motion .hero__phrase { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); transition: opacity 1.3s var(--ease-expo), transform 1.3s var(--ease-expo); } .has-motion .hero__phrase:not(.is-active) { pointer-events: none; } .has-motion .hero__phrase.is-exiting { opacity: 0; transform: translateY(-16px); } .has-motion .hero__phrase.is-active { opacity: 1; transform: translateY(0); } html:not(.has-motion) .hero__phrase { display: none; } html:not(.has-motion) .hero__phrase.is-active { display: block; } @media (prefers-reduced-motion: reduce) { .hero__phrase { transition: none; } } .hero__foot { margin-top: clamp(var(--sp-96), 12vh, 140px); display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap; } .hero__meta { font-size: var(--text-body); color: var(--ash); max-width: 34ch; } /* ============================================================= DARK FRAME — full-bleed immersive (personality render) ============================================================= */ .frame { position: relative; background: var(--ink); color: var(--paper); min-height: 90svh; display: flex; align-items: flex-end; overflow: hidden; } .frame__media { position: absolute; inset: 0; z-index: 0; } .frame__media img, .frame__media canvas { width: 100%; height: 100%; object-fit: cover; display: block; } /* Bottom scrim keeps overlaid type legible over the moving render */ .frame__scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 34%, rgba(0, 0, 0, 0) 62% ); pointer-events: none; } .frame__line { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--text-section); line-height: var(--lead-section); letter-spacing: -0.01em; color: var(--paper); margin: var(--sp-16) 0 0; max-width: 14ch; } .frame__line em { font-style: normal; font-weight: var(--w-medium); } /* ============================================================= STATEMENT — white editorial interlude ============================================================= */ .statement { padding-block: clamp(96px, 14vw, 200px); } .statement__line { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--text-section); line-height: var(--lead-section); letter-spacing: -0.01em; color: var(--ink); margin: var(--sp-16) 0 0; max-width: 24ch; } .statement__line em { font-style: normal; font-weight: var(--w-medium); } .statement__body { margin-top: var(--sp-24); max-width: 48ch; display: flex; flex-direction: column; gap: var(--sp-16); } .statement__body p { font-size: var(--text-body-lg); line-height: var(--lead-body-lg); color: var(--carbon); margin: 0; } /* ============================================================= RESPONSIVE — tablet & phone ============================================================= */ @media (max-width: 1024px) { .hero__content { padding-top: var(--sp-96); } } @media (max-width: 720px) { .hero__content { padding-top: var(--sp-96); padding-bottom: var(--sp-64); } .hero__foot { flex-direction: column; align-items: flex-start; gap: var(--sp-24); } .hero__meta { font-size: 15px; max-width: 30ch; } body { font-size: var(--text-body); } } /* ============================================================= MOTION LAYER — preloader, reveals, cursor All states are JS-gated: without JS (or with reduced motion) the page is fully visible and static. house curve = expo out. ============================================================= */ :root { --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- Preloader ---------- */ .loader { position: fixed; inset: 0; z-index: 200; background: var(--ink); display: flex; align-items: center; justify-content: center; transform: translateY(0); } .loader__word { font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(28px, 4vw, 45px); line-height: 1.1; letter-spacing: -0.01em; color: var(--paper); margin: 0; } .loader__word.is-swap { animation: word-in 0.32s var(--ease-expo); } @keyframes word-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .loader__brand { position: absolute; left: var(--gutter); bottom: var(--sp-40); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .loader.is-done { transition: transform 0.9s var(--ease-expo); transform: translateY(-100%); } .loader.is-gone { display: none; } /* No JS or reduced motion: never show the loader */ html:not(.has-motion) .loader { display: none; } /* ---------- Hero entrance (JS-gated via .has-motion) ---------- */ .has-motion.is-loading .hero__phrases { opacity: 0; transform: translateY(20px); } .has-motion .hero__phrases { transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo); transition-delay: 220ms; } .has-motion.is-loading .hero__set, .has-motion.is-loading .hero__foot { opacity: 0; transform: translateY(20px); } .has-motion .hero__set, .has-motion .hero__foot { transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo); } .has-motion .hero__set { transition-delay: 80ms; } .has-motion .hero__foot { transition-delay: 480ms; } /* ---------- Scroll reveals (earned moments only) ---------- */ .has-motion [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo); transition-delay: calc(var(--i, 0) * 100ms); } .has-motion [data-reveal].is-in { opacity: 1; transform: translateY(0); } /* ---------- Custom cursor ---------- */ .cursor { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; width: 64px; height: 64px; mix-blend-mode: difference; transform: translate(-100px, -100px); display: none; align-items: center; justify-content: center; } /* the visible disc — scales up instead of animating width/height */ .cursor::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--paper); transform: scale(0.1875); /* 12px resting dot */ transition: transform 0.35s var(--ease-expo); } .has-cursor .cursor { display: flex; } .cursor__label { position: relative; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); opacity: 0; white-space: nowrap; transition: opacity 0.25s var(--ease-expo); } .cursor.is-active::before { transform: scale(1); } .cursor.is-active .cursor__label { opacity: 1; } /* ---------- Reduced motion: everything instant & static ---------- */ @media (prefers-reduced-motion: reduce) { .loader { display: none !important; } .cursor { display: none !important; } .has-motion [data-reveal], .has-motion.is-loading .hero__phrases, .has-motion.is-loading .hero__set, .has-motion.is-loading .hero__foot { opacity: 1 !important; transform: none !important; transition: none !important; } } .frame__inner { position: relative; z-index: 1; width: 100%; padding-block: var(--sp-64); } .frame__scroll { position: absolute; right: var(--gutter); bottom: var(--sp-40); z-index: 1; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } /* ---------- Spinning scroll badge: rotating ring text, static mark ---------- */ .hero__badge { position: absolute; left: 50%; bottom: var(--sp-40); z-index: 1; width: 100px; height: 100px; transform: translateX(-50%); } .hero__badge-ring { width: 100%; height: 100%; animation: badge-spin 16s linear infinite; } .hero__badge-text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; fill: rgba(255, 255, 255, 0.75); text-transform: uppercase; } .hero__badge-mark { position: absolute; top: 50%; left: 50%; height: 34px; width: auto; transform: translate(-50%, -50%); } @keyframes badge-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .hero__badge-ring { animation: none; } } @media (max-width: 720px) { .hero__badge { width: 82px; height: 82px; bottom: var(--sp-24); } .hero__badge-mark { height: 26px; } } /* ============================================================= WORK — three full-bleed dark case studies ============================================================= */ .work { background: var(--ink); } .work__intro { padding-block: var(--sp-64) var(--sp-24); } .case { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; border-top: 1px solid var(--hairline-on-dark); } .case__media { position: absolute; inset: 0; z-index: 0; background: var(--carbon); } .case__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .case__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.35) 100%); } .case__inner { position: relative; z-index: 1; padding-block: var(--sp-64) var(--sp-96); color: var(--paper); max-width: 780px; } .case__title { font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.01em; margin: var(--sp-12) 0 var(--sp-28); } .case__body { display: flex; flex-direction: column; gap: var(--sp-24); max-width: 62ch; } .case__block { display: flex; flex-direction: column; gap: 6px; } .case__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .case__block p { font-size: var(--text-body); line-height: var(--lead-body-lg); color: rgba(255, 255, 255, 0.88); margin: 0; } .case__block p em { font-style: normal; font-weight: var(--w-medium); color: var(--paper); } .case__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-28) 0 0; padding: 0; } .case__tags li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.75); border: 1px solid var(--hairline-on-dark); border-radius: var(--radius-pill); padding: 6px 14px; } .case__live { margin: var(--sp-16) 0 0; } .case__live a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.75); transition: color 0.3s var(--ease); } .case__live a:hover { color: var(--paper); } /* Whole card is one click target into the case page */ .case__link { position: absolute; inset: 0; z-index: 2; } .case__view { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin: var(--sp-24) 0 0; } /* ---- Mockup placeholders (KNGDM / Latreia — no real assets yet) ---- */ .mockup { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 6vw, 96px); } .mockup__body { display: flex; flex-direction: column; gap: 14px; } .mockup__bar { height: 10px; background: rgba(255, 255, 255, 0.14); } .mockup__row { display: flex; gap: 10px; } .mockup__chip { height: 26px; width: 72px; border: 1px solid var(--hairline-on-dark); border-radius: var(--radius-pill); } .mockup__card { height: 56px; border: 1px solid var(--hairline-on-dark); } .mockup--browser { border: 1px solid var(--hairline-on-dark); margin: clamp(40px, 8vw, 120px); flex-direction: column; align-items: stretch; justify-content: flex-start; } .mockup--browser .mockup__chrome { display: flex; gap: 6px; padding: var(--sp-16); border-bottom: 1px solid var(--hairline-on-dark); } .mockup--browser .mockup__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.18); } .mockup--browser .mockup__body { padding: var(--sp-28); } .mockup--phone { width: 100%; max-width: 300px; margin-inline: auto; border: 1px solid var(--hairline-on-dark); flex-direction: column; align-items: stretch; } .mockup--phone .mockup__notch { width: 60px; height: 6px; background: rgba(255, 255, 255, 0.14); border-radius: var(--radius-pill); margin: var(--sp-16) auto; } .mockup--phone .mockup__body { padding: 0 var(--sp-24) var(--sp-24); } .mockup--phone img { display: block; width: 100%; height: auto; } @media (max-width: 720px) { .case { min-height: auto; flex-direction: column; align-items: stretch; } .case__inner { padding-block: var(--sp-48) var(--sp-64); } .case__title { font-size: clamp(32px, 9vw, 44px); } .case__media { position: relative; width: 100%; min-height: 340px; flex-shrink: 0; } .case__media img { position: absolute; inset: 0; } .mockup { position: absolute; inset: 0; padding: var(--sp-24); } } /* ============================================================= FILM GRAIN — site-wide, above content, below cursor ============================================================= */ .grain { position: fixed; inset: -100%; z-index: 250; pointer-events: none; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain-jitter 0.7s steps(6) infinite; } @keyframes grain-jitter { 0% { transform: translate(0, 0); } 20% { transform: translate(-2%, 1%); } 40% { transform: translate(1%, -2%); } 60% { transform: translate(-1%, 2%); } 80% { transform: translate(2%, -1%); } 100% { transform: translate(0, 0); } } @media (prefers-reduced-motion: reduce) { .grain { animation: none; } } /* ============================================================= PARALLAX MEDIA — scaled up so translate never exposes edges ============================================================= */ .case__media img[data-parallax], .case__media .mockup[data-parallax] { will-change: transform; transform: scale(1.12); } .case__media img[data-parallax] { transform-origin: center; } /* ============================================================= MARQUEE — one breath between work and about ============================================================= */ .marquee { overflow: clip; border-block: 1px solid var(--hairline); padding-block: var(--sp-28); background: var(--paper); } .marquee__track { display: flex; width: max-content; animation: marquee-scroll 38s linear infinite; } .marquee__track span { font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(36px, 6vw, 92px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ============================================================= ABOUT — plainspoken, word-by-word scroll reveal ============================================================= */ .about { padding-block: clamp(120px, 16vw, 240px); } .about__statement { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--text-section); line-height: var(--lead-section); letter-spacing: -0.01em; color: var(--ink); margin: var(--sp-16) 0 var(--sp-64); max-width: 18ch; } .has-motion .about__statement .w { color: var(--smoke); transition: color 0.45s var(--ease); } .has-motion .about__statement .w.lit { color: var(--ink); } .about__body { max-width: 58ch; display: flex; flex-direction: column; gap: var(--sp-24); } .about__body p { font-size: var(--text-body-lg); line-height: var(--lead-body-lg); color: var(--carbon); margin: 0; } .about__body em { font-style: normal; font-weight: var(--w-medium); } /* ============================================================= SERVICES — capability rows, hairline-divided ============================================================= */ .services { padding-block: clamp(96px, 12vw, 200px); } .svc-list { list-style: none; margin: var(--sp-40) 0 0; padding: 0; } .svc { display: grid; grid-template-columns: minmax(64px, max-content) 1fr; grid-template-areas: "index title" "index line"; align-items: baseline; gap: 4px var(--sp-24); padding-block: var(--sp-40); border-top: 1px solid var(--hairline); } .svc:last-child { border-bottom: 1px solid var(--hairline); } .svc__index { grid-area: index; font-family: var(--font-mono); font-size: var(--text-label); color: var(--ash); white-space: nowrap; } .svc__title { grid-area: title; font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(28px, 3.6vw, 54px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0; transition: transform 0.5s var(--ease-expo); } .svc:hover .svc__title { transform: translateX(16px); } .svc__line { grid-area: line; font-size: var(--text-body); color: var(--ash); margin: 0; max-width: 48ch; } .services__cta { margin-top: var(--sp-64); display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap; } .services__anchor { font-family: var(--font-mono); font-size: var(--text-slogan); letter-spacing: 0.06em; color: var(--ash); margin: 0; } /* ============================================================= CONTACT — full-bleed ink close ============================================================= */ .contact { background: var(--ink); color: var(--paper); min-height: 90svh; display: flex; align-items: flex-end; } .contact__inner { width: 100%; padding-block: clamp(120px, 16vw, 220px) var(--sp-40); } .contact__statement { display: block; font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(64px, 13vw, 210px); line-height: 0.95; letter-spacing: -0.015em; color: var(--paper); margin: var(--sp-16) 0 var(--sp-24); } .contact__statement em { font-style: normal; font-weight: var(--w-medium); } .contact__body { font-size: var(--text-body-lg); line-height: var(--lead-body-lg); color: rgba(255, 255, 255, 0.72); margin: 0 0 var(--sp-48); max-width: 46ch; } .contact__row { display: flex; align-items: center; gap: var(--sp-28); flex-wrap: wrap; } .contact__email { font-family: var(--font-mono); font-size: var(--text-body); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.75); transition: color 0.3s var(--ease); } .contact__email:hover { color: var(--paper); } .footer { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-16); flex-wrap: wrap; margin-top: clamp(96px, 12vw, 180px); padding-top: var(--sp-24); border-top: 1px solid var(--hairline-on-dark); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } /* ============================================================= RESPONSIVE — new sections ============================================================= */ @media (max-width: 720px) { .svc { grid-template-columns: 40px 1fr; padding-block: var(--sp-28); } .about__statement { max-width: 12ch; } .contact { min-height: 72svh; } .footer { flex-direction: column; gap: var(--sp-8); } } /* ============================================================= WHY — one quiet dark statement before the work ============================================================= */ .why { background: var(--ink); color: var(--paper); border-top: 1px solid var(--hairline-on-dark); } .why__inner { padding-block: clamp(140px, 18vw, 280px); } .why__statement { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--text-section); line-height: var(--lead-section); letter-spacing: -0.01em; color: var(--paper); margin: var(--sp-16) 0 var(--sp-48); max-width: 16ch; } .why__statement em { font-style: normal; font-weight: var(--w-medium); } .why__body { font-size: var(--text-body-lg); line-height: var(--lead-body-lg); color: rgba(255, 255, 255, 0.72); margin: 0; max-width: 46ch; } /* ============================================================= INTERACTION LAYER — magnetic pills, tilt, editorial reveals ============================================================= */ /* Magnetic buttons: JS feeds --mx/--my; the transition is the spring */ .btn { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; } .btn:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(0.97); } /* Tilt space for case media */ .case__media { perspective: 1100px; } /* Editorial wipe: media reveals bottom-up when its case enters */ .has-motion .case__media { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s cubic-bezier(0.77, 0, 0.175, 1); } .has-motion .case.is-in .case__media { clip-path: inset(0 0 0% 0); } /* Marquee container carries the scroll-velocity skew */ .marquee { will-change: transform; } @media (prefers-reduced-motion: reduce) { .has-motion .case__media { clip-path: none; transition: none; } } /* ============================================================= CASE INTERACTIONS — ghost numerals, drawn hairlines, live tags ============================================================= */ .case__num { position: absolute; right: var(--gutter); top: 12%; z-index: 0; font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(120px, 22vw, 340px); line-height: 1; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.05); pointer-events: none; user-select: none; } /* hairline draws in above each P/I/R block as it reveals */ .case__block { position: relative; padding-top: var(--sp-12); } .case__block::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--hairline-on-dark); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; } .has-motion .case__body.is-in .case__block::before, html:not(.has-motion) .case__block::before { transform: scaleX(1); } /* tags invert on hover — small proof the surface is alive */ .case__tags li { transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } @media (hover: hover) and (pointer: fine) { .case__tags li:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } } @media (max-width: 720px) { .case__num { font-size: 110px; top: 8%; opacity: 0.8; } } /* ============================================================= CASE PAGES — kngdm.html / latreia.html Black minimal stage: spinning badge in the nav, app name centered; scrolling scrubs the name into a top-left heading and the study copy arrives beneath it. ============================================================= */ .cs-page { background: var(--ink); color: var(--paper); } /* Solid nav goes dark glass here — the page never turns white */ .cs-page .nav.is-solid { background: rgba(6, 6, 6, 0.82); border-bottom-color: var(--hairline-on-dark); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .cs-page .nav.is-solid .nav__toggle span { background: var(--paper); } /* Spinning Destura badge stands in for the nav logo */ .cs-navbadge { position: relative; z-index: 101; display: block; width: 64px; height: 64px; } .cs-navbadge__ring { width: 100%; height: 100%; animation: badge-spin 16s linear infinite; } .cs-navbadge__mark { position: absolute; top: 50%; left: 50%; height: 20px; width: auto; transform: translate(-50%, -50%); } @media (prefers-reduced-motion: reduce) { .cs-navbadge__ring { animation: none; } } /* ---- Stage: the centered name ---- */ .cs-hero { position: relative; height: 100svh; } .cs-title { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; margin: 0; } .cs-title span { pointer-events: auto; display: inline-block; font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(56px, 15vw, 190px); line-height: 1; letter-spacing: -0.02em; color: var(--paper); will-change: transform; transform-origin: center center; } @media (prefers-reduced-motion: reduce) { .cs-title { position: absolute; } } /* ---- Peek: hover the name → app walkthrough appears behind it ---- */ .cs-media { position: fixed; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.965); transition: opacity 0.6s var(--ease-expo), transform 0.6s var(--ease-expo); pointer-events: none; } .cs-media img, .cs-media video { height: min(72svh, 640px); width: auto; border: 1px solid var(--hairline-on-dark); display: block; } .cs-hero.is-peek .cs-media { opacity: 1; transform: scale(1); } .cs-title span { transition: opacity 0.5s var(--ease); } .cs-hero.is-peek .cs-title span { opacity: 0; } /* ---- Back button: appears with the peek, always on touch ---- */ .cs-back { position: fixed; left: 50%; bottom: var(--sp-40); z-index: 6; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); } .cs-hero.is-peek .cs-back { opacity: 1; pointer-events: auto; } @media (hover: none) { .cs-hero:not(.is-scrolled) .cs-back { opacity: 1; pointer-events: auto; } } .cs-hero.is-scrolled .cs-back { opacity: 0; pointer-events: none; } /* ---- The study: copy below the docked name ---- */ .cs-body { position: relative; z-index: 1; padding-top: clamp(190px, 24svh, 260px); padding-bottom: var(--sp-96); } .cs-body .case__body { margin-top: var(--sp-24); }