/* © Inner Evolution Ltd (expansion works®). All rights reserved. Proprietary and confidential. See LICENSE. */ /* ============================================================================ v2.css: the site in the app's language (30 Sept 2026). Loaded after site.css on every page. It carries: 1. the tokens, named and valued as in the app (src/assets/app/styles/tokens.css), light by default, dark on html.dark (the header switch sets it); 2. the new chrome (header, mobile menu, theme switch, footer), used on every nav-bearing page, rebuilt or not; 3. the v- components the rebuilt pages are made of. Rebuilt pages set `v2: true` in front matter, which puts .v2 on . Legacy pages keep site.css for their bodies and get the new chrome only. ============================================================================ */ :root{ --v-ink:#0b0b0b; --v-paper:#f5f4f0; --v-yellow:#f1ff66; --v-bg:#f5f4f0; --v-text:#0b0b0b; --v-text-2:rgba(11,11,11,.74); --v-text-3:rgba(11,11,11,.6); --v-line:rgba(11,11,11,.09); --v-line-2:rgba(11,11,11,.16); --v-glass:rgba(255,255,255,.55); --v-glass-hi:rgba(255,255,255,.78); --v-glass-edge:rgba(11,11,11,.08); --v-glass-top:inset 0 1px 0 rgba(255,255,255,.8); --v-glass-shadow:0 22px 50px -24px rgba(11,11,11,.22); --v-chrome:rgba(245,244,240,.74); --v-amb-1:242,167,195; --v-amb-1-a:.42; --v-amb-2:241,255,102; --v-amb-2-a:.42; --v-amb-3:138,160,216; --v-amb-3-a:.3; --v-room:#0b0b0b; --v-room-text:#f5f4f0; --v-room-text-2:rgba(245,244,240,.74); --v-accent-text:#0b0b0b; --v-r-sm:12px; --v-r:14px; --v-r-md:18px; --v-r-lg:24px; --v-r-xl:32px; --v-w:1180px; --v-prose:680px; --v-pad-x:clamp(18px,5vw,48px); --v-ease:cubic-bezier(.22,1,.36,1); } html.dark{ --v-bg:#0e0e0d; --v-text:#f5f4f0; --v-text-2:rgba(245,244,240,.76); --v-text-3:rgba(245,244,240,.6); --v-line:rgba(245,244,240,.1); --v-line-2:rgba(245,244,240,.18); --v-glass:rgba(245,244,240,.06); --v-glass-hi:rgba(245,244,240,.1); --v-glass-edge:rgba(245,244,240,.12); --v-glass-top:inset 0 1px 0 rgba(255,255,255,.06); --v-glass-shadow:0 22px 50px -24px rgba(0,0,0,.6); --v-chrome:rgba(14,14,13,.7); --v-amb-1:242,167,195; --v-amb-1-a:.26; --v-amb-2:241,255,102; --v-amb-2-a:.12; --v-amb-3:149,200,162; --v-amb-3-a:.2; --v-room:#1a1a18; --v-accent-text:#f1ff66; } /* ---------- page ground ---------- */ html.v2-page{background:var(--v-bg);} html.dark{background:#0e0e0d;} body.v2{background:transparent;color:var(--v-text);font-family:'Satoshi',ui-sans-serif,system-ui,-apple-system,sans-serif;line-height:1.55;} body.v2 #ew-bg,body.v2 #ew-progress{display:none;} .v-amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--v-bg);} .v-amb i{position:absolute;border-radius:50%;filter:blur(90px);transition:opacity 1.2s var(--v-ease),transform 1.6s var(--v-ease);} .v-amb i:nth-child(1){width:70vmax;height:70vmax;left:-24vmax;top:-34vmax;background:rgba(var(--v-amb-2),var(--v-amb-2-a));} .v-amb i:nth-child(2){width:56vmax;height:56vmax;right:-22vmax;top:-12vmax;background:rgba(var(--v-amb-1),var(--v-amb-1-a));} .v-amb i:nth-child(3){width:60vmax;height:60vmax;right:-10vmax;bottom:-40vmax;background:rgba(var(--v-amb-3),var(--v-amb-3-a));} body[data-tone="rose"] .v-amb i:nth-child(1){transform:translate(10vw,6vh);opacity:.6;} body[data-tone="ink"] .v-amb i{opacity:.35;} /* ---------- type ---------- */ .v2 h1,.v2 h2,.v2 h3,.v2 h4{margin:0;color:inherit;font-weight:900;letter-spacing:-.025em;text-transform:none;} .v2 p{margin:0;} .v-eb{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--v-text-2);} .v-h1{font-size:clamp(40px,6.4vw,78px);line-height:1;letter-spacing:-.04em;} .v-h2{font-size:clamp(30px,4.2vw,50px);line-height:1.05;letter-spacing:-.03em;} .v-h3{font-size:clamp(20px,2.2vw,24px);line-height:1.18;letter-spacing:-.015em;} .v-lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--v-text-2);max-width:620px;} .v-body{font-size:17px;line-height:1.62;color:var(--v-text-2);} .v-body b,.v-body strong{color:var(--v-text);} .v-small{font-size:13.5px;line-height:1.5;color:var(--v-text-3);} .v-note{font-size:14px;font-weight:700;color:var(--v-text-2);} .v2 a{color:inherit;} .v-link{font-weight:800;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;} .v-link:hover{text-decoration-color:var(--v-yellow);} .v-prose{max-width:var(--v-prose);} .v-prose p+p{margin-top:14px;} /* ---------- layout ---------- */ .v-wrap{max-width:var(--v-w);margin:0 auto;padding:0 var(--v-pad-x);} .v-sec{padding:clamp(56px,8vw,104px) 0;position:relative;} .v-sec--tight{padding:clamp(36px,5vw,64px) 0;} .v-stack{display:flex;flex-direction:column;gap:18px;} .v-stack--lg{gap:28px;} .v-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;} .v-grid{display:grid;gap:18px;} .v-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));} .v-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));} .v-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));} .v-grid--5{grid-template-columns:repeat(5,minmax(0,1fr));} .v-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center;} .v-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(24px,3vw,36px);max-width:760px;} .v-center{text-align:center;align-items:center;margin-left:auto;margin-right:auto;} @media (max-width:980px){.v-grid--4,.v-grid--5{grid-template-columns:repeat(2,minmax(0,1fr));}.v-split{grid-template-columns:1fr;}} @media (max-width:680px){.v-grid--2,.v-grid--3,.v-grid--4,.v-grid--5{grid-template-columns:1fr;}} /* ---------- surfaces ---------- */ .v-glass{background:var(--v-glass);border:1px solid var(--v-glass-edge);box-shadow:var(--v-glass-top),var(--v-glass-shadow);border-radius:var(--v-r-lg);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);} .v-card{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:12px;} .v-room{background:var(--v-room);color:var(--v-room-text);border-radius:var(--v-r-xl);} .v-room .v-eb{color:var(--v-yellow);} .v-room .v-body,.v-room .v-lede,.v-room .v-small{color:var(--v-room-text-2);} .v-sun{background:linear-gradient(150deg,#f8ffc2 0%,#f1ff66 78%);color:#0b0b0b;border-radius:var(--v-r-xl);} .v-sun .v-eb,.v-sun .v-body,.v-sun .v-small,.v-sun .v-lede{color:rgba(11,11,11,.74);} .v-rose{background:linear-gradient(150deg,#fde6ec 0%,#f6a0b5 100%);color:#0b0b0b;border-radius:var(--v-r-xl);} .v-rose .v-eb,.v-rose .v-body,.v-rose .v-small{color:rgba(11,11,11,.74);} .v-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;background:var(--v-text);color:var(--v-bg);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;align-self:flex-start;white-space:nowrap;} .v-sun .v-pill,.v-rose .v-pill{background:#0b0b0b;color:#f5f4f0;} .v-room .v-pill{background:#f5f4f0;color:#0b0b0b;} .v-pill--sun{background:var(--v-yellow)!important;color:#0b0b0b!important;} .v-chip{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border-radius:999px;font-size:13.5px;font-weight:700;background:var(--v-glass-hi);box-shadow:inset 0 0 0 1px var(--v-line-2);} .v-rule{height:1px;background:var(--v-line);border:0;margin:0;} /* ---------- buttons ---------- */ .v-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--v-r);font:inherit;font-size:16px;font-weight:800;letter-spacing:0;text-transform:none;text-decoration:none!important;cursor:pointer;border:0;white-space:nowrap;transition:transform .2s var(--v-ease),box-shadow .2s var(--v-ease),background .2s;} .v-btn svg{width:16px;height:16px;flex:none;} .v-btn:hover{transform:translateY(-1px);} .v-btn--sun{background:var(--v-yellow);color:#0b0b0b!important;box-shadow:0 10px 26px -12px rgba(120,130,0,.7);} .v-btn--ink{background:#0b0b0b;color:#f5f4f0!important;} html.dark .v-btn--ink{background:#f5f4f0;color:#0b0b0b!important;} .v-sun .v-btn--ink,.v-rose .v-btn--ink{background:#0b0b0b;color:#f5f4f0!important;} .v-btn--ghost{background:transparent;color:var(--v-text)!important;box-shadow:inset 0 0 0 1.5px var(--v-line-2);} .v-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--v-text);} .v-room .v-btn--ghost{color:#f5f4f0!important;box-shadow:inset 0 0 0 1.5px rgba(245,244,240,.4);} .v-btn--lg{min-height:58px;padding:0 30px;font-size:17px;} .v-btn--block{width:100%;} .v-btn[aria-disabled="true"],.v-btn.is-soon{cursor:default;transform:none;background:var(--v-glass-hi)!important;color:var(--v-text-2)!important;box-shadow:inset 0 0 0 1.5px var(--v-line-2)!important;} .v-sun .v-btn.is-soon,.v-rose .v-btn.is-soon{background:rgba(255,255,255,.55)!important;color:rgba(11,11,11,.7)!important;box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.25)!important;} .v-room .v-btn.is-soon{background:rgba(245,244,240,.1)!important;color:rgba(245,244,240,.8)!important;box-shadow:inset 0 0 0 1.5px rgba(245,244,240,.3)!important;} /* ---------- hero ---------- */ .v-hero{padding:clamp(40px,7vw,96px) 0 clamp(36px,5vw,64px);} .v-hero .v-h1{max-width:13ch;} .v-hero--center{text-align:center;} .v-hero--center .v-h1,.v-hero--center .v-lede{margin-left:auto;margin-right:auto;} .v-hero--center .v-row{justify-content:center;} /* ---------- lists ---------- */ .v-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;} .v-ticks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:16px;line-height:1.5;} .v-ticks li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:1px;background:var(--v-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3L9.6 3.6' fill='none' stroke='%230b0b0b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 0 0 1.5px #0b0b0b;} .v-ticks b{display:block;color:var(--v-text);} .v-ticks span{color:var(--v-text-2);} .v-room .v-ticks b{color:#f5f4f0;}.v-room .v-ticks span{color:var(--v-room-text-2);} .v-steps{list-style:none;margin:0;padding:0;counter-reset:vstep;display:flex;flex-direction:column;gap:14px;} .v-steps li{counter-increment:vstep;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;font-size:16.5px;line-height:1.5;} .v-steps li::before{content:counter(vstep);width:30px;height:30px;border-radius:50%;background:var(--v-text);color:var(--v-bg);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;} .v-room .v-steps li::before{background:var(--v-yellow);color:#0b0b0b;} /* ---------- stack (what you get) ---------- */ .v-stackrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:14px 0;border-top:1px solid var(--v-line);align-items:baseline;} .v-stackrow:first-child{border-top:0;} .v-stackrow b{font-size:16.5px;} .v-stackrow small{display:block;color:var(--v-text-2);font-size:14px;margin-top:2px;} .v-stackrow em{font-style:normal;font-weight:800;color:var(--v-text-2);white-space:nowrap;} .v-strike{text-decoration:line-through;opacity:.62;font-weight:700;} .v-price{font-size:clamp(40px,5vw,56px);font-weight:900;letter-spacing:-.035em;line-height:1;} /* ---------- doors (home lanes) ---------- */ .v-door{position:relative;overflow:hidden;border-radius:var(--v-r-lg);padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;gap:12px;min-height:360px;box-shadow:0 26px 60px -34px rgba(11,11,11,.45);} .v-door h3{font-size:clamp(22px,2vw,26px);line-height:1.12;letter-spacing:-.02em;} .v-door .v-door__foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;align-items:flex-start;} .v-door .v-door__price{font-size:14.5px;font-weight:700;} .v-door--glass{background:var(--v-glass);border:1px solid var(--v-glass-edge);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);} .v-door--photo{background:#0b0b0b;color:#f5f4f0;padding:0;} .v-door--photo img{width:100%;height:190px;object-fit:cover;object-position:50% 22%;display:block;} .v-door--photo .v-door__in{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1;} .v-door--photo p{color:rgba(245,244,240,.76);} /* ---------- quotes & proof ---------- */ .v-quote{font-size:clamp(24px,3vw,36px);font-weight:900;letter-spacing:-.02em;line-height:1.2;} .v-quote-sm{font-size:17px;font-weight:700;line-height:1.45;} .v-by{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--v-text-2);} .v-by img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;} .v-by b{color:var(--v-text);} .v-room .v-by{color:var(--v-room-text-2);}.v-room .v-by b{color:#f5f4f0;} /* ---------- video ---------- */ .v-video{position:relative;border-radius:var(--v-r-lg);overflow:hidden;background:#0b0b0b;box-shadow:0 30px 60px -30px rgba(11,11,11,.6);} .v-video video,.v-video iframe{display:block;width:100%;height:100%;border:0;object-fit:cover;} .v-video--portrait{aspect-ratio:9/16;max-width:340px;} .v-video--wide{aspect-ratio:16/9;} .v-video__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;padding:0;} .v-video__play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .v-video__play span{position:relative;width:72px;height:72px;border-radius:50%;background:var(--v-yellow);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .25s var(--v-ease);} .v-video__play:hover span{transform:scale(1.06);} .v-video__play span::after{content:"";margin-left:5px;border-left:18px solid #0b0b0b;border-top:11px solid transparent;border-bottom:11px solid transparent;} .v-video__label{position:absolute;left:14px;bottom:14px;right:14px;color:#f5f4f0;font-size:13.5px;font-weight:800;text-shadow:0 1px 8px rgba(0,0,0,.5);pointer-events:none;} /* ---------- phones ---------- */ .v-phones{position:relative;min-height:clamp(420px,46vw,600px);} .v-phones img{position:absolute;width:clamp(170px,19vw,270px);height:auto;border-radius:30px;box-shadow:0 40px 70px -30px rgba(11,11,11,.55);transition:transform 1.1s var(--v-ease);} .v-phones img:nth-child(1){left:6%;top:12%;transform:rotate(-7deg);} .v-phones img:nth-child(2){left:38%;top:0;transform:rotate(4deg);z-index:1;} .v-phones img:nth-child(3){right:2%;top:16%;transform:rotate(9deg);} .v-phones.is-folded img{transform:rotate(0) translateY(40px)!important;} @media (max-width:680px){.v-phones{min-height:360px;}.v-phones img{width:150px;}.v-phones img:nth-child(3){display:none;}.v-phones img:nth-child(1){left:4%;}.v-phones img:nth-child(2){left:auto;right:6%;}} /* ---------- faq ---------- */ .v-faq details{border-top:1px solid var(--v-line);padding:18px 0;} .v-faq details:last-child{border-bottom:1px solid var(--v-line);} .v-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;font-size:18px;font-weight:800;line-height:1.35;} .v-faq summary::-webkit-details-marker{display:none;} .v-faq summary::after{content:"+";font-weight:500;font-size:26px;line-height:1;transition:transform .25s var(--v-ease);} .v-faq details[open] summary::after{transform:rotate(45deg);} .v-faq details p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--v-text-2);max-width:720px;} .v-faq details p+p{margin-top:8px;} /* ---------- price row ---------- */ .v-pricecard{padding:18px 20px;display:flex;flex-direction:column;gap:4px;} .v-pricecard b{font-size:clamp(26px,2.6vw,32px);font-weight:900;letter-spacing:-.02em;} .v-pricecard a{margin-top:6px;font-size:14px;} /* ---------- motion ---------- */ .v-rise{opacity:0;transform:translateY(22px);transition:opacity .9s var(--v-ease),transform .9s var(--v-ease);} .v-rise.is-in{opacity:1;transform:none;} .v-rise[data-delay="1"]{transition-delay:.08s;}.v-rise[data-delay="2"]{transition-delay:.16s;}.v-rise[data-delay="3"]{transition-delay:.24s;} .v-numfall{display:inline-flex;align-items:baseline;gap:10px;font-weight:900;letter-spacing:-.03em;} @media (prefers-reduced-motion:reduce){.v-rise{opacity:1;transform:none;transition:none;}.v-phones img{transition:none;}.v-amb i{transition:none;}} html.no-js .v-rise{opacity:1;transform:none;} /* ============================================================================ CHROME: header, mobile menu, theme switch, footer (every nav page) ============================================================================ */ .vh{position:sticky;top:0;z-index:900;padding:12px var(--v-pad-x) 0;} .vh__bar{max-width:var(--v-w);margin:0 auto;display:flex;align-items:center;gap:22px;padding:10px 12px 10px 22px;border-radius:20px;background:var(--v-chrome);border:1px solid var(--v-glass-edge);box-shadow:var(--v-glass-top),0 10px 30px -18px rgba(11,11,11,.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);color:var(--v-text);font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;} .vh__logo{font-weight:900;font-size:20px;letter-spacing:-.02em;color:var(--v-text)!important;text-decoration:none!important;white-space:nowrap;} .vh__logo sup{font-size:9px;font-weight:700;} .vh__nav{display:flex;gap:24px;flex:1;justify-content:center;} .vh__nav a{font-size:15px;font-weight:700;color:var(--v-text)!important;text-decoration:none!important;padding:6px 0;border-bottom:2px solid transparent;} .vh__nav a:hover,.vh__nav a[aria-current="page"]{border-bottom-color:var(--v-yellow);} .vh__right{display:flex;align-items:center;gap:10px;} .vh__login{font-size:15px;font-weight:700;color:var(--v-text)!important;text-decoration:none!important;padding:0 6px;} .vh__cta{min-height:44px;padding:0 18px;font-size:15px;} .vh__icon{width:42px;height:42px;border-radius:12px;border:0;background:var(--v-glass-hi);box-shadow:inset 0 0 0 1px var(--v-line);color:var(--v-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;} .vh__icon svg{width:19px;height:19px;} .vh__menu{display:none;} .theme-dark-only{display:none;}html.dark .theme-dark-only{display:inline;}html.dark .theme-light-only{display:none;} .vm{position:fixed;inset:0;z-index:950;background:var(--v-bg);display:none;flex-direction:column;padding:18px var(--v-pad-x) 28px;overflow:auto;font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;color:var(--v-text);} .vm.is-open{display:flex;} .vm__top{display:flex;justify-content:space-between;align-items:center;} .vm__nav{display:flex;flex-direction:column;margin-top:26px;} .vm__nav a{font-size:30px;font-weight:900;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--v-line);color:var(--v-text)!important;text-decoration:none!important;} .vm__foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:12px;} @media (max-width:980px){.vh__nav,.vh__login{display:none;}.vh__menu{display:inline-flex;}.vh__bar{padding:8px 8px 8px 18px;gap:10px;}.vh__right{margin-left:auto;}} @media (max-width:420px){.vh__cta{padding:0 14px;font-size:14px;}.vh__logo{font-size:18px;}} .vf{margin-top:clamp(40px,6vw,80px);padding:clamp(40px,5vw,64px) var(--v-pad-x) 40px;border-top:1px solid var(--v-line);font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;color:var(--v-text);background:transparent;} .vf__in{max-width:var(--v-w);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px;} .vf h4{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--v-text-2);margin:0 0 12px;} .vf ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;} .vf a{font-size:15px;font-weight:700;color:var(--v-text)!important;text-decoration:none!important;} .vf a:hover{text-decoration:underline!important;} .vf__small{max-width:var(--v-w);margin:30px auto 0;padding-top:24px;border-top:1px solid var(--v-line);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;font-size:12.5px;line-height:1.6;color:var(--v-text-3);} .vf__small>span{display:block;width:100%;} .vf .vf__small a{font-size:inherit;font-weight:600;} .vf__social{display:flex;gap:10px;margin-top:14px;} .vf__social a{width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--v-glass-hi);box-shadow:inset 0 0 0 1px var(--v-line);} .vf__social svg{width:17px;height:17px;fill:currentColor;} @media (max-width:820px){.vf__in{grid-template-columns:repeat(2,minmax(0,1fr));}.vf__brand{grid-column:1/-1;}} /* legacy pages under the new chrome: the old sticky header is gone, so give the first block its breathing room back, and let the legacy dark class follow the switch. */ body.v2-legacy #s-home{padding-top:0;} html.dark body.v2-legacy{color:#f5f4f0;} /* article template (layouts/post.njk) in the new look */ .v-article{max-width:720px;margin:0 auto;padding:clamp(32px,5vw,64px) var(--v-pad-x) 0;} .v-article .v-article__meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 26px;color:var(--v-text-3);font-size:14px;font-weight:700;} .v-article .v-article__body{font-size:18px;line-height:1.7;color:var(--v-text);} .v-article .v-article__body p,.v-article .v-article__body ul,.v-article .v-article__body ol{margin:0 0 18px;} .v-article .v-article__body h2{font-size:clamp(24px,3vw,30px);margin:40px 0 14px;line-height:1.15;} .v-article .v-article__body h3{font-size:21px;margin:28px 0 10px;} .v-article .v-article__body a{font-weight:700;text-decoration:underline;text-underline-offset:3px;} .v-article .v-article__body blockquote{margin:24px 0;padding:18px 22px;border-radius:var(--v-r-md);background:var(--v-glass);border:1px solid var(--v-glass-edge);font-weight:700;} .v-article .v-article__body img{border-radius:var(--v-r-md);margin:20px 0;} .v-endcard{margin:40px auto 0;max-width:720px;} /* pick-one chips */ [data-pick-item]{cursor:pointer;border:0;font:inherit;color:var(--v-text);} [data-pick-item][aria-pressed="true"]{background:var(--v-text);color:var(--v-bg);box-shadow:none;} /* ---------- fixes found in review (30 Sept) ---------- */ /* legacy site.css paints every h1-h3 paper in dark mode at ID strength; v2 surfaces set their own */ #ew-preview-root .v2-h, .v2 #ew-preview-root h1, .v2 #ew-preview-root h2, .v2 #ew-preview-root h3, .v2 #ew-preview-root h4{color:inherit;} #ew-preview-root .v-sun h1,#ew-preview-root .v-sun h2,#ew-preview-root .v-sun h3,#ew-preview-root .v-sun h4, #ew-preview-root .v-rose h1,#ew-preview-root .v-rose h2,#ew-preview-root .v-rose h3,#ew-preview-root .v-rose h4{color:#0b0b0b;} #ew-preview-root .v-room h1,#ew-preview-root .v-room h2,#ew-preview-root .v-room h3,#ew-preview-root .v-room h4{color:#f5f4f0;} html.dark .v-sun .v-btn--ink,html.dark .v-rose .v-btn--ink{background:#0b0b0b;color:#f5f4f0!important;} html.dark .v-room .v-btn--ink{background:#f5f4f0;color:#0b0b0b!important;} /* two named two-column layouts that fold on phones */ .v-grid--film{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;align-items:start;} .v-roomsplit{overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);} .v-roomsplit > img{width:100%;height:100%;min-height:420px;object-fit:cover;object-position:50% 22%;} @media (max-width:820px){.v-grid--film,.v-roomsplit{grid-template-columns:1fr;}.v-roomsplit > img{min-height:0;height:340px;}.v-grid--film .v-video--portrait{margin:0 auto;}} .v-hero .v-h1{max-width:14ch;} @media (max-width:680px){.v-hero{padding-top:28px;}} html,body{overflow-x:clip;} @media (max-width:760px){html{scrollbar-gutter:auto;}} @media (max-width:520px){.vh__bar > .vh__right > [data-theme-toggle]{display:none;}.vh{padding:10px 10px 0;}} .vm__theme{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:16px;padding:6px 0;} #ew-fade{display:none!important;} /* ---------- THE JOURNEY (home, 30 Sept): four stages, one sticky stage at a time ---------- Desktop and tablet: the left column stays pinned while the four stages scroll past; the active stage's pair turns (the old line fades and strikes, the new line rises) and its door lights up. Phones and reduced motion: the same four stages as a plain stack. */ .v-journey{position:relative;} .v-journey__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);} .v-journey__pin{position:sticky;top:110px;height:calc(100vh - 150px);min-height:460px;display:flex;flex-direction:column;justify-content:center;gap:22px;} .v-journey__pairs{position:relative;min-height:clamp(220px,26vw,320px);} .v-pair{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;opacity:0;transform:translateY(16px);transition:opacity .8s var(--v-ease),transform .8s var(--v-ease);pointer-events:none;} .v-pair.is-on{opacity:1;transform:none;} /* the turn (30 Sept, James: no marker highlights, no strike-throughs): the old line loosens and quietens, the charge going out of it, and the new line settles in underneath in full ink. */ .v-pair__from{font-size:clamp(26px,3.4vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1.05;color:var(--v-text-2);align-self:flex-start;transition:opacity 1.2s var(--v-ease) .35s,letter-spacing 1.4s var(--v-ease) .35s;} .v-pair.is-on .v-pair__from{opacity:.32;letter-spacing:.01em;} .v-pair__to{font-size:clamp(44px,6.4vw,86px);font-weight:900;letter-spacing:-.045em;line-height:.98;opacity:0;transform:translateY(18px);transition:opacity .9s var(--v-ease) .7s,transform .9s var(--v-ease) .7s;} .v-pair.is-on .v-pair__to{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.v-pair__from{transition:none;}} .v-journey__dots{display:flex;gap:8px;} .v-journey__dots span{width:34px;height:4px;border-radius:4px;background:var(--v-line-2);transition:background .4s;} .v-journey__dots span.is-on{background:var(--v-text);} .v-journey__stages{display:flex;flex-direction:column;} .v-stage{min-height:78vh;display:flex;align-items:center;padding:24px 0;} .v-stage__card{width:100%;opacity:.35;transform:scale(.97);transition:opacity .6s var(--v-ease),transform .6s var(--v-ease);} .v-stage.is-on .v-stage__card{opacity:1;transform:none;} .v-stage__mobilepair{display:none;} @media (max-width:900px),(prefers-reduced-motion:reduce){ .v-journey__grid{grid-template-columns:1fr;} .v-journey__pin{display:none;} .v-stage{min-height:0;padding:10px 0;} .v-stage__card{opacity:1;transform:none;} .v-stage__mobilepair{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;} .v-stage__mobilepair s{font-size:20px;font-weight:900;color:inherit;opacity:.55;letter-spacing:-.02em;} .v-stage__mobilepair b{font-size:34px;font-weight:900;letter-spacing:-.035em;line-height:1.02;} } /* locked pages keep the toggle's space so the header bar is identical on every page */ html[data-theme-lock] .vh [data-theme-toggle]{visibility:hidden!important;pointer-events:none;} html[data-theme-lock] .vm__theme,html[data-theme-lock] [data-theme-toggle]:not(.vh [data-theme-toggle]){display:none!important;} /* hero eyebrow above the split: one line across the page (30 Sept) */ .v-eb--line{margin-bottom:clamp(18px,2.4vw,28px);} @media (min-width:700px){.v-eb--line{white-space:nowrap;}} /* the always-dark pages (1:1) arrive slowly: the dark ground is there at once, the page fades up into it */ html.v-arrive #s-home > :not(.vh){animation:vArrive 1.1s cubic-bezier(.22,.61,.36,1) both;} @keyframes vArrive{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){html.v-arrive #s-home > :not(.vh){animation:none;}}