/* ============================================================================ 20 — ASYLUM · Sculptural High-Jewellery, Bespoke ---------------------------------------------------------------------------- Bespoke from scratch. Jewellery-box velvet, italianic serif, hairline rules. Three real ornate metal rings glowing in real studio HDR — chrome, gold, iridescent rose. Calm pace. Atelier voice. No festival energy. ============================================================================ */ :root{ /* Velvet jewellery box ---------------------------------------------------- */ --box : #0a0e2a; /* deep velvet navy (the case interior) */ --box-2 : #050720; /* under-shadow */ --box-3 : #040614; /* ink shadow */ --silk : #f3f1ec; /* paper / catalogue ivory */ --silk-mute : #c8c5d8; /* secondary ink on velvet */ --silk-faint : #6b6a85; /* tertiary ink */ /* Metals (the three rings) ----------------------------------------------- */ --chrome : #e8e8ed; /* mirror chrome (Aequinox, Ring I) */ --chrome-2 : #b9b9c4; --gold : #d4a559; /* warm 22ct gold (Soliel, Ring II) */ --gold-2 : #b88940; --rose : #f4c2c2; /* iridescent rose (Verre, Ring III) */ --rose-2 : #d39a9a; --rose-3 : #b9a0d4; /* the mauve flip in iridescence */ /* Atelier hairlines ------------------------------------------------------- */ --hairline : rgba(243,241,236,.10); --hairline-2 : rgba(243,241,236,.18); --hairline-w : rgba(243,241,236,.34); /* warm hairline, a step warmer */ --shadow-ink : rgba(4,6,20,.70); /* Type --------------------------------------------------------------------*/ --serif : 'Italiana','Didot','Bodoni 72',serif; --sans : 'Inter',system-ui,-apple-system,'Helvetica Neue',sans-serif; --mono : 'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace; /* Easing ----------------------------------------------------------------- */ --ease : cubic-bezier(.22,.61,.36,1); --ease-out : cubic-bezier(.16,1,.3,1); /* premium curve */ --ease-velvet: cubic-bezier(.58,1,0,0); /* universal premium ease-out */ } *{box-sizing:border-box;margin:0;padding:0} html,body{width:100%;height:100%} html{ /* Velvet jewellery box gradient — warm pool of light at centre, deep ink at the edges. Reads like a museum vitrine. */ background: radial-gradient(160% 110% at 50% 38%, rgba(28,38,82,.55) 0%, transparent 55%), radial-gradient(120% 90% at 50% 60%, var(--box) 0%, var(--box-2) 60%, var(--box-3) 100%); color:var(--silk); font-family:var(--sans); scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body{ overflow:hidden; font-size:calc(15px*var(--res-scale-text,1)); line-height:1.62; background:transparent; letter-spacing:.005em; } body.is-locked{overflow:hidden} ::selection{background:var(--gold);color:var(--box-3)} button,a{font-family:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{text-decoration:none} em{font-style:italic} /* ============================================================================ WEBGL CANVAS — z:0 so the velvet bg sits behind, the rings glow on top ============================================================================ */ #fxCanvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; background:transparent; /* Deck sits above; canvas itself doesn't receive direct events. Ring hover/click is window-level via raycaster. */ pointer-events:none; } /* Cursor highlight when raycaster reports a ring is under the cursor. Applied to so it reads through the deck overlay. */ body.is-ring-hover, body.is-ring-hover .deck, body.is-ring-hover .scene{cursor:pointer} /* ============================================================================ ATMOSPHERE OVERLAYS — velvet vignette + a whisper of grain No scanlines. No HUD. Atelier silence. ============================================================================ */ .velvet{ position:fixed; inset:0; z-index:1; pointer-events:none; background: radial-gradient(140% 100% at 50% 45%, transparent 38%, rgba(4,6,20,.55) 78%, rgba(4,6,20,.92) 100%), radial-gradient(60% 40% at 50% 12%, rgba(243,241,236,.04) 0%, transparent 70%); } .grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.04; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } /* ============================================================================ ATELIER RAILS — hairline lines top + bottom, italianic small caps ============================================================================ */ .rail{ position:fixed; left:clamp(28px,4vw,72px); right:clamp(28px,4vw,72px); display:flex; align-items:center; gap:18px; z-index:6; pointer-events:none; font:500 10px/1 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--silk-mute); opacity:.78; } .rail--top{top:36px} .rail--bottom{bottom:36px} .rail__line{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--hairline-w),transparent); } .rail .dot{ display:inline-block; width:5px;height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); margin-right:10px; animation:emberPulse 2.2s ease-in-out infinite; } @keyframes emberPulse{ 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.18)} } /* ============================================================================ BRAND (TL) + TONE (TR) + SCENE (BL) + SCROLL (BR) ============================================================================ */ .brand-fixed{ position:fixed; top:30px; left:clamp(28px,4vw,72px); z-index:50; display:flex; align-items:center; gap:14px; font:500 11px/1 var(--mono); letter-spacing:.36em; text-transform:uppercase; color:var(--silk); } .brand-fixed__mark{ width:22px;height:22px; filter:drop-shadow(0 0 6px rgba(212,165,89,.32)); } .brand-fixed__name{color:var(--silk)} .tone-toggle{ position:fixed; top:30px; right:clamp(28px,4vw,72px); z-index:50; display:flex; align-items:center; gap:14px; font:500 10px/1 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--silk-mute); transition:color .4s var(--ease); } .tone-toggle:hover{color:var(--gold)} .tone-toggle__bars{ width:48px;height:12px; color:var(--gold); opacity:.42; transition:opacity .4s var(--ease); } .tone-toggle.is-on .tone-toggle__bars{opacity:1;animation:toneBreathe 2.4s ease-in-out infinite} .tone-toggle.is-on{color:var(--gold)} @keyframes toneBreathe{ 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.78)} } .scene-indicator{ position:fixed; bottom:34px; left:clamp(28px,4vw,72px); z-index:50; display:flex; align-items:center; gap:14px; font:500 11px/1 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--silk-mute); } .scene-indicator__num{color:var(--gold);font-weight:600} .scene-indicator__label{color:var(--silk)} .scene-indicator__bar{ position:relative; width:140px;height:1px; background:var(--hairline-2); overflow:hidden; } .scene-indicator__fill{ position:absolute; inset:0; width:16.66%; background:linear-gradient(90deg,var(--chrome),var(--gold) 50%,var(--rose)); transition:width .9s var(--ease-out); transform-origin:left; box-shadow:0 0 10px rgba(212,165,89,.45); } .scroll-cue{ position:fixed; bottom:34px; right:clamp(28px,4vw,72px); z-index:50; display:flex; flex-direction:column; align-items:center; gap:8px; font:500 10px/1 var(--mono); letter-spacing:.36em; text-transform:uppercase; color:var(--silk-mute); transition:opacity .8s var(--ease); } .scroll-cue.is-hidden{opacity:0;pointer-events:none} .scroll-cue .arrow{ font-size:14px; color:var(--gold); animation:scrollNudge 2.4s ease-in-out infinite; } @keyframes scrollNudge{ 0%,100%{transform:translateY(0);opacity:.55} 50%{transform:translateY(6px);opacity:1} } /* ============================================================================ DECK + SCENES ============================================================================ */ .deck{ position:relative; z-index:5; height:100svh; overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; } .deck::-webkit-scrollbar{display:none} .scene{ scroll-snap-align:start; min-height:100svh; display:flex; align-items:center; padding:clamp(96px,10vh,140px) clamp(28px,5vw,120px); position:relative; } .scene__inner{ width:100%; max-width:1320px; margin:0 auto; position:relative; z-index:1; } /* Scene over-darkeners — keep text legible against the bright ring glow. Hero gets a left-side ink curtain; ring scenes get a one-side curtain so the text reads on velvet while the ring stays in studio light. */ .scene--hero::before{ content:""; position:absolute; inset:0; z-index:0; background: linear-gradient(90deg,rgba(4,6,20,.78) 0%,rgba(4,6,20,.55) 28%,rgba(4,6,20,.18) 52%,transparent 78%); pointer-events:none; } .scene--ring-i::before, .scene--ring-iii::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,rgba(4,6,20,.82) 0%,rgba(4,6,20,.55) 30%,rgba(4,6,20,.10) 55%,transparent 78%); pointer-events:none; } .scene--ring-ii::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(270deg,rgba(4,6,20,.82) 0%,rgba(4,6,20,.55) 30%,rgba(4,6,20,.10) 55%,transparent 78%); pointer-events:none; } .scene--commission::before, .scene--footer::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(4,6,20,.62) 0%,rgba(4,6,20,.82) 50%,rgba(4,6,20,.94) 100%); pointer-events:none; } /* ============================================================================ SECTION LABELS, DISPLAY HEADINGS, COPY ============================================================================ */ .scene__label{ display:inline-flex; align-items:center; gap:10px; font:500 11px/1 var(--mono); letter-spacing:.40em; text-transform:uppercase; color:var(--silk-mute); margin-bottom:clamp(20px,2.4vw,42px); } .scene__label::before{content:'[ ';color:var(--silk-faint)} .scene__label::after{content:' ]';color:var(--silk-faint)} .ord{color:var(--gold)} .display{ font-family:var(--serif); font-weight:400; font-size:clamp(72px, 11vw, 168px); line-height:.92; letter-spacing:-.01em; color:var(--silk); text-shadow:0 4px 60px rgba(4,6,20,.45); } .display__sub{ margin-top:clamp(28px,2.5vw,42px); font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.6vw,28px); line-height:1.42; font-style:italic; color:var(--silk-mute); max-width:54ch; } .display--md{ font-size:clamp(54px,7vw,108px); line-height:.96; } .display em{font-style:italic;color:var(--gold)} .copy{ font-size:clamp(15px,1.05vw,17px); line-height:1.7; color:var(--silk-mute); max-width:48ch; margin-top:clamp(18px,1.6vw,28px); } .copy.center{margin-left:auto;margin-right:auto;text-align:center} .copy--lede{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,1.4vw,24px); color:var(--silk); line-height:1.46; max-width:42ch; } .center{text-align:center} /* ============================================================================ HERO LAYOUT (Scene 01) — text left, hero spec card right ============================================================================ */ .hero-grid{ display:grid; grid-template-columns:1.4fr .8fr; gap:clamp(48px,6vw,128px); align-items:end; } .hero-text{position:relative} .hero-meta{ margin-top:clamp(36px,3.5vw,56px); display:flex; flex-wrap:wrap; gap:14px; } .meta-chip{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border:1px solid var(--hairline-2); border-radius:999px; font:500 10.5px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--silk-mute); background:rgba(4,6,20,.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .meta-chip i{ width:5px;height:5px;border-radius:50%; background:var(--gold); box-shadow:0 0 6px var(--gold); } .hero-foot{ margin-top:clamp(24px,2vw,36px); font:500 10.5px/1 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--silk-faint); } /* Hero spec card — small jewellery-catalogue card with hairlines */ .hero-spec{ border:1px solid var(--hairline-2); border-radius:2px; padding:28px 28px 26px; background:linear-gradient(180deg,rgba(243,241,236,.04),rgba(4,6,20,.04)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:16px; max-width:340px; margin-left:auto; } .hero-spec__h{ font:500 10px/1 var(--mono); letter-spacing:.36em; text-transform:uppercase; color:var(--silk-faint); } .hero-spec__big{ font-family:var(--serif); font-size:96px; line-height:.85; letter-spacing:-.01em; color:var(--silk); margin-top:-6px; } .hero-spec__list{ list-style:none; display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--hairline); padding-top:18px; } .hero-spec__list li{ display:grid; grid-template-columns:24px 1fr auto; gap:14px; align-items:baseline; font-size:13.5px; color:var(--silk); } .hero-spec__list li > span:first-child{ color:var(--gold); font-weight:500; font-family:var(--mono); font-size:11px; } .hero-spec__list li em{ font-style:italic; color:var(--silk-faint); font-family:var(--serif); font-size:13px; } .hero-spec__foot{ font-size:11px; font-style:italic; color:var(--silk-faint); border-top:1px solid var(--hairline); padding-top:14px; line-height:1.55; } /* ============================================================================ RING SCENES (02, 03, 04) — text on one side, plinth label on the other The actual ring is the WebGL canvas behind. The plinth is decorative framing, not the ring itself. ============================================================================ */ .ring-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(48px,6vw,128px); align-items:center; min-height:60vh; } .ring-grid--rev{grid-template-columns:1.08fr .92fr} .ring-grid--rev .ring-text{order:2} .ring-grid--rev .ring-plinth{order:1} .ring-text{ position:relative; max-width:560px; } .ring-text .copy + .copy{margin-top:18px} /* Spec list — atelier catalogue style */ .spec-list{ margin-top:clamp(28px,2.4vw,40px); border-top:1px solid var(--hairline-2); padding-top:clamp(20px,1.6vw,28px); display:flex; flex-direction:column; gap:0; } .spec-list > div{ display:grid; grid-template-columns:140px 1fr; gap:24px; padding:11px 0; border-bottom:1px solid var(--hairline); font-size:14px; } .spec-list > div:last-child{border-bottom:0} .spec-list dt{ font:500 10.5px/1.4 var(--mono); letter-spacing:.28em; text-transform:uppercase; color:var(--silk-faint); } .spec-list dd{ color:var(--silk); font-family:var(--serif); font-style:italic; font-size:16px; } /* Ring plinth — a quiet decorative caption that sits opposite the ring. The actual ring is in the WebGL behind. This is just the maison label. */ .ring-plinth{ position:relative; height:clamp(360px,52vh,560px); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; } .ring-plinth__halo{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 45%, rgba(232,232,237,.18) 0%, transparent 50%); filter:blur(40px); pointer-events:none; } .ring-plinth__halo--gold{ background:radial-gradient(circle at 50% 45%, rgba(212,165,89,.28) 0%, transparent 50%); } .ring-plinth__halo--rose{ background:radial-gradient(circle at 50% 45%, rgba(244,194,194,.22) 0%, rgba(185,160,212,.10) 30%, transparent 55%); } .ring-plinth__bracket{ position:absolute; bottom:64px; left:50%; transform:translateX(-50%); width:160px; height:1px; background:linear-gradient(90deg,transparent,var(--hairline-w),transparent); } .ring-plinth__bracket::before, .ring-plinth__bracket::after{ content:""; position:absolute; top:-3px; width:1px; height:7px; background:var(--hairline-w); } .ring-plinth__bracket::before{left:0} .ring-plinth__bracket::after{right:0} .ring-plinth__cap{ position:relative; text-align:center; font:500 10px/1 var(--mono); letter-spacing:.36em; text-transform:uppercase; color:var(--silk-faint); margin-top:24px; } /* ============================================================================ COMMISSION FOLIO (Scene 05) — maison invitation, no price grid ============================================================================ */ .commission-folio{ max-width:1080px; margin:0 auto; } .commission-folio__h{ text-align:left; margin-bottom:clamp(36px,4vw,56px); } .commission-folio__grid{ display:grid; grid-template-columns:200px 1fr; gap:clamp(48px,6vw,96px); align-items:start; } .commission-folio__seal{ position:sticky; top:140px; display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:24px 18px 22px; border:1px solid var(--hairline-2); border-radius:2px; background:linear-gradient(180deg,rgba(212,165,89,.04),rgba(4,6,20,.04)); } .commission-folio__seal-h{ font:500 9.5px/1 var(--mono); letter-spacing:.36em; text-transform:uppercase; color:var(--silk-mute); margin:0; } .commission-folio__seal-mark{ position:relative; width:78px; height:78px; margin:4px auto 4px; display:flex; align-items:center; justify-content:center; } .commission-folio__seal-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(212,165,89,.55); box-shadow:inset 0 0 24px rgba(212,165,89,.10); } .commission-folio__seal-ring::before{ content:''; position:absolute; inset:7px; border-radius:50%; border:1px solid rgba(212,165,89,.30); } .commission-folio__seal-monogram{ position:relative; font-family:var(--serif); font-style:italic; font-weight:400; font-size:38px; color:var(--gold); line-height:1; text-shadow:0 0 14px rgba(212,165,89,.25); } .commission-folio__seal-foot{ font:500 8.5px/1.5 var(--mono); letter-spacing:.30em; text-transform:uppercase; color:var(--silk-faint); margin:0; text-align:left; } .commission-folio__body{ font-family:var(--serif); color:var(--silk); } .commission-folio__lede{ font-family:var(--serif); font-size:clamp(17px,1.55vw,21px); line-height:1.65; color:var(--silk); margin:0 0 clamp(34px,3.4vw,52px); max-width:62ch; font-weight:300; } .commission-folio__lede::first-letter{ font-style:italic; font-size:1.6em; color:var(--gold); padding-right:.04em; } .commission-folio__routes{ list-style:none; margin:0 0 clamp(38px,3.6vw,56px); padding:0; display:flex; flex-direction:column; gap:clamp(22px,2.2vw,32px); border-top:1px solid var(--hairline); padding-top:clamp(24px,2.4vw,32px); } .commission-folio__routes li{ display:grid; grid-template-columns:42px 1fr; gap:18px; align-items:baseline; padding-bottom:clamp(20px,2vw,28px); border-bottom:1px solid var(--hairline); } .commission-folio__routes li:last-child{border-bottom:0;padding-bottom:0} .commission-folio__route-num{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:30px; color:var(--gold); line-height:1; } .commission-folio__routes p{ margin:0; font-family:var(--serif); font-size:15.5px; line-height:1.66; color:var(--silk-mute); max-width:62ch; font-weight:300; } .commission-folio__routes p em{ font-style:italic; color:var(--silk); letter-spacing:.005em; } .commission-folio__foot{ display:flex; flex-direction:column; gap:14px; padding-top:clamp(20px,2vw,28px); border-top:1px solid var(--hairline); } .commission-folio__cta{ align-self:flex-start; font-family:var(--serif); font-style:italic; font-size:clamp(20px,1.7vw,24px); color:var(--gold); text-decoration:none; letter-spacing:.005em; border-bottom:1px solid rgba(212,165,89,.35); padding-bottom:6px; transition:color .3s var(--ease), border-color .3s var(--ease); } .commission-folio__cta:hover{ color:var(--silk); border-bottom-color:var(--silk); } .commission-folio__note{ margin:0; font:500 10.5px/1.7 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--silk-faint); } .commission-folio__price{ display:block; margin-top:6px; font-style:normal; letter-spacing:.18em; color:var(--silk-mute); } /* ============================================================================ FOOTER / REACH (Scene 06) ============================================================================ */ .center-col{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; } .reach-btns{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:clamp(24px,2vw,40px); } .reach-btn{ padding:16px 26px; border:1px solid var(--hairline-w); border-radius:2px; font:500 11px/1 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--silk); background:transparent; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-out); } .reach-btn:hover{ background:rgba(243,241,236,.08); transform:translateY(-2px); } .reach-btn--primary{ background:var(--gold); color:var(--box-3); border-color:var(--gold); } .reach-btn--primary:hover{ background:var(--silk); border-color:var(--silk); color:var(--box-3); } .foot{ margin-top:clamp(48px,5vw,88px); display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; font:500 10px/1 var(--mono); letter-spacing:.36em; text-transform:uppercase; color:var(--silk-faint); } .foot__line{ flex:0 0 80px; height:1px; background:var(--hairline-2); } /* ============================================================================ REVEAL CHOREOGRAPHY — slow, atelier pace, premium curve ============================================================================ */ [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity 1.2s var(--ease-out) var(--rd,0ms), transform 1.4s var(--ease-out) var(--rd,0ms); will-change:opacity,transform; } [data-reveal].is-visible{opacity:1;transform:translateY(0)} /* ============================================================================ GATE — velvet curtain over the case until you choose to open it ============================================================================ */ .gate{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 90% at 50% 50%, var(--box) 0%, var(--box-2) 60%, var(--box-3) 100%); transition:opacity 1.2s var(--ease-out), visibility 1.2s var(--ease-out); } .gate.is-open{opacity:0;visibility:hidden;pointer-events:none} .gate__bg{ position:absolute; inset:0; background: radial-gradient(60% 40% at 50% 30%, rgba(212,165,89,.10) 0%, transparent 60%), radial-gradient(40% 30% at 50% 70%, rgba(244,194,194,.06) 0%, transparent 70%); pointer-events:none; } .gate__inner{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; padding:32px; max-width:520px; } .gate__loading{ display:flex; align-items:center; gap:8px; font:500 10px/1 var(--mono); letter-spacing:.36em; text-transform:uppercase; color:var(--silk-faint); margin-bottom:18px; } .dots{display:inline-flex;gap:3px;align-items:center} .dots i{ width:3px;height:3px;border-radius:50%;background:var(--gold); animation:dotBlink 1.4s ease-in-out infinite; } .dots i:nth-child(2){animation-delay:.18s} .dots i:nth-child(3){animation-delay:.36s} @keyframes dotBlink{0%,100%{opacity:.2}50%{opacity:1}} .gate__mark{ width:60px;height:60px; filter:drop-shadow(0 0 14px rgba(212,165,89,.32)); margin-bottom:6px; animation:gateMarkSpin 24s linear infinite; } @keyframes gateMarkSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} .gate__title{ font-family:var(--serif); font-size:64px; line-height:.92; color:var(--silk); letter-spacing:-.01em; } .gate__sub{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--silk-mute); margin-bottom:20px; } .gate__btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .gate__btn{ padding:14px 24px; border:1px solid var(--hairline-w); border-radius:2px; font:500 11px/1 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--silk); background:transparent; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .gate__btn:hover{ background:rgba(243,241,236,.08); border-color:var(--silk); } .gate__btn--primary{ background:var(--gold); color:var(--box-3); border-color:var(--gold); } .gate__btn--primary:hover{ background:var(--silk); border-color:var(--silk); color:var(--box-3); } .gate__small{ margin-top:14px; font-size:11px; font-style:italic; color:var(--silk-faint); font-family:var(--serif); max-width:34ch; line-height:1.5; } /* ============================================================================ BOOT OVERLAY — shows GLB+HDR loading progress under the gate ============================================================================ */ .boot{ position:fixed; bottom:0; left:0; right:0; z-index:201; padding:18px clamp(28px,4vw,72px) 24px; display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; transition:opacity .8s var(--ease), transform .8s var(--ease); } .boot.is-done{opacity:0;transform:translateY(8px)} .boot__line{ display:flex; align-items:center; gap:8px; font:500 10px/1 var(--mono); letter-spacing:.36em; text-transform:uppercase; color:var(--silk-faint); } .boot__dots{display:inline-flex;gap:3px;align-items:center} .boot__dots i{ width:3px;height:3px;border-radius:50%;background:var(--gold); animation:dotBlink 1.4s ease-in-out infinite; } .boot__dots i:nth-child(2){animation-delay:.18s} .boot__dots i:nth-child(3){animation-delay:.36s} .boot__bar{ position:relative; width:240px;height:1px; background:var(--hairline-2); overflow:hidden; } .boot__fill{ position:absolute;inset:0; width:0; background:linear-gradient(90deg,var(--chrome),var(--gold) 50%,var(--rose)); transition:width .4s var(--ease-out); box-shadow:0 0 8px rgba(212,165,89,.45); } /* ============================================================================ RESPONSIVE — narrow window ============================================================================ */ @media (max-width: 980px){ .hero-grid{grid-template-columns:1fr;gap:40px;align-items:start} .hero-spec{margin-left:0;max-width:none} .ring-grid, .ring-grid--rev{grid-template-columns:1fr;gap:32px} .ring-grid--rev .ring-text{order:1} .ring-grid--rev .ring-plinth{order:2} .ring-plinth{height:clamp(200px,32vh,320px)} .commission-folio__grid{grid-template-columns:1fr;gap:36px} .commission-folio__seal{position:static;flex-direction:row;align-items:center;gap:14px;padding:14px 16px;width:auto;max-width:none} .commission-folio__seal-mark{width:54px;height:54px;margin:0} .commission-folio__seal-monogram{font-size:26px} .commission-folio__seal-foot{font-size:8px} .commission-folio__routes li{grid-template-columns:32px 1fr;gap:12px} .display{font-size:clamp(56px,16vw,108px)} .display--md{font-size:clamp(40px,11vw,72px)} .rail{display:none} .scene-indicator__bar{width:80px} } @media (max-width: 600px){ .scene{padding:clamp(80px,12vh,120px) 24px} .brand-fixed,.tone-toggle{top:18px} .brand-fixed{left:24px} .tone-toggle{right:24px} .scene-indicator{bottom:22px;left:24px} .scroll-cue{bottom:22px;right:24px} .gate__title{font-size:48px} .hero-spec__big{font-size:72px} } /* ============================================================================ LETTER-BY-LETTER DISPLAY REVEAL — "Asylum." stagger 110ms, expo.out GSAP drives the actual animation; we only set the rest pose here. ============================================================================ */ .display--letters{ display:inline-block; white-space:nowrap; } .display--letters .ltr{ display:inline-block; opacity:0; transform:translateY(.62em) rotate(2.2deg); transform-origin:50% 90%; will-change:opacity,transform; /* reserve glyph metrics — italic Italiana with subtle warm gradient */ background:linear-gradient(180deg, #f3f1ec 0%, #d4a559 60%, #f4c2c2 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 8px 30px rgba(212,165,89,.28)); } .display--letters .ltr--dot{ background:linear-gradient(180deg, #d4a559 0%, #f4c2c2 100%); -webkit-background-clip:text; background-clip:text; } /* ============================================================================ RING CATALOGUE CARD — slides in from the right when its scene is active. GSAP drives the entry; CSS holds the rest pose + visual language. ============================================================================ */ .ring-card{ position:absolute; right:0; bottom:0; width:min(360px, 86%); padding:24px 24px 22px; display:flex; flex-direction:column; gap:14px; pointer-events:auto; /* glass panel — atelier ivory on velvet */ background: linear-gradient(180deg, rgba(243,241,236,.06) 0%, rgba(4,6,20,.30) 100%); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1); border:1px solid var(--hairline-2); border-radius:2px; box-shadow: 0 22px 60px -12px rgba(4,6,20,.62), 0 0 0 1px rgba(243,241,236,.04) inset; /* GSAP rest pose */ opacity:0; transform:translate3d(28px, 0, 0); will-change:opacity, transform; } .ring-card::before{ content:""; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(90deg,transparent,var(--hairline-w),transparent); } .ring-card--chrome::before{background:linear-gradient(90deg,transparent,rgba(232,232,237,.55),transparent)} .ring-card--gold::before {background:linear-gradient(90deg,transparent,rgba(212,165,89,.65),transparent)} .ring-card--rose::before {background:linear-gradient(90deg,transparent,rgba(244,194,194,.55),transparent)} .ring-card__head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--hairline); padding-bottom:12px; } .ring-card__num{ font-family:var(--serif); font-style:italic; font-size:22px; color:var(--gold); line-height:1; } .ring-card__name{ font-family:var(--serif); font-size:28px; line-height:1; color:var(--silk); letter-spacing:-.005em; } .ring-card--chrome .ring-card__num{color:var(--chrome)} .ring-card--gold .ring-card__num{color:var(--gold)} .ring-card--rose .ring-card__num{color:var(--rose)} .ring-card__metal{ margin-left:auto; font:500 9.5px/1 var(--mono); letter-spacing:.34em; text-transform:uppercase; color:var(--silk-faint); border:1px solid var(--hairline-2); padding:5px 8px; border-radius:999px; } .ring-card__lede{ font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--silk-mute); line-height:1.5; } .ring-card__facts{ list-style:none; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--hairline); padding-top:12px; font-size:12.5px; color:var(--silk); } .ring-card__facts li{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; } .ring-card__facts li > span{ font:500 10px/1 var(--mono); letter-spacing:.28em; text-transform:uppercase; color:var(--silk-faint); } .ring-card__facts li em{ font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--silk); } .ring-card__cta{ margin-top:6px; padding:11px 14px; border:1px solid var(--hairline-w); border-radius:2px; font:500 11px/1 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--silk); background:transparent; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-out); } .ring-card__cta:hover{ background:rgba(243,241,236,.08); transform:translateY(-2px); } .ring-card__cta--gold{ border-color:var(--gold); color:var(--gold); } .ring-card__cta--gold:hover{ background:var(--gold); color:var(--box-3); } .ring-card__cta--rose{ border-color:rgba(244,194,194,.55); color:var(--rose); } .ring-card__cta--rose:hover{ background:var(--rose); color:var(--box-3); border-color:var(--rose); } /* When the parent scene becomes active, GSAP applies .is-card-in. We keep a CSS fallback class for prefers-reduced-motion users. */ .ring-card.is-card-in{opacity:1;transform:translate3d(0,0,0)} @media (max-width: 980px){ .ring-card{ position:relative; right:auto;bottom:auto; width:100%; max-width:none; margin-top:18px; } } /* ============================================================================ LUX-MINIMAL OVERRIDE — strip the broadcast/HUD chrome (bottom rail, scene indicator, scroll cue) and add a slim Boucheron-style nav below the maison header line. Floating italic-serif product caption replaces the scene indicator. Bottom origin info as a thin one-liner. ============================================================================ */ .rail--bottom, .scene-indicator, .scroll-cue{ display: none !important; } /* Soften the maison top rail (kept) so it reads as a header, not chrome */ .rail--top{ top: 28px; opacity: .65; } .rail--top .rail__line{ background: linear-gradient(90deg, transparent, rgba(243, 241, 236, .14), transparent); } /* ---- Slim luxe nav (centered just below the maison line) ---- */ .lux-nav-asylum{ position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 55; display: inline-flex; align-items: center; gap: clamp(20px, 2.6vw, 38px); padding: 4px 0; font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--silk-mute); pointer-events: auto; } .lux-nav-asylum a{ position: relative; padding: 6px 0; color: var(--silk-mute); transition: color .4s var(--ease); } .lux-nav-asylum a::after{ content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; background: var(--gold); transform: translateX(-50%); transition: width .45s var(--ease); } .lux-nav-asylum a:hover{color: var(--silk)} .lux-nav-asylum a:hover::after{width: 18px} .lux-nav-asylum__cta{ margin-left: 4px; padding: 7px 18px !important; border: 1px solid rgba(212, 165, 89, .55); border-radius: 999px; color: var(--gold) !important; letter-spacing: .06em; transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); } .lux-nav-asylum__cta::after{display: none} .lux-nav-asylum__cta:hover{ background: var(--gold); border-color: var(--gold); color: var(--box-3) !important; } /* ---- Floating product caption (lower-right, italic serif, swaps per scene) ---- */ .lux-caption{ position: fixed; right: clamp(28px, 4vw, 72px); bottom: clamp(48px, 6vh, 84px); z-index: 55; display: inline-flex; align-items: center; gap: 14px; pointer-events: none; opacity: 0; animation: luxCapFadeAsy 1.6s var(--ease-out) 1.4s forwards; } .lux-caption__line{ display: inline-block; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 165, 89, .55)); } .lux-caption__text{ font-family: var(--serif); font-style: italic; font-size: 16px; letter-spacing: .005em; color: rgba(243, 241, 236, .82); text-shadow: 0 1px 6px rgba(4, 6, 20, .6); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); } .lux-caption__text.is-fading{opacity: 0; transform: translateY(4px)} @keyframes luxCapFadeAsy{ from {opacity: 0; transform: translateY(8px)} to {opacity: 1; transform: translateY(0)} } /* ---- Bottom origin info (atelier hours), tiny, no chrome ---- */ .lux-foot-info{ position: fixed; left: clamp(28px, 4vw, 72px); bottom: clamp(22px, 3vh, 36px); z-index: 55; display: inline-flex; align-items: center; gap: 12px; pointer-events: none; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--silk-faint); } .lux-foot-info__dot{color: rgba(212, 165, 89, .35)} /* ---- Narrow window: collapse nav, hide caption, soften foot info ---- */ @media (max-width: 980px){ .lux-nav-asylum{ top: auto; bottom: 22px; transform: translateX(-50%); gap: 16px; font-size: 11px; } .lux-caption{display: none} .lux-foot-info{ bottom: 14px; left: 20px; font-size: 9px; letter-spacing: .1em; gap: 8px; } } /* ============================================================================ PREFERS-REDUCED-MOTION ============================================================================ */ @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} .display--letters .ltr{opacity:1;transform:none} .ring-card{opacity:1;transform:none} }