/* ============================================================ AURELIS RESIDENCES — cinematic dusk, single champagne accent. The page deliberately commits to one world (dusk / dark); there is no light theme by design. ============================================================ */ /* the [hidden] attribute must always win over component display rules */ [hidden]{display:none !important} /* ---------- Tokens ---------- */ :root{ /* ground — cool near-black dusk, never #000 */ --ink: #0a0b0f; --ink-1: #0d0f15; --ink-2: #12141c; --ink-3: #171a23; /* hairlines as alpha */ --line: rgba(222,228,238,.09); --line-2: rgba(222,228,238,.15); --haze: rgba(222,228,238,.05); /* text */ --fg: #edeae4; --fg-soft: #c8c7c1; --muted: #9a9b95; /* ≥ 6:1 on ink */ /* champagne accent (dark-ground) + siblings */ --gold: #e6c79b; --gold-mid: #d6b17f; --gold-deep: #b98d55; --gold-soft: rgba(230,199,155,.12); --gold-line: rgba(230,199,155,.30); /* type */ --serif: "Didot","Bodoni 72","Hoefler Text",Georgia,"Times New Roman",serif; --sans: "Helvetica Neue","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono: ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,"Cascadia Code",monospace; --ease: cubic-bezier(.22,1,.36,1); --ease-slow: cubic-bezier(.22,.06,.18,1); --pad: clamp(20px,5vw,80px); --maxw: 1200px; --hero-h: 300svh; color-scheme: dark; } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; } /* overflow-x on the root keeps the document as the scroll container (putting it on makes body a scroller and breaks sticky/anchor) */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ background:var(--ink); color:var(--fg); font-family:var(--sans); font-size:clamp(15px,1.05vw,17px); line-height:1.65; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } b,strong{ font-weight:600; } ::selection{ background:var(--gold); color:#12100a; } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; } .skip{ position:fixed; top:10px; left:10px; z-index:200; background:var(--gold); color:#12100a; font-weight:600; padding:10px 16px; border-radius:8px; transform:translateY(-160%); transition:transform .3s var(--ease); } .skip:focus{ transform:none; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } /* tabular figures everywhere numbers appear */ .ledger__v,.res__specs,.res__from,.view__orient,.plan__facts, .altimeter__read,.reg__avail b,[data-count]{ font-variant-numeric:tabular-nums; } /* ---------- Shared type helpers ---------- */ .kicker{ font-family:var(--mono); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-mid); } .editorial,.sec-title,.view__title,.reg__title,.cap__title, .hero__still-title,.cap__line,.cap__stat{ text-wrap:balance; } .pos__body,.amen__desc,.view__body,.plan__body,.reg__lede{ text-wrap:pretty; } .sec-title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.04; letter-spacing:-.02em; } .sec-head{ max-width:60ch; padding-block:clamp(56px,9vh,110px) clamp(30px,5vh,60px); } .sec-head .kicker{ display:block; margin-bottom:1.1rem; } .sec-head--split{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px,4vw,64px); align-items:end; } @media (max-width:780px){ .sec-head--split{ grid-template-columns:1fr; align-items:start; } } /* ---------- Buttons ---------- */ .btn{ --_bg:var(--gold); display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.01em; color:#17130a; background:var(--_bg); padding:.9em 1.5em; border-radius:100px; border:1px solid transparent; cursor:pointer; transition:transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 30px -12px rgba(230,199,155,.5); } .btn:hover{ background:#f0d6ac; transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 16px 40px -14px rgba(230,199,155,.6); } .btn:active{ transform:translateY(0); } .btn--sm{ font-size:.82rem; padding:.62em 1.15em; } .btn--lg{ font-size:1rem; padding:1.05em 1.9em; } /* ============================================================ NAV ============================================================ */ .nav{ position:fixed; inset:0 0 auto 0; z-index:100; transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease); border-bottom:1px solid transparent; } .nav.scrolled{ background:rgba(10,11,15,.72); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line); } .nav__inner{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad); height:68px; display:flex; align-items:center; gap:clamp(16px,4vw,48px); } .brand{ display:inline-flex; align-items:center; gap:.6em; color:var(--fg); } .brand__mark{ color:var(--gold); display:inline-flex; } .brand__word{ font-family:var(--serif); font-size:1.18rem; letter-spacing:.42em; padding-left:.42em; font-weight:400; } .nav__links{ display:flex; gap:clamp(14px,2vw,30px); margin-left:auto; } .nav__links a{ font-size:.82rem; letter-spacing:.02em; color:var(--fg-soft); padding:.4em 0; position:relative; transition:color .3s var(--ease); } .nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .4s var(--ease); } .nav__links a:hover{ color:var(--fg); } .nav__links a:hover::after{ right:0; } .nav__cta{ margin-left:6px; } @media (max-width:880px){ .nav__links{ display:none; } .nav__cta{ margin-left:auto; } } /* ============================================================ HERO — scroll-scrub cinematic ============================================================ */ .hero{ position:relative; height:100svh; background:var(--ink); } .hero[data-mode="scrub"],.hero[data-mode="loop"]{ height:var(--hero-h); } .hero__stage{ position:sticky; top:0; height:100svh; width:100%; overflow:hidden; display:grid; place-items:center; } .hero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; } .hero__media--video{ opacity:0; transition:opacity .8s var(--ease); } .hero[data-mode="scrub"] .hero__media--video, .hero[data-mode="loop"] .hero__media--video{ opacity:1; } .hero[data-mode="still"] .hero__media--video{ display:none; } /* local-darkening scrim: vignette + top/bottom fade so text floats */ .hero__scrim{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 85% at 50% 42%, transparent 30%, rgba(6,7,11,.55) 100%), linear-gradient(180deg, rgba(6,7,11,.72) 0%, rgba(6,7,11,.12) 26%, rgba(6,7,11,.16) 62%, rgba(6,7,11,.86) 100%); } .hero__grain{ position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* --- Altimeter --- */ .altimeter{ position:absolute; right:clamp(16px,3vw,44px); top:50%; transform:translateY(-50%); z-index:6; display:none; flex-direction:column; align-items:center; gap:12px; font-family:var(--mono); color:var(--fg-soft); } .hero[data-mode="scrub"] .altimeter, .hero[data-mode="loop"] .altimeter{ display:flex; } .altimeter__label{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; } .altimeter__track{ position:relative; width:2px; height:min(34vh,300px); background:var(--line-2); border-radius:2px; overflow:visible; } .altimeter__fill{ position:absolute; left:0; right:0; bottom:0; height:calc(var(--asc,0) * 100%); background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border-radius:2px; } .altimeter__dot{ position:absolute; left:50%; bottom:calc(var(--asc,0) * 100%); width:9px; height:9px; margin-left:-4.5px; margin-bottom:-4.5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(230,199,155,.15),0 0 14px 2px rgba(230,199,155,.5); } .altimeter__read{ font-size:.72rem; letter-spacing:.05em; } .altimeter__read b{ color:var(--gold); font-weight:600; } .altimeter__read i{ color:var(--muted); font-style:normal; } @media (max-width:560px){ .altimeter{ right:10px; } .altimeter__label{ display:none; } } /* --- Animated captions --- */ .hero__anim{ position:absolute; inset:0; z-index:5; display:none; pointer-events:none; } .hero[data-mode="scrub"] .hero__anim, .hero[data-mode="loop"] .hero__anim{ display:block; } .cap{ position:absolute; left:0; right:0; padding-inline:var(--pad); max-width:var(--maxw); margin-inline:auto; will-change:opacity,transform; } .cap--a{ left:0; right:0; bottom:12vh; text-align:left; } .cap--b{ top:50%; transform:translateY(-50%); text-align:center; } .cap--c{ left:0; right:0; bottom:12vh; text-align:left; } .cap--c .cap__cta{ pointer-events:auto; } .cap__kicker{ font-family:var(--mono); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; } .cap__title{ font-family:var(--serif); font-weight:400; font-size:clamp(3.4rem,15vw,11rem); line-height:.9; letter-spacing:-.03em; } .cap__title--mask{ overflow:hidden; } .cap__title--mask>span{ display:inline-block; } .cap__sub{ margin-top:1.3rem; max-width:34ch; font-size:clamp(1rem,1.5vw,1.2rem); color:var(--fg-soft); } .cap__line{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,6.4vw,4.7rem); line-height:1.06; letter-spacing:-.02em; } .cap__stat{ font-family:var(--serif); font-size:clamp(1.5rem,4.2vw,3.1rem); line-height:1.1; letter-spacing:-.01em; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5em; } .cap__stat span{ color:var(--fg); } .cap__stat em{ color:var(--gold); font-style:normal; } .cap__cta{ margin-top:1.8rem; } /* --- Static composed caption (still / no-scrub / no-JS) --- */ .hero__still{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1rem; padding-inline:var(--pad); } .hero[data-mode="scrub"] .hero__still, .hero[data-mode="loop"] .hero__still{ display:none; } .hero__still-title{ font-family:var(--serif); font-weight:400; line-height:.92; letter-spacing:-.03em; font-size:clamp(3rem,12vw,8.5rem); } .hero__still-title span{ display:block; font-size:.4em; letter-spacing:.22em; color:var(--gold); margin-top:.4em; } .hero__still-sub{ font-size:clamp(1.05rem,2.2vw,1.4rem); color:var(--fg-soft); max-width:26ch; } .hero__still-stat{ font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; } .hero__still .btn{ margin-top:.7rem; } /* --- Scroll cue --- */ .hero__cue{ position:absolute; left:0; right:0; bottom:22px; z-index:6; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--fg-soft); pointer-events:none; } .hero__cue span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); } .hero__cue svg{ animation:cueBob 2.4s var(--ease) infinite; } @keyframes cueBob{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(5px); opacity:1; } } .hero[data-mode="still"] .hero__cue, .hero[data-mode="still"] .hero__scrim{ } /* still keeps cue subtle */ /* ============================================================ 1 · POSITIONING ============================================================ */ .pos{ padding-block:clamp(80px,15vh,190px); border-top:1px solid var(--line); } .pos__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,96px); align-items:start; } @media (max-width:860px){ .pos__grid{ grid-template-columns:1fr; gap:44px; } } .pos__lede .kicker{ display:block; margin-bottom:1.6rem; } .editorial{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4.6vw,3.7rem); line-height:1.12; letter-spacing:-.02em; } .editorial em{ font-style:italic; color:var(--gold); } .pos__body{ margin-top:1.8rem; max-width:46ch; color:var(--fg-soft); font-size:clamp(1rem,1.4vw,1.15rem); } /* ledger with 1px-gap hairline dividers */ .ledger{ list-style:none; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; } .ledger__row{ background:var(--ink-1); padding:1.05rem 1.3rem; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; } .ledger__k{ color:var(--muted); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; } .ledger__v{ font-family:var(--mono); font-size:1.35rem; color:var(--fg); } .ledger__v b{ font-weight:500; color:var(--gold); } .ledger__v i{ font-style:normal; color:var(--muted); font-size:.7em; margin-left:.15em; } .ledger__v--txt{ font-family:var(--serif); font-size:1.15rem; color:var(--fg-soft); letter-spacing:0; } /* ============================================================ 2 · THE RESIDENCES ============================================================ */ .res{ padding-bottom:clamp(60px,10vh,120px); border-top:1px solid var(--line); } .res__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); } @media (max-width:920px){ .res__grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .res__grid{ grid-template-columns:1fr; } } .res__card{ background:var(--ink); padding:clamp(24px,2.6vw,38px) clamp(20px,2vw,30px); display:flex; flex-direction:column; min-height:340px; transition:background .5s var(--ease); } .res__card:hover{ background:var(--ink-1); } .res__card--feat{ background:linear-gradient(180deg,rgba(230,199,155,.07),rgba(230,199,155,0) 60%),var(--ink-1); } .res__flag{ font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:#17130a; background:var(--gold); align-self:flex-start; padding:.32em .7em; border-radius:100px; margin-bottom:1rem; } .res__tier{ font-family:var(--serif); font-size:1.7rem; line-height:1; letter-spacing:-.01em; } .res__beds{ margin-top:.5rem; color:var(--muted); font-size:.85rem; letter-spacing:.04em; } .res__specs{ margin-top:auto; padding-top:1.8rem; display:grid; gap:.55rem; } .res__specs div{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding-top:.55rem; } .res__specs dt{ color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; } .res__specs dd{ font-family:var(--mono); font-size:1rem; color:var(--fg); } .res__specs dd b{ font-weight:500; } .res__specs dd i{ font-style:normal; color:var(--muted); font-size:.8em; margin-left:.1em; } .res__txt{ font-family:var(--serif)!important; color:var(--fg-soft)!important; letter-spacing:0; } .res__from{ margin-top:1.4rem; display:flex; align-items:baseline; gap:.5rem; } .res__from span{ color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; } .res__from b{ font-family:var(--mono); font-size:1.45rem; font-weight:500; color:var(--gold); } .res__foot{ margin-top:1.6rem; } .res__foot p{ color:var(--muted); font-size:.82rem; } /* ============================================================ 3 · AMENITIES ============================================================ */ .amen{ padding-bottom:clamp(80px,14vh,160px); border-top:1px solid var(--line); } .amen__intro{ color:var(--fg-soft); font-size:clamp(1rem,1.4vw,1.15rem); max-width:40ch; } .amen__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; grid-auto-flow:dense; } .amen__cell{ background:var(--ink-1); padding:clamp(26px,2.6vw,40px); grid-column:span 2; display:flex; flex-direction:column; gap:1.4rem; min-height:220px; transition:background .5s var(--ease); } .amen__cell--wide{ grid-column:span 3; } .amen__cell:hover{ background:var(--ink-2); } .amen__ico{ color:var(--gold); } .amen__ico svg{ width:38px; height:38px; } .amen__name{ font-family:var(--serif); font-weight:400; font-size:1.4rem; line-height:1.05; letter-spacing:-.01em; } .amen__desc{ margin-top:.55rem; color:var(--muted); font-size:.92rem; } @media (max-width:820px){ .amen__grid{ grid-template-columns:repeat(2,1fr); } .amen__cell,.amen__cell--wide{ grid-column:span 1; } } @media (max-width:520px){ .amen__grid{ grid-template-columns:1fr; } } /* ============================================================ 4 · THE VIEW ============================================================ */ .view{ position:relative; overflow:hidden; padding-block:clamp(110px,22vh,280px); border-top:1px solid var(--line); } .view__sky{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, #05070d 0%, #0a1524 34%, #16263b 56%, #47506a 74%, #b98a63 88%, #e6b785 100%); } .view__horizon{ position:absolute; left:0; right:0; bottom:12%; height:1px; background:linear-gradient(90deg,transparent,rgba(230,199,155,.55),transparent); } .view__lights{ position:absolute; left:0; right:0; bottom:11.4%; height:4px; } .view__lights::before,.view__lights::after{ content:""; position:absolute; inset:0; background-image: radial-gradient(1.4px 1.4px at 8% 60%, rgba(255,224,180,.9), transparent), radial-gradient(1.4px 1.4px at 17% 30%, rgba(255,224,180,.7), transparent), radial-gradient(1.2px 1.2px at 26% 70%, rgba(255,235,200,.85), transparent), radial-gradient(1.5px 1.5px at 38% 40%, rgba(255,224,180,.8), transparent), radial-gradient(1.2px 1.2px at 52% 65%, rgba(255,235,200,.7), transparent), radial-gradient(1.4px 1.4px at 63% 35%, rgba(255,224,180,.9), transparent), radial-gradient(1.2px 1.2px at 74% 62%, rgba(255,235,200,.75), transparent), radial-gradient(1.5px 1.5px at 86% 42%, rgba(255,224,180,.85), transparent), radial-gradient(1.2px 1.2px at 93% 66%, rgba(255,235,200,.7), transparent); animation:twinkle 5s ease-in-out infinite; } .view__lights::after{ animation-duration:7s; animation-delay:-2s; opacity:.6; } @keyframes twinkle{ 0%,100%{ opacity:.85; } 50%{ opacity:.4; } } .view::after{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(120% 80% at 30% 30%,rgba(5,7,13,.35),rgba(5,7,13,.82)); } .view__inner{ position:relative; z-index:2; } .view__inner .kicker{ display:block; margin-bottom:1.4rem; color:var(--gold); } .view__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,6vw,4.8rem); line-height:1.02; letter-spacing:-.02em; } .view__body{ margin-top:1.8rem; max-width:48ch; color:var(--fg-soft); font-size:clamp(1.05rem,1.5vw,1.25rem); } .view__orient{ margin-top:clamp(36px,5vw,64px); display:flex; flex-wrap:wrap; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:12px; overflow:hidden; max-width:640px; } .view__orient div{ background:rgba(10,11,15,.6); backdrop-filter:blur(4px); padding:1rem 1.4rem; flex:1 1 160px; } .view__orient dt{ color:var(--muted); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; } .view__orient dd{ margin-top:.3rem; font-family:var(--serif); font-size:1.15rem; color:var(--fg); } .view__orient dd b{ font-family:var(--mono); color:var(--gold); font-weight:500; } /* ============================================================ 5 · FLOORPLAN ============================================================ */ .plan{ padding-block:clamp(80px,15vh,190px); border-top:1px solid var(--line); } .plan__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,88px); align-items:center; } @media (max-width:900px){ .plan__grid{ grid-template-columns:1fr; gap:44px; } } .plan__copy .kicker{ display:block; margin-bottom:1.4rem; } .plan__copy .sec-title{ margin-bottom:1.4rem; } .plan__body{ color:var(--fg-soft); max-width:42ch; } .plan__facts{ margin-top:2rem; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; max-width:420px; } .plan__facts div{ background:var(--ink-1); padding:1rem 1.2rem; } .plan__facts dt{ color:var(--muted); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; } .plan__facts dd{ margin-top:.35rem; font-family:var(--mono); font-size:1.5rem; color:var(--fg); } .plan__facts dd b{ font-weight:500; color:var(--gold); } .plan__facts dd i{ font-style:normal; color:var(--muted); font-size:.62em; margin-left:.12em; } .plan__figure{ background: linear-gradient(0deg,rgba(230,199,155,.03),rgba(230,199,155,.03)), var(--ink-1); border:1px solid var(--line); border-radius:16px; padding:clamp(18px,3vw,40px); position:relative; } .fp{ width:100%; height:auto; overflow:visible; } .fp__terr{ fill:rgba(230,199,155,.05); stroke:var(--gold-line); stroke-width:1; stroke-dasharray:3 4; } .fp__walls{ fill:none; stroke:var(--fg); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.2s var(--ease-slow); } .plan__figure.in .fp__walls{ stroke-dashoffset:0; } .fp__door{ fill:none; stroke:var(--muted); stroke-width:1; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease-slow) .6s; } .plan__figure.in .fp__door{ stroke-dashoffset:0; } .fp__dim line{ stroke:var(--gold-mid); stroke-width:.75; opacity:0; transition:opacity .6s var(--ease) .9s; } .plan__figure.in .fp__dim line{ opacity:.7; } .fp__lab text{ opacity:0; transition:opacity .6s var(--ease) 1.1s; } .plan__figure.in .fp__lab text{ opacity:1; } .fp__room{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; fill:var(--fg-soft); text-anchor:middle; } .fp__sub{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; fill:var(--muted); text-anchor:middle; } .fp__dim-t{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; fill:var(--gold-mid); text-anchor:middle; } .fp__north{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; fill:var(--muted); text-anchor:middle; } .plan__figure figcaption{ margin-top:1.2rem; color:var(--muted); font-size:.76rem; letter-spacing:.02em; } /* ============================================================ 6 · REGISTER ============================================================ */ .reg{ padding-block:clamp(90px,16vh,200px); border-top:1px solid var(--line); background:radial-gradient(120% 90% at 50% 0%,rgba(230,199,155,.06),transparent 55%); } .reg__inner{ max-width:680px; margin-inline:auto; text-align:center; } .reg__inner .kicker{ display:block; margin-bottom:1.4rem; } .reg__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,6vw,4.4rem); line-height:1; letter-spacing:-.02em; } .reg__lede{ margin:1.4rem auto 0; max-width:48ch; color:var(--fg-soft); font-size:clamp(1rem,1.4vw,1.15rem); } .reg__avail{ margin-top:1.6rem; font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; } .reg__avail b{ color:var(--gold); font-weight:600; } .form{ margin-top:clamp(34px,5vw,56px); display:grid; grid-template-columns:1fr 1fr; gap:20px; text-align:left; } .field{ display:flex; flex-direction:column; gap:.5rem; } .field label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .field input,.select select{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--fg); background:var(--ink-1); border:1px solid var(--line-2); border-radius:10px; padding:.95em 1em; transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease); } .field input::placeholder{ color:#5c5e66; } .field input:focus,.select select:focus{ outline:none; border-color:var(--gold); background:var(--ink-2); box-shadow:0 0 0 3px rgba(230,199,155,.14); } .field input[aria-invalid="true"],.select select[aria-invalid="true"]{ border-color:#d98a6a; box-shadow:0 0 0 3px rgba(217,138,106,.14); } .select{ position:relative; } .select select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.6em; } .select__chev{ position:absolute; right:1em; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; } .field__err{ color:#e2a184; font-size:.78rem; letter-spacing:.01em; } .form__foot{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:.6rem; text-align:center; } .form__foot .btn{ width:100%; max-width:360px; justify-content:center; } .form__note{ color:var(--muted); font-size:.82rem; max-width:42ch; } @media (max-width:600px){ .form{ grid-template-columns:1fr; } } .reg__done{ margin-top:clamp(34px,5vw,56px); display:flex; flex-direction:column; align-items:center; gap:1rem; padding:clamp(30px,5vw,56px); border:1px solid var(--gold-line); border-radius:18px; background:var(--gold-soft); } .reg__done-mark{ color:var(--gold); } .reg__done-h{ font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,3.5vw,2.4rem); } .reg__done-h span{ color:var(--gold); } .reg__done-p{ color:var(--fg-soft); max-width:42ch; } /* ============================================================ FOOTER ============================================================ */ .foot{ border-top:1px solid var(--line); padding-block:clamp(56px,8vh,96px) clamp(30px,5vh,50px); background:var(--ink-1); } .foot__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:start; } @media (max-width:720px){ .foot__grid{ grid-template-columns:1fr; gap:40px; } } .brand__word--lg{ font-size:1.5rem; display:inline-block; } .foot__tag{ margin-top:1rem; color:var(--muted); max-width:30ch; font-family:var(--serif); font-size:1.15rem; } .foot__credits{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 2rem; } .foot__credits div{ display:flex; flex-direction:column; gap:.3rem; } .foot__credits dt{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .foot__credits dd{ font-family:var(--serif); font-size:1.02rem; color:var(--fg-soft); } .foot__credits a{ color:var(--gold-mid); border-bottom:1px solid var(--gold-line); } .foot__credits a:hover{ color:var(--gold); } .foot__legal{ margin-top:clamp(40px,6vh,72px); padding-top:1.6rem; border-top:1px solid var(--line); } .foot__legal p{ color:var(--muted); font-size:.76rem; max-width:80ch; line-height:1.7; } .foot__copy{ margin-top:1rem; letter-spacing:.04em; } /* ============================================================ REVEALS ============================================================ */ [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease); } [data-reveal].in{ opacity:1; transform:none; } /* ============================================================ REDUCED MOTION — one complete, settled frame ============================================================ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } [data-reveal]{ opacity:1; transform:none; } .fp__walls,.fp__door{ stroke-dashoffset:0; } .fp__dim line,.fp__lab text{ opacity:1; } .view__lights::before,.view__lights::after{ animation:none; } .hero__cue svg{ animation:none; } }