/* ============================================================
home-v2.css — scoped ENTIRELY to body.home-v2
The live homepage design ("The Strikethrough").
Loaded ONLY by index.html. Reuses the real nav/footer/buttons
(inherited from body.home) and layers a dark, page-scoped design
on top. Nothing here can affect any other page.
============================================================ */
/* The homepage is fully dark — tell the UA so form controls/scrollbars match. */
html:has(body.home-v2){color-scheme:dark}
body.home-v2{
/* page-scoped palette (prefixed so global tokens stay untouched) */
--vbg:#0c0912; --vink:#EFEAF6; --vsoft:#A79FB8; --vfaint:#8b8399;
--vacc:#A435EF; --vacc-hi:#b45cf5; --vcyan:#22D3EE;
--vline:rgba(164,53,239,.16);
--vcard:#151021;
--vease:cubic-bezier(.22,.61,.36,1);
background:var(--vbg); color:var(--vink);
min-height:100vh;
overflow-x:clip; /* page must NEVER scroll sideways — only .vrail does */
max-width:100%; /* NOT 100vw — that includes the scrollbar, so the body
box exceeded the viewport by the scrollbar width and
overflow-x:clip merely hid it. */
}
body.home-v2 ::selection{background:rgba(164,53,239,.35);color:#fff}
/* keep the reused hero band area dark under the fixed header */
body.home-v2 main{display:block;background:var(--vbg)}
body.home-v2 .wrap{max-width:1120px;margin:0 auto;padding:0 26px}
/* ---------- one motion vocabulary ---------- */
body.home-v2 .v-rise{opacity:0;transform:translateY(14px);
transition:opacity .55s var(--vease),transform .55s var(--vease)}
body.home-v2 .v-rise.in{opacity:1;transform:none}
html:not(.js) body.home-v2 .v-rise{opacity:1!important;transform:none!important;transition:none!important}
/* ---------- shared type ---------- */
/* line-height is declared explicitly: two of these are now (§17a heading
order), and without it they'd take line-height:1.1 from the heading rule below
instead of the 1.65 they inherited from body.home as spans. */
body.home-v2 .v-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;
font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--vcyan);display:block;
line-height:1.65}
body.home-v2 h1,body.home-v2 h2,body.home-v2 h3{font-family:'Sora','Sora Fallback',system-ui,sans-serif;
line-height:1.1;letter-spacing:-.02em;font-weight:700;color:var(--vink)}
body.home-v2 .mono{font-family:'JetBrains Mono',monospace}
/* ======================================================
1) HERO — THE STRIKETHROUGH
====================================================== */
body.home-v2 .vhero{position:relative;padding:clamp(104px,20vw,190px) 0 clamp(64px,12vw,120px);overflow:hidden;
background:
radial-gradient(1200px 620px at 78% -8%,rgba(164,53,239,.16),transparent 60%),
radial-gradient(760px 460px at 6% 12%,rgba(34,211,238,.07),transparent 62%),
var(--vbg)}
body.home-v2 .vhero-inner{max-width:900px}
body.home-v2 .vhero-ey{margin-bottom:26px;color:var(--vfaint)}
body.home-v2 .vhero-excuses{list-style:none;margin:0 0 34px;padding:0;
display:flex;flex-direction:column;gap:11px}
body.home-v2 .vex{position:relative;display:inline-block;width:fit-content;max-width:100%;
font-family:'JetBrains Mono',monospace;font-size:clamp(14px,2.1vw,18px);
color:var(--vsoft);line-height:1.5}
body.home-v2 .vex::before{content:"›";color:var(--vfaint);margin-right:12px}
/* strike — real line-through so the browser centers it through EVERY line, incl.
wrapped two-line excuses (replaces the old absolute bar that mispositioned on
wrap). Only .vtext is struck, so the "›" prefix stays clean. Base = fully struck
(JS-off / reduced-motion pre-struck). */
body.home-v2 .vex .vtext{text-decoration:line-through;text-decoration-color:var(--vacc);
text-decoration-thickness:2px;text-decoration-skip-ink:none}
/* when JS enhances: excuses start un-struck; JS adds .struck one-by-one and the
line fades in (text-decoration-color is animatable), preserving the staggered
reveal — now correct on wrapped lines too. */
body.home-v2.is-enhanced .vex .vtext{text-decoration-color:transparent;
transition:text-decoration-color .4s var(--vease)}
body.home-v2.is-enhanced .vex.struck{color:var(--vfaint)}
body.home-v2.is-enhanced .vex.struck .vtext{text-decoration-color:var(--vacc)}
body.home-v2 .vhero-turn{font-size:clamp(34px,6vw,68px);line-height:1.05;margin-top:8px}
body.home-v2 .vhero-turn strong{font-weight:700;
background:linear-gradient(120deg,#EFEAF6 0%,#EFEAF6 55%,var(--vacc) 130%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.home-v2 .vhero-turn .lo{display:block;color:var(--vsoft);font-weight:600;
font-size:clamp(20px,3.2vw,34px);margin-bottom:6px}
/* ======================================================
2) THE WARM TURN
====================================================== */
body.home-v2 .vwarm{padding:6px 0 92px}
body.home-v2 .vwarm p{max-width:760px;font-size:clamp(19px,2.6vw,26px);
line-height:1.55;color:var(--vink);font-weight:500;
border-left:2px solid var(--vacc);padding-left:26px}
/* Entity lede (roadmap 5.9). Subordinate to the LCP flagship line above it: the
.vwarm p rule sets 19-26px with an accent border, which would render this as a
SECOND flagship statement competing with the first. Specificity (0,3,2) beats
`body.home-v2 .vwarm p` (0,2,2) on the class count, so no !important needed. */
body.home-v2 .vwarm p.ventity{font-size:clamp(15px,1.6vw,17px);line-height:1.65;
font-weight:400;color:var(--vink-soft,var(--vink));margin-top:22px;
border-left:0;padding-left:0;opacity:.88}
/* ======================================================
3) THE WORK — horizontal swipe carousel
====================================================== */
body.home-v2 .vwork{padding:40px 0 96px}
body.home-v2 .vwork-head{max-width:720px;margin-bottom:38px}
body.home-v2 .vwork-head h2{font-size:clamp(28px,4vw,44px);margin-top:14px}
body.home-v2 .vrail-outer{position:relative;max-width:100%}
/* --card is the active card's share of the track; the ::before/::after
spacers are (100% - --card)/2 so the FIRST and LAST cards can snap to
true centre with a peek. On mobile: one ~80% card, ~10% peek each side. */
body.home-v2 .vrail{--card:80%;display:flex;gap:16px;overflow-x:auto;max-width:100%;
box-sizing:border-box;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
padding:14px 0 34px;scrollbar-width:none;-ms-overflow-style:none;
-webkit-overflow-scrolling:touch}
body.home-v2 .vrail::-webkit-scrollbar{display:none}
/* leading/trailing space so first & last cards reach true centre */
body.home-v2 .vrail::before,body.home-v2 .vrail::after{content:"";flex:0 0 calc((100% - var(--card))/2);min-width:0}
/* the
wrappers are the real flex/scroll items — size + snap them here
(min-width:0 lets them shrink past the 1200px image so nothing overflows). */
body.home-v2 .vrail>li{list-style:none;flex:0 0 var(--card);max-width:var(--card);
min-width:0;scroll-snap-align:center;display:flex}
body.home-v2 .vcard{width:100%;min-width:0;
display:flex;flex-direction:column;text-decoration:none;color:inherit;
background:var(--vcard);border:1px solid var(--vline);border-radius:20px;
overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.45);
transition:transform .55s var(--vease),opacity .55s var(--vease),box-shadow .55s var(--vease)}
/* fade/scale of off-centre cards ONLY when JS is driving the rail */
body.home-v2.is-enhanced .vcard{opacity:.5;transform:scale(.93)}
body.home-v2.is-enhanced .vcard.is-active{opacity:1;transform:scale(1);
box-shadow:0 0 44px rgba(164,53,239,.20),0 18px 40px rgba(0,0,0,.55)}
body.home-v2 .vcard:focus-visible{outline:3px solid var(--vcyan);outline-offset:3px}
body.home-v2 .vshot{aspect-ratio:16/9;overflow:hidden;background:#0f0b17;border-bottom:1px solid var(--vline)}
body.home-v2 .vshot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
body.home-v2 .vcard-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px}
body.home-v2 .vobj{font-family:'JetBrains Mono',monospace;font-size:13.5px;
/* --vfaint is #8b8399, which measures 5.15:1 on --vcard and 5.46:1 on --vbg,
clearing WCAG AA 4.5:1. Muted grey-purple, so the struck-out objection still
reads as suppressed. (This hex used to be hardcoded here; --vfaint was raised
to the same value, so the token and this rule are now one source.) */
color:var(--vfaint);max-width:100%;line-height:1.5;
/* line-through strikes through the CENTRE of every line — incl. a wrapped
two-line objection — replacing the single mispositioned bar. Pre-struck
and static in accent, so JS-off / reduced-motion both render correctly. */
text-decoration:line-through;text-decoration-color:var(--vacc);
text-decoration-thickness:2px;text-decoration-skip-ink:none}
body.home-v2 .vout{font-family:'Sora','Sora Fallback',system-ui,sans-serif;font-weight:700;font-size:20px;line-height:1.2;color:var(--vink)}
body.home-v2 .vout .m{color:var(--vcyan)}
body.home-v2 .vlabel{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--vsoft);margin-top:2px}
body.home-v2 .vvisit{margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:12px;
/* --vacc-hi is #b45cf5, a brighter tint of the same brand purple than --vacc
(#A435EF, 3.84:1); it measures 5.13:1 on --vcard, clearing AA 4.5:1. */
color:var(--vacc-hi);display:inline-flex;align-items:center;gap:6px}
body.home-v2 .vcard:hover .vvisit{color:var(--vcyan)}
/* dots (mobile) */
body.home-v2 .vdots{display:flex;justify-content:center;gap:4px;margin-top:6px;min-height:24px}
/* Visible dot stays 9px, but each button carries a 24x24 tap target (WCAG 2.2
target-size minimum) via padding-collapse: the button is 24x24 and the dot is
drawn by ::before centred inside it. */
body.home-v2 .vdot{width:24px;height:24px;padding:0;border:0;cursor:pointer;
background:transparent;position:relative;display:inline-flex}
body.home-v2 .vdot::before{content:"";position:absolute;top:50%;left:50%;
width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);
background:rgba(167,159,184,.65);transition:.3s var(--vease)}
body.home-v2 .vdot.is-active::before{background:var(--vacc);transform:translate(-50%,-50%) scale(1.25)}
body.home-v2 .vdot:focus-visible{outline:2px solid var(--vcyan);outline-offset:-2px;border-radius:50%}
/* arrows (desktop only) */
body.home-v2 .varrow{display:none}
/* ======================================================
4) THE RECEIPTS
====================================================== */
body.home-v2 .vreceipts{padding:70px 0;border-top:1px solid var(--vline);border-bottom:1px solid var(--vline);
background:linear-gradient(180deg,rgba(164,53,239,.05),transparent 70%)}
/* one column on the smallest screens so the long "Lighthouse · Best Practices"
labels fit whole; widen to 2 then 4 cols only where a full label still fits. */
body.home-v2 .vstats{display:grid;grid-template-columns:1fr;gap:28px 20px}
body.home-v2 .vstat{text-align:center;min-width:0}
body.home-v2 .vstat .vnum{font-family:'Sora','Sora Fallback',system-ui,sans-serif;font-weight:700;
font-size:clamp(34px,6vw,54px);line-height:1;color:var(--vink);letter-spacing:-.03em}
body.home-v2 .vstat .vnum .u{color:var(--vcyan)}
body.home-v2 .vstat.hl .vnum{color:var(--vcyan)}
body.home-v2 .vstat .vlab{margin-top:12px;font-family:'JetBrains Mono',monospace;
font-size:clamp(10px,2.2vw,11px);letter-spacing:.04em;text-transform:uppercase;
color:var(--vsoft);overflow-wrap:anywhere}
/* ======================================================
5) HOW IT WORKS (callbacks)
====================================================== */
body.home-v2 .vhow{padding:clamp(56px,12vw,96px) 0 40px}
body.home-v2 .vhow-head{margin-bottom:44px}
body.home-v2 .vbeats{display:grid;gap:20px}
body.home-v2 .vbeat{background:var(--vcard);border:1px solid var(--vline);border-radius:18px;
padding:28px 26px}
body.home-v2 .vbeat h3{font-size:22px;margin-bottom:8px}
body.home-v2 .vbeat h3 .q{color:var(--vcyan)}
body.home-v2 .vbeat p{color:var(--vsoft);font-size:16.5px}
body.home-v2 .vbeat .ans{display:block;margin-top:14px;font-family:'JetBrains Mono',monospace;
font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--vfaint)}
/* ======================================================
6) WHAT I BUILD
====================================================== */
body.home-v2 .vbuild{padding:60px 0 40px}
body.home-v2 .vbuild-head{margin-bottom:30px}
body.home-v2 .vbuild-list{display:grid;gap:0;border-top:1px solid var(--vline)}
body.home-v2 .vbuild-list a{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
padding:22px 4px;border-bottom:1px solid var(--vline);text-decoration:none;color:var(--vink);
transition:.25s var(--vease)}
body.home-v2 .vbuild-list a:hover{padding-left:14px;color:#fff}
body.home-v2 .vbuild-list b{font-family:'Sora','Sora Fallback',system-ui,sans-serif;font-size:20px;font-weight:700}
body.home-v2 .vbuild-list span{color:var(--vsoft);font-size:16px}
body.home-v2 .vbuild-list .go{margin-left:auto;color:var(--vacc-hi);font-family:'JetBrains Mono',monospace;font-size:13px}
body.home-v2 .vbuild-list a:hover .go{color:var(--vcyan)}
/* ======================================================
7) THE ONE HONEST OBJECTION
====================================================== */
body.home-v2 .vsolo{padding:clamp(56px,11vw,90px) 0}
body.home-v2 .vsolo-inner{max-width:820px}
body.home-v2 .vsolo h2{font-size:clamp(28px,4.4vw,46px);margin-bottom:22px}
body.home-v2 .vsolo p{font-size:clamp(17px,2.3vw,21px);line-height:1.6;color:var(--vsoft)}
body.home-v2 .vsolo p strong{color:var(--vink);font-weight:600}
/* ======================================================
8) THE CLOSE
====================================================== */
body.home-v2 .vclose{padding:clamp(56px,12vw,96px) 0 clamp(64px,13vw,110px);text-align:center;
background:radial-gradient(760px 420px at 50% 120%,rgba(164,53,239,.16),transparent 65%)}
body.home-v2 .vclose h2{font-size:clamp(30px,5vw,56px);max-width:760px;margin:0 auto 34px}
body.home-v2 .vclose h2 em{font-style:normal;color:var(--vcyan)}
body.home-v2 .vclose .btn{font-size:16px;padding:16px 30px}
body.home-v2 .vsign{display:block;margin-top:30px;font-family:'JetBrains Mono',monospace;
font-size:12.5px;letter-spacing:.06em;color:var(--vfaint)}
/* ======================================================
responsive
====================================================== */
@media(min-width:460px){
body.home-v2 .vstats{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:720px){
body.home-v2 .vbeats{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:880px){
body.home-v2 .vstats{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:880px){
/* wider active card + more neighbour on desktop; capped so it never gets huge */
body.home-v2 .vrail{--card:min(58%,560px)}
body.home-v2 .vdots{display:none}
body.home-v2 .varrow{display:inline-flex;align-items:center;justify-content:center;
position:absolute;top:calc(50% - 16px);transform:translateY(-50%);z-index:4;
width:48px;height:48px;border-radius:50%;cursor:pointer;
background:rgba(21,16,33,.9);border:1px solid var(--vline);color:var(--vink);
box-shadow:0 8px 22px rgba(0,0,0,.5);transition:.25s var(--vease)}
body.home-v2 .varrow:hover{border-color:var(--vacc);color:#fff}
body.home-v2 .varrow:focus-visible{outline:2px solid var(--vcyan);outline-offset:3px}
body.home-v2 .varrow[disabled]{opacity:.3;cursor:default}
body.home-v2 .varrow.prev{left:-6px}
body.home-v2 .varrow.next{right:-6px}
}
/* ======================================================
REDUCED MOTION — kill all entrance / scroll / count motion.
Content renders in place; strikes shown static; cards plain.
====================================================== */
@media (prefers-reduced-motion:reduce){
body.home-v2 .v-rise{opacity:1!important;transform:none!important;transition:none!important}
body.home-v2 .vex{color:var(--vfaint)}
body.home-v2 .vex .vtext{transition:none!important;text-decoration-color:var(--vacc)!important}
body.home-v2 .vcard,
body.home-v2.is-enhanced .vcard{opacity:1!important;transform:none!important;transition:none!important;
box-shadow:0 14px 34px rgba(0,0,0,.45)!important}
body.home-v2 .vrail{scroll-behavior:auto}
}
/* Windows High Contrast: -webkit-text-fill-color is NOT reset by forced-color-adjust,
so gradient-clipped text renders invisible. Restore the fill and drop the gradient. */
@media (forced-colors: active){
body.home-v2 .vhero-turn strong{
background:none;-webkit-text-fill-color:currentColor;color:CanvasText}
/* forced-colors flattens background-color, so the dots lose active/idle. */
body.home-v2 .vdot::before{background:ButtonFace;border:1px solid ButtonText}
body.home-v2 .vdot.is-active::before{background:Highlight;border-color:Highlight}
}