/* PP Editorial New (Pangram Pangram) — the LOCKED display face per DESIGN.md; Cormorant Garamond was always a stand-in. Self-hosted woff2 so it never falls back. */ @font-face{ font-family:'PP Editorial New'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/PPEditorialNew-Regular.woff2') format('woff2'); } @font-face{ font-family:'PP Editorial New'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/PPEditorialNew-Italic.woff2') format('woff2'); } @font-face{ font-family:'PP Editorial New'; font-style:normal; font-weight:200; font-display:swap; src:url('fonts/PPEditorialNew-Ultralight.woff2') format('woff2'); } @font-face{ font-family:'PP Editorial New'; font-style:italic; font-weight:200; font-display:swap; src:url('fonts/PPEditorialNew-UltralightItalic.woff2') format('woff2'); } @font-face{ font-family:'PP Editorial New'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/PPEditorialNew-Ultrabold.woff2') format('woff2'); } :root{ /* ── Locked palette (9) ── */ --lacquer: #0A3A2A; --emerald: #1C7A50; --gold: #C9A227; --brass: #9C6B2E; --cream: #F0E6D2; --sand: #5B1224; --linen: #1A2342; --indigo-ink:#241047; --indigo: #3D1A78; --font-display:'PP Editorial New', Georgia, 'Times New Roman', serif; --font-body:'Hanken Grotesk', system-ui, -apple-system, sans-serif; --measure: 65ch; --gutter: clamp(24px, 6vw, 120px); --nav-h: 72px; --ease: cubic-bezier(.7,0,.2,1); --arch-w: min(360px, 40vh); --arch-h: min(440px, 46vh); --error: oklch(42% 0.14 22); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--lacquer); color:var(--cream); font-family:var(--font-body); font-weight:400; line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"kern" 1, "liga" 1, "calt" 1; } ::selection{ background:var(--gold); color:var(--lacquer); } /* ───────── Shared type ───────── */ .display{ font-family:var(--font-display); font-weight:500; line-height:1.02; letter-spacing:-0.01em; text-wrap:balance; font-feature-settings:"liga" 1, "dlig" 1, "calt" 1; } .eyebrow{ font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:0.28em; text-transform:uppercase; } .lede{ font-family:var(--font-display); font-weight:400; font-style:italic; line-height:1.28; text-wrap:pretty; } p{ text-wrap:pretty; } .wrap{ max-width:1320px; margin:0 auto; padding-inline:var(--gutter); } section{ position:relative; } /* hairline rule used throughout — "document" register */ .rule{ height:1px; border:0; background:currentColor; opacity:.32; margin:0; } /* ───────── Nav ───────── */ nav{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h); background:transparent; border-bottom:1px solid transparent; display:flex; align-items:center; } /* transparent over the night-sky hero (kills the green-into-indigo seam at the top), solidifying to the lacquer brand floor once scrolled past the hero's first screen */ body.scrolled nav{ background:var(--lacquer); border-bottom:1px solid color-mix(in srgb, var(--gold) 22%, transparent); } nav .wrap{ width:100%; display:flex; align-items:center; justify-content:space-between; } .nav-left{ display:flex; align-items:center; gap:14px; min-width:0; } .nav-mark{ width:34px; height:34px; flex:none; opacity:0; transform:translateX(-8px); transition:opacity .5s ease, transform .5s ease; } .nav-mark svg{ width:100%; height:100%; display:block; } .nav-wordmark{ font-family:var(--font-display); font-weight:500; font-size:21px; letter-spacing:.01em; color:var(--cream); opacity:0; transform:translateX(-8px); transition:opacity .5s ease, transform .5s ease; white-space:nowrap; } body.scrolled .nav-mark, body.scrolled .nav-wordmark{ opacity:1; transform:none; } .nav-links{ display:flex; align-items:center; gap:clamp(20px,3vw,46px); } .nav-links a{ color:var(--gold); text-decoration:none; white-space:nowrap; font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; transition:color .25s, background .25s, box-shadow .25s, transform .15s; position:relative; } /* text links = bold gold-outlined chips */ .nav-links a:not(.cta){ padding:12px 18px; border-radius:1px; box-shadow:inset 0 0 0 1.5px var(--gold); } .nav-links a:not(.cta):hover{ color:var(--lacquer); background:var(--gold); transform:translateY(-1px); } .nav-links a.cta{ color:var(--lacquer); background:var(--gold); opacity:1; padding:14px 22px; border-radius:1px; letter-spacing:.1em; } .nav-links a.cta:hover{ background:var(--cream); color:var(--lacquer); } /* ───────── §1 Hero — opening monogram → archway ───────── */ .hero{ position:relative; height:100svh; min-height:620px; overflow:hidden; background: radial-gradient(70% 42% at 50% 100%, rgba(74,40,26,.45) 0%, transparent 62%), radial-gradient(135% 120% at 50% 26%, #161335 0%, #0f0c28 46%, #08071a 74%, #04030e 100%); } /* no door — strip the doorway architecture; the monogram floats in the sky */ .hero .doorway, .hero .pilaster, .hero .approach{ display:none !important; } /* green opening (the home/threshold) that DISSOLVES into the night sky */ .hero .nightfall{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(120% 105% at 50% 58%, #0f4c36 0%, #0a3a2a 42%, #06281d 78%, #041a12 100%); opacity:1; transition:opacity 1.1s ease 0.15s; } .hero.phase-2 .nightfall{ opacity:0; } .hero .threshold-line{ position:absolute; left:50%; top:50%; z-index:4; width:min(920px,86vw); height:1px; background:linear-gradient(90deg,transparent,var(--gold) 16%,var(--cream) 50%,var(--gold) 84%,transparent); box-shadow:0 0 18px color-mix(in srgb,var(--gold) 52%,transparent); opacity:0; transform:translate(-50%,-50%) scaleX(0); transform-origin:center; pointer-events:none; } .hero.phase-2 .threshold-line{ animation:thresholdOpen 1.15s var(--ease) forwards; } .hero.phase-3 .threshold-line{ animation:thresholdSettle .85s var(--ease) forwards; } @keyframes thresholdOpen{ 0%{opacity:0;transform:translate(-50%,-50%) scaleX(0)} 24%{opacity:1} 100%{opacity:.76;transform:translate(-50%,-50%) scaleX(1)} } @keyframes thresholdSettle{ from{opacity:.76;transform:translate(-50%,-50%) scaleX(1)} to{opacity:0;transform:translate(-50%,18vh) scaleX(.72)} } .hero .mono-layer::before{ content:''; position:absolute; inset:-45%; z-index:-1; border-radius:50%; background:radial-gradient(circle, rgba(201,162,39,.30) 0%, rgba(201,162,39,.10) 38%, transparent 66%); } /* hero content (revealed once the mark is home) */ .hero-content{ position:absolute; left:0; right:0; top:0; padding:calc(var(--nav-h) + 4vh) var(--gutter) 0; text-align:center; z-index:3; opacity:0; transform:translateY(18px); clip-path:inset(0 50% 0 50%); transition:opacity .9s var(--ease) .12s, transform 1s var(--ease) .12s, clip-path 1.05s var(--ease) .05s; } .hero.phase-3 .hero-content{ opacity:1; transform:none; clip-path:inset(0); } .hero-content .ey{ font-family:var(--font-body); font-size:clamp(11px,1vw,13px); letter-spacing:.26em; text-transform:uppercase; font-weight:600; color:var(--brass); display:block; margin-bottom:22px; } .hero-content h1{ font-family:var(--font-display); font-weight:500; line-height:1.04; letter-spacing:-0.015em; margin:0 auto; color:var(--indigo-ink); font-size:clamp(34px,4.8vw,64px); max-width:22ch; text-wrap:balance; } .hero-content h1 em{ font-style:italic; color:var(--lacquer); } .hero-content .meta{ margin-top:26px; font-family:var(--font-body); font-size:clamp(11px,1vw,13px); letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:color-mix(in srgb,var(--indigo-ink) 66%, transparent); display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; } .hero-content .meta .dot{ color:var(--brass); } /* hero CTA — the official inquiry form is the single front door (WhatsApp reach-out vetoed) */ .hero-content .hero-cta{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } .hero-content .hero-cta .btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-size:clamp(13px,1.05vw,15px); font-weight:600; letter-spacing:.03em; padding:13px 28px; border-radius:2px; text-decoration:none; transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s; } .hero-content .hero-cta .btn-primary{ background:var(--gold); color:var(--lacquer); box-shadow:0 8px 26px -10px rgba(201,162,39,.65); } .hero-content .hero-cta .btn-primary:hover{ transform:translateY(-2px); background:var(--cream); } .hero-content .hero-sub{ font-family:var(--font-display); font-style:italic; font-size:clamp(14px,1.3vw,17px); color:color-mix(in srgb,var(--indigo-ink) 58%, transparent); margin:18px auto 0; max-width:48ch; line-height:1.5; letter-spacing:.01em; } /* pilasters flanking the doorway */ .hero .pilaster{ position:absolute; bottom:0; width:15px; height:clamp(220px,38vh,300px); background:color-mix(in srgb,var(--lacquer) 72%, var(--indigo-ink)); z-index:2; opacity:0; } .hero.phase-3 .pilaster{ opacity:1; } .hero .pL{ left:calc(50% - var(--arch-w)/2 - 22px); } .hero .pR{ right:calc(50% - var(--arch-w)/2 - 22px); } /* the approach — a lit path through the negative space to the door */ .hero .approach{ position:absolute; left:50%; transform:translateX(-50%); top:42vh; bottom:calc(var(--arch-h) + 6px); width:30px; z-index:1; opacity:0; pointer-events:none; display:flex; flex-direction:column; align-items:center; } .hero.phase-3 .approach{ opacity:1; } .hero .approach .node{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); opacity:.85; flex:0 0 auto; } .hero .approach .line{ width:1px; flex:1 1 auto; margin-top:9px; background:linear-gradient(to bottom, color-mix(in srgb,var(--brass) 45%, transparent), color-mix(in srgb,var(--gold) 78%, transparent)); } .hero .approach .spark{ position:absolute; top:5%; width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 9px 2px color-mix(in srgb,var(--gold) 65%, transparent); opacity:0; } .hero.phase-3 .approach .spark{ animation:approachDown 4.2s cubic-bezier(.5,0,.5,1) infinite 1s; } @keyframes approachDown{ 0%{ transform:translateY(0); opacity:0; } 14%{ opacity:1; } 86%{ opacity:.9; } 100%{ transform:translateY(var(--approach-travel,200px)); opacity:0; } } /* doorway: green field → arch */ .hero .doorway{ position:absolute; left:50%; bottom:0; width:100%; height:100%; transform:translateX(-50%); background:var(--lacquer); z-index:5; border-radius:0; overflow:hidden; } .hero .doorway .glow{ position:absolute; left:50%; bottom:0; width:300px; height:320px; transform:translateX(-50%); background:radial-gradient(60% 60% at 50% 40%, color-mix(in srgb,var(--gold) 60%, transparent) 0%, transparent 70%); opacity:0; } .hero.phase-3 .doorway .glow{ animation:breathe 4.6s ease-in-out infinite; } @keyframes breathe{ 0%,100%{ opacity:.3; transform:translateX(-50%) scale(.92); } 50%{ opacity:.72; transform:translateX(-50%) scale(1.08); } } /* embers rising inside the doorway */ .hero .motes{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:var(--arch-w); height:var(--arch-h); z-index:6; pointer-events:none; opacity:0; } .hero .mote{ position:absolute; bottom:18px; width:4px; height:4px; border-radius:50%; background:color-mix(in srgb,var(--gold) 88%, transparent); opacity:0; animation:moteRise linear infinite; } @keyframes moteRise{ 0%{ transform:translateY(0); opacity:0; } 14%{ opacity:.9; } 86%{ opacity:.6; } 100%{ transform:translateY(-260px); opacity:0; } } /* monogram layer (gold) — draws, then travels into the arch */ .hero .mono-layer{ position:absolute; left:50%; top:50%; width:min(46vh,440px); aspect-ratio:1; z-index:7; transform:translate(-50%,-50%) scale(1); will-change:transform; } .hero .mono-layer svg{ width:100%; height:100%; overflow:visible; display:block; } .hero .mk-stroke{ stroke-dasharray:1; stroke-dashoffset:1; } .hero .mk-fillY{ opacity:0; transform-box:fill-box; transform-origin:50% 0%; transform:scaleY(0); } .hero .mk-dot{ opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(0); } /* monogram draw — collapsed from ~2.3s to ~1.4s, one confident decelerating hand (filmmaker) */ .hero.playing #t-vert{ animation:growY .5s cubic-bezier(.22,1,.36,1) 0s forwards; } .hero.playing #mark-circle{ animation:draw .9s cubic-bezier(.22,1,.36,1) .12s forwards; } .hero.playing #t-cross{ animation:draw .55s cubic-bezier(.22,1,.36,1) .22s forwards; } .hero.playing #left-flourish{ animation:draw .3s cubic-bezier(.22,1,.36,1) .62s forwards; } .hero.playing #v-left{ animation:growY .45s cubic-bezier(.22,1,.36,1) .42s forwards; } .hero.playing #v-right{ animation:draw .45s cubic-bezier(.22,1,.36,1) .58s forwards; } .hero.playing #right-flourish{ animation:draw .35s cubic-bezier(.22,1,.36,1) .82s forwards; } .hero.playing #mark-dot{ animation:pop .4s cubic-bezier(.22,1,.36,1) 1.0s forwards; } @keyframes draw{ to{ stroke-dashoffset:0; } } @keyframes growY{ to{ opacity:1; transform:scaleY(1); } } @keyframes pop{ to{ opacity:1; transform:scale(1); } } /* a single warm ember bloom as the mark lands (the period at the end), then a slow 6s lantern */ .hero.phase-3 .mono-layer svg{ animation:emberBloom 1.2s ease-out forwards, lantern 6s ease-in-out 1.2s infinite; } @keyframes emberBloom{ 0%{ filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 28%, transparent)); } 42%{ filter:drop-shadow(0 0 18px color-mix(in srgb,var(--gold) 62%, transparent)); } 100%{ filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gold) 40%, transparent)); } } @keyframes lantern{ 0%,100%{ filter:drop-shadow(0 0 8px color-mix(in srgb,var(--gold) 32%, transparent)); } 50%{ filter:drop-shadow(0 0 18px color-mix(in srgb,var(--gold) 78%, transparent)); } } /* opening caption (during the draw, on the green field) */ .hero .opening-caption{ position:absolute; left:0; right:0; top:62%; text-align:center; z-index:8; color:var(--gold); opacity:0; } .hero.playing .opening-caption{ opacity:1; transition:opacity .9s ease 2.2s; } .hero.phase-2 .opening-caption{ opacity:0; transition:opacity .5s ease; } .hero .opening-caption .wm{ font-family:var(--font-body); font-size:14px; letter-spacing:.34em; text-transform:uppercase; font-weight:600; } .hero .opening-caption .rp{ display:block; margin-top:12px; font-family:var(--font-display); font-style:italic; font-size:clamp(17px,2vw,22px); letter-spacing:.02em; text-transform:none; color:color-mix(in srgb,var(--gold) 78%, var(--cream)); } /* scroll cue after arrival */ .hero .scroll-cue{ position:absolute; bottom:24px; right:var(--gutter); z-index:9; font-family:var(--font-body); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:color-mix(in srgb,var(--indigo-ink) 52%, transparent); opacity:0; } .hero.phase-3 .scroll-cue{ opacity:1; transition:opacity .6s ease 1s; } /* during the opening, lock scroll + hide nav */ body.hero-opening{ overflow:hidden; } body.hero-opening nav{ opacity:0; pointer-events:none; } nav{ transition:opacity .6s ease, background .5s ease, border-color .5s ease; } /* ───────── Generic section scaffold ───────── */ .sec{ padding-block:clamp(80px,13vh,170px); } .sec-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(34px,5vh,64px); } .sec-num{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(22px,2.4vw,30px); opacity:.6; } .sec-kicker{ flex:1; } /* light sections share text colors */ .on-light{ color:var(--indigo-ink); } .on-light .eyebrow{ color:#6F4A1C; } .on-light .rule{ color:var(--brass); } .on-dark{ color:var(--linen); } .on-dark .eyebrow{ color:var(--gold); } .on-dark .rule{ color:var(--gold); } /* ── §2 What TammiVille Is (cream) — big-type grid break ── */ .s-what{ background:var(--cream); overflow:hidden; border-top:1px solid var(--brass); } .what-statement{ margin:0; color:var(--indigo-ink); font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em; } .what-statement .line-sm{ display:block; font-size:clamp(22px,3.2vw,40px); line-height:1.04; max-width:18ch; } .what-statement .known{ display:block; font-style:italic; color:var(--brass); font-size:clamp(92px,20vw,272px); line-height:.82; letter-spacing:-0.045em; margin:.04em 0 .02em -0.04em; } .what-aside{ margin-top:clamp(40px,7vh,96px); max-width:46ch; margin-left:auto; font-size:clamp(17px,1.25vw,20px); color:color-mix(in srgb,var(--indigo-ink) 88%, transparent); } /* ── §3 The Founder — a true editorial COVER (lacquer ground) ── Apple-Jobs reverence × Vogue/TIME cover authority × quiet luxury. The daring lives in SCALE + COMPOSITION, not effects: a commanding near-full-bleed portrait, an ENORMOUS masthead that crosses OVER the image (the cover move), a small cornered gele inset, an off-grid editorial column. Cream type, gold-italic accent, hairlines only. `.s-about .grid` is preserved as the scroll-reveal target. */ .s-about{ background:var(--lacquer); overflow:hidden; } /* ═══ §3 FOUNDER — "She-EO Masthead Cover" (Mock 4, integrated 2026-06-26) ═══ Type NEVER on her: masthead band on clean lacquer · color portrait in a cream DECKLED mat · editorial type column · documentary proof row. Shares the locked palette + PP Editorial/Hanken. Supersedes the .cover-* spread above (dead). */ .s-about .masthead-band{ text-align:center; padding-block:clamp(28px,5vh,64px); } .s-about .masthead-band .mh-title{ margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(40px,7vw,104px); line-height:.94; letter-spacing:-.02em; color:var(--cream); } .s-about .masthead-band .issue-line{ display:block; margin-top:clamp(10px,1.4vw,18px); font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); } .s-about .band-rule{ height:1px; border:0; width:100%; background:color-mix(in srgb,var(--gold) 32%, transparent); margin:0; } .s-about .split-wrap{ position:relative; } .s-about .split{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(28px,4vw,72px); align-items:center; padding-block:clamp(48px,8vh,96px); } .s-about .img-panel{ display:flex; justify-content:center; } .s-about .img-frame{ position:relative; width:100%; max-width:560px; aspect-ratio:4/5; background:transparent; overflow:visible; --mat:clamp(18px,2.2vw,24px); } .s-about .img-frame .mat{ position:absolute; inset:0; z-index:0; background:var(--cream); filter:url(#deckle) drop-shadow(0 24px 60px rgba(0,0,0,.38)); } .s-about .img-frame img{ position:absolute; top:var(--mat); left:var(--mat); z-index:1; width:calc(100% - 2*var(--mat)); height:calc(100% - 2*var(--mat)); object-fit:cover; object-position:center 30%; display:block; border-radius:2px; filter:saturate(1.12) contrast(1.03) brightness(1.02); } .s-about .img-frame .gold-rule{ position:absolute; inset:var(--mat); z-index:2; pointer-events:none; border:1.5px solid var(--gold); border-radius:2px; } .s-about .type-col{ display:flex; flex-direction:column; justify-content:center; } .s-about .pullquote{ margin:0; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(24px,2.6vw,40px); line-height:1.24; letter-spacing:-.005em; color:var(--gold); max-width:22ch; text-wrap:balance; } .s-about .pullquote::first-letter{ font-size:1.9em; line-height:.8; float:left; padding:.02em .1em 0 0; color:var(--gold); font-style:italic; } .s-about .q-hairline{ height:1px; border:0; background:var(--gold); opacity:.5; width:clamp(64px,8vw,96px); margin:clamp(24px,3.5vh,38px) 0; } .s-about .bio{ margin:0; font-family:var(--font-body); color:color-mix(in srgb,var(--cream) 86%, transparent); font-size:clamp(15px,1.05vw,17px); line-height:1.72; max-width:46ch; } .s-about .cred{ margin:clamp(26px,4vh,40px) 0 0; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); } .s-about .cred .sep{ color:color-mix(in srgb,var(--cream) 45%, transparent); } .s-about .folio{ position:absolute; left:clamp(4px,1.4vw,28px); top:50%; transform:translateY(-50%); writing-mode:vertical-rl; font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:color-mix(in srgb,var(--cream) 60%, transparent); } .s-about .evidence{ padding-top:clamp(40px,6vh,72px); padding-bottom:clamp(8px,2vh,24px); } .s-about .evidence-head{ max-width:62ch; margin-bottom:clamp(26px,4vh,44px); } .s-about .evidence-head .eyebrow{ display:block; color:var(--gold); margin-bottom:clamp(10px,1.4vh,16px); } .s-about .evidence-intro{ margin:0; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(18px,1.9vw,28px); line-height:1.34; letter-spacing:-.005em; color:color-mix(in srgb,var(--cream) 92%, transparent); text-wrap:balance; } .s-about .evidence-rule{ height:1px; border:0; width:100%; background:color-mix(in srgb,var(--gold) 32%, transparent); margin:clamp(22px,3.4vh,38px) 0 clamp(30px,4.5vh,52px); } .s-about .evidence-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px,3vw,52px); align-items:start; } .s-about .ev{ display:flex; flex-direction:column; } .s-about .ev-frame{ position:relative; margin:0 0 clamp(16px,1.8vw,22px); aspect-ratio:4/5; overflow:hidden; border-radius:4px; background:var(--lacquer); box-shadow:0 18px 44px rgba(0,0,0,.32); } .s-about .ev-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.12) contrast(1.03) brightness(1.02); } .s-about .ev-frame .inset{ position:absolute; inset:clamp(10px,1.4vw,18px); z-index:2; pointer-events:none; border:1px solid color-mix(in srgb,var(--gold) 34%, transparent); } .s-about .ev p{ margin:0; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(15px,1.25vw,19px); letter-spacing:-.005em; color:color-mix(in srgb,var(--cream) 90%, transparent); line-height:1.36; text-wrap:balance; } .s-about .e-door img{ object-position:50% 25%; } .s-about .e-jollof img{ object-position:50% 50%; filter:saturate(1.3) contrast(1.05) brightness(1.03); } .s-about .e-dining img{ object-position:60% 35%; } @media(max-width:760px){ .s-about .split{ grid-template-columns:1fr; gap:clamp(28px,6vh,44px); padding-block:clamp(36px,6vh,56px); } .s-about .img-panel{ order:1; } .s-about .type-col{ order:2; } .s-about .folio{ display:none; } .s-about .evidence-row{ grid-template-columns:1fr; gap:clamp(28px,6vh,40px); } } /* ── MOBILE-FIRST: portrait full-bleed top, masthead overlapping its lower third, coverlines below. One stacked column, zero overflow. ── */ .s-about .grid.cover{ display:grid; grid-template-columns:1fr; gap:clamp(30px,6vw,48px); align-items:start; } /* The stage holds the portrait + the masthead that crosses it + inset */ .cover-stage{ position:relative; margin:0; } /* COMMANDING portrait — the largest object on the page, tall, near-bleed */ .cover-portrait{ position:relative; margin:0; width:100%; aspect-ratio:3/4; overflow:hidden; background:var(--lacquer); } .cover-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 4%; display:block; } /* a single thin gold hairline frames the portrait — the one disciplined line */ .cover-portrait::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; border:1px solid color-mix(in srgb,var(--gold) 34%, transparent); } /* lacquer→transparent scrim rising from the base, so cream type stays legible where the masthead crosses the image. Quiet, no hard box. */ .cover-portrait::before{ content:""; position:absolute; left:0; right:0; bottom:0; z-index:1; height:58%; pointer-events:none; background:linear-gradient(to top, var(--lacquer) 0%, color-mix(in srgb,var(--lacquer) 80%, transparent) 34%, color-mix(in srgb,var(--lacquer) 30%, transparent) 70%, transparent 100%); } /* small tracked kicker — sits above the masthead on mobile */ .cover-kicker{ position:absolute; left:clamp(4px,2vw,14px); bottom:calc(100% - 34px); z-index:3; font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:color-mix(in srgb,var(--cream) 66%, transparent); } /* ENORMOUS masthead — crosses OVER the lower portrait (the cover move) */ .cover-masthead{ position:absolute; left:clamp(2px,1.5vw,10px); right:clamp(8px,3vw,18px); bottom:clamp(14px,3vw,28px); z-index:3; margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(54px,17vw,118px); line-height:.9; letter-spacing:-0.025em; color:var(--cream); text-wrap:balance; } .cover-masthead em{ display:block; font-style:italic; color:var(--gold); } /* SECOND cover element — gele inset, cornered, secondary, off-grid. A wider lacquer keyline + a soft shadow lift it off the candid so the eye reads it as a distinct SECOND photo, not buried on the candid. Shadow derives from existing tokens only (no new hex). */ .cover-inset{ position:absolute; z-index:2; margin:0; top:clamp(14px,4vw,26px); right:clamp(-6px,-1vw,-14px); width:clamp(116px,30vw,168px); aspect-ratio:4/5; overflow:hidden; background:var(--lacquer); border:1px solid color-mix(in srgb,var(--gold) 38%, transparent); outline:10px solid var(--lacquer); outline-offset:0; box-shadow:0 18px 44px color-mix(in srgb,var(--indigo-ink) 60%, transparent), 0 4px 14px color-mix(in srgb,var(--indigo-ink) 44%, transparent); } .cover-inset img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 12%; display:block; } /* ── THE EDITORIAL COLUMN ── */ .cover-copy{ max-width:52ch; } /* COVERLINE — magazine-style italic, smaller than a pull-quote headline */ .coverline{ margin:0 0 clamp(24px,3.5vh,38px); font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(20px,2.3vw,30px); line-height:1.28; color:color-mix(in srgb,var(--cream) 92%, transparent); max-width:26ch; } .cover-hairline{ height:1px; border:0; background:var(--gold); opacity:.5; width:clamp(56px,8vw,96px); margin:0 0 clamp(26px,4vh,40px); } .cover-bio{ margin:0; max-width:50ch; color:color-mix(in srgb,var(--cream) 84%, transparent); font-size:clamp(15px,1.1vw,17px); line-height:1.7; } .s-about .sig{ margin-top:clamp(30px,4.5vh,46px); font-family:var(--font-display); font-size:clamp(22px,2.2vw,30px); color:var(--gold); line-height:1.1; } .s-about .sig small{ display:block; font-family:var(--font-body); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:color-mix(in srgb,var(--cream) 60%, transparent); margin-top:10px; } /* ── DESKTOP — off-grid, asymmetric cover spread. The portrait runs LARGE and tall on the right; the masthead crosses its lower third and bleeds left into open lacquer; the editorial column holds the left air. ── */ @media(min-width:900px){ .s-about .grid.cover{ grid-template-columns:1fr minmax(420px, 1.18fr); gap:clamp(40px,5vw,80px); align-items:end; } /* editorial column leads; sits LOW (rebalances the higher portrait) */ .cover-copy{ order:1; padding-bottom:clamp(4px,1.4vh,20px); } .cover-stage{ order:2; } .cover-portrait{ aspect-ratio:4/5; } .cover-portrait img{ object-position:center 3%; } /* kicker runs VERTICAL up the left edge of the stage */ .cover-kicker{ left:clamp(-40px,-3vw,-58px); bottom:auto; top:50%; writing-mode:vertical-rl; transform:rotate(180deg) translateX(-50%); transform-origin:left center; letter-spacing:.4em; } /* masthead pushed to ~150-170px. It crosses the PORTRAIT and bleeds RIGHT, overhanging the portrait's right edge into the page's open lacquer margin — its LEFT edge stays inside the portrait so it never reaches the editorial copy column to the left. (Defect 1 fix.) */ .cover-masthead{ left:clamp(8px,2vw,28px); right:clamp(-96px,-7vw,-150px); bottom:clamp(-2px,1.2vw,14px); font-size:clamp(96px,12vw,168px); line-height:.86; letter-spacing:-0.03em; text-align:right; } .cover-masthead em{ margin-left:.02em; } /* gele inset overhangs the portrait's bottom-LEFT corner into plain lacquer — it sits half off the candid so the eye reads TWO portraits, lifted by a lacquer keyline + soft shadow. (Defect 2 fix.) */ .cover-inset{ top:auto; bottom:clamp(-26px,-3vw,-52px); left:clamp(-70px,-5.5vw,-104px); right:auto; width:clamp(168px,15vw,216px); } } /* ── NARROW-DESKTOP BAND (900–1150px) — the copy column is proportionally wider here, so the gele's left overhang would land on the bio. Pull the gele almost fully onto the candid (tiny lacquer overhang only) and shrink it a touch so it clears .coverline + .cover-bio at zero overlap, while its 10px keyline + shadow keep it reading as a distinct second photo. ── */ @media(min-width:900px) and (max-width:1150px){ .cover-inset{ left:clamp(-18px,-1.6vw,-26px); bottom:clamp(-14px,-1.6vw,-24px); width:clamp(140px,14vw,164px); } /* keep the full "SiDone" on-screen in this band: ease the right bleed */ .cover-masthead{ right:clamp(-40px,-4vw,-72px); } } /* ── §4 The Program (cream) ── */ .s-program{ background:var(--cream); } .prog-grid{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--brass); } .prog-item{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,3vw,44px); align-items:baseline; padding:clamp(22px,3vh,34px) 0; border-bottom:1px solid color-mix(in srgb,var(--brass) 45%, transparent); } .prog-item .idx{ font-family:var(--font-display); font-style:italic; color:var(--brass); font-size:clamp(20px,2vw,26px); } .prog-item h3{ margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(18px,1.8vw,24px); color:var(--indigo-ink); line-height:1.08; } .prog-item p{ margin:6px 0 0; color:color-mix(in srgb,var(--indigo-ink) 82%, transparent); max-width:46ch; } .prog-item .pair{ display:flex; flex-direction:column; gap:6px; } @media(min-width:760px){ .prog-item{ grid-template-columns:auto 1fr; } /* label and description as an aligned spec-sheet row: fixed label column, generous gap, so every description starts on the same axis (the document register) */ .prog-item .pair{ flex-direction:row; align-items:baseline; gap:clamp(28px,4vw,64px); } .prog-item h3{ flex:0 0 clamp(150px,16vw,210px); } .prog-item p{ margin:0; flex:1; } } /* ── §5 Who It's For (warm sand) — hard-left asymmetry + bleed ── */ .s-who{ background:var(--sand); position:relative; overflow:hidden; } .who-bleed{ position:absolute; right:-0.06em; top:54%; transform:translateY(-50%); font-family:var(--font-display); font-style:italic; font-weight:500; font-size:min(64vh,46vw); line-height:1; letter-spacing:-0.04em; color:color-mix(in srgb,var(--brass) 15%, transparent); pointer-events:none; user-select:none; z-index:0; } .s-who .wrap{ position:relative; z-index:1; } .who-inner{ max-width:none; } .s-who .lede{ font-size:clamp(28px,4.4vw,62px); color:var(--indigo-ink); max-width:16ch; line-height:1.05; } .who-rows{ margin-top:clamp(30px,5vh,56px); display:grid; gap:0; } .who-row{ display:grid; grid-template-columns:1fr; gap:6px 40px; padding:clamp(20px,2.6vh,30px) 0; border-top:1px solid color-mix(in srgb,var(--brass) 40%, transparent); } .who-row:last-child{ border-bottom:1px solid color-mix(in srgb,var(--brass) 40%, transparent); } .who-row dt{ font-family:var(--font-display); font-style:italic; font-size:clamp(20px,2.1vw,28px); color:var(--brass); } .who-row dd{ margin:0; color:color-mix(in srgb,var(--indigo-ink) 86%, transparent); max-width:52ch; } @media(min-width:760px){ .who-inner{ max-width:60%; } .who-row{ grid-template-columns:.5fr 1.5fr; align-items:baseline; } } /* ── §6 Inquiry (linen) — a letter you sign, not a form ── */ .s-inquire{ background:var(--linen); } .inquire-wrap{ display:grid; gap:clamp(34px,6vh,72px); } .inquire-intro h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(24px,2.4vw,34px); line-height:1.04; color:var(--indigo-ink); margin:0; max-width:16ch; } .inquire-intro p{ color:color-mix(in srgb,var(--indigo-ink) 78%, transparent); max-width:48ch; margin-top:18px; } /* legacy "letter" inquiry-form styles removed — the form is now .inquiry-form (structured fields) */ .seal-btn{ justify-self:start; font-family:var(--font-body); font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; background:var(--indigo-ink); color:var(--cream); border:0; padding:17px 34px; border-radius:1px; cursor:pointer; white-space:nowrap; transition:background .25s, transform .15s; } .seal-btn:hover{ background:var(--indigo); } .seal-btn:active{ transform:translateY(1px); } .form-note{ font-size:13px; color:color-mix(in srgb,var(--indigo-ink) 76%, transparent); letter-spacing:.02em; margin-top:22px; } /* official inquiry form — structured labeled fields on the linen section, brand warmth in the copy */ .inquiry-form{ max-width:820px; } .form-grid{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3vh,26px); } @media(min-width:680px){ .form-grid{ grid-template-columns:1fr 1fr; column-gap:clamp(20px,3vw,34px); } .form-grid .field-full{ grid-column:1 / -1; } } .inquiry-form .field{ display:flex; flex-direction:column; gap:8px; } .inquiry-form label{ font-family:var(--font-body); font-size:12px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:color-mix(in srgb,var(--cream) 80%, transparent); } .inquiry-form label .opt{ text-transform:none; letter-spacing:.01em; font-weight:400; font-style:italic; color:color-mix(in srgb,var(--cream) 72%, transparent); margin-left:7px; } .inquiry-form input, .inquiry-form textarea{ font-family:var(--font-body); font-size:16px; color:var(--cream); background:color-mix(in srgb,var(--cream) 5%, transparent); border:1px solid color-mix(in srgb,var(--brass) 48%, transparent); border-radius:2px; padding:14px 15px; width:100%; transition:border-color .2s, background .2s; } .inquiry-form input::placeholder, .inquiry-form textarea::placeholder{ color:color-mix(in srgb,var(--cream) 36%, transparent); } .inquiry-form input:focus, .inquiry-form textarea:focus{ outline:none; border-color:var(--gold); background:color-mix(in srgb,var(--gold) 8%, transparent); } .inquiry-form textarea{ resize:vertical; min-height:120px; line-height:1.5; } .form-actions{ margin-top:clamp(28px,4vh,40px); display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; } .form-actions .form-note{ margin-top:0; max-width:44ch; color:color-mix(in srgb,var(--cream) 66%, transparent); } .privacy-note{ max-width:68ch; color:color-mix(in srgb,var(--cream) 72%, transparent); } .privacy-note a{ color:var(--gold); text-underline-offset:3px; } .confirm{ display:none; margin-top:24px; max-width:780px; padding:clamp(28px,4vh,44px) clamp(24px,4vw,40px); border:1px solid color-mix(in srgb,var(--brass) 55%, transparent); background:color-mix(in srgb,var(--gold) 8%, var(--linen)); color:var(--indigo-ink); font-family:var(--font-display); font-style:italic; font-size:clamp(20px,2vw,28px); line-height:1.4; } .confirm.show{ display:block; } /* the consultation handoff — booking CTA inside the success confirmation */ .confirm-cta{ display:block; width:fit-content; margin-top:26px; font-family:var(--font-body); font-style:normal; font-size:14px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; background:var(--gold); color:var(--lacquer); padding:15px 32px; border-radius:2px; text-decoration:none; transition:transform .2s var(--ease), background .2s; } .confirm-cta:hover{ transform:translateY(-2px); background:var(--cream); } .confirm-cta:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; } .confirm::before{ content:"Inquiry received"; display:block; font-size:clamp(14px,1.2vw,17px); letter-spacing:.18em; text-transform:uppercase; color:var(--brass); font-style:normal; font-family:var(--font-body); font-weight:600; margin-bottom:16px; } @media(min-width:760px){ .seal-btn{ justify-self:end; } } /* ───────── Aug 15 info-session band (below hero) — the primary conversion moment ───────── */ .s-event{ background:linear-gradient(165deg, var(--lacquer) 0%, color-mix(in srgb,var(--lacquer) 82%, var(--emerald)) 100%); padding-block:clamp(48px,8vh,92px); border-top:1px solid color-mix(in srgb,var(--gold) 32%, transparent); border-bottom:1px solid color-mix(in srgb,var(--gold) 32%, transparent); text-align:center; } .event-band{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:12px; } .s-event .eyebrow{ color:var(--gold); margin:0; max-width:34ch; font-size:clamp(12px,1vw,13px); letter-spacing:.18em; } .event-date{ font-family:var(--font-display); font-weight:500; line-height:1; font-size:clamp(34px,5.4vw,62px); letter-spacing:-0.02em; color:var(--gold); margin:2px 0 0; } /* both zones co-equal — WAT is NOT a footnote */ .event-zones{ margin-top:4px; font-family:var(--font-body); font-size:clamp(15px,1.9vw,21px); letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--cream); display:inline-flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; align-items:baseline; } .event-zones .dot{ color:var(--gold); } .event-cta{ margin-top:14px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .event-cta .btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-size:clamp(13px,1.05vw,15px); font-weight:600; letter-spacing:.03em; padding:14px 30px; border-radius:2px; text-decoration:none; transition:transform .2s var(--ease), background .2s, color .2s; } .event-cta .btn-primary{ background:var(--gold); color:var(--lacquer); box-shadow:0 8px 26px -10px rgba(201,162,39,.65); } .event-cta .btn-primary:hover{ transform:translateY(-2px); background:var(--cream); } .event-cta .btn-secondary{ color:var(--gold); background:transparent; box-shadow:inset 0 0 0 1.5px var(--gold); } .event-cta .btn-secondary:hover{ transform:translateY(-2px); color:var(--lacquer); background:var(--cream); box-shadow:inset 0 0 0 1.5px var(--cream); } .event-cta .btn:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; } .event-note{ margin-top:6px; font-family:var(--font-display); font-style:italic; font-size:15px; letter-spacing:.01em; color:color-mix(in srgb,var(--cream) 62%, transparent); } /* ───────── Waitlist section (mirrors #inquire: dark ground, cream form) ───────── */ .s-waitlist{ background:var(--linen); padding-block:clamp(96px,15vh,190px); color:var(--cream); } .s-waitlist .eyebrow, .s-waitlist .rule{ color:var(--gold); } .s-waitlist .inquire-intro h2{ color:var(--cream); } .confirm.confirm-waitlist::before{ content:"You're on the list"; } /* ── §7 Family portal (indigo) — a different world, maximal ── */ .s-portal{ color:var(--linen); overflow:hidden; position:relative; padding-block:clamp(56px,9vh,104px); background: radial-gradient(120% 90% at 82% -15%, color-mix(in srgb,var(--gold) 24%, var(--indigo)) 0%, transparent 52%), radial-gradient(130% 100% at -10% 115%, color-mix(in srgb,var(--indigo-ink) 94%, #000) 0%, transparent 58%), linear-gradient(162deg, var(--indigo) 0%, var(--indigo-ink) 100%); } /* faint constellation grain */ .s-portal::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background: radial-gradient(1.5px 1.5px at 18% 28%, color-mix(in srgb,var(--gold) 70%, transparent) 0%, transparent 60%), radial-gradient(1.5px 1.5px at 72% 18%, color-mix(in srgb,var(--cream) 60%, transparent) 0%, transparent 60%), radial-gradient(1.5px 1.5px at 88% 64%, color-mix(in srgb,var(--gold) 55%, transparent) 0%, transparent 60%), radial-gradient(1.5px 1.5px at 34% 80%, color-mix(in srgb,var(--cream) 50%, transparent) 0%, transparent 60%); } .portal-grid{ display:grid; grid-template-columns:1fr; gap:clamp(44px,6vw,84px); align-items:center; position:relative; z-index:1; } .s-portal .eyebrow{ color:var(--gold); } .s-portal h2{ font-family:var(--font-display); font-weight:500; line-height:1.0; font-size:clamp(30px,4.4vw,56px); letter-spacing:-0.02em; margin:16px 0 0; color:var(--cream); max-width:16ch; } .s-portal h2 em{ font-style:italic; color:var(--gold); } .s-portal p{ margin:18px 0 0; max-width:46ch; color:color-mix(in srgb,var(--linen) 86%, transparent); font-size:clamp(16px,1.2vw,19px); } .portal-cta{ display:inline-block; margin-top:34px; text-decoration:none; font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--indigo-ink); background:var(--gold); padding:16px 30px; border-radius:1px; transition:background .25s, color .25s, transform .15s; } .portal-cta:hover{ background:var(--cream); transform:translateY(-2px); } /* .portal-panel dashboard skeleton removed — read as a never-resolving loading state (CD + web-designer flagged) */ /* portal dashboard panel cut — single composed copy column (no fake-loading skeleton) */ @media(min-width:880px){ .portal-grid{ grid-template-columns:1fr; max-width:46ch; } } /* ── §8 Footer (lacquer) ── */ footer{ background:var(--lacquer); padding-block:clamp(64px,9vh,110px) 40px; } .foot-grid{ display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,70px); align-items:start; } .foot-mark{ width:96px; height:96px; } .foot-mark svg{ width:100%; height:100%; } .foot-word{ font-family:var(--font-display); font-size:30px; color:var(--cream); margin-top:18px; } .foot-tag{ color:color-mix(in srgb,var(--cream) 60%, transparent); font-style:italic; font-family:var(--font-display); font-size:18px; margin-top:6px; } .foot-col h4, .foot-col h3{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; font-weight:600; } .foot-col a, .foot-col p{ color:color-mix(in srgb,var(--cream) 82%, transparent); text-decoration:none; margin:0 0 9px; display:block; font-size:15px; } .foot-col a:hover{ color:var(--gold); } .foot-faith{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:16px; } .foot-base{ margin-top:clamp(40px,6vh,70px); padding-top:24px; border-top:1px solid color-mix(in srgb,var(--gold) 22%, transparent); display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between; color:color-mix(in srgb,var(--cream) 70%, transparent); font-size:12px; letter-spacing:.08em; } @media(min-width:820px){ .foot-grid{ grid-template-columns:1.3fr 1fr 1fr; } } /* ───────── Brand mark (nav + footer) — real monogram, static ───────── */ .markv{ display:block; width:100%; height:100%; overflow:visible; } /* reduced motion: skip the hero choreography, show the resolved state */ @media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .hero .mk-stroke{ stroke-dashoffset:0 !important; } .hero .mk-fillY{ opacity:1 !important; transform:none !important; } .hero .mk-dot{ opacity:1 !important; transform:scale(1) !important; } .hero .mono-layer svg, .hero .doorway .glow, .hero .mote, .hero .approach .spark, .hero .threshold-line{ animation:none !important; } .hero .threshold-line{ display:none; } .hero .hero-content{ clip-path:none !important; transition:none !important; } } /* ───────── Structural / hierarchy additions ───────── */ /* §3 + §6 breathe more — the portrait and the letter are the two most personal surfaces; they need additional vertical air */ .s-about{ padding-block:clamp(96px,15vh,200px); } .s-inquire{ padding-block:clamp(96px,15vh,190px); } /* sec-num: slightly more present — at .6 opacity on cream/sand it can read as a decoration rather than an orientation anchor */ .sec-num{ opacity:.72; } /* who-bleed: rein it in on narrow viewports so it doesn't swallow the copy */ @media(max-width:760px){ .who-bleed{ font-size:min(48vw,52vh); opacity:.08; } } /* prevent any bleed/absolute-positioned element from causing horizontal scroll */ body{ overflow-x:hidden; } /* inquiry sign-row: at mobile, stack vertically with CTA left-aligned and give the signature line a clear label hierarchy */ @media(max-width:759px){ .seal-btn{ justify-self:start; width:100%; text-align:center; } } /* Opening composition — phone copy must resolve inside the viewport, not preserve the desktop cover line lengths and clip them at the edge. */ @media(max-width:520px){ :root{ --gutter:22px; } .hero{ min-height:720px; } .hero-content{ width:100%; max-width:100%; padding:calc(var(--nav-h) + 3vh) 22px 0; overflow-wrap:anywhere; } .hero-content .ey{ max-width:30ch; margin:0 auto 16px; font-size:10px; line-height:1.55; letter-spacing:.18em; } .hero-content h1{ width:100%; max-width:10.5ch; font-size:clamp(34px,10.5vw,41px); line-height:1.01; text-wrap:balance; } .hero-content .hero-sub{ width:100%; max-width:32ch; margin-top:16px; font-size:15px; line-height:1.4; } .hero-content .meta{ flex-direction:column; align-items:center; gap:4px; margin-top:20px; font-size:10px; line-height:1.45; letter-spacing:.16em; } .hero-content .meta .dot{ display:none; } .hero-content .hero-cta{ margin-top:24px; } .hero-content .hero-cta .btn{ padding:13px 22px; } .hero .mono-layer{ top:73%; width:min(72vw,280px); } .hero .scroll-cue{ display:none; } } /* portal-grid: at mid-range (880px+) the panel risks being too narrow; ensure the copy column has enough room */ /* (portal-grid mid-range two-column override removed with the panel) */ /* foot-mark: ensure the svg fills its container on all browsers */ .foot-mark{ display:block; } .foot-mark svg{ display:block; width:100%; height:100%; } /* ── Emil Kowalski motion additions ── */ /* Custom easing — stronger than browser defaults */ :root{ --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); } /* Fix nav hover: explicit properties + custom curve */ .nav-links a{ transition: color 180ms var(--ease-out-strong), background 180ms var(--ease-out-strong), box-shadow 180ms var(--ease-out-strong), transform 120ms var(--ease-out-strong); } /* Seal button: scale-on-press for tactile feedback */ .seal-btn{ transition: background 220ms var(--ease-out-strong), transform 120ms var(--ease-out-strong); } .seal-btn:active{ transform:scale(0.97); } /* Portal CTA: intentional hover lift with correct ease */ .portal-cta{ transition: background 220ms var(--ease-out-strong), color 220ms var(--ease-out-strong), transform 180ms var(--ease-out-strong); } /* Scroll reveal — elements appear as the reader arrives. Duration 640ms: composed, unhurried — the weight of a page turning */ .reveal{ opacity:0; transform:translateY(14px); transition: opacity 640ms var(--ease-out-strong), transform 640ms var(--ease-out-strong); } .reveal.visible{ opacity:1; transform:none; } /* Stagger — list items cascade in with 65ms between each */ .stagger-children > *{ opacity:0; transform:translateY(10px); transition: opacity 520ms var(--ease-out-strong), transform 520ms var(--ease-out-strong); } .stagger-children.visible > *:nth-child(1){ transition-delay:0ms; opacity:1; transform:none; } .stagger-children.visible > *:nth-child(2){ transition-delay:65ms; opacity:1; transform:none; } .stagger-children.visible > *:nth-child(3){ transition-delay:130ms; opacity:1; transform:none; } .stagger-children.visible > *:nth-child(4){ transition-delay:195ms; opacity:1; transform:none; } .stagger-children.visible > *:nth-child(5){ transition-delay:260ms; opacity:1; transform:none; } .stagger-children.visible > *:nth-child(6){ transition-delay:325ms; opacity:1; transform:none; } /* Honour prefers-reduced-motion */ @media(prefers-reduced-motion:reduce){ .reveal, .stagger-children > *{ opacity:1; transform:none; transition:none; } } /* Scroll-offset for fixed nav — anchored sections clear the 72px bar */ section[id], footer[id]{ scroll-margin-top:calc(var(--nav-h) + 16px); } /* Heading reset inside sec-head so h2 doesn't collapse the flex row */ .sec-head h2{ margin:0; font-size:inherit; font-weight:inherit; } /* Footer nav headings */ .foot-col h3{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; font-weight:600; } /* ── Harden: a11y + form resilience ── */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Focus-visible rings — keyboard navigation */ .nav-links a:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; border-radius:1px; } .seal-btn:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; } .portal-cta:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; } .inquiry-form input:focus-visible, .inquiry-form textarea:focus-visible{ outline:2px solid var(--indigo); outline-offset:1px; } /* Inline field errors */ .field-error{ display:none; font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--error); margin-top:6px; } .field-error.show{ display:block; } /* Disabled state while sending */ .seal-btn:disabled{ opacity:.6; cursor:not-allowed; } /* SVG mark: use CSS token instead of presentation attributes */ .hero .mk-fillY, .hero .mk-dot{ fill:var(--gold); } .hero .mk-stroke{ stroke:var(--gold); } /* ── §5 Common Questions (FAQ) ── */ .s-faq{ background:var(--cream); } .faq-list{ border-top:1px solid color-mix(in srgb,var(--brass) 38%, transparent); } .faq-item{ border-bottom:1px solid color-mix(in srgb,var(--brass) 38%, transparent); } .faq-item summary{ list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:clamp(20px,2.8vw,32px) 0; cursor:pointer; font-family:var(--font-display); font-weight:500; font-size:clamp(16px,1.5vw,21px); color:var(--indigo-ink); line-height:1.3; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:'+'; flex:none; font-family:var(--font-body); font-weight:300; font-size:22px; color:var(--brass); transition:transform .35s var(--ease); } .faq-item[open] summary::after{ transform:rotate(45deg); } .faq-body{ padding-bottom:clamp(20px,2.8vw,32px); max-width:60ch; color:color-mix(in srgb,var(--indigo-ink) 84%, transparent); font-size:clamp(15px,1.1vw,17px); line-height:1.72; } .faq-body p{ margin:0; } /* ════ Palette-flip corrections — jewel grounds get light text (regal redesign) ════ */ /* §1 Hero — oxblood stage */ .hero-content h1{ color:var(--cream); } .hero-content h1 em{ color:var(--gold); } .hero-content .ey{ color:var(--gold); } .hero-content .hero-sub{ color:color-mix(in srgb,var(--cream) 72%, transparent); } .hero-content .meta{ color:color-mix(in srgb,var(--cream) 66%, transparent); } .hero .scroll-cue{ color:color-mix(in srgb,var(--cream) 55%, transparent); } /* §5 Who — oxblood */ .s-who.on-light{ color:var(--cream); } .s-who .lede{ color:var(--cream); } .s-who .who-row dt{ color:var(--gold); } .s-who .who-row dd{ color:color-mix(in srgb,var(--cream) 84%, transparent); } .s-who .who-bleed{ color:color-mix(in srgb,var(--gold) 12%, transparent); } .s-who.on-light .eyebrow,.s-who.on-light .rule{ color:var(--gold); } /* §6 Inquiry — midnight */ .s-inquire.on-light{ color:var(--cream); } .s-inquire.on-light .eyebrow,.s-inquire.on-light .rule{ color:var(--gold); } .inquire-intro h2{ color:var(--cream); } .inquire-intro p{ color:color-mix(in srgb,var(--cream) 80%, transparent); } .form-note{ color:color-mix(in srgb,var(--cream) 76%, transparent); } .confirm{ color:var(--cream); border-color:color-mix(in srgb,var(--gold) 55%, transparent); background:color-mix(in srgb,var(--gold) 10%, transparent); } .confirm::before{ color:var(--gold); } .seal-btn{ background:var(--gold); color:var(--indigo-ink); } .seal-btn:hover{ background:var(--cream); } /* §7 Portal — text token --linen flipped dark; repoint to ivory */ .s-portal{ color:var(--cream); } .s-portal p{ color:color-mix(in srgb,var(--cream) 86%, transparent); } /* keep eyebrow baseline when it's a

(semantic-heading fix) */ .sec-head p.eyebrow{ margin:0; } /* AA contrast: brass-on-ivory text elements darkened (decorative rules keep brass) */ .prog-item .idx{ color:#6F4A1C; } .faq-item summary::after{ color:#6F4A1C; } /* ── §4 How It Works (midnight) — locked journey, light text ── */ .s-how{ background:var(--linen); } .how-grid{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid color-mix(in srgb,var(--gold) 40%, transparent); } .how-step{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,3vw,44px); align-items:baseline; padding:clamp(24px,3.4vh,40px) 0; border-bottom:1px solid color-mix(in srgb,var(--gold) 20%, transparent); } .how-step .idx{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:clamp(26px,3vw,40px); line-height:1; } .how-step h3{ margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2vw,28px); color:var(--cream); line-height:1.05; } .how-step p{ margin:10px 0 0; color:color-mix(in srgb,var(--cream) 80%, transparent); max-width:48ch; } @media(min-width:760px){ .how-step{ grid-template-columns:auto 1.1fr 1.4fr; align-items:baseline; } .how-step p{ margin:0; } } /* ── §7 Why Families Trust Us (lacquer) — quiet high-trust band ── */ .s-trust{ background:var(--lacquer); } .trust-lede{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(24px,3.2vw,40px); line-height:1.2; color:var(--cream); max-width:22ch; margin:0 0 clamp(36px,5vh,64px); } .trust-grid{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid color-mix(in srgb,var(--gold) 40%, transparent); } .trust-item{ padding:clamp(22px,3vh,32px) 0; border-bottom:1px solid color-mix(in srgb,var(--gold) 22%, transparent); } .trust-item h3{ margin:0 0 8px; font-family:var(--font-display); font-weight:500; font-size:clamp(18px,1.8vw,24px); color:var(--gold); line-height:1.1; } .trust-item p{ margin:0; color:color-mix(in srgb,var(--cream) 80%, transparent); max-width:48ch; } .trust-item a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; } @media(min-width:760px){ .trust-grid{ grid-template-columns:1fr 1fr; column-gap:clamp(40px,5vw,80px); } } /* ── Aurora — metaphorical northern lights / luminous night sky behind the fireflies ── */ .aurora{ position:fixed; inset:-25% -10%; z-index:39; pointer-events:none; overflow:hidden; mix-blend-mode:screen; filter:blur(72px); opacity:.5; } .aurora span{ position:absolute; display:block; border-radius:46% 54% 50% 50% / 60% 58% 42% 40%; will-change:transform,opacity; } .aurora .a1{ left:-8%; top:0; width:48vw; height:82vh; background:radial-gradient(closest-side, rgba(28,140,92,.7), rgba(28,122,80,0) 72%); animation:au1 24s ease-in-out infinite; } .aurora .a2{ right:-12%; top:16%; width:46vw; height:92vh; background:radial-gradient(closest-side, rgba(52,130,168,.6), rgba(46,110,142,0) 72%); animation:au2 30s ease-in-out infinite; } .aurora .a3{ left:24%; bottom:-12%; width:52vw; height:80vh; background:radial-gradient(closest-side, rgba(74,40,140,.5), rgba(61,26,120,0) 72%); animation:au3 27s ease-in-out infinite; } @keyframes au1{ 0%,100%{ transform:translate3d(0,0,0) scaleY(1); opacity:.45; } 50%{ transform:translate3d(6vw,-5vh,0) scaleY(1.18); opacity:.78; } } @keyframes au2{ 0%,100%{ transform:translate3d(0,0,0) scaleY(1); opacity:.5; } 50%{ transform:translate3d(-7vw,4vh,0) scaleY(1.22); opacity:.76; } } @keyframes au3{ 0%,100%{ transform:translate3d(0,0,0) scaleY(1); opacity:.34; } 50%{ transform:translate3d(5vw,-6vh,0) scaleY(1.15); opacity:.6; } } @media(prefers-reduced-motion:reduce){ .aurora span{ animation:none !important; } .aurora{ opacity:.3; } } .aurora-canvas{ position:fixed; inset:0; z-index:38; pointer-events:none; mix-blend-mode:screen; opacity:.95; } @media(prefers-reduced-motion:reduce){ .aurora-canvas{ display:none !important; } } /* fireflies + shooting stars removed (cut in the professionalism pass) */ /* ═══════════════════════════════════════════════════════════ HYBRID MULTI-PAGE SHELL — shared nav/footer/page additions (web-designer · 2026-06-26) — locked tokens + fonts unchanged ═══════════════════════════════════════════════════════════ */ /* wordmark is now a link home */ .nav-wordmark{ text-decoration:none; } /* active-page chip = "you are here" */ .nav-links a.active{ color:var(--lacquer); background:var(--gold); } .nav-links a.active:hover{ background:var(--cream); } /* hamburger (pure-CSS checkbox toggle) — hidden on desktop */ .nav-toggle{ position:absolute; left:-9999px; opacity:0; } .nav-burger{ display:none; } /* SUBPAGE shell: solid nav + visible brand from the top; content clears the bar */ body.subpage nav{ background:var(--lacquer); border-bottom:1px solid color-mix(in srgb,var(--gold) 22%, transparent); } body.subpage .nav-mark, body.subpage .nav-wordmark{ opacity:1; transform:none; } body.subpage main{ padding-top:var(--nav-h); } /* skip link (shared) */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--gold); color:var(--indigo-ink); padding:10px 16px; font-family:var(--font-body); font-weight:600; letter-spacing:.08em; text-decoration:none; } .skip-link:focus{ left:8px; top:8px; } /* page header band (subpages) */ .page-head{ background:var(--lacquer); padding-block:clamp(40px,7vh,96px) clamp(30px,5vh,56px); border-bottom:1px solid color-mix(in srgb,var(--gold) 22%, transparent); } .page-head .eyebrow{ color:var(--gold); display:block; margin-bottom:clamp(14px,2vh,20px); } .page-head h1{ font-family:var(--font-display); font-weight:500; font-size:clamp(34px,5.2vw,68px); line-height:1.02; letter-spacing:-.02em; color:var(--cream); margin:0; max-width:18ch; text-wrap:balance; } .page-head .page-lede{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(18px,1.8vw,24px); line-height:1.4; color:color-mix(in srgb,var(--cream) 82%, transparent); max-width:54ch; margin:clamp(20px,3vh,30px) 0 0; } /* reusable cross-page "more" link */ .more-link{ display:inline-block; margin-top:clamp(22px,3.4vh,34px); font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--gold) 50%, transparent); padding-bottom:3px; transition:color .2s, border-color .2s; } .more-link:hover{ color:var(--cream); border-color:var(--cream); } .on-light .more-link{ color:#6F4A1C; border-color:color-mix(in srgb,var(--brass) 55%, transparent); } .on-light .more-link:hover{ color:var(--sand); border-color:var(--sand); } .s-who .more-link{ color:var(--gold); border-color:color-mix(in srgb,var(--gold) 62%,transparent); } .s-who .more-link:hover{ color:var(--cream); border-color:var(--cream); } /* program teaser (home) */ .prog-teaser-lede{ margin:0; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(22px,2.6vw,34px); line-height:1.3; color:var(--indigo-ink); max-width:32ch; text-wrap:balance; } /* PENDING placeholders (scaffold pages) — visible, never hidden */ .pending{ display:inline-block; font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#6F4A1C; background:color-mix(in srgb,var(--brass) 14%, transparent); border:1px dashed color-mix(in srgb,var(--brass) 55%, transparent); border-radius:2px; padding:5px 11px; margin-top:10px; } .on-dark .pending{ color:var(--gold); background:color-mix(in srgb,var(--gold) 12%, transparent); border-color:color-mix(in srgb,var(--gold) 45%, transparent); } /* spec list for scaffold/detail pages */ .spec-list{ list-style:none; padding:0; margin:0; border-top:1px solid color-mix(in srgb,var(--brass) 38%, transparent); } .spec-list li{ padding:clamp(16px,2.4vh,24px) 0; border-bottom:1px solid color-mix(in srgb,var(--brass) 30%, transparent); } .spec-list li h3{ margin:0 0 6px; font-family:var(--font-display); font-weight:500; font-size:clamp(17px,1.6vw,22px); color:var(--indigo-ink); } .spec-list li p{ margin:0; max-width:54ch; color:color-mix(in srgb,var(--indigo-ink) 84%, transparent); } .on-dark .spec-list{ border-color:color-mix(in srgb,var(--gold) 40%, transparent); } .on-dark .spec-list li{ border-color:color-mix(in srgb,var(--gold) 22%, transparent); } .on-dark .spec-list li h3{ color:var(--gold); } .on-dark .spec-list li p{ color:color-mix(in srgb,var(--cream) 82%, transparent); } /* hamburger drawer — tablets + phones (pure CSS, no JS) */ @media(max-width:980px){ .nav-burger{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; cursor:pointer; flex:none; } .nav-burger span{ display:block; width:22px; height:2px; background:var(--gold); transition:transform .3s var(--ease), opacity .2s; } .nav-links{ position:fixed; left:0; right:0; top:var(--nav-h); flex-direction:column; align-items:stretch; gap:0; background:var(--lacquer); border-bottom:1px solid color-mix(in srgb,var(--gold) 22%, transparent); padding:6px var(--gutter) 22px; max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .35s var(--ease), opacity .25s, padding .35s var(--ease); } .nav-toggle:checked ~ .nav-links{ max-height:85vh; opacity:1; pointer-events:auto; } .nav-links a:not(.cta){ box-shadow:none; padding:15px 4px; border-radius:0; border-bottom:1px solid color-mix(in srgb,var(--gold) 14%, transparent); } .nav-links a:not(.cta):hover{ background:transparent; color:var(--cream); transform:none; } .nav-links a.active{ background:transparent; color:var(--gold); } .nav-links a.cta{ margin-top:14px; text-align:center; } .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; } .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } } /* Home FAQ teaser — questions only (link to faq.html), no accordion / no answers */ .faq-teaser-q{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:clamp(20px,2.8vw,32px) 0; border-bottom:1px solid color-mix(in srgb,var(--brass) 38%, transparent); font-family:var(--font-display); font-weight:500; font-size:clamp(16px,1.5vw,21px); color:var(--indigo-ink); line-height:1.3; text-decoration:none; transition:color .2s; } .faq-teaser-q::after{ content:'\2192'; flex:none; font-family:var(--font-body); color:#6F4A1C; } .faq-teaser-q:hover{ color:#6F4A1C; } .faq-teaser-q:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; } /* Sticky WhatsApp FAB (all live pages) — bottom-right, clears CTAs + footer */ .wa-fab{ position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:55; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--gold); color:var(--lacquer); text-decoration:none; box-shadow:0 12px 32px -8px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb,var(--lacquer) 30%, transparent); transition:transform .2s var(--ease), background .2s; } .wa-fab:hover{ transform:translateY(-3px); background:var(--cream); } .wa-fab:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; } .wa-fab svg{ width:30px; height:30px; display:block; } @media(max-width:520px){ .wa-fab{ width:52px; height:52px; } .wa-fab svg{ width:28px; height:28px; } } /* reserve footer base space so the FAB never sits over footer links */ footer{ padding-bottom:clamp(96px,12vh,124px); } /* ═══════════════════════════════════════════════════════════ POLISH PASS — impeccable + Emil Kowalski (web-designer · 2026-06-26) REFINEMENT only. Appended last so the existing cascade + the locked #magdalene markup are untouched. Locked tokens / fonts unchanged. ═══════════════════════════════════════════════════════════ */ /* ── Press feedback: every pressable answers the finger (Emil 100–160ms) ── Scale-on-press where it was missing. Each target already carries a transform transition except .more-link / .faq-teaser-q, fixed below. */ .hero-content .hero-cta .btn:active, .event-cta .btn:active, .portal-cta:active, .nav-links a.cta:active{ transform:scale(0.97); } .wa-fab:active{ transform:scale(0.94); } /* round FAB reads a hair deeper */ /* .more-link + .faq-teaser-q lacked a transform channel — add it, then press */ .more-link{ transition:color .2s var(--ease-out-strong), border-color .2s var(--ease-out-strong), transform 140ms var(--ease-out-strong); } .more-link:active{ transform:scale(0.97); } .faq-teaser-q{ transition:color .2s var(--ease-out-strong), transform 140ms var(--ease-out-strong); } .faq-teaser-q:active{ transform:scale(0.985); } /* full-width row: barely-there */ /* ── Touch: kill sticky-lift. On no-hover pointers a tap fires :hover and the lift stays stuck until you tap elsewhere. Neutralise the transform there; the color/background hover still reads as the tap flash. ── */ @media (hover: none){ .hero-content .hero-cta .btn:hover, .event-cta .btn:hover, .portal-cta:hover, .seal-btn:hover, .wa-fab:hover, .nav-links a:not(.cta):hover, .more-link:hover{ transform:none; } } /* ── Accessibility: focus-visible rings on the keyboard paths that lacked one. Gold reads on both cream and lacquer; cream on the dark nav/footer; indigo mirrors the existing input ring on the linen form. ── */ .hero-content .hero-cta .btn:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; } .more-link:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:1px; } .faq-item summary:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; border-radius:1px; } .inquiry-form select:focus-visible{ outline:2px solid var(--indigo); outline-offset:1px; } .nav-wordmark:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; border-radius:1px; } .foot-col a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:1px; } /* the visible drawer toggle is a