/* ══════════════════════════════════════════════════════════════════════ HINENI — IMMERSIVE SHELL Layered ON TOP of styles.css. Brings the homepage's immersive language (blended fixed chrome, full-bleed hero, big editorial section headers, ghost numerals, reveal-on-scroll, progress bar, right-side section index) to every interior page — WITHOUT touching content or functionality. Activated by + + immersive.js. ══════════════════════════════════════════════════════════════════════ */ .immersive{ --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif; } /* hide the OLD nav once the shell script runs (gated on .ix-ready so a JS failure leaves the original nav usable instead of no nav at all) */ .immersive.ix-ready #nav{display:none !important;} /* skip link */ .immersive .iskip{position:fixed; top:-100px; left:1rem; z-index:120; background:#8E6F45; color:#fff; padding:.7rem 1.1rem; border-radius:2px; font:600 .72rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; transition:top .2s;} .immersive .iskip:focus{top:1rem; outline:2px solid #fff; outline-offset:2px;} .immersive a:focus-visible, .immersive button:focus-visible{outline:3px solid #1B262C; outline-offset:2px; border-radius:2px; box-shadow:0 0 0 6px rgba(255,255,255,.95);} /* ─── top progress bar ─── */ .iprog{position:fixed; top:0; left:0; height:2px; background:var(--gold); width:0; z-index:110; transition:width .12s linear;} /* ─── fixed chrome ─── */ .chrome{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.5rem clamp(1.5rem,5vw,3.5rem); transition:padding .35s ease, background .35s ease, box-shadow .35s ease, border-color .35s ease; border-bottom:1px solid transparent;} .chrome.solid{ background:linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 38%, transparent 70%), rgba(30,80,103,.66); -webkit-backdrop-filter:saturate(170%) blur(16px); backdrop-filter:saturate(170%) blur(16px); padding-top:.95rem; padding-bottom:.95rem; border-bottom-color:rgba(255,255,255,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 10px 34px rgba(0,0,0,.18); } .chrome.solid .brand b, .chrome.solid .menu a{text-shadow:0 1px 2px rgba(0,0,0,.35);} .chrome .brand{display:flex; align-items:center; gap:.7rem; text-decoration:none;} .chrome .brand img{height:30px; width:auto; display:block; filter:brightness(0) invert(1);} .chrome .brand b{font-family:var(--serif); font-weight:600; font-size:1.18rem; letter-spacing:.04em; color:#fff;} .chrome .menu{display:flex; align-items:center; gap:1.9rem;} .chrome .menu a{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; text-decoration:none; opacity:.86; transition:opacity .25s, color .25s; white-space:nowrap;} .chrome .menu a:hover{opacity:1;} .chrome .menu a.active{color:var(--gold-light); opacity:1;} .chrome .menu .talk{border:1px solid rgba(255,255,255,.5); padding:.5rem 1.15rem; opacity:1; border-radius:40px; transition:background .3s, color .3s, border-color .3s;} .chrome .menu .talk:hover{background:var(--gold); border-color:var(--gold); color:#fff;} .chrome .menu .talk.active{color:#fff; border-color:var(--gold);} /* mobile menu button + drawer */ .navbtn{position:fixed; top:1.05rem; right:1.05rem; z-index:130; display:none; width:46px; height:46px; border:none; cursor:pointer; border-radius:10px; background:rgba(20,32,42,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); flex-direction:column; align-items:center; justify-content:center; gap:5px;} .navbtn span{display:block; width:22px; height:2px; background:#fff; transition:transform .3s, opacity .3s;} .navbtn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .navbtn.open span:nth-child(2){opacity:0;} .navbtn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .idrawer{position:fixed; inset:0; z-index:125; background:linear-gradient(160deg,#14202a,var(--teal-deep)); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.3rem; opacity:0; visibility:hidden; transition:opacity .3s; padding:5rem 1.5rem; overflow-y:auto; -webkit-overflow-scrolling:touch;} .idrawer > nav{margin-top:auto; margin-bottom:auto; display:flex; flex-direction:column; align-items:center; gap:.3rem; width:100%;} .idrawer.open{opacity:1; visibility:visible;} .idrawer a{display:block; padding:.7rem 1.2rem; text-align:center; font-size:1.05rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; text-decoration:none; opacity:.85;} .idrawer a.cta{margin-top:.6rem; background:#8E6F45; padding:.85rem 1.8rem; opacity:1; border-radius:40px;} .idrawer a:hover{opacity:1; color:var(--gold-light);} /* ─── right-side section index ─── */ .dots{position:fixed; right:clamp(.9rem,2.4vw,2rem); top:50%; transform:translateY(-50%); z-index:90; display:flex; flex-direction:column; gap:1rem; align-items:flex-end; filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));} .dots button{pointer-events:auto; background:rgba(20,32,42,.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:none; cursor:pointer; display:flex; align-items:center; gap:.65rem; color:#fff; opacity:.9; transition:opacity .3s; font-family:var(--sans); padding:.32rem .55rem; border-radius:30px;} .dots button .n{font-size:.6rem; letter-spacing:.18em; font-variant-numeric:tabular-nums; width:1.4em; text-align:right; transform:translateX(8px); opacity:0; transition:all .3s;} .dots button .bar{width:16px; height:2px; background:#fff; transition:width .3s, background .3s;} .dots button:hover{opacity:.95;} .dots button.on{opacity:1;} .dots button.on .bar{width:32px; background:var(--gold-light);} .dots button.on .n{opacity:1; transform:translateX(0); color:var(--gold-light);} @media (max-width:1100px){.dots{display:none;}} /* ════════ HERO (re-skin #hero into a full-bleed immersive stage) ════════ */ .immersive #hero{min-height:100vh; min-height:100dvh;} .immersive #hero .hero-gradient{background:linear-gradient(150deg,#163d4f 0%,#2A6E87 48%,#1E5067 100%); opacity:1;} .immersive .hero-castle{position:absolute; right:-4%; bottom:-8%; width:min(58vw,720px); height:auto; opacity:.10; object-fit:contain; pointer-events:none; z-index:1;} .immersive .hero-glow{position:absolute; width:70vw; height:70vw; right:-20vw; top:-20vw; border-radius:50%; background:radial-gradient(circle,rgba(91,165,194,.45),transparent 60%); pointer-events:none; z-index:1;} .immersive .hero-eyebrow{font-size:.72rem; letter-spacing:.34em; color:var(--brass-soft);} .immersive .hero-title{font-family:var(--serif); letter-spacing:-.01em; line-height:1.14; padding-bottom:.85rem;} .immersive .hero-title em{color:var(--brass-soft);} /* scroll cue */ .hero-scrollcue{position:absolute; bottom:2.1rem; left:50%; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:.65rem; color:rgba(255,255,255,.7); pointer-events:none;} .hero-scrollcue span{font-size:.58rem; letter-spacing:.32em; text-transform:uppercase;} .hero-scrollcue .track{width:1px; height:44px; background:rgba(255,255,255,.25); position:relative; overflow:hidden;} .hero-scrollcue .track::after{content:''; position:absolute; top:-50%; left:0; width:1px; height:50%; background:var(--gold-light); animation:icue 2.1s cubic-bezier(.6,0,.4,1) infinite;} @keyframes icue{0%{top:-50%}60%,100%{top:100%}} @media (max-height:680px){.hero-scrollcue{display:none;}} /* ════════ EDITORIAL SECTION HEADERS + ghost numerals ════════ */ /* make sections able to hold a ghost numeral behind their content */ .immersive section{position:relative; scroll-margin-top:5rem;} .immersive section > .container, .immersive section > [class*="-inner"]{position:relative; z-index:2;} .ghost-ix{position:absolute; z-index:0; font-family:var(--serif); font-weight:700; line-height:.7; font-size:min(30vw,360px); letter-spacing:-.04em; pointer-events:none; user-select:none; top:-2vh; right:2vw; opacity:.05; color:currentColor;} /* darker sections need a slightly brighter ghost */ .immersive #problem .ghost-ix, .immersive #compare .ghost-ix, .immersive #included .ghost-ix, .immersive #contact .ghost-ix, .immersive #meaning .ghost-ix, .immersive .bg-ink .ghost-ix, .immersive .bg-cerulean .ghost-ix{opacity:.06; color:#fff;} .immersive #founding .ghost-ix{opacity:.10; color:#6b5a3c;} /* bump the editorial scale of section headers */ .immersive .section-eyebrow{font-size:.72rem; letter-spacing:.3em;} .immersive .section-title{font-size:clamp(2.3rem,4.6vw,3.7rem); letter-spacing:-.01em; line-height:1.12;} .immersive .sec, .immersive .sec-sm{padding-top:clamp(5rem,9vw,8rem); padding-bottom:clamp(5rem,9vw,8rem);} /* ─── reveal-on-scroll (shell-level; content reveal still handled by main.js) ─── */ @media (prefers-reduced-motion:no-preference){ .immersive .ireveal{opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);} .immersive .ireveal.in{opacity:1; transform:none;} } /* ─── footer: a touch more immersive spacing ─── */ .immersive #footer{padding-top:clamp(4rem,7vw,5.5rem);} /* ─── brand photography (fills the old .ph "photo coming soon" blocks) ─── */ .immersive .photoframe{position:relative; overflow:hidden; border-radius:5px; background:var(--teal-deep); box-shadow:0 18px 50px rgba(20,32,42,.18);} .immersive .photoframe.ar-wide{aspect-ratio:16/9;} .immersive .photoframe.ar-square{aspect-ratio:1/1;} .immersive .photoframe.ar-tall{aspect-ratio:3/4;} .immersive .photoimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;} .immersive .photo-cap{position:absolute; left:.7rem; bottom:.7rem; z-index:2; display:inline-flex; align-items:center; gap:.4rem; background:rgba(20,32,42,.5); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); color:#fff; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:.34rem .65rem; border-radius:30px;} .immersive .photo-cap::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--gold-light);} .immersive .work-media .photoframe{border-radius:0;} /* honest empty photo placeholder (until real photos are dropped in) */ .immersive .photoframe.empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; background:var(--paper); border:1px dashed rgba(164,129,80,.55); box-shadow:none; color:var(--teal-deep); text-align:center; padding:1.5rem;} .immersive .photoframe.empty svg{width:40px; height:40px; stroke:var(--teal); opacity:.8;} .immersive .photoframe.empty .cap{font-size:.84rem; line-height:1.55; font-style:italic; color:var(--ink-soft); max-width:320px;} .immersive .photoframe.empty .chip{position:absolute; top:.7rem; right:.7rem; font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(164,129,80,.45); padding:.26rem .6rem; border-radius:30px; font-weight:600;} /* ─── responsive ─── */ @media (max-width:900px){ .chrome .menu{display:none;} .navbtn{display:flex;} .ghost-ix{font-size:42vw; right:-3vw;} } @media (max-width:560px){ .chrome{padding:1.1rem 1.1rem;} .iprog{height:3px;} }