/* ============================================================ Anne Homan — Content Producer Editorial / elegant redesign. Plain CSS, no framework. Self-hostable. Structure adapted from a single-page reference; aesthetic is its own: warm ivory, serif display, terracotta. ============================================================ */ :root{ --paper: #F6F1E8; /* warm ivory */ --paper-2: #EFE7D9; /* slightly deeper — alt panels/cards */ --ink: #211B15; /* warm espresso, near-black */ --ink-soft: #4A4139; --muted: #8A7E70; /* warm taupe */ --accent: #A6553A; /* terracotta / clay */ --accent-deep:#7E3E2A; --accent-tint:#EAD9CF; --dark: #26201A; /* warm charcoal — dark sections */ --dark-2: #2F2820; --white: #ffffff; --line: rgba(33,27,21,.14); --line-soft: rgba(33,27,21,.09); --maxw: 1200px; --pad: clamp(20px, 5vw, 80px); --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(.2,.7,.2,1); --ease-soft: cubic-bezier(.16,1,.3,1); /* soft, expo-like — for scroll reveals */ } /* ---------- Color palettes ---------- Default (no data-palette) = Terracotta, defined in :root above. Set one on to lock it, or use the draft palette picker to preview. Each palette only swaps accent + dark tones (and a touch of paper/ink) so the whole system re-skins cohesively. */ [data-palette="sage"]{ --accent:#5E6A48; --accent-deep:#454E34; --accent-tint:#DDE3CE; --dark:#232720; --dark-2:#2C312A; --paper:#F4F2E8; --paper-2:#ECE9DB; } [data-palette="ochre"]{ --accent:#9A6B24; --accent-deep:#744F16; --accent-tint:#EEE0C4; --dark:#262019; --dark-2:#302921; --paper:#F7F2E6; --paper-2:#EFE8D6; } [data-palette="plum"]{ --accent:#6E425A; --accent-deep:#522F43; --accent-tint:#E8D7E0; --dark:#221A1F; --dark-2:#2B2129; --paper:#F6F0EC; --paper-2:#EEE5DF; } [data-palette="ink"]{ --accent:#356070; --accent-deep:#24454F; --accent-tint:#D3E0E3; --ink:#1C2226; --ink-soft:#414A4F; --muted:#77807F; --dark:#1E2529; --dark-2:#272F34; --paper:#F3F3EE; --paper-2:#EAEAE2; --line:rgba(28,34,38,.14); --line-soft:rgba(28,34,38,.09); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:18px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; cursor:pointer; } ::selection{ background:var(--accent); color:#fff; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } /* ---------- Type primitives ---------- */ .eyebrow{ font-family:var(--font-sans); font-weight:600; text-transform:uppercase; letter-spacing:.28em; font-size:12px; color:var(--accent-deep); display:inline-flex; align-items:center; gap:.7em; } .eyebrow::before{ content:""; width:28px; height:1px; background:var(--accent); display:inline-block; } .section--dark .eyebrow, .section--accent .eyebrow{ color:var(--accent-tint); } .section--dark .eyebrow::before, .section--accent .eyebrow::before{ background:var(--accent-tint); } .display{ font-family:var(--font-display); font-weight:380; line-height:1.02; letter-spacing:-.015em; } .serif-italic{ font-family:var(--font-display); font-style:italic; font-weight:380; } /* ---------- Buttons ---------- */ .btn{ --bg:var(--ink); --fg:var(--paper); display:inline-flex; align-items:center; gap:.6em; background:var(--bg); color:var(--fg); font-family:var(--font-sans); font-weight:500; font-size:15px; letter-spacing:.01em; padding:15px 28px; border:1px solid var(--bg); border-radius:2px; transition:transform .3s var(--ease), background .25s, color .25s, border-color .25s; white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn--accent{ --bg:var(--accent); --fg:#fff; border-color:var(--accent); font-weight:700; } .btn--accent:hover{ --bg:var(--accent-deep); border-color:var(--accent-deep); } .btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--ink); } .btn--ghost:hover{ background:var(--ink); color:var(--paper); } .btn--on-dark{ --bg:var(--paper); --fg:var(--ink); border-color:var(--paper); } .btn--ghost-light{ --bg:transparent; --fg:var(--paper); border-color:rgba(246,241,232,.5); } .btn--ghost-light:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); } .btn .arw{ transition:transform .3s var(--ease); } .btn:hover .arw{ transform:translateX(4px); } /* ============================================================ Header / Nav (light throughout — ink on ivory) ============================================================ */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:22px var(--pad); transition:background .35s, box-shadow .35s, padding .35s, border-color .35s; border-bottom:1px solid transparent; } .site-header.scrolled{ background:rgba(246,241,232,.86); backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--line-soft); box-shadow:0 10px 30px -26px rgba(33,27,21,.7); padding-top:14px; padding-bottom:14px; } .brandmark{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; line-height:1; } .brandmark .brand-logo{ height:42px; width:auto; display:block; transition:height .3s var(--ease); } .site-header.scrolled .brandmark .brand-logo{ height:36px; } .brandmark .name{ font-family:var(--font-display); font-weight:400; font-size:23px; letter-spacing:.01em; color:var(--ink); } .brandmark .role{ font-family:var(--font-sans); font-weight:500; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); } .nav{ display:flex; align-items:center; gap:30px; } .nav a{ font-weight:500; font-size:15px; color:var(--ink); position:relative; padding:4px 0; } .nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px; background:var(--accent); transition:right .35s var(--ease); } .nav a:hover::after{ right:0; } .nav a.btn::after{ content:none; } .nav .btn{ padding:11px 22px; } /* buttons in the nav must keep their own colour/weight, not the .nav a link style */ .nav a.btn{ color:var(--fg); font-weight:700; } .nav-toggle{ display:none; background:none; border:0; width:44px; height:44px; color:var(--ink); } .nav-toggle span{ display:block; width:26px; height:1.5px; background:currentColor; margin:6px auto; transition:.3s; } /* Scroll progress bar */ .scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:200; background:var(--accent); transform:scaleX(0); transform-origin:left; } @media (prefers-reduced-motion:reduce){ .scroll-progress{ display:none; } } /* ============================================================ Hero (editorial: type left, portrait right) ============================================================ */ .hero{ position:relative; padding-top:clamp(120px,15vh,168px); padding-bottom:clamp(60px,9vw,116px); overflow:hidden; } .hero::before{ /* faint warm glow, top-right */ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 55% at 88% 6%, rgba(166,85,58,.10), transparent 60%); } .hero .wrap{ position:relative; z-index:2; } .hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,72px); align-items:center; } .hero__tag{ margin-bottom:22px; } .hero h1{ margin:0; font-family:var(--font-display); font-weight:370; font-size:clamp(46px,7.4vw,104px); line-height:.98; letter-spacing:-.02em; color:var(--ink); } .hero h1 em{ font-style:italic; color:var(--accent); } .hero__lead{ max-width:46ch; margin:30px 0 0; font-size:clamp(18px,1.5vw,21px); line-height:1.6; color:var(--ink-soft); } .hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; } .hero__portrait{ position:relative; width:100%; } .hero__portrait .pframe{ display:block; border-radius:3px; overflow:hidden; box-shadow:0 40px 80px -46px rgba(33,27,21,.6); background:var(--paper-2); } .hero__portrait img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 26%; transform:scale(1.16) translateY(var(--py,0px)); /* oversized for a subtle scroll parallax */ } .hero__portrait figcaption{ position:absolute; left:-14px; bottom:26px; background:var(--paper); border:1px solid var(--line); padding:12px 18px; max-width:230px; font-size:13px; line-height:1.4; color:var(--muted); box-shadow:0 20px 40px -30px rgba(33,27,21,.5); } .hero__portrait figcaption b{ display:block; font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--ink); font-style:normal; } /* editorial meta row under the hero (label / value, no giant numbers) */ .hero__meta{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px); margin-top:clamp(44px,6vw,80px); padding-top:30px; border-top:1px solid var(--line); } .hero__meta .m{ display:flex; flex-direction:column; gap:9px; } .hero__meta .m .label{ font-size:11px; text-transform:uppercase; letter-spacing:.24em; color:var(--muted); font-weight:600; } .hero__meta .m .val{ font-family:var(--font-display); font-weight:400; font-size:clamp(19px,1.8vw,24px); line-height:1.15; color:var(--ink); } /* ============================================================ Marquee (keyword strip) ============================================================ */ .marquee{ overflow:hidden; border-block:1px solid var(--line); padding:20px 0; margin-top:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .marquee__track{ display:flex; gap:54px; width:max-content; animation:marq 38s linear infinite; } .marquee:hover .marquee__track{ animation-play-state:paused; } .marquee span{ font-family:var(--font-display); font-style:italic; font-weight:380; font-size:22px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:54px; } .marquee span::after{ content:"—"; color:#C0392B; font-style:normal; } @keyframes marq{ to{ transform:translateX(-50%); } } /* ============================================================ Section scaffolding ============================================================ */ .section{ padding-block:clamp(70px,10vw,150px); position:relative; } .section--dark{ background:var(--dark); color:var(--paper); } .section--accent{ background:var(--accent); color:#fff; } .section-head{ max-width:720px; margin-bottom:clamp(42px,6vw,72px); } .section-head h2{ font-family:var(--font-display); font-weight:370; font-size:clamp(34px,5.4vw,72px); line-height:1.02; letter-spacing:-.02em; margin:.28em 0 0; } .section-head h2 em{ font-style:italic; color:var(--accent); } .section--dark .section-head h2 em{ color:var(--accent-tint); } .section-head p{ font-size:clamp(17px,1.5vw,20px); color:var(--muted); margin:22px 0 0; max-width:58ch; } .section--dark .section-head p{ color:rgba(246,241,232,.72); } .section--accent .section-head p{ color:rgba(255,255,255,.9); } /* ============================================================ Clients — quiet typographic list (no fabricated logos) ============================================================ */ .clients-meta{ display:flex; align-items:baseline; gap:14px; margin-bottom:30px; flex-wrap:wrap; font-size:15px; color:var(--muted); } .clients-meta .count{ font-family:var(--font-display); font-size:clamp(28px,3.6vw,42px); color:var(--accent); line-height:1; } .client-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0 clamp(24px,4vw,56px); } .client-list li{ font-family:var(--font-display); font-weight:380; font-size:clamp(20px,2vw,26px); color:var(--ink); padding:18px 0; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:12px; } .client-list li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; } .client-note{ margin-top:26px; font-size:14px; color:var(--muted); font-style:italic; } /* ============================================================ Services — stacked "ledger" rows keyed by a verb (dark section) ============================================================ */ .svc-list{ border-top:1px solid rgba(246,241,232,.16); } .svc{ display:grid; grid-template-columns:minmax(220px,.9fr) 1.5fr; gap:clamp(20px,4vw,64px); padding:clamp(26px,3.2vw,46px) 0; border-bottom:1px solid rgba(246,241,232,.16); align-items:start; } .svc__idx{ display:inline-block; font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-tint); } .svc__head h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3vw,42px); line-height:1.02; letter-spacing:-.015em; margin:14px 0 0; transition:color .3s var(--ease); } .svc:hover .svc__head h3{ color:var(--accent-tint); } .svc p{ color:rgba(246,241,232,.74); font-size:16px; line-height:1.65; margin:0; max-width:54ch; } .svc .kv{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; } .svc .kv span{ font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--paper); border:1px solid rgba(246,241,232,.28); padding:5px 11px; border-radius:2px; } @media (max-width:720px){ .svc{ grid-template-columns:1fr; gap:14px; } .svc__head h3{ margin-top:8px; } } /* ============================================================ Gallery (masonry + lightbox) ============================================================ */ .gallery{ columns:3 300px; column-gap:16px; } .gallery figure{ margin:0 0 16px; break-inside:avoid; border-radius:3px; overflow:hidden; position:relative; cursor:zoom-in; background:var(--paper-2); transition:opacity .8s var(--ease), transform .8s var(--ease); } html.js .gallery figure{ opacity:0; transform:translateY(26px); } html.js .gallery figure.in{ opacity:1; transform:none; } .gallery img{ width:100%; height:auto; transition:transform .6s var(--ease); } .gallery figure::after{ content:"⤢"; position:absolute; right:12px; bottom:10px; color:#fff; font-size:17px; opacity:0; transition:.3s; text-shadow:0 2px 8px rgba(0,0,0,.6); } .gallery figure:hover img{ transform:scale(1.04); } .gallery figure:hover::after{ opacity:1; } /* ============================================================ Testimonials ============================================================ */ .quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,3vw,40px); } .quote{ display:flex; flex-direction:column; gap:22px; } .quote blockquote{ margin:0; font-family:var(--font-display); font-weight:370; font-style:italic; font-size:clamp(21px,2.1vw,27px); line-height:1.4; color:var(--paper); letter-spacing:-.01em; } .quote blockquote::before{ content:"“"; color:var(--accent-tint); font-size:1.2em; margin-right:.05em; } .quote .by{ font-family:var(--font-sans); font-size:14px; color:rgba(246,241,232,.82); line-height:1.5; } .quote .by b{ display:block; color:var(--paper); font-weight:600; font-size:15px; } /* How clients describe me — trait pills + a highlighted phrase (accent section) */ .traits{ display:flex; flex-wrap:wrap; gap:12px; } .traits span{ font-family:var(--font-sans); font-size:15px; font-weight:500; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:2px; padding:10px 18px; } .trait-quote{ font-family:var(--font-display); font-style:italic; font-weight:370; font-size:clamp(24px,3.2vw,42px); line-height:1.24; letter-spacing:-.01em; color:#fff; max-width:22ch; margin:clamp(38px,5vw,64px) 0 0; } .trait-quote small{ display:block; font-family:var(--font-sans); font-style:normal; font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:18px; } /* Who I partner with — tag row (light section) */ .partner-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:36px; } .partner-tags .partner-label{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-right:6px; } .partner-tags span:not(.partner-label){ font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:8px 15px; } /* ============================================================ About ============================================================ */ .about{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:start; } .about__media{ width:100%; } .about__media img{ width:100%; height:auto; border-radius:3px; aspect-ratio:4/5; object-fit:cover; box-shadow:0 40px 80px -48px rgba(33,27,21,.55); background:var(--paper-2); } /* About media used as the O&H logo mark (not a photo) */ .about__logo{ align-self:center; } .about__logo img{ aspect-ratio:auto; object-fit:contain; max-width:320px; box-shadow:none; background:none; border-radius:0; } /* Brand / logo wall — Anne's client logos (grayscale, full colour on hover) */ .brandwall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; margin-top:4px; } .brandwall .cell{ aspect-ratio:3/2; border:1px solid var(--line); border-radius:2px; display:grid; place-items:center; padding:22px; } .brandwall .cell:hover{ border-color:var(--accent); } .brandwall img{ max-height:58px; max-width:84%; width:auto; object-fit:contain; filter:grayscale(1) opacity(.6); transition:filter .35s var(--ease); } .brandwall .cell:hover img{ filter:grayscale(0) opacity(1); } @media (max-width:520px){ .brandwall{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); } } .about__body p{ font-size:18px; margin:0 0 20px; color:var(--ink-soft); } .about__body p:first-child{ font-family:var(--font-display); font-weight:380; font-size:clamp(22px,2.4vw,30px); line-height:1.35; color:var(--ink); letter-spacing:-.01em; } .about__body .sig{ font-family:var(--font-display); font-style:italic; font-size:28px; margin-top:30px; color:var(--ink); } .about__body .sig small{ display:block; font-family:var(--font-sans); font-style:normal; font-weight:600; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:8px; } /* About sits on a dark section — lift the text off the background */ .section--dark .about__body p{ color:rgba(246,241,232,.76); } .section--dark .about__body p:first-child{ color:var(--paper); } .section--dark .about__body .sig{ color:var(--paper); } .section--dark .about__body .sig small{ color:rgba(246,241,232,.6); } /* ============================================================ Contact (accent section) ============================================================ */ .cta{ text-align:center; } .cta h2{ font-family:var(--font-display); font-weight:360; font-size:clamp(40px,8vw,110px); line-height:1; letter-spacing:-.025em; margin:.12em 0 0; } .cta h2 em{ font-style:italic; } .cta p{ font-size:20px; color:rgba(255,255,255,.9); max-width:52ch; margin:24px auto 0; } .cta__row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px; } .site-footer{ background:var(--dark); color:rgba(246,241,232,.65); padding:38px var(--pad); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:14px; } .site-footer a:hover{ color:var(--paper); } .site-footer .fnav{ display:flex; gap:24px; flex-wrap:wrap; } /* ============================================================ Lightbox ============================================================ */ .lightbox{ position:fixed; inset:0; z-index:100; background:rgba(20,16,12,.95); display:none; align-items:center; justify-content:center; padding:24px; } .lightbox.open{ display:flex; } .lightbox img{ max-width:92vw; max-height:86vh; border-radius:3px; box-shadow:0 30px 80px -20px #000; } .lightbox button{ position:absolute; background:rgba(246,241,232,.12); color:#fff; border:0; width:52px; height:52px; border-radius:50%; font-size:22px; display:grid; place-items:center; transition:background .2s; } .lightbox button:hover{ background:var(--accent); } .lb-close{ top:20px; right:20px; } .lb-prev{ left:20px; top:50%; transform:translateY(-50%); } .lb-next{ right:20px; top:50%; transform:translateY(-50%); } .lb-count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(246,241,232,.7); font-size:13px; letter-spacing:.12em; } /* ============================================================ Theme picker — DRAFT-ONLY preview widget (remove before launch) ============================================================ */ .theme-picker{ position:fixed; left:16px; bottom:16px; z-index:90; display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:8px 14px 8px 16px; box-shadow:0 14px 34px -20px rgba(20,16,12,.6); } .theme-picker .tp-label{ font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); font-weight:600; margin-right:3px; } .theme-picker button{ width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.18); padding:0; cursor:pointer; transition:transform .2s var(--ease); } .theme-picker button:hover{ transform:scale(1.15); } .theme-picker button[aria-pressed="true"]{ outline:2px solid var(--ink); outline-offset:2px; } @media (max-width:520px){ .theme-picker{ left:10px; bottom:10px; padding:6px 10px; gap:6px; } .theme-picker .tp-label{ display:none; } } /* ============================================================ Scroll motion — reveals, staggers, hero word cascade, hovers Fail-safe: without JS (no html.js) everything is visible; reduced-motion disables the effects. Content is never permanently hidden. ============================================================ */ .reveal{ transition:opacity 1s var(--ease-soft), transform 1s var(--ease-soft); } html.js .reveal{ opacity:0; transform:translateY(38px); } html.js .reveal.in{ opacity:1; transform:none; } html.js .svc{ opacity:0; transform:translateY(32px); transition:opacity 1s var(--ease-soft), transform 1s var(--ease-soft); } html.js .svc.in{ opacity:1; transform:none; } /* Section headers: reveal eyebrow -> title -> lead in sequence */ html.js .section-head.reveal{ opacity:1; transform:none; } html.js .section-head.reveal > *{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft); } html.js .section-head.reveal.in > *{ opacity:1; transform:none; } html.js .section-head.reveal.in > *:nth-child(2){ transition-delay:.1s; } html.js .section-head.reveal.in > *:nth-child(3){ transition-delay:.2s; } /* Logo cells & trait pills: staggered reveal (per-item delay set in JS) */ html.js .brandwall .cell{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft); } html.js .brandwall .cell.in{ opacity:1; transform:none; } html.js .traits span{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft); } html.js .traits span.in{ opacity:1; transform:none; } /* Hero: eyebrow / lead / cta cascade on load; headline animates word-by-word */ html.js #hero .hero__tag.in{ transition-delay:.05s; } html.js #hero .hero__lead.in{ transition-delay:.4s; } html.js #hero .hero__cta.in{ transition-delay:.56s; } html.js #hero .hero__meta.in{ transition-delay:.24s; } html.js #hero .hero__portrait.in{ transition-delay:.24s; } .hero__h1 .w{ display:inline-block; } @media (prefers-reduced-motion:no-preference){ html.js .hero__h1 .w{ animation:wordUp .85s var(--ease-soft) both; } html.js .hero__h1 .w:nth-child(1){ animation-delay:.14s; } html.js .hero__h1 .w:nth-child(2){ animation-delay:.22s; } html.js .hero__h1 .w:nth-child(3){ animation-delay:.30s; } html.js .hero__h1 .w:nth-child(4){ animation-delay:.38s; } html.js .hero__h1 .w:nth-child(5){ animation-delay:.46s; } html.js .hero__h1 .w:nth-child(6){ animation-delay:.54s; } } /* base state stays opacity:1, so if animations never run the headline still shows */ @keyframes wordUp{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } } /* Gallery photos settle out of a subtle zoom as they reveal */ @media (prefers-reduced-motion:no-preference){ html.js .gallery figure img{ transform:scale(1.06); transition:transform 1.3s var(--ease-soft); } html.js .gallery figure.in img{ transform:scale(1); } } /* Hover micro-interactions */ .gallery figure{ transition:opacity .8s var(--ease-soft), transform .45s var(--ease); } .gallery figure:hover{ transform:translateY(-5px); } .brandwall .cell{ transition:border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .brandwall .cell:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -22px rgba(33,27,21,.45); } .traits span{ transition:transform .3s var(--ease), background .3s; } .traits span:hover{ transform:translateY(-3px); background:rgba(255,255,255,.12); } .partner-tags span:not(.partner-label){ transition:transform .3s var(--ease), border-color .3s; } .partner-tags span:not(.partner-label):hover{ transform:translateY(-3px); border-color:var(--accent); } @media (prefers-reduced-motion:reduce){ .hero__h1 .w{ opacity:1 !important; transform:none !important; } } /* ============================================================ Responsive ============================================================ */ @media (max-width:900px){ .hero__grid{ grid-template-columns:1fr; } .hero__portrait{ max-width:420px; margin-top:20px; } .about{ grid-template-columns:1fr; } .about__media{ max-width:440px; } .nav{ position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background:var(--dark); color:var(--paper); flex-direction:column; align-items:flex-start; justify-content:center; gap:28px; padding:44px; transform:translateX(100%); transition:transform .4s var(--ease); z-index:70; } .nav.open{ transform:none; } .nav a{ color:var(--paper) !important; font-size:22px; font-family:var(--font-display); } .nav a::after{ background:var(--accent-tint); } .nav-toggle{ display:block; z-index:80; position:relative; } .site-header.menu-open .nav-toggle{ color:var(--paper); } } @media (max-width:520px){ body{ font-size:16px; } .gallery{ columns:2 150px; column-gap:10px; } .gallery figure{ margin-bottom:10px; } .creds{ gap:24px 40px; } .hero__portrait figcaption{ left:0; } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; scroll-behavior:auto; } .reveal,.svc,.gallery figure{ opacity:1 !important; transform:none !important; } .marquee__track{ animation:none !important; } }