/* ========================================================= NOONSHIFT — Creative studio Design system + interactions Theme: off-black / off-white, geometric, editorial ========================================================= */ /* ---------- Fonts ---------- */ /* Space Grotesk (display, geometric) + Inter (UI/body) loaded in */ /* ---------- Tokens ---------- */ :root{ /* Off-black / off-white palette (subtle, fresh) */ --ink: #17181a; /* off-black, near logo #161616 */ --ink-2: #2a2c2f; --ink-soft: #55585d; --ink-faint: #8b8e93; --paper: #f4f3ee; /* warm off-white */ --paper-2: #eceae2; /* slightly deeper panel */ --paper-3: #e4e1d7; --line: rgba(23,24,26,0.12); --line-strong:rgba(23,24,26,0.24); --white: #fbfaf6; /* Inverted (dark sections) */ --d-bg: #141517; --d-bg-2: #1c1d20; --d-text: #edece6; --d-soft: #a6a8ab; --d-line: rgba(237,236,230,0.14); --shine: rgba(255,255,255,0.85); /* Elevation */ --shadow-sm: 0 2px 10px -5px rgba(23,24,26,0.12); --shadow: 0 20px 44px -26px rgba(23,24,26,0.26); --shadow-lg: 0 44px 90px -46px rgba(23,24,26,0.34); /* Type */ --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); --dur: 0.6s; /* Layout */ --pad: clamp(1.25rem, 5vw, 5rem); --maxw: 1400px; --radius: 14px; --radius-lg: 22px; --header-h: 76px; } /* ---------- Night mode ---------- */ :root[data-theme="dark"]{ --ink: #ecebe5; /* now the light foreground */ --ink-2: #d2d1cb; --ink-soft: #9b9ea3; --ink-faint: #6f7277; --paper: #131416; /* page background, dark */ --paper-2: #1b1c1f; /* raised panel */ --paper-3: #232427; --line: rgba(236,235,229,0.14); --line-strong:rgba(236,235,229,0.26); --white: #1b1c1f; /* cards that were white */ /* dark sections lift slightly above the page ground */ --d-bg: #1f2023; --d-bg-2: #26272b; --d-text: #ecebe5; --d-soft: #a6a8ab; --d-line: rgba(236,235,229,0.16); --shine: rgba(255,255,255,0.10); --shadow-sm: 0 2px 10px -5px rgba(0,0,0,0.6); --shadow: 0 20px 44px -26px rgba(0,0,0,0.7); --shadow-lg: 0 44px 90px -46px rgba(0,0,0,0.8); } :root[data-theme="dark"] body{ color-scheme:dark; } /* the mark is near-black; flip it so it reads on dark */ :root[data-theme="dark"] .brand__logo img, :root[data-theme="dark"] .footer__logo img, :root[data-theme="dark"] .preloader__logo{ filter:invert(1) brightness(1.08); } :root[data-theme="dark"] .model-card:hover{ box-shadow:0 40px 80px -28px rgba(0,0,0,0.75), 0 12px 28px -18px rgba(0,0,0,0.6); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 20px); } body{ margin:0; font-family:var(--font-body); background:var(--paper); color:var(--ink); font-size:clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height:1.6; letter-spacing:0.003em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,h4{ margin:0; font-weight:500; } p{ margin:0; } ::selection{ background:var(--ink); color:var(--paper); } /* ---------- Typography ---------- */ .display{ font-family:var(--font-display); font-weight:500; line-height:0.98; letter-spacing:-0.02em; } h1.display{ font-size:clamp(2.5rem, 5.4vw, 5rem); line-height:1.02; } h2.display{ font-size:clamp(1.8rem, 3.2vw, 2.9rem); } h3.display{ font-size:clamp(1.3rem, 2vw, 1.7rem); } /* centered pitch block (serif title + sans subtext) */ .pitch{ max-width:1100px; margin-inline:auto; text-align:center; } .pitch__title{ font-family:"Instrument Serif", Georgia, serif; font-weight:400; font-size:clamp(2.4rem,5.8vw,4.6rem); line-height:1.06; letter-spacing:0; } .pitch__sub{ margin-top:1rem; color:var(--ink-soft); font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.62; max-width:60ch; margin-inline:auto; } /* serif variant of the display heading */ .display--serif{ font-family:"Instrument Serif", Georgia, serif; font-weight:400; letter-spacing:0; line-height:1.04; } .eyebrow{ font-family:var(--font-display); font-size:0.74rem; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:0.6rem; } .eyebrow::before{ content:none; } .lead{ font-size:clamp(1rem, 1.05vw, 1.12rem); color:var(--ink-soft); line-height:1.55; max-width:44ch; } .mono{ font-family:var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:0.02em; } /* ---------- Layout helpers ---------- */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } .section{ padding-block:clamp(4.5rem, 11vw, 10rem); position:relative; } .section--tight{ padding-block:clamp(3rem, 7vw, 6rem); } .grid{ display:grid; gap:clamp(1rem,2.4vw,2rem); } .stack{ display:flex; flex-direction:column; } .section-head{ display:grid; grid-template-columns: 1fr; gap:1.25rem; margin-bottom:clamp(2.5rem,5vw,4.5rem); } @media (min-width:900px){ .section-head{ grid-template-columns: 0.9fr 1.1fr; align-items:end; gap:3rem; } } /* ---------- Noise + cursor ---------- */ .grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.04; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .cursor{ position:fixed; top:0; left:0; z-index:9999; width:34px; height:34px; border:1px solid var(--ink); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease); mix-blend-mode:difference; opacity:0; } .cursor.is-hover{ width:64px; height:64px; background:var(--paper); border-color:transparent; } .cursor.is-active{ width:22px; height:22px; } @media (hover:none), (pointer:coarse){ .cursor{ display:none; } } /* ---------- Buttons (black w/ edge shine) ---------- */ .btn{ --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-ring:rgba(23,24,26,0.4); --btn-halo:rgba(23,24,26,0.08); --btn-glow:rgba(23,24,26,0.22); position:relative; display:inline-flex; align-items:center; gap:0.6rem; padding:0.85rem 1.5rem; border:1px solid var(--ink); border-radius:100px; background:var(--btn-bg); color:var(--btn-fg); font-family:var(--font-display); font-size:0.88rem; font-weight:500; letter-spacing:0.005em; transition:box-shadow .45s var(--ease), border-color .45s var(--ease), background .4s var(--ease), color .4s var(--ease); } .btn .btn__label{ position:relative; z-index:2; } .btn .btn__dot{ display:none; } /* subtle glow on the primary (filled) button so it reads as the selected action */ .btn:not(.btn--ghost){ box-shadow:0 0 26px -6px rgba(236,235,229,0.28); } :root:not([data-theme="dark"]) .btn:not(.btn--ghost){ box-shadow:0 0 26px -6px rgba(23,24,26,0.22); } /* glowing outline ring on hover — no button movement */ .btn::before{ content:""; position:absolute; inset:-4px; border-radius:inherit; border:1px solid var(--btn-ring); opacity:0; transform:scale(0.965); transition:opacity .4s var(--ease), transform .4s var(--ease); pointer-events:none; } .btn:hover::before, .btn:focus-visible::before{ opacity:1; transform:scale(1); } .btn:hover, .btn:focus-visible{ box-shadow:0 0 0 3px var(--btn-halo), 0 0 22px -2px var(--btn-glow); outline:none; } .btn:active{ transform:translateY(1px); } /* ghost / outline variant */ .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); } .btn--ghost:hover{ background:var(--ink); color:var(--paper); } /* filled beige-brown variant (white text) */ .btn--clay{ --btn-bg:#83674e; --btn-fg:#ffffff; border-color:#83674e; --btn-ring:rgba(131,103,78,0.5); --btn-halo:rgba(131,103,78,0.20); --btn-glow:rgba(131,103,78,0.42); } .btn.btn--clay{ box-shadow:0 0 24px -6px rgba(131,103,78,0.5); } .btn--clay:hover{ --btn-bg:#6f5641; border-color:#6f5641; } /* on dark bg */ .btn--light{ --btn-bg:var(--paper); --btn-fg:var(--ink); border-color:var(--paper); --btn-ring:rgba(251,250,246,0.55); --btn-halo:rgba(251,250,246,0.14); --btn-glow:rgba(251,250,246,0.28); } /* night-mode toggle */ .header__actions{ display:flex; align-items:center; gap:0.9rem; } .header__actions .theme-toggle{ margin-left:0; } .theme-toggle{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-left:0.9rem; border:1px solid var(--line-strong); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); } .theme-toggle:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .theme-toggle:active{ transform:scale(0.92); } .theme-toggle svg{ width:19px; height:19px; } .theme-toggle__moon{ display:none; } :root[data-theme="dark"] .theme-toggle__sun{ display:none; } :root[data-theme="dark"] .theme-toggle__moon{ display:block; } /* smooth color crossfade when switching themes */ body, .header, .model-card, .cta-band, .footer, .btn, .contact-card, .note, .principle, .filter, .chip, .faq__item, .slider__btn{ transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); } /* text link with animated underline */ .link{ position:relative; font-family:var(--font-display); font-weight:500; padding-bottom:2px; } .link::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); } .link:hover::after{ transform:scaleX(1); transform-origin:left; } /* ---------- Header ---------- */ .header{ position:fixed; top:0; left:0; right:0; z-index:100; height:var(--header-h); display:flex; align-items:center; transition:transform .5s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease); border-bottom:1px solid transparent; } .header__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .header.scrolled{ background:color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom-color:var(--line); } .header.hide{ transform:translateY(-104%); } .brand{ display:flex; align-items:center; gap:0.9rem; } .brand__logo{ height:22px; width:auto; } .brand__logo img{ height:100%; width:auto; } /* interactive header meta: live clock */ /* header "I want ___" dropdown */ .want{ position:relative; } .want__toggle{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.42rem 0.95rem; border:1px solid var(--line-strong); border-radius:100px; background:transparent; color:var(--ink); font-family:var(--font-display); font-size:0.82rem; font-weight:500; letter-spacing:0.01em; transition:border-color .3s var(--ease); } .want__toggle:hover, .want.open .want__toggle{ border-color:var(--ink); } .want__blank{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .want__chev{ width:13px; height:13px; transition:transform .35s var(--ease); } .want.open .want__chev{ transform:rotate(180deg); } .want__menu{ position:absolute; top:calc(100% + 10px); left:50%; min-width:220px; padding:0.5rem; background:var(--white); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; z-index:120; } .want.open .want__menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .want__opt{ padding:0.72rem 0.95rem; border-radius:10px; font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--ink); transition:background .2s var(--ease), padding-left .25s var(--ease); } .want__opt:hover{ background:var(--paper-2); padding-left:1.2rem; } .nav{ display:flex; align-items:center; gap:2rem; } .nav__links{ display:flex; align-items:center; gap:1.9rem; } .nav__link{ position:relative; display:inline-block; /* required so overflow:hidden clips the hover-flip */ font-family:var(--font-display); font-size:0.92rem; font-weight:500; color:var(--ink); padding:0.2rem 0; overflow:hidden; } .nav__link span{ display:block; position:relative; transition:transform .4s var(--ease); } .nav__link span::after{ content:attr(data-text); position:absolute; left:0; top:100%; } .nav__link:hover span{ transform:translateY(-100%); } .nav__link.active{ color:var(--ink); font-weight:700; } .nav__link.active::before{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--ink); } /* burger */ .burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:transparent; position:relative; } .burger span{ position:absolute; left:12px; right:12px; height:1.5px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s var(--ease); } .burger span:nth-child(1){ top:17px; } .burger span:nth-child(2){ bottom:17px; } body.menu-open .burger span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); } body.menu-open .burger span:nth-child(2){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); } /* mobile menu overlay */ .menu{ position:fixed; inset:0; z-index:99; background:var(--d-bg); color:var(--d-text); padding:calc(var(--header-h) + 2rem) var(--pad) 3rem; display:flex; flex-direction:column; justify-content:space-between; clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); pointer-events:none; } body.menu-open .menu{ clip-path:inset(0 0 0 0); pointer-events:auto; } .menu__links{ display:flex; flex-direction:column; gap:0.4rem; margin-top:auto; } .menu__links a{ font-family:var(--font-display); font-size:clamp(2.4rem,11vw,4.5rem); font-weight:500; letter-spacing:-0.02em; line-height:1.05; color:var(--d-text); opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s; } body.menu-open .menu__links a{ opacity:1; transform:none; } body.menu-open .menu__links a:nth-child(1){ transition-delay:.15s; } body.menu-open .menu__links a:nth-child(2){ transition-delay:.22s; } body.menu-open .menu__links a:nth-child(3){ transition-delay:.29s; } body.menu-open .menu__links a:nth-child(4){ transition-delay:.36s; } .menu__links a:hover{ color:var(--d-soft); } .menu__foot{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:0.85rem; color:var(--d-soft); border-top:1px solid var(--d-line); padding-top:1.5rem; } /* ---------- Hero ---------- */ .hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:calc(var(--header-h) + 3rem); padding-bottom:clamp(2rem,5vw,4rem); position:relative; } .hero-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } .hero__top{ margin-top:auto; position:relative; z-index:2; } .hero .scroll-hint{ z-index:2; } /* studio hero: wide looping video banner above the heading */ .hero--studio{ min-height:auto; justify-content:flex-start; padding-top:calc(var(--header-h) + clamp(1.5rem,4vw,3rem)); padding-bottom:clamp(3rem,7vw,6rem); } .hero--studio .hero__top{ margin-top:clamp(2rem,4vw,3.5rem); } .hero--studio .scroll-hint{ display:none; } .hero__media{ position:relative; width:100%; aspect-ratio:39/10; /* ~60% of the previous height */ border-radius:var(--radius-lg); overflow:hidden; background:var(--d-bg); box-shadow:var(--shadow-lg); } .hero__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } @media (max-width:640px){ .hero__media{ aspect-ratio:16/10; } } .hero h1{ margin:1.4rem 0 0; } .hero__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-top:2.4rem; } .hero__cta{ display:flex; gap:0.9rem; flex-wrap:wrap; } .hero__aside{ max-width:34ch; } /* animated word reveal */ /* padding extends the clip region so descenders (g, p, y) aren't cut; the matching negative margin keeps line spacing unchanged */ .reveal-word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.16em; margin-bottom:-0.16em; } .reveal-word > span{ display:inline-block; transform:translateY(110%); } @keyframes riseIn{ from{ transform:translateY(110%);} to{ transform:translateY(0);} } .hero.in .reveal-word > span{ animation:riseIn .9s var(--ease) forwards; } .hero .reveal-word:nth-child(2) > span{ animation-delay:.08s; } .hero .reveal-word:nth-child(3) > span{ animation-delay:.16s; } .hero .reveal-word:nth-child(4) > span{ animation-delay:.24s; } .hero .reveal-word:nth-child(5) > span{ animation-delay:.32s; } .hero .reveal-word:nth-child(6) > span{ animation-delay:.40s; } .scroll-hint{ position:absolute; right:var(--pad); bottom:clamp(2rem,5vw,4rem); display:flex; align-items:center; gap:0.6rem; font-family:var(--font-display); font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft); writing-mode:vertical-rl; } .scroll-hint .bar{ width:1px; height:52px; background:var(--line-strong); position:relative; overflow:hidden; } .scroll-hint .bar::after{ content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--ink); animation:scrolldown 2.2s var(--ease) infinite; } @keyframes scrolldown{ 0%{ top:-40%; } 60%,100%{ top:100%; } } /* ---------- Reel (fullscreen video) ---------- */ .reel{ position:relative; height:min(88svh, 760px); border-radius:var(--radius-lg); overflow:hidden; background:var(--d-bg); isolation:isolate; box-shadow:var(--shadow-lg); } .reel video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:grayscale(0.15) contrast(1.02) brightness(0.82); } .reel__ph{ /* fallback gradient when no video */ position:absolute; inset:0; z-index:0; background: radial-gradient(120% 80% at 20% 10%, #2a2c30 0%, transparent 55%), radial-gradient(120% 100% at 90% 100%, #26282c 0%, transparent 50%), linear-gradient(180deg,#1a1b1e,#0f1012); } .reel__grid{ position:absolute; inset:0; z-index:1; pointer-events:none; background-image:linear-gradient(var(--d-line) 1px, transparent 1px), linear-gradient(90deg,var(--d-line) 1px, transparent 1px); background-size:64px 64px; opacity:0.5; mask-image:radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 80%); } .reel__overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(1.5rem,4vw,3rem); color:var(--d-text); } .reel__title{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.6rem,4vw,3rem); letter-spacing:-0.015em; line-height:1.02; margin-top:auto; } .reel__meta{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-family:var(--font-display); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--d-soft); } .reel__play{ align-self:flex-end; width:74px; height:74px; border-radius:50%; border:1px solid var(--d-line); background:rgba(20,21,23,0.35); backdrop-filter:blur(6px); color:var(--d-text); display:grid; place-items:center; transition:transform .5s var(--ease), background .4s; } .reel__play:hover{ transform:scale(1.08); background:rgba(237,236,230,0.14); } .reel__play svg{ width:20px; height:20px; } .reel__play .icon-pause{ display:none; } .reel.is-playing .reel__play .icon-play{ display:none; } .reel.is-playing .reel__play .icon-pause{ display:block; } /* ---------- Image wall / flipping collage ---------- */ .collage__label{ display:block; font-size:0.82rem; font-weight:500; letter-spacing:0.02em; color:var(--ink-soft); margin-bottom:clamp(0.9rem, 1.6vw, 1.4rem); } .collage{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(4px,0.6vw,8px); /* full width, with side margins a touch tighter than the site container */ width:100vw; margin-left:calc(50% - 50vw); padding-inline:clamp(0.9rem, 2.6vw, 2.5rem); } @media (min-width:760px){ .collage{ grid-template-columns:repeat(5,1fr); } } .tile{ position:relative; aspect-ratio:1080/1350; /* 4:5 */ perspective:900px; border-radius:3px; overflow:hidden; background:var(--paper-2); } .tile__inner{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .75s var(--ease); } .tile.flipped .tile__inner{ transform:rotateY(180deg); } .tile__face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; } .tile__face--back{ transform:rotateY(180deg); } .tile__face img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); } .tile:hover .tile__face img{ transform:scale(1.04); } /* ---------- Statement ---------- */ .statement{ padding-block:clamp(5rem,12vw,11rem); } .statement p{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,2.6vw,2.3rem); line-height:1.2; letter-spacing:-0.01em; max-width:22ch; } /* high-contrast Didone serif for the featured statement line */ .statement .statement-script{ font-family:"Instrument Serif", Georgia, serif; font-weight:400; font-size:clamp(2.1rem, 4.3vw, 4rem); line-height:1.14; letter-spacing:0; } /* flow as one wrapping paragraph; keep it reliably visible (no masked reveal) */ .statement-script .rl{ display:inline; overflow:visible; } .statement-script .rl > span{ display:inline; transform:none !important; animation:none !important; } @media (max-width:560px){ .statement .statement-script{ font-size:clamp(2rem, 8vw, 2.8rem); } } /* supporting line under the serif statement: same size/style as the title, in grey */ .statement .statement-tag{ font-family:"Instrument Serif", Georgia, serif; font-weight:400; font-style:normal; font-size:clamp(2.1rem, 4.3vw, 4rem); line-height:1.14; letter-spacing:0; color:#3f4247; max-width:none; margin-top:0.2rem; } :root[data-theme="dark"] .statement .statement-tag{ color:#7d8087; } .statement__grid .lead{ font-weight:300; } @media (max-width:560px){ .statement .statement-tag{ font-size:clamp(2rem, 8vw, 2.8rem); } } .statement .fade-line{ display:block; } .statement em{ font-style:normal; color:var(--ink-faint); } /* statement layout + rotating studio badge */ .statement__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4rem); align-items:center; } @media (min-width:920px){ .statement__grid{ grid-template-columns:1.3fr 0.7fr; } } .statement__badge{ display:flex; justify-content:center; } .badge{ position:relative; width:clamp(210px,23vw,290px); aspect-ratio:1; display:grid; place-items:center; } .badge__ring{ position:absolute; inset:0; width:100%; height:100%; animation:spin 26s linear infinite; } .badge__ring text{ font-family:var(--font-display); font-size:11px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; fill:var(--ink-soft); } .badge__mark{ width:30%; height:30%; color:var(--ink); } @keyframes spin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ .badge__ring{ animation:none; } } /* by-the-numbers dark band */ .stats-lead{ font-family:"Instrument Serif", Georgia, serif; font-weight:400; letter-spacing:0; font-size:clamp(1.9rem, 3.6vw, 3.2rem); line-height:1.15; text-align:center; color:var(--ink); margin:0 auto clamp(1.6rem,3.2vw,2.6rem); max-width:20ch; } .stats{ position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(180deg, var(--d-bg-2) 0%, var(--d-bg) 60%, #101113 100%); color:var(--d-text); border-radius:var(--radius-lg); display:grid; grid-template-columns:1fr; box-shadow:var(--shadow-lg); } @media (min-width:640px){ .stats{ grid-template-columns:repeat(3,1fr); } } .stats::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.4; background-image:linear-gradient(var(--d-line) 1px,transparent 1px),linear-gradient(90deg,var(--d-line) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(120% 100% at 82% 0%, #000, transparent 68%); mask-image:radial-gradient(120% 100% at 82% 0%, #000, transparent 68%); } .stat{ position:relative; z-index:1; padding:clamp(1.9rem,3.4vw,3rem) clamp(1.6rem,2.4vw,2.4rem); border-top:1px solid var(--d-line); transition:background .4s var(--ease); } .stat:first-child{ border-top:0; } .stat:hover{ background:rgba(237,236,230,0.03); } @media (min-width:640px){ .stat{ border-top:0; border-left:1px solid var(--d-line); } .stat:first-child{ border-left:0; } } .stat__num{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(3rem,5.5vw,4.8rem); line-height:0.95; letter-spacing:-0.03em; } .stat__label{ display:block; margin-top:0.9rem; color:var(--d-soft); font-size:0.92rem; line-height:1.4; max-width:22ch; } /* reveal-line (masked lines) */ .reveal-lines .rl{ display:block; overflow:hidden; } .reveal-lines .rl > span{ display:block; transform:translateY(105%); } @keyframes riseInLine{ from{ transform:translateY(105%);} to{ transform:translateY(0);} } .reveal-lines.in-view .rl > span{ animation:riseInLine .8s var(--ease) forwards; } .reveal-lines.in-view .rl:nth-child(2) > span{ animation-delay:.09s; } .reveal-lines.in-view .rl:nth-child(3) > span{ animation-delay:.18s; } .reveal-lines.in-view .rl:nth-child(4) > span{ animation-delay:.27s; } .reveal-lines.in-view .rl:nth-child(5) > span{ animation-delay:.36s; } /* ---------- Services: numbered process rows ---------- */ .process{ display:flex; flex-direction:column; border-top:1px solid var(--line); } .process__row{ display:grid; grid-template-columns:1fr; gap:clamp(1.4rem,3vw,2rem); padding-block:clamp(2.2rem,4vw,3.6rem); border-bottom:1px solid var(--line); align-items:center; position:relative; isolation:isolate; color:inherit; text-decoration:none; } /* hover hint, bottom-right */ .process__hint{ position:absolute; right:clamp(0.9rem,1.6vw,1.7rem); bottom:clamp(0.9rem,1.6vw,1.5rem); display:inline-flex; align-items:center; gap:0.4rem; font-family:var(--font-display); font-size:0.8rem; font-weight:500; letter-spacing:0.01em; color:var(--ink-soft); opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease); z-index:1; pointer-events:none; } .process__hint svg{ width:15px; height:15px; } .process__row:hover .process__hint{ opacity:1; transform:none; } /* subtle cursor-following spotlight rectangle on hover */ .process__row::before{ content:""; position:absolute; inset:0 clamp(-1.5rem,-2vw,-1rem); border-radius:var(--radius-lg); z-index:-1; pointer-events:none; background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.6), rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--paper-2), var(--paper-3)); opacity:0; transition:opacity .5s var(--ease); } .process__row:hover::before{ opacity:1; } :root[data-theme="dark"] .process__row::before{ background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.07), rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--paper-2), var(--paper-3)); } @media (min-width:600px){ .process__row{ grid-template-columns:clamp(160px,20vw,240px) 1fr; grid-template-areas:"head media" "desc desc"; column-gap:clamp(1.5rem,3vw,3rem); } .process__head{ grid-area:head; } .process__media{ grid-area:media; } .process__desc{ grid-area:desc; max-width:60ch; } } @media (min-width:960px){ .process__row{ grid-template-columns: minmax(0,1.15fr) clamp(220px,22vw,320px) minmax(0,1.15fr); grid-template-areas:"head media desc"; column-gap:clamp(2rem,4vw,4.5rem); } .process__desc{ max-width:42ch; } } .process__head{ display:flex; align-items:center; gap:clamp(0.9rem,1.8vw,1.8rem); } .process__num{ font-family:var(--font-display); font-weight:600; font-size:clamp(3.6rem,9vw,8.5rem); line-height:0.78; letter-spacing:-0.045em; color:var(--ink); } .process__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.45rem,2.3vw,2.15rem); line-height:1.04; letter-spacing:-0.015em; } .process__media{ position:relative; aspect-ratio:1; width:100%; border-radius:var(--radius); overflow:hidden; background:var(--paper-2); box-shadow:var(--shadow-sm); } .process__ph{ position:absolute; inset:0; background: radial-gradient(90% 80% at 28% 22%, var(--paper-3), transparent 62%), repeating-linear-gradient(45deg, var(--paper-2) 0 15px, var(--paper-3) 15px 30px); transition:transform .9s var(--ease); } .process__row:hover .process__ph{ transform:scale(1.05); } .process__media img, .process__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); } .process__row:hover .process__media img{ transform:scale(1.05); } .process__desc{ color:var(--ink-soft); font-size:1rem; line-height:1.62; } /* ---------- Video slider (tap to play) ---------- */ .slider{ position:relative; } .slider__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem; } .slider__controls{ display:flex; gap:0.6rem; } .slider__btn{ width:52px; height:52px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ink); display:grid; place-items:center; transition:background .4s var(--ease), color .4s, transform .4s var(--ease); } .slider__btn:hover{ background:var(--ink); color:var(--paper); } .slider__btn:disabled{ opacity:0.3; cursor:not-allowed; } /* one-time "tap to unmute" hint that slides down over the reels */ .slider__hint{ position:absolute; left:50%; top:0; z-index:20; display:inline-flex; align-items:center; gap:0.5rem; padding:0.55rem 1.05rem; border-radius:100px; background:rgba(10,11,13,0.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(237,236,230,0.22); color:#f4f3ee; font-family:var(--font-display); font-size:0.82rem; letter-spacing:0.01em; white-space:nowrap; box-shadow:0 12px 30px -12px rgba(0,0,0,0.6); opacity:0; transform:translate(-50%,-12px); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease); } .slider__hint svg{ width:16px; height:16px; } .slider.hint-show .slider__hint{ opacity:1; transform:translate(-50%,0); } .slider__track{ display:flex; gap:clamp(0.9rem,1.6vw,1.4rem); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; margin-bottom:-1rem; scrollbar-width:none; cursor:grab; /* bleed the track to both screen edges; the inset matches the container's content edge so the first/last card still line up with the heading, while scrolled cards flow off-screen instead of clipping */ --edge:calc(max(0px, (100vw - var(--maxw)) / 2) + var(--pad)); margin-inline:calc(-1 * var(--edge)); padding-inline:var(--edge); scroll-padding-left:var(--edge); } .slider__track::-webkit-scrollbar{ display:none; } .slider__track.dragging{ cursor:grabbing; scroll-snap-type:none; } .v-card{ position:relative; flex:0 0 auto; width:clamp(230px, 30vw, 340px); aspect-ratio:9/16; border-radius:var(--radius); overflow:hidden; scroll-snap-align:start; background:var(--d-bg); color:var(--d-text); isolation:isolate; box-shadow:var(--shadow); transition:box-shadow .5s var(--ease), transform .5s var(--ease); } .v-card:hover{ box-shadow:var(--shadow-lg); } .v-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:grayscale(0.1) brightness(0.9); } .v-card__grad{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,21,23,0.05) 30%, rgba(20,21,23,0.72) 100%); } .v-card__ui{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:space-between; padding:1rem; } .v-card__toggle{ align-self:center; margin-top:auto; margin-bottom:auto; width:64px; height:64px; border-radius:50%; border:1px solid rgba(237,236,230,0.4); background:rgba(20,21,23,0.28); backdrop-filter:blur(6px); color:var(--d-text); display:grid; place-items:center; transition:transform .45s var(--ease), background .4s, opacity .4s; } .v-card__toggle svg{ width:18px; height:18px; } .v-card:hover .v-card__toggle{ transform:scale(1.08); } .v-card__toggle .i-pause{ display:none; } .v-card.is-playing .v-card__toggle{ opacity:0; pointer-events:none; } .v-card.is-playing .v-card__toggle .i-play{ display:none; } .v-card.is-playing .v-card__toggle .i-pause{ display:block; } .v-card__meta{ display:flex; justify-content:space-between; align-items:center; gap:0.5rem; font-family:var(--font-display); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; } .v-card__tag{ padding:0.3rem 0.6rem; border:1px solid rgba(237,236,230,0.3); border-radius:100px; } /* seekable timeline at the bottom of each card */ .v-card__scrub{ position:absolute; left:0; right:0; bottom:0; height:20px; z-index:5; cursor:pointer; } .v-card__scrub::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(237,236,230,0.25); } .v-card__bar{ position:absolute; left:0; bottom:0; height:3px; width:0%; background:var(--paper); z-index:6; transition:width .1s linear; } /* ---------- Hero fan of reels ---------- */ .hero--fan{ min-height:auto; display:block; text-align:center; padding-top:calc(var(--header-h) + clamp(1.5rem,5vw,3.25rem)); padding-bottom:clamp(2.5rem,6vw,5rem); } .hero--fan .hero__head{ position:relative; z-index:2; max-width:min(1280px, 96vw); margin-inline:auto; } .hero--fan .display{ font-size:clamp(3rem, 6.6vw, 6rem); } .hero--fan .eyebrow{ justify-content:center; } .hero--fan h1{ margin:1.1rem 0 0; } /* keep each headline line intact (no mid-line wrap) except on small phones */ .hero--fan .reveal-word{ white-space:nowrap; } @media (max-width:600px){ .hero--fan .reveal-word{ white-space:normal; } } .hero--fan .hero__sub{ margin:1.1rem auto 0; } .hero--fan .hero__cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; } /* wide, full-bleed, auto-scrolling arc of reels */ .reel-arc{ position:relative; z-index:2; width:100vw; left:50%; transform:translateX(-50%); height:clamp(400px, 42vw, 560px); margin-top:clamp(1.5rem,4vw,3rem); overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, #000 84%, transparent 100%); -webkit-mask-composite:source-in; mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, #000 84%, transparent 100%); mask-composite:intersect; } .reel-arc__card{ position:absolute; top:0; left:0; aspect-ratio:9/16; border-radius:16px; overflow:hidden; background:var(--d-bg); box-shadow:0 24px 46px -26px rgba(23,24,26,0.5); will-change:transform; } .reel-arc__card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(0.05); } .reel-arc__card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(20,21,23,0.26)); } @media (max-width:640px){ .reel-arc{ height:clamp(320px, 82vw, 380px); } } @media (max-width:760px){ .hero--fan .hero__head{ text-align:left; } .hero--fan .eyebrow{ justify-content:flex-start; } .hero--fan .hero__sub{ margin-left:0; } .hero--fan .hero__cta{ justify-content:flex-start; } } /* ---------- Marquee ---------- */ .marquee{ border-block:1px solid var(--line); padding-block:1.4rem; overflow:hidden; display:flex; user-select:none; } .marquee__row{ display:flex; gap:3rem; padding-right:3rem; flex-shrink:0; animation:marquee 34s linear infinite; } .marquee:hover .marquee__row{ animation-play-state:paused; } .marquee__item{ display:inline-flex; align-items:center; gap:3rem; font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,2.2rem); font-weight:500; letter-spacing:-0.01em; color:var(--ink); white-space:nowrap; } .marquee__item .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-faint); } @keyframes marquee{ to{ transform:translateX(-50%); } } /* ---------- FAQ ---------- */ .faq{ border-top:1px solid var(--line); } .faq__item{ border-bottom:1px solid var(--line); padding-inline:clamp(0.9rem,1.5vw,1.5rem); margin-inline:calc(-1 * clamp(0.9rem,1.5vw,1.5rem)); border-radius:var(--radius); color:var(--ink); transition:background .45s var(--ease), color .45s var(--ease); } /* open item sits on a black rounded rectangle with light text */ .faq__item.open{ background:var(--ink); color:var(--paper); border-bottom-color:transparent; } .faq__item.open .faq__a-inner{ color:inherit; } .faq__q{ width:100%; background:none; border:0; text-align:left; padding:clamp(1.3rem,2.4vw,1.9rem) 0; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; font-family:var(--font-display); font-weight:500; font-size:clamp(1.1rem,1.8vw,1.45rem); letter-spacing:-0.01em; color:inherit; transition:color .3s; } .faq__item:not(.open) .faq__q:hover{ color:var(--ink-soft); } .faq__icon{ position:relative; width:16px; height:16px; flex:0 0 auto; } .faq__icon::before,.faq__icon::after{ content:""; position:absolute; background:currentColor; transition:transform .4s var(--ease); } .faq__icon::before{ top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%); } .faq__icon::after{ left:50%; top:0; height:100%; width:1.5px; transform:translateX(-50%); } .faq__item.open .faq__icon::after{ transform:translateX(-50%) scaleY(0); } .faq__a{ overflow:hidden; height:0; transition:height .5s var(--ease); } .faq__a-inner{ padding-bottom:clamp(1.3rem,2.4vw,1.9rem); color:var(--ink-soft); max-width:64ch; } /* ---------- Split / working together ---------- */ .split{ display:grid; gap:clamp(1rem,2vw,1.6rem); grid-template-columns:1fr; } @media (min-width:820px){ .split{ grid-template-columns:1fr 1fr; } } .panel{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.8rem,3vw,2.8rem); background:var(--white); display:flex; flex-direction:column; gap:1.2rem; min-height:280px; box-shadow:var(--shadow-sm); transition:transform .5s var(--ease), box-shadow .5s var(--ease); } .panel:hover{ box-shadow:var(--shadow); } .panel h3{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,2.2vw,1.9rem); letter-spacing:-0.01em; } .panel__tag{ font-family:var(--font-display); font-size:0.74rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); } /* ---------- Engagement model cards ---------- */ .models{ display:grid; grid-template-columns:1fr; gap:clamp(1.2rem,2.4vw,2rem); perspective:1400px; } @media (min-width:820px){ .models{ grid-template-columns:1fr 1fr; } } .model-card{ display:flex; flex-direction:column; align-items:stretch; text-align:left; width:100%; cursor:pointer; font-family:var(--font-body); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.8rem,3vw,2.8rem); box-shadow:var(--shadow-sm); transform-style:preserve-3d; will-change:transform; transition:transform .55s var(--ease), box-shadow .55s var(--ease); } .model-card:hover{ transform:translateY(-22px) translateZ(60px); box-shadow:0 40px 80px -28px rgba(17,24,26,0.45), 0 12px 28px -18px rgba(17,24,26,0.35); } .model-card:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; } .model-card--dark{ background:linear-gradient(155deg, #1c356b 0%, #12203f 42%, #0a0d14 100%); color:#f4f3ee; border-color:transparent; } .model-card--light{ background:var(--white); color:var(--ink); } .model-card__tag{ font-family:var(--font-display); font-size:0.74rem; letter-spacing:0.18em; text-transform:uppercase; opacity:0.55; } .model-card__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-0.01em; margin-top:1rem; } .model-card__intro{ margin-top:0.7rem; font-size:1rem; line-height:1.55; opacity:0.82; } .model-card__list{ display:grid; gap:0.7rem; margin-top:1.5rem; } .model-card__list li{ position:relative; padding-left:1.9rem; font-size:0.98rem; line-height:1.4; } .model-card__list li::before{ content:""; position:absolute; left:0; top:0.15em; width:16px; height:16px; border-radius:50%; border:1.5px solid currentColor; opacity:0.9; background-color:transparent; } .model-card__list li::after{ content:""; position:absolute; left:4px; top:0.42em; width:8px; height:5px; border-left:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(-45deg); } .model-card__foot{ margin-top:1.6rem; font-size:0.92rem; line-height:1.5; opacity:0.6; } .model-card__cta{ display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.6rem; font-family:var(--font-display); font-weight:600; font-size:0.92rem; } .model-card__cta svg{ width:16px; height:16px; transition:transform .4s var(--ease); } .model-card:hover .model-card__cta svg{ transform:translate(3px,-3px); } /* ---------- Enquiry modal ---------- */ .modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(1rem,3vw,2rem); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; } .modal.open{ opacity:1; visibility:visible; } .modal__overlay{ position:absolute; inset:0; background:rgba(20,21,23,0.5); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); } .modal__panel{ position:relative; z-index:1; width:min(480px,100%); background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:clamp(1.8rem,4vw,2.8rem); max-height:90vh; overflow:auto; transform:translateY(18px) scale(0.98); transition:transform .35s var(--ease); } .modal.open .modal__panel{ transform:none; } .modal__close{ position:absolute; top:1rem; right:1rem; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); display:grid; place-items:center; transition:background .3s var(--ease), color .3s; } .modal__close svg{ width:18px; height:18px; } .modal__close:hover{ background:var(--ink); color:var(--paper); } .modal__eyebrow{ font-family:var(--font-display); font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); } .modal__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2.2vw,1.9rem); letter-spacing:-0.01em; margin-top:0.5rem; } .modal__form{ display:grid; gap:1.3rem; margin-top:1.5rem; } .modal__success{ display:none; align-items:center; gap:0.7rem; padding:1rem 1.1rem; border-radius:var(--radius); background:var(--ink); color:var(--paper); font-family:var(--font-display); font-size:0.95rem; } .modal__success svg{ width:20px; height:20px; flex:0 0 auto; } .modal__success.show{ display:flex; } body.modal-open{ overflow:hidden; } /* ---------- CTA band ---------- */ .cta-band{ background:var(--ink); color:var(--paper); border-radius:var(--radius-lg); overflow:hidden; position:relative; padding:clamp(3rem,7vw,6.5rem) clamp(1.8rem,5vw,5rem); isolation:isolate; } /* black card with a grayscale video in the background */ .cta-band--video{ background:#0a0b0d; } .cta-band--video .cta-band__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:grayscale(1) contrast(1.03) brightness(0.8); } /* even black transparent layer over the whole video so text stays clear */ .cta-band--video::after{ content:""; position:absolute; inset:0; z-index:0; background:rgba(5,6,8,0.74); } /* title always white on the video background */ .cta-band.cta-band--video h2{ color:#ffffff; } .cta-band__grid{ position:absolute; inset:0; z-index:0; opacity:0.35; background-image:linear-gradient(var(--d-line) 1px,transparent 1px), linear-gradient(90deg,var(--d-line) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(120% 100% at 80% 0%, #000, transparent 70%); } .cta-band > *{ position:relative; z-index:1; } .cta-band h2{ color:var(--paper); } .cta-band .lead{ color:var(--d-soft); } /* ---------- Method (studio): vertical timeline ---------- */ .timeline{ position:relative; padding-block:clamp(1rem,3vw,2rem); } .timeline__num{ display:block; font-family:var(--font-display); font-weight:600; font-size:0.82rem; letter-spacing:0.14em; color:var(--ink-faint); margin-bottom:0.55rem; } .timeline__text h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2vw,1.85rem); letter-spacing:-0.01em; line-height:1.08; } .timeline__text p{ margin-top:0.7rem; color:var(--ink-soft); font-size:0.98rem; line-height:1.55; max-width:40ch; } .timeline__art{ flex:0 0 auto; width:clamp(92px,10vw,132px); height:clamp(92px,10vw,132px); display:grid; place-items:center; color:var(--ink); border:1px solid var(--line); border-radius:50%; background:var(--paper-2); transition:transform .5s var(--ease), background .45s var(--ease), color .45s var(--ease), box-shadow .55s var(--ease), border-color .45s var(--ease); } .timeline__art svg{ width:52%; height:52%; display:block; } .timeline__step:hover .timeline__art{ transform:scale(1.06); background:var(--white); } .timeline__node{ width:15px; height:15px; border-radius:50%; background:var(--paper); border:2px solid var(--ink); z-index:2; transition:background .45s var(--ease), box-shadow .55s var(--ease), border-color .45s var(--ease), transform .45s var(--ease); } /* active step (nearest screen middle): inverted + glowing */ .timeline__step.is-active .timeline__art{ background:var(--ink); color:var(--paper); border-color:transparent; box-shadow:0 0 46px -2px color-mix(in srgb, var(--ink) 60%, transparent); } .timeline__step.is-active .timeline__node{ background:var(--ink); border-color:transparent; transform:translate(-50%,-50%) scale(1.15); box-shadow:0 0 18px 3px color-mix(in srgb, var(--ink) 65%, transparent); } /* desktop: alternating sides around a centre line */ @media (min-width:760px){ .timeline::before{ content:""; position:absolute; top:12px; bottom:12px; left:50%; width:2px; background:var(--line-strong); transform:translateX(-1px); } .timeline__step{ position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding-block:clamp(1.4rem,3vw,2.6rem); } .timeline__node{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } .timeline__card{ display:flex; align-items:center; gap:clamp(1rem,1.8vw,1.6rem); } .timeline__step:nth-child(odd) .timeline__card{ grid-column:1; justify-self:end; flex-direction:row-reverse; text-align:right; padding-right:clamp(1.6rem,4vw,3.2rem); } .timeline__step:nth-child(odd) .timeline__text p{ margin-left:auto; } .timeline__step:nth-child(even) .timeline__card{ grid-column:2; justify-self:start; padding-left:clamp(1.6rem,4vw,3.2rem); } } /* mobile: single column, line on the left */ @media (max-width:759px){ .timeline{ padding-left:0; } /* line runs from the first node to the last node (set by JS); node sits on it */ .timeline::before{ content:""; position:absolute; top:var(--tl-top,8px); bottom:var(--tl-bottom,8px); left:24px; width:2px; background:var(--line-strong); } .timeline__step{ position:relative; padding:clamp(1.4rem,5vw,2rem) 0 clamp(1.4rem,5vw,2rem) 58px; } /* centre the node on the icon (icon is clamp(92px,10vw,132px) tall) and on the line */ .timeline__node{ position:absolute; left:25px; top:calc(clamp(1.4rem,5vw,2rem) + clamp(46px,5vw,66px)); transform:translate(-50%,-50%); } .timeline__card{ display:flex; flex-direction:column; align-items:stretch; text-align:left; gap:1.1rem; } .timeline__text{ width:100%; } .timeline__text p{ max-width:none; } } /* ---------- Founder / principles ---------- */ .note{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(2rem,4vw,3.5rem); background:var(--paper-2); } .note blockquote{ margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.35; letter-spacing:-0.005em; } .note__by{ margin-top:1.8rem; display:flex; align-items:center; gap:0.9rem; color:var(--ink-soft); font-size:0.9rem; } .note__by .avatar{ width:38px; height:38px; border-radius:50%; background:var(--paper-3); border:1px solid var(--line); } .principles{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; grid-template-columns:1fr; } @media (min-width:680px){ .principles{ grid-template-columns:1fr 1fr; } } .principle{ background:var(--paper); padding:clamp(1.6rem,2.6vw,2.2rem); display:flex; flex-direction:column; gap:0.8rem; min-height:180px; transition:background .4s; } .principle:hover{ background:var(--paper-2); } .principle__i{ font-family:var(--font-display); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); } .principle h4{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,1.8vw,1.5rem); letter-spacing:-0.01em; } .principle p{ color:var(--ink-soft); font-size:0.96rem; } /* ---------- Work grid ---------- */ .filters{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3rem); } .filter{ font-family:var(--font-display); font-size:0.86rem; font-weight:500; padding:0.55rem 1.1rem; border-radius:100px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); transition:background .35s var(--ease), color .35s, border-color .35s; } .filter:hover{ border-color:var(--line-strong); color:var(--ink); } .filter.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .work-grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.2rem,2.4vw,2.2rem); } @media (min-width:640px){ .work-grid{ grid-template-columns:1fr 1fr; } } .work-card{ display:block; position:relative; } .work-card.hide{ display:none; } /* make some cards span for layout variation */ @media (min-width:900px){ .work-grid{ grid-template-columns:repeat(6,1fr); grid-auto-flow:dense; } .work-card{ grid-column:span 3; } .work-card--wide{ grid-column:span 4; } .work-card--narrow{ grid-column:span 2; } } .work-card__media{ position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:4/3; background:var(--paper-2); border:1px solid var(--line); } .work-card--wide .work-card__media{ aspect-ratio:16/10; } .work-card--narrow .work-card__media{ aspect-ratio:3/4; } .work-card__ph{ position:absolute; inset:0; background: radial-gradient(80% 60% at 30% 20%, var(--paper-3), transparent 60%), repeating-linear-gradient(45deg, var(--paper-2) 0 12px, var(--paper-3) 12px 24px); transition:transform .8s var(--ease); } .work-card:hover .work-card__ph{ transform:scale(1.06); } .work-card__num{ position:absolute; top:1rem; left:1rem; z-index:2; font-family:var(--font-display); font-size:0.76rem; letter-spacing:0.1em; color:var(--ink-soft); background:var(--paper); padding:0.25rem 0.6rem; border-radius:100px; border:1px solid var(--line); } .work-card__view{ position:absolute; z-index:2; inset:auto 1rem 1rem auto; width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; transform:scale(0) rotate(-20deg); transition:transform .5s var(--ease); } .work-card:hover .work-card__view{ transform:scale(1) rotate(0); } .work-card__foot{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:1rem; } .work-card__foot h3{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.15rem,1.7vw,1.45rem); letter-spacing:-0.01em; } .work-card__cat{ font-family:var(--font-display); font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); } .work-card__desc{ color:var(--ink-soft); font-size:0.95rem; margin-top:0.3rem; } /* ---------- Contact form ---------- */ .contact-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4rem); } @media (min-width:960px){ .contact-grid{ grid-template-columns:1.1fr 0.9fr; align-items:start; } } .form{ display:grid; gap:2rem; } .field{ display:flex; flex-direction:column; gap:0.55rem; } .field label{ font-family:var(--font-display); font-size:0.9rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink); } .field input, .field textarea{ font-family:var(--font-body); font-size:1.02rem; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line-strong); padding:0.6rem 0; transition:border-color .4s var(--ease); } .field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); } .field input:focus, .field textarea:focus{ outline:none; border-color:var(--ink); } .field textarea{ resize:vertical; min-height:110px; } .field-row{ display:grid; grid-template-columns:1fr; gap:2rem; } @media (min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } } .chips{ display:flex; flex-wrap:wrap; gap:0.55rem; } .chip{ font-family:var(--font-display); font-size:0.86rem; padding:0.5rem 1rem; border-radius:100px; border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft); transition:background .3s var(--ease), color .3s, border-color .3s, transform .2s; } .chip:hover{ border-color:var(--ink); color:var(--ink); } .chip.selected{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .chip:active{ transform:scale(0.95); } .form__success{ display:none; padding:1.2rem 1.4rem; border-radius:var(--radius); background:var(--ink); color:var(--paper); font-family:var(--font-display); align-items:center; gap:0.8rem; } .form__success.show{ display:flex; } .contact-aside{ display:flex; flex-direction:column; gap:1.6rem; } .contact-card{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,2.6vw,2.2rem); background:var(--white); box-shadow:var(--shadow-sm); transition:box-shadow .5s var(--ease); } .contact-card:hover{ box-shadow:var(--shadow); } .contact-card .k{ font-family:var(--font-display); font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); } .contact-card .v{ font-family:var(--font-display); font-size:clamp(1.2rem,2vw,1.6rem); margin-top:0.4rem; letter-spacing:-0.01em; } /* ---------- Footer ---------- */ .footer{ background:#000; color:var(--d-text); padding-top:clamp(4rem,8vw,7rem); position:relative; overflow:hidden; } .footer__grid{ display:grid; grid-template-columns:1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid var(--d-line); } @media (min-width:820px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } } .footer__big{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.9rem,4.5vw,3.2rem); letter-spacing:-0.015em; line-height:1; } .footer__big a{ transition:color .3s; } .footer__big a:hover{ color:var(--d-soft); } .footer__logo img{ height:26px; filter:invert(1) brightness(1.9); } .footer__col h4{ font-family:var(--font-display); font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--d-soft); margin-bottom:1.1rem; } .footer__col a{ display:block; padding:0.35rem 0; color:var(--d-text); transition:color .3s, transform .3s; } .footer__col a:hover{ color:var(--d-soft); transform:translateX(4px); } /* two-column footer with a wide enquiry form */ .footer__grid--form{ grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4rem); } @media (min-width:820px){ .footer__grid--form{ grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; } } .footer__contacts{ margin-top:clamp(1.6rem,3vw,2.4rem); display:flex; flex-wrap:wrap; gap:0.4rem 1.6rem; } .footer__contacts a{ color:var(--d-text); padding:0.25rem 0; transition:color .3s; } .footer__contacts a:hover{ color:var(--d-soft); } .footer__form-col h4{ font-family:var(--font-display); font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--d-soft); margin-bottom:1.1rem; } .footer-form__intro{ font-size:0.9rem; line-height:1.55; color:var(--d-soft); max-width:46ch; margin-bottom:1.2rem; } .footer-form{ display:flex; flex-direction:column; gap:0.8rem; width:100%; } .footer-form__row{ display:grid; grid-template-columns:1fr; gap:0.8rem; } @media (min-width:520px){ .footer-form__row{ grid-template-columns:1fr 1fr; } } /* floating-label fields */ .ff-field{ position:relative; display:block; } .ff-field--full{ grid-column:1 / -1; } .ff-input{ width:100%; padding:1.5rem 1rem 0.55rem; font-family:var(--font-body); font-size:0.95rem; color:var(--d-text); background:rgba(255,255,255,0.04); border:1px solid var(--d-line); border-radius:12px; display:block; transition:border-color .3s var(--ease), background .3s var(--ease); } .ff-input::placeholder{ color:transparent; } .ff-input:focus{ outline:none; border-color:var(--d-text); background:rgba(255,255,255,0.08); } .ff-textarea{ resize:vertical; min-height:104px; line-height:1.5; } .ff-label{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--d-soft); font-size:0.95rem; pointer-events:none; transition:top .18s var(--ease), font-size .18s var(--ease), transform .18s var(--ease); } /* textarea label sits near the top, not vertically centered */ .ff-textarea + .ff-label{ top:1.15rem; transform:none; } .ff-input:focus + .ff-label, .ff-input:not(:placeholder-shown) + .ff-label{ top:0.5rem; transform:none; font-size:0.68rem; letter-spacing:0.04em; } .footer-form__submit{ margin-top:0.5rem; align-self:flex-start; } .footer-form__done{ color:#6ea8fe; font-size:0.95rem; line-height:1.5; } .footer__bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-block:2rem; font-size:0.82rem; color:var(--d-soft); font-family:var(--font-display); letter-spacing:0.02em; } .footer__bar--center{ justify-content:center; text-align:center; } /* ---------- Reveal (scroll) ---------- */ /* Driven by keyframe animations (not transitions) so entrance reveals never freeze at their start value when triggered at load. */ [data-reveal]{ opacity:0; } @keyframes revUp{ from{ opacity:0; transform:translateY(28px);} to{ opacity:1; transform:translateY(0);} } [data-reveal].in-view{ animation:revUp .9s var(--ease) forwards; } [data-reveal="clip"]{ opacity:1; clip-path:inset(0 0 100% 0); } @keyframes revClip{ from{ clip-path:inset(0 0 100% 0);} to{ clip-path:inset(0 0 0 0);} } [data-reveal="clip"].in-view{ animation:revClip 1s var(--ease) forwards; } [data-reveal="scale"]{ opacity:0; transform:scale(0.94); } @keyframes revScale{ from{ opacity:0; transform:scale(0.94);} to{ opacity:1; transform:scale(1);} } [data-reveal="scale"].in-view{ animation:revScale .9s var(--ease) forwards; } [data-reveal-delay="1"]{ animation-delay:.1s; } [data-reveal-delay="2"]{ animation-delay:.2s; } [data-reveal-delay="3"]{ animation-delay:.3s; } [data-reveal-delay="4"]{ animation-delay:.4s; } /* Fail-safe: JS adds .reveal-done after the animation should have finished, guaranteeing content is visible even if the animation clock stalls. */ [data-reveal].reveal-done{ opacity:1 !important; clip-path:none !important; animation:none !important; } [data-reveal]:not([data-tilt]):not(.model-card).reveal-done{ transform:none !important; } .model-card.reveal-done{ transform:none; } .model-card.reveal-done:hover{ transform:translateY(-22px) translateZ(60px); } .reveal-lines.reveal-done .rl > span{ transform:none !important; animation:none !important; } .hero.reveal-done .reveal-word > span{ transform:none !important; animation:none !important; } /* tilt base */ [data-tilt]{ transform-style:preserve-3d; will-change:transform; transition:transform .4s var(--ease); } [data-tilt] .tilt-lift{ transform:translateZ(30px); transform-style:preserve-3d; } /* preloader */ .preloader{ position:fixed; inset:0; z-index:9998; background:var(--paper); display:grid; place-items:center; transition:opacity .6s var(--ease), visibility .6s; } .preloader.done{ opacity:0; visibility:hidden; } .preloader__logo{ height:26px; opacity:0.9; } .preloader__bar{ position:absolute; bottom:0; left:0; height:2px; width:0; background:var(--ink); transition:width .3s var(--ease); } /* utilities */ .mt-s{ margin-top:1rem; } .mt-m{ margin-top:2rem; } .mt-l{ margin-top:3.5rem; } .text-soft{ color:var(--ink-soft); } .divider{ height:1px; background:var(--line); border:0; margin:0; } .tag-list{ display:flex; gap:0.5rem; flex-wrap:wrap; } .tag{ font-family:var(--font-display); font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; padding:0.35rem 0.7rem; border:1px solid var(--line); border-radius:100px; color:var(--ink-soft); } /* ---------- Responsive header ---------- */ @media (max-width:900px){ .nav__links{ display:none; } .burger{ display:block; } .want{ display:none; } } /* landing page has no burger menu; keep the CTA visible on mobile */ @media (max-width:600px){ .header__inner{ gap:0.75rem; } .header__actions{ gap:0.6rem; } .header__cta{ padding:0.62rem 1rem; font-size:0.8rem; white-space:nowrap; } .header__cta .btn__label{ white-space:nowrap; } .header__cta .btn__dot{ display:none; } .theme-toggle{ width:38px; height:38px; } .theme-toggle svg{ width:17px; height:17px; } } @media (min-width:901px){ .menu{ display:none; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } [data-reveal], [data-reveal="clip"]{ opacity:1 !important; transform:none !important; clip-path:none !important; } .reveal-word > span, .reveal-lines .rl > span{ transform:none !important; } .cursor{ display:none !important; } }