:root{ /* live-tweakable — press T. defaults lifted from the surf-school CSS. */ /* Archivo Black, not Bebas — Bebas is the reference's own face and was the single loudest tell. This one is wider and blunter, so it reads broadsheet rather than surf poster. Wider also means a much smaller vw size. */ --disp:'Antonio', Impact, sans-serif; --h1-size:13vw; /* two-line size; the single-line alt headline halves it */ --h1-lh:0.86; --h1-track:0em; --body-size:1.15vw; --body-lh:1.6; --paper-w:70vw; --pad:clamp(26px,3.2vw,54px); /* was a fixed 50px, which overflowed the headline at ~1200px */ --vid-bright:0.88; --vid-sat:1.05; --vid-contrast:1.06; --heb:'Heebo','Work Sans',-apple-system,sans-serif; --rule:3px solid #000; --hair:1px solid #000; --ease:cubic-bezier(.22,1,.36,1); } *{margin:0;padding:0;box-sizing:border-box;} /* black on so can stay transparent over the z-index:-1 video */ html{ background:#000; } body{ background:transparent; font-family:var(--heb); font-size:17px; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} ::selection{background:#B0C290;color:#000;} /* the video backs the whole page */ #bg{ position:fixed; inset:0; width:100vw; height:100vh; object-fit:cover; z-index:-1; filter:brightness(var(--vid-bright)) saturate(var(--vid-sat)) contrast(var(--vid-contrast)); } /* ONE sheet, and every last thing on it is a window into the video. `lighten` keeps white white and turns every black pixel into sky. NO position/z-index here — either would make #paper its own stacking context and it would blend against nothing instead of the video. */ #paper{ width:var(--paper-w); max-width:1500px; margin:6vh auto; background:#fff; mix-blend-mode:lighten; padding:var(--pad); } #paper *{ color:#000; } /* ---------- header ---------- */ .hdr{ display:flex; align-items:center; justify-content:space-between; border-bottom:var(--rule); padding-bottom:10px; } .hdr img{ height:clamp(34px,3.4vw,58px); filter:brightness(0); display:block; } .nav{ display:flex; gap:32px; align-items:baseline; } .nav a{ font-family:var(--heb); font-weight:700; font-size:clamp(15px,1.45vw,26px); line-height:1; letter-spacing:0; transition:opacity .4s var(--ease); } .nav a:hover{ opacity:.45; } /* ---------- headline ---------- */ .h1{ font-family:var(--disp); direction:ltr; text-align:center; font-size:var(--h1-size); line-height:var(--h1-lh); letter-spacing:var(--h1-track); font-weight:400; text-transform:uppercase; padding:25px 0 10px; } /* No mask here any more — the headline animates per character in 3D, so nothing needs clipping. That also permanently removes the clipped-caps bug: `overflow:hidden` clips at the padding box, and at line-height .80 Bebas's caps are taller than the line box, so a line mask sliced the tops off the O's and C's. `perspective` is what makes the character flip read as depth. */ .h1{ perspective:900px; } .h1 .ln{ display:block; white-space:nowrap; } .h1 .ln i{ display:block; font-style:normal; will-change:transform; } /* the bordered bar, straight off the reference */ .tag{ border:var(--rule); padding:16px 16px 13px; text-align:center; font-family:var(--heb); font-weight:700; letter-spacing:1px; font-size:clamp(14px,1.5vw,27px); line-height:1; } /* ---------- two-column body (used by the sections below the fold) ---------- */ .cols{ display:flex; justify-content:space-between; align-items:stretch; gap:clamp(22px,2.6vw,46px); margin-top:20px; } .cols p{ flex:1; font-size:var(--body-size); line-height:var(--body-lh); } .rule{ width:3px; background:#000; flex:0 0 3px; } /* ---------- the hero block ---------- CENTRED: the column wrappers dissolve with display:contents and every piece drops straight into a 3-track grid, which reproduces the original stack — date bar full width, paragraphs side by side, CTA full width. */ .heroblock{ display:grid; grid-template-columns:1fr 3px 1fr; column-gap:clamp(22px,2.6vw,46px); margin-top:20px; align-items:start; } .heroblock .colA, .heroblock .colB{ display:contents; } .heroblock p{ font-size:var(--body-size); line-height:var(--body-lh); } /* every piece placed explicitly — otherwise the credit block and the price strip auto-place into a row AFTER the CTA, which reads backwards */ .heroblock .tag{ grid-column:1 / -1; grid-row:1; margin-bottom:20px; } .heroblock .colA p{ grid-column:1; grid-row:2; } .heroblock .rule{ grid-column:2; grid-row:2 / span 2; } .heroblock .colB p{ grid-column:3; grid-row:2; } .heroblock .nevocube{ grid-column:1; grid-row:3; margin-top:20px; } .heroblock .prices{ grid-column:3; grid-row:3; margin-top:20px; align-self:end; } .heroblock .btn{ grid-column:1 / -1; grid-row:4; margin-top:20px; } .btn{ display:flex; align-items:center; justify-content:center; text-align:center; background:#000; width:100%; margin-top:20px; padding:35px 30px 32px; font-family:var(--heb); font-weight:700; letter-spacing:1px; line-height:1; font-size:clamp(20px,2.4vw,44px); transition:letter-spacing .7s var(--ease), padding .7s var(--ease); } .btn span, .btn span *{ color:#fff !important; } /* nowrap is the actual fix for the hover bug: opening the tracking on a 16-character Hebrew line inside a half-width column re-wrapped it to three lines and the slab grew. One line can never change the slab's height. */ .btn span, .btn span *{ white-space:nowrap; } .btn:hover, .btn.force-hover{ letter-spacing:7px; } .note{ text-align:center; font-size:clamp(12px,1vw,18px); line-height:1; margin-top:14px; opacity:.6; } /* ---------- sections ---------- */ .sec{ border-top:var(--rule); margin-top:clamp(46px,6vh,96px); padding-top:clamp(22px,2.6vh,42px); } .h2{ font-family:var(--heb); font-weight:800; line-height:1.06; font-size:clamp(30px,3.9vw,72px); letter-spacing:-.02em; margin-bottom:22px; } .h2 em{ font-style:normal; opacity:.42; } /* ---------- hero extras: who is running it, and what it costs ---------- */ .nevocube{ display:flex; gap:clamp(11px,1.1vw,18px); align-items:center; border:var(--rule); padding:clamp(11px,1.1vw,17px); } .nevocube img{ width:clamp(52px,4.8vw,84px); aspect-ratio:1; object-fit:cover; flex:0 0 auto; filter:grayscale(1) contrast(.95) brightness(1.2); display:block; } .nevocube .txt b{ display:block; font-weight:800; line-height:1.1; font-size:clamp(13.5px,1.2vw,21px); margin-bottom:5px; } .nevocube .txt span{ display:block; font-size:clamp(11px,.88vw,15px); line-height:1.5; opacity:.78; } .prices{ display:grid; grid-template-columns:repeat(3,1fr); border-top:var(--rule); border-bottom:var(--rule); } .prices .pr{ padding:clamp(9px,1vw,15px) clamp(7px,.8vw,13px); border-inline-start:var(--hair); } .prices .pr:first-child{ border-inline-start:none; } .prices .pr span{ display:block; font-size:clamp(9.5px,.78vw,13px); opacity:.6; margin-bottom:5px; line-height:1.2; } .prices .pr b{ display:block; font-family:var(--disp); font-weight:400; line-height:1; font-size:clamp(20px,2.05vw,38px); direction:ltr; text-align:right; } /* the mid-page beat */ .beat{ font-family:var(--disp); direction:ltr; text-align:center; text-transform:uppercase; font-size:clamp(70px,15vw,260px); line-height:.82; letter-spacing:.01em; padding:clamp(30px,5vh,80px) 0; } /* what you get */ .items{ display:grid; grid-template-columns:repeat(3,1fr); } .item{ padding:clamp(16px,1.7vw,28px); border-inline-start:var(--rule); } .item:nth-child(3n+1){ border-inline-start:none; } .item:nth-child(n+4){ border-top:var(--rule); } .item h3{ font-size:clamp(17px,1.7vw,30px); font-weight:800; line-height:1.1; letter-spacing:-.01em; margin-bottom:9px; } .item p{ font-size:var(--body-size); line-height:var(--body-lh); } /* who */ .who{ display:flex; gap:clamp(22px,2.6vw,46px); align-items:flex-start; } .who figure{ flex:0 0 30%; } .who img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; filter:grayscale(1) contrast(.92) brightness(1.22); } .who .txt{ flex:1; } .who .lead{ font-size:clamp(19px,2vw,36px); font-weight:800; line-height:1.22; letter-spacing:-.015em; margin-bottom:16px; } .who p{ font-size:var(--body-size); line-height:var(--body-lh); margin-bottom:12px; } /* rates */ .rates{ display:grid; grid-template-columns:repeat(3,1fr); } .rate{ padding:clamp(16px,1.7vw,28px); border-inline-start:var(--rule); } .rate:first-child{ border-inline-start:none; } .rate .nm{ font-size:clamp(15px,1.5vw,27px); font-weight:800; line-height:1.15; } .rate .nt{ font-size:clamp(12px,1vw,18px); opacity:.6; margin-top:5px; line-height:1.2; } .rate .pr{ font-family:var(--disp); font-size:clamp(40px,5vw,92px); line-height:.9; margin-top:14px; direction:ltr; text-align:right; } .bonus{ border-top:var(--rule); margin-top:clamp(20px,2.4vh,36px); padding-top:16px; text-align:center; font-size:clamp(13px,1.15vw,21px); line-height:1.4; } .foot{ display:flex; justify-content:space-between; border-top:var(--rule); margin-top:clamp(34px,4vh,60px); padding-top:14px; font-size:clamp(11px,.85vw,15px); opacity:.5; } /* section headings reveal via a line mask, not an opacity fade */ /* ---------- tweaker ---------- */ #tw{ position:fixed; z-index:99; top:14px; left:14px; width:250px; background:rgba(8,10,12,.94); border:1px solid #2b3238; border-radius:10px; padding:13px; font-family:ui-monospace,monospace; font-size:10.5px; color:#cfd6dc; direction:ltr; display:none; backdrop-filter:blur(8px); max-height:94vh; overflow:auto; } #tw.on{ display:block; } #tw h4{ font-size:9px; letter-spacing:.22em; color:#B0C290; margin:12px 0 6px; text-transform:uppercase; } #tw h4:first-child{ margin-top:0; } #tw label{ display:block; margin:7px 0 2px; color:#8c979f; } #tw input[type=range]{ width:100%; accent-color:#B0C290; } #tw select{ width:100%; background:#151a1e; color:#e7edf2; border:1px solid #2b3238; border-radius:5px; padding:5px; font-family:inherit; font-size:10.5px; } #tw .v{ float:right; color:#B0C290; } #tw button{ width:100%; margin-top:11px; background:#B0C290; color:#000; border:0; border-radius:5px; padding:7px; font-family:inherit; font-weight:700; cursor:pointer; font-size:10px; } #tw .hint{ color:#5d666d; margin-top:9px; line-height:1.5; } #twtip{ position:fixed; z-index:98; bottom:12px; left:14px; font-family:ui-monospace,monospace; font-size:9.5px; letter-spacing:.16em; color:rgba(255,255,255,.45); direction:ltr; } @media (max-width:900px){ #paper{ width:92vw; padding:22px; } .cols,.who{ flex-direction:column; } .rule{ display:none; } .items,.rates{ grid-template-columns:1fr; } :root{ --body-size:15px; --h1-size:15vw; } } /* ---------- video bench toast ---------- */ #vtoast{ position:fixed; z-index:100; bottom:16px; left:50%; transform:translateX(-50%) translateY(14px); background:rgba(8,10,12,.92); color:#e7edf2; border:1px solid #2b3238; border-radius:100px; padding:9px 20px; font-family:ui-monospace,monospace; font-size:11.5px; letter-spacing:.04em; direction:ltr; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; backdrop-filter:blur(8px); white-space:nowrap; } #vtoast.on{ opacity:1; transform:translateX(-50%) translateY(0); } /* version switch, top-right */ #vswitch{ position:fixed; z-index:98; top:14px; right:14px; display:flex; gap:6px; font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.14em; direction:ltr; } #vswitch a{ background:rgba(8,10,12,.82); color:rgba(255,255,255,.55); border:1px solid #2b3238; border-radius:100px; padding:6px 13px; backdrop-filter:blur(6px); text-transform:uppercase; } #vswitch a.on{ background:#B0C290; color:#000; border-color:#B0C290; font-weight:700; } /* ================================================================ ASYMMETRIC GRID — press L to flip between this and the centred layout inherited from the reference. The reference is rigidly symmetrical: centred headline, full-width bar, two equal columns, full-width CTA. That symmetry was most of why ours read as the same page. This ranges everything against the right edge (the reading start in RTL) and lets the left go ragged. ================================================================ */ /* one line, flush right. The wrappers go inline so the two words sit on a single line; halving the size is what makes 22 characters fit. */ body.alt .h1{ text-align:right; padding:30px 0 26px; white-space:nowrap; font-size:calc(var(--h1-size) * 0.5); } body.alt .h1 .ln, body.alt .h1 .ln i{ display:inline; } /* two real columns: date + first paragraph on the right, second paragraph and the CTA on the left, split by the rule */ body.alt .heroblock{ display:flex; align-items:stretch; gap:clamp(22px,2.6vw,46px); margin-top:0; } /* min-width:0 matters: a flex item will not shrink below its content's min-content width, and the CTA is now nowrap, so without this the button's text width dictates the column split — and opening the tracking on hover widened one column and shoved the whole layout sideways. */ body.alt .heroblock .colA, body.alt .heroblock .colB{ display:flex; flex-direction:column; gap:clamp(16px,1.8vw,26px); flex:1; min-width:0; } body.alt .heroblock .rule{ flex:0 0 3px; } /* it sits in a half-width column now, so it cannot carry the full-bar size */ body.alt .heroblock .tag{ width:100%; margin-bottom:0; text-align:right; font-size:clamp(11.5px,1.02vw,19px); padding:14px 16px 12px; letter-spacing:0; } body.alt .heroblock .btn{ width:100%; margin-top:auto; justify-content:flex-start; padding-inline-start:clamp(24px,3vw,54px); } /* the price strip fills its column. `align-self:end` is a grid instruction for the centred layout; in a flex column the cross axis is horizontal, so it was shrinking the strip to its content width instead. */ body.alt .heroblock .prices{ align-self:stretch; margin-top:0; } /* both columns land on the same baseline: the credit block drops to the foot of column one so its bottom edge meets the CTA's, the same way margin-top:auto already parks the CTA at the foot of column two. */ body.alt .heroblock .nevocube{ margin-top:auto; } /* The full-width CTA can afford 7px of tracking; a half-width one cannot. Measured at 1280: the line is 285px inside 304px of room, and every 1px of tracking costs 16px across 16 characters, so 7px overflows by 51px. So in this layout the move is mostly a SLIDE — the start padding collapses and the line travels toward the edge, with only a touch of tracking behind it. Worst case (1280) leaves 29px of headroom. */ body.alt .heroblock .btn:hover, body.alt .heroblock .btn.force-hover{ letter-spacing:2px; padding-inline-start:clamp(8px,.9vw,16px); } /* sections below the fold pick up the same ranging */ body.alt .h2{ max-width:78%; } body.alt .who{ gap:clamp(30px,4vw,72px); } body.alt .rates{ grid-template-columns:1.2fr 1fr 1fr; } body.alt .bonus{ text-align:right; } @media (max-width:900px){ body.alt .heroblock{ flex-direction:column; } body.alt .h1{ white-space:normal; font-size:var(--h1-size); } body.alt .h1 .ln, body.alt .h1 .ln i{ display:block; } body.alt .h2{ max-width:100%; } }