/* ══════════════════════════════════════════════════════════════════════════ AXIS WHITELABEL — INVESTOR DECK ────────────────────────────────────────────────────────────────────────── One stylesheet, two deliverables: a web URL and a print-to-PDF. The page IS the PDF — there is no export step that can drift from what he reviewed. ⛔ THE FIVE DEFECTS THAT MADE v1 A 2/10, AND HOW EACH IS DESIGNED OUT. Every one of these was visible in the shipped PDF, not a matter of taste: 1 THE HEADLINE WAS CLIPPED. Slide 3 read "RAISING MONEY COSTS YOU THE COMPA" — the rest ran under the photograph. Cause: no measure on the headline and no column to sit in. Here every headline has an explicit `max-width` in ch, `text-wrap:balance`, and lives in a grid column that the image cannot enter. 2 BODY TEXT WAS TRUNCATED MID-WORD. Slide 5: "Visa & Masterca", "ID checks handl". Cause: fixed-height cards with overflow hidden. NOTHING here has a fixed height. Content sets the box; the grid absorbs the difference. 3 THE COVER COLLIDED WITH ITSELF. A giant ghost "AXIS" sat directly under "AXIS WHITELABEL" and both were unreadable. Decorative type is gone. 4 SLIDE 4 CARRIED SIX IDEAS — diagram, four paragraphs, four stat tiles and a footer banner. The rule now is literally one: each slide has a kicker, a headline, and ONE supporting element. If a slide wants two, it becomes two slides. 5 ALIGNMENT CHANGED MID-SLIDE — kicker left, headline centred, content split. Every slide here is left-aligned to the same 120px margin, on the same 12-column grid. ⛔ AND ONE CONTENT RULE THAT OUTRANKS ALL OF THEM: no dividend AMOUNT appears anywhere. v1 printed "$412.87 dividends". Dividends accumulate out of all trading across every holder — the figure is not knowable in advance, so it is stated as a MECHANISM and never as a number. Card rewards are knowable and are stated. See slide 9. ══════════════════════════════════════════════════════════════════════════ */ /* ── the site's own faces, so the deck and the product are one voice ─────── */ @font-face{font-family:Manrope;src:url(fonts/Manrope-400-latin.woff2)format('woff2');font-weight:400;font-display:block} @font-face{font-family:Manrope;src:url(fonts/Manrope-500-latin.woff2)format('woff2');font-weight:500;font-display:block} @font-face{font-family:Manrope;src:url(fonts/Manrope-600-latin.woff2)format('woff2');font-weight:600;font-display:block} @font-face{font-family:Manrope;src:url(fonts/Manrope-700-latin.woff2)format('woff2');font-weight:700;font-display:block} @font-face{font-family:Manrope;src:url(fonts/Manrope-800-latin.woff2)format('woff2');font-weight:800;font-display:block} @font-face{font-family:Manrope;src:url(fonts/Manrope-900-latin.woff2)format('woff2');font-weight:900;font-display:block} @font-face{font-family:'JetBrains Mono';src:url(fonts/JetBrainsMono-400-latin.woff2)format('woff2');font-weight:400;font-display:block} @font-face{font-family:'JetBrains Mono';src:url(fonts/JetBrainsMono-600-latin.woff2)format('woff2');font-weight:600;font-display:block} :root{ --ink:#fff; --ink-2:rgba(255,255,255,.74); --ink-3:rgba(255,255,255,.50); --ink-4:rgba(255,255,255,.34); --bg:#000; --panel:rgba(255,255,255,.035); --line:rgba(255,255,255,.11); --acc:#C8FF00; /* the site's --axis, exactly */ --ff:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* ONE modular scale. Nothing on a slide may use a size outside it. */ --t-kicker:20px; --t-body:28px; --t-lead:34px; --t-h3:44px; --t-h2:64px; --t-h1:92px; --t-hero:132px; --t-fig:112px; /* the one figure allowed to be huge */ /* 8pt grid */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:88px; --s8:120px; --ease:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box;margin:0;padding:0} html,body{background:#0a0a0a} body{font-family:var(--ff);color:var(--ink);-webkit-font-smoothing:antialiased} /* ── THE SLIDE ─────────────────────────────────────────────────────────── 1920x1080 exactly. On screen it scales; in print it is the page. */ .slide{ position:relative; width:1920px;height:1080px; background:var(--bg); overflow:hidden; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:auto 1fr auto; column-gap:var(--s4); padding:var(--s7) var(--s8) var(--s6); margin:0 auto var(--s4); font-variant-numeric:tabular-nums; } .slide::after{ /* one hairline, top, every slide */ content:"";position:absolute;left:var(--s8);right:var(--s8);top:var(--s6); height:1px;background:var(--line); } /* ── chrome ──────────────────────────────────────────────────────────────── */ .kicker{ grid-column:1/-1; font:600 var(--t-kicker)/1 var(--mono); letter-spacing:.22em;text-transform:uppercase;color:var(--acc); margin-bottom:var(--s4); } .foot{ grid-column:1/-1;align-self:end; display:flex;justify-content:space-between;align-items:baseline; font:400 18px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-4); padding-top:var(--s4); } .foot b{color:var(--acc);font-weight:600} /* ── type ──────────────────────────────────────────────────────────────── ⚠ EVERY headline carries a measure. A headline with no max-width is what printed "RAISING MONEY COSTS YOU THE COMPA" across an image. */ /* ⚠ `text-wrap:balance` FIGHTS AN AUTHORED
. Every headline here sets its own breaks, and balance then re-distributes the words across the resulting line count — "Raise capital. / Give away no / control." and "Your customers / become / tokenized holders." were both three lines for this reason, not because anything overflowed. `pretty` only pulls up an orphan, so the breaks that were written are the breaks that print. */ h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:.98;text-wrap:pretty} h1{font-size:var(--t-h1);max-width:17ch} h2{font-size:var(--t-h2);max-width:20ch} h3{font-size:var(--t-h3);max-width:24ch;letter-spacing:-.02em;line-height:1.06} .hero{font-size:var(--t-hero);max-width:13ch;line-height:.92} .acc{color:var(--acc)} .lead{font:400 var(--t-lead)/1.45 var(--ff);color:var(--ink-2);max-width:34ch;text-wrap:pretty} .body{font:400 var(--t-body)/1.55 var(--ff);color:var(--ink-3);max-width:44ch;text-wrap:pretty} .rule{width:96px;height:4px;background:var(--acc);margin:var(--s4) 0 var(--s5);border-radius:2px} /* ── the main region ─────────────────────────────────────────────────────── */ .main{grid-column:1/-1;display:grid;align-content:start} .split{grid-column:1/-1;display:grid;grid-template-columns:5fr 6fr;gap:var(--s7);align-items:center} .split--wide{grid-template-columns:6fr 5fr} .col{display:grid;align-content:center;gap:var(--s3)} /* ── plates ────────────────────────────────────────────────────────────── ⚠ NEVER `height:100%` on a plate. The v1 deck cropped its own artwork doing that — these are finished frames with baked type, so a crop removes words. They are contained, always. */ .plate{width:100%;height:auto;display:block;border-radius:14px; border:1px solid var(--line);background:#000} .plate--bleed{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border:0;border-radius:0;z-index:0; } /* ⚠ THE SCRIM RUNS BOTTOM-UP ON A COVER, NOT LEFT-TO-RIGHT. Both cover plates carry their own baked headline on the LEFT, so a left-to-right scrim at 94% black was dimming the very words the slide exists to show. It only needs to protect the strap line and the footer, which sit along the bottom. */ .scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 22%,transparent 46%)} /* ⛔ THIS RULE MUST EXCLUDE THE BLEED LAYERS. `.slide>*` set position:relative on EVERY direct child — including .plate--bleed and .scrim, whose whole job is position:absolute. Both cover slides rendered the full-bleed plate as a small thumbnail in the top-left corner, and the scrim over nothing. A blanket child selector is how a layout rule reaches something it was never meant to touch. */ .slide>*:not(.plate--bleed):not(.scrim){position:relative;z-index:2} /* ── stat rows ─────────────────────────────────────────────────────────── ⚠ NO FIXED HEIGHT ANYWHERE. Truncated copy ("ID checks handl") came from boxes that were sized before their content existed. */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3)} .stat{padding:var(--s4);border:1px solid var(--line);border-radius:14px;background:var(--panel)} .stat b{display:block;font:800 var(--t-h3)/1 var(--ff);color:var(--acc);letter-spacing:-.02em} .stat span{display:block;margin-top:var(--s2);font:400 22px/1.4 var(--ff);color:var(--ink-3)} /* ⚠ MEASURED, NOT GUESSED. At 32px padding and a 16px gap these four-row blocks pushed slides 4 and 8 past 1080 by 54px and 79px — _deck.mjs refused to render the PDF, which is the entire reason it exists. 24px padding and a 12px gap buys back 76px across four rows and both slides now fit with room. If a fifth row is ever added here, this block has to shrink again or the slide has to split. It does not get to overflow. */ .rows{display:grid;gap:12px} .row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center; padding:var(--s3);border:1px solid var(--line);border-radius:14px;background:var(--panel)} .row i{font-style:normal;font:600 18px/1 var(--mono);color:var(--ink-4);letter-spacing:.14em} .row b{font:800 var(--t-h3)/1 var(--ff);color:var(--acc);letter-spacing:-.02em;white-space:nowrap} .row b.word{font:600 24px/1 var(--mono);color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase} .row span{font:600 26px/1.3 var(--ff);color:var(--ink)} .row span em{display:block;font:400 20px/1.38 var(--ff);color:var(--ink-3);font-style:normal;margin-top:4px} /* the four-up product grid */ .quad{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .quad div{padding:var(--s4);border:1px solid var(--line);border-radius:14px;background:var(--panel)} .quad b{display:block;font:800 26px/1.2 var(--ff);color:var(--ink);letter-spacing:-.01em} .quad span{display:block;margin-top:10px;font:400 21px/1.45 var(--ff);color:var(--ink-3)} /* the liquidity event — four cumulative bands, translucent, never a slab */ .fill{display:grid;gap:var(--s2)} .fill div{position:relative;padding:var(--s3) var(--s4);border-radius:12px; border:1px solid color-mix(in srgb,var(--acc) 26%,transparent); font:600 26px/1.3 var(--ff)} .fill div em{font-style:normal;color:var(--ink-3);font-weight:400;display:block;margin-top:6px;font-size:21px} .fill .f1{background:color-mix(in srgb,var(--acc) 7%,transparent);width:52%} .fill .f2{background:color-mix(in srgb,var(--acc) 11%,transparent);width:68%} .fill .f3{background:color-mix(in srgb,var(--acc) 15%,transparent);width:84%} .fill .f4{background:color-mix(in srgb,var(--acc) 20%,transparent);width:100%; border-color:color-mix(in srgb,var(--acc) 52%,transparent)} /* ── cover ───────────────────────────────────────────────────────────────── */ .cover{padding:0;grid-template-rows:1fr auto} .cover .wrap{grid-column:1/-1;align-self:end;padding:0 var(--s8) var(--s5);display:grid;gap:var(--s3)} .cover .mark{font:600 24px/1 var(--mono);letter-spacing:.42em;color:var(--ink);text-transform:uppercase} .cover .foot{padding:0 var(--s8) var(--s6)} /* ── web shell (never printed) ───────────────────────────────────────────── */ .shell{padding:40px 0 80px;background:#0a0a0a} @media (max-width:860px){ .shell{padding:14px 0 28px} .shell__hd{margin-bottom:14px;padding:0 12px;gap:6px} /* ⛔ NO scroll-snap HERE, AND NOT AGAIN. A proximity snap on whose targets are 1080px layout boxes painting at 210px made the page fight the reader on a real handset — "I can't scroll the whole thing" — while headless Chromium scrolled it end to end happily. Snap buys nothing on a deck this size and costs the one thing that has to work. */ } .shell__hd{max-width:1920px;margin:0 auto 32px;padding:0 24px; display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap} /* ⛔ THE HEADER NEVER SCALED. .deck scales its slides; this block sat outside it at a flat 30px/13px, so on a 390px phone the title and the strap line ate roughly 370px of an 844px screen before the reader saw any deck at all. _deckfit.mjs measured the document width and passed it — the header fits horizontally, it is just enormous. Both now scale with the viewport. */ .shell__hd h1{font:800 clamp(16px,2.2vw,30px)/1.15 var(--ff);letter-spacing:-.02em;max-width:none} .shell__hd p{font:600 clamp(9px,1.1vw,13px)/1.6 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--ink-4)} /* a landscape handset is 390px TALL — the header has to answer to height too */ @media (max-height:540px){ .shell{padding:10px 0 20px} .shell__hd{margin-bottom:10px} .shell__hd h1{font-size:16px} .shell__hd p{font-size:9px} } .shell__hd a{color:var(--acc);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px} .deck{max-width:1920px;margin:0 auto;padding:0 24px} /* ⚠ FIT THE SLIDE TO THE VIEWPORT, NOT TO ITS WIDTH. Founder: "it's too zoomed in and oversized on desktop." Scaling by width alone makes a 1920x1080 slide as wide as the browser, so on a large display one slide is taller than the screen and you can never see a whole page at once — which is the only way a deck is actually read. The scale now takes the SMALLER of the width fit and the height fit, so a complete slide always sits inside the viewport with room for the header. */ .deck{ /* ⛔⛔⛔ AND --k WAS NEVER A NUMBER. `calc((100vw - 48px)/1920)` is a LENGTH divided by a number, which is still a LENGTH — so --k resolved to something like `0.64px`, `scale(0.64px)` is invalid, and the computed transform has been `none` for the entire life of this file. MEASURED: transform:none at 1280px, slide box 1920px, document 1944px. The comment that used to sit here described a fit that never once ran. CSS cannot divide a length by a length, so the ratio is computed in JS and written to --k as a plain number (see the inline script at the foot of index.html). Print forces it back to 1 with !important, which beats a normal inline declaration — that is what keeps the PDF at full size. */ --k:1; /* ⛔⛔ A `transform` DOES NOT SHRINK THE LAYOUT BOX. This is the whole of "it's way too oversized and not constrained correctly on web and mobile." The slide stayed 1920px WIDE in layout no matter what --k was, so the document measured 1944px at EVERY viewport — 1944 on a 390px phone, five screens wide — while _deck.mjs, which measures the slide against its own 1920x1080 box, read green every single time. A gate aimed at the slide can never see this; .axi/_deckfit.mjs measures the DOCUMENT, and that is the one that would have caught it. The container now carries the scaled WIDTH, and the slide scales from its top-LEFT corner so the painted box and the layout box start at the same point. `transform-origin:top center` cannot work here: centred scaling puts the visual left edge at (1920-1920k)/2, which is outside a container only 1920k wide. */ width:calc(1920px * var(--k)); max-width:100%; margin:0 auto; padding:0; } /* ⛔⛔ A NEGATIVE MARGIN DOES NOT SHORTEN A BOX — IT ONLY MOVES THE NEXT ONE. Every slide's LAYOUT box is 1080px tall while it PAINTS at 1080*k, which is 210px on a phone, and the old rule pulled the following slide up over the overhang. That works for thirteen of them because a later sibling paints on top. The fourteenth has no sibling, so its 870px of overhang became DEAD SCROLL at the end of the deck — you drag and nothing moves, which is exactly "I can't scroll the whole thing". It stayed invisible only because `overflow-x:hidden` on was also clipping the document height; taking that off (it traps scroll on iOS) exposed it. Each slide now sits in a .fit box whose HEIGHT IS THE PAINTED HEIGHT, so layout and paint agree, the document is exactly as long as the deck, and no slide overlaps its neighbour. .axi/_deckscroll.mjs asserts it. */ .fit{height:calc(1080px * var(--k));overflow:hidden;margin:0 0 var(--gap,28px)} .fit:last-child{margin-bottom:0} .slide{ transform:scale(var(--k));transform-origin:top left; margin:0; } /* On a phone the height fit would shrink a 16:9 slide to a stamp, so width wins there and the reader scrolls — which is the right trade on a handset. */ /* ⛔ AND NO overflow-x:hidden ON . It was belt-and-braces against an overflow that no longer exists — .axi/_deckfit.mjs proves the document is exactly the viewport width at 390, 768, 1280, 1440 and 1920 — and on iOS it turns the root into a scroll container, which is the other half of why the page would not scroll properly on his phone. The container carries the width; nothing needs to be clipped. */ .shell{overflow-x:clip} /* ── print: the page IS the slide ────────────────────────────────────────── */ @page{size:1920px 1080px;margin:0} @media print{ .deck{--k:1!important;width:auto!important;max-width:none!important} .fit{height:auto!important;overflow:visible!important;margin:0!important} html,body{background:#000} .shell{padding:0} .shell__hd{display:none} .deck{max-width:none;padding:0;--k:1} .slide{transform:none;margin:0;break-after:page;page-break-after:always} .slide:last-child{break-after:auto;page-break-after:auto} } /* ══════════════════════════════════════════════════════════════════════════ THE PROOF LAYOUTS — added for v2 ────────────────────────────────────────────────────────────────────────── Founder, on v1 at 3.5/10: "take and showcase visuals from our whitelabel site to truly have this done at a masterful level — that's like wow, this is an amazing opportunity and a must-have for my business and clients." That is a structural note, not a styling one. v1 argued; it never SHOWED. Six slides of real product go in between the idea and the economics — the cards, the app, the websites, the pools, the cards in real life, and the five brands already running. Every image below is a live surface, not a render made for a deck. ⚠ ALL OF THESE ARE FLUID GRIDS WITH NO FIXED HEIGHTS, for the same reason as everything else here: a fixed height is what truncated "ID checks handl" in v1, and _deck.mjs fails the build on any box whose content exceeds it. ══════════════════════════════════════════════════════════════════════════ */ /* ⚠ ONE ROW, NOT TWO. Measured: a slide leaves ~660px under its headline. Three columns meant two rows of 343px cards plus captions — 768px, and _deck.mjs failed it by 203px. Six columns is 260px wide, 164px tall, and the set still reads as a set. The gate turned this from a guess into a number. */ .six{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)} .six figure{margin:0;display:grid;gap:12px} /* ⚠ ONE ASPECT ACROSS THE SET, OR THE CAPTIONS STOP LINING UP. card-gld is 900x605 and the other five are 900x568, so its figure sat 37px deeper and its caption dropped below the row. `contain` rather than `cover`, because these are card faces and a crop takes a corner off one brand's artwork. */ .six img{width:100%;aspect-ratio:900/568;object-fit:contain;background:#000; height:auto;display:block;border-radius:10px; border:1px solid var(--line); box-shadow:0 14px 34px -14px rgba(0,0,0,.9)} .six figcaption{font:600 13px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-4)} /* real websites, real apps — screenshots want a frame, not a border */ /* ⚠ SITE SCREENSHOTS ARE TALL. Four 560x740 portraits in a 2x2 overflowed the slide by 2,957px — the worst number this gate has caught. One row of four, each cropped from the TOP so every site's hero is what shows, is the only layout that fits portrait screenshots on a 16:9 page. */ .shots{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)} .shots img{box-shadow:0 18px 44px -20px rgba(0,0,0,.95)} .shots img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center; display:block;border-radius:12px;border:1px solid var(--line);background:#000} /* app screens are landscape and must NOT be cropped — they are the product */ .shots--3{grid-template-columns:repeat(3,1fr)} .shots--3 img{aspect-ratio:16/10;object-fit:contain;background:#050505} /* cards in the wild — a contact sheet reads as evidence */ /* same arithmetic: three columns is two 549px rows, 1,114px. Six is one row. */ .wild{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)} .wild img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:10px; border:1px solid var(--line)} /* the five brands already running */ .brands{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3)} .brands div{display:grid;gap:14px;justify-items:center;text-align:center; padding:var(--s3) var(--s2);border:1px solid var(--line);border-radius:14px;background:var(--panel)} .brands img{width:100%;height:auto;display:block;border-radius:8px} .brands b{font:600 16px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)} .brands span{font:400 16px/1.35 var(--ff);color:var(--ink-3)} /* the holder's side — three plain facts, big */ .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)} .facts div{padding:var(--s4);border:1px solid var(--line);border-radius:14px;background:var(--panel)} .facts b{display:block;font:800 var(--t-h2)/1 var(--ff);color:var(--acc);letter-spacing:-.03em} .facts b.sm{font-size:var(--t-h3)} .facts span{display:block;margin-top:var(--s2);font:400 21px/1.45 var(--ff);color:var(--ink-3)} /* a full-width proof slide: headline top, evidence filling the rest */ .stack{grid-column:1/-1;display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--s4);align-content:start} .stack .head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s5)} .stack .head .lead{max-width:52ch;margin-bottom:6px} /* ══════════════════════════════════════════════════════════════════════════ v3 — THE REORDER, AND A TYPE-LED COVER ────────────────────────────────────────────────────────────────────────── Founder on v2: "the first slide, the visual is really bad." He was right, and the reason is specific: the cover was a finished key-frame used full-bleed, so its headline was BAKED PIXELS. A 2752px plate scaled into a 1920px page renders that type soft, and in a PDF it is soft for ever. The cover now sets its own headline in live Manrope and keeps the artwork as the subject beside it — crisp at any size, and it stops the deck opening on the same image the share card already used. ══════════════════════════════════════════════════════════════════════════ */ .cov{padding:var(--s7) 0 var(--s6) var(--s8);grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto;column-gap:0} .cov .mark{grid-column:1;font:600 22px/1 var(--mono);letter-spacing:.44em; text-transform:uppercase;color:var(--ink)} .cov .wrapL{grid-column:1;align-self:center;display:grid;gap:var(--s4);padding-right:var(--s6)} .cov .art{grid-column:2;grid-row:1/-1;position:relative;overflow:hidden} .cov .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .cov .art::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 22%,transparent 62%)} .cov .foot{grid-column:1;padding-right:var(--s6)} /* the eight things — a list that reads as a contents page, not a grid of tiles */ .eight{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s6)} .eight div{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:baseline; padding:var(--s3) 0;border-bottom:1px solid var(--line)} .eight i{font-style:normal;font:600 16px/1.4 var(--mono);letter-spacing:.14em;color:var(--acc)} .eight b{font:700 25px/1.25 var(--ff);color:var(--ink);letter-spacing:-.01em} .eight b em{display:block;font:400 19px/1.4 var(--ff);color:var(--ink-3);font-style:normal;margin-top:5px} /* one enormous figure, for the slides that turn on a single number */ .bignum{display:grid;gap:var(--s3);align-content:center} .bignum b{font:800 var(--t-hero)/.9 var(--ff);letter-spacing:-.045em;color:var(--acc)} .bignum span{font:400 26px/1.45 var(--ff);color:var(--ink-3);max-width:30ch} .addr{margin:0;font:800 34px/1 var(--ff);letter-spacing:-.02em} .addr b{color:var(--acc);font-weight:800} /* On a proof slide the two evidence rows share the leftover height, so neither one gets to push the other off the page. */ .stack .wild + .six{margin-top:var(--s3)} /* ⚠ 47px. The four-row block on slide 10 sits deeper than the one on slide 3 because its right column carries a plate as well. Two pixels of leading is the cheapest place to find it — the type SIZES stay on the scale. */ .rows .row span em{line-height:1.3} .rows{gap:11px} /* The last 8px on slide 10. Its four rows sit under a two-line h2 AND beside a plate, which is the deepest combination in the deck — so this block alone loses a little vertical padding. Nothing else changes. */ .split .rows .row{padding-block:20px} /* ══════════════════════════════════════════════════════════════════════════ v5 — THE NARRATIVE, IN THE WHITE-LABEL PAGE'S OWN WORDS ────────────────────────────────────────────────────────────────────────── Founder on v4, at 2/10 then 3.5/10: "take the white-label page, in its own words, and make it a story." The deck had been inventing a parallel vocabulary for things /whitelabel already names — "staking pools run for you" where the page says "we build pools to provide deeper liquidity", "what their holders walk away with" where he says "what YOUR holders get". Three structural changes, all his: 1 POSITIVE ONLY. Every "here's what's wrong with you today" slide is gone — the old-way contract, "none of them will write a token", the macro argument. What replaces them is what we DO: we simplify it, we streamline it, we build it all under your brand. 2 ONE INTERFACE FOR THE TRADE. "Raise capital, give away no control" had two separate charts on the page. They are one table here, with the AXIS column lit — .cmp below. 3 THE REAL SURFACES, NOT NEW ART. The card, the app and the web application on slide 5 are the page's own live elements, lifted by .axi/_deckplates.mjs at 2x with the floating brand switcher hidden. ⚠ align-content:center ON ANY BLOCK THAT SITS IN .stack's 1fr ROW. That row is ~668px tall and a grid defaults to stretch, so five 265px tiles became five 668px boxes with the copy stranded at the top. Centre the CONTENT; never give the tile a height. ══════════════════════════════════════════════════════════════════════════ */ /* ── the trade, as one interface ─────────────────────────────────────────── */ .cmp{ display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr 1.25fr; border-top:1px solid var(--line); align-content:stretch; } .cmp > *{ display:grid;align-content:center; padding:18px 20px;border-bottom:1px solid var(--line); font:400 20px/1.35 var(--ff);color:var(--ink-2); } /* the row label */ .cmp .rl{font:600 17px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--ink-4)} /* the header strip */ .cmp .hd{font:600 16px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);align-content:end;padding-bottom:14px} /* ⛔ THE LIT COLUMN IS A CELL RULE, NOT A COLUMN RULE. CSS grid has no column element, so every AXIS cell carries the tint itself — and the accent border has to be on the cells too, or it stops at the first row. */ .cmp .ax{background:color-mix(in srgb,var(--acc) 7%,transparent); color:var(--ink);font-weight:600; border-left:1px solid color-mix(in srgb,var(--acc) 34%,transparent); border-right:1px solid color-mix(in srgb,var(--acc) 34%,transparent)} .cmp .ax.hd{color:var(--acc);font-weight:700; border-top:1px solid color-mix(in srgb,var(--acc) 34%,transparent)} .note{margin-top:var(--s3);font:400 19px/1.4 var(--ff);color:var(--ink-4);max-width:74ch} /* ⚠ THE HEADLINE GETS THE WIDTH, NOT THE LEAD. `.stack .head` was a 1fr/auto row, and `auto` is the LEAD — at its 52ch measure it took 1,078px of 1,680 and left the headline 554. Every authored break then broke again inside it: "Your customers / become / tokenized holders." Nothing overflowed and the gate was green, because a headline wrapping into three lines is legal. It just looked broken. The lead now sits underneath, at its own measure. */ .stack .head{grid-template-columns:1fr;align-items:start;gap:var(--s3)} .stack .head .lead{max-width:64ch;margin-bottom:0} .h2--br{max-width:none} /* ⚠ THE COVER KEY ART IS A SIX-CARD FAN, SO IT CANNOT BE CROPPED. .cov .art uses object-fit:cover, which on a 1.79 plate in a 960x1080 column throws the outer four cards clean off the slide — the exact subject the plate exists to show. Contain it, and drop the hard left scrim to a soft one so the artwork is not dimmed to protect type that is not over it. */ .art--wl img{object-fit:contain!important;object-position:center!important} .art--wl::after{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.42) 14%,transparent 40%)!important} /* the seven steps — page #quick, as a numbered sequence */ .seq{display:grid;gap:2px;margin-top:var(--s2)} .seq div{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:baseline; padding:11px 0;border-bottom:1px solid var(--line)} .seq i{font-style:normal;font:600 16px/1.4 var(--mono);letter-spacing:.14em;color:var(--acc)} .seq span{font:500 25px/1.32 var(--ff);color:var(--ink-2)} .seq span em{font-style:normal;font-weight:700;color:var(--ink)} /* ── the complete ecosystem: one, two, three ─────────────────────────────── */ .trio{display:grid;grid-template-columns:1.1fr .72fr 1.5fr;gap:var(--s5); align-content:center} .trio figure{margin:0;display:grid;gap:var(--s2)} .trio figcaption{font:600 17px/1 var(--mono);letter-spacing:.2em; text-transform:uppercase;color:var(--ink-3)} .trio figcaption i{font-style:normal;color:var(--acc)} /* ⚠ ONE EXPLICIT BOX HEIGHT, AND contain INSIDE IT. These three plates have wildly different aspects — a 1.54 card, a 0.55 phone, a 1.54 laptop. Sized by width alone the phone is 960px tall and the slide overflows; sized by max-height alone each figure ends up a different height and the three labels sit at three different heights, which is what made the first cut of this slide read as broken. A height on an IMG is safe — it holds no text, and `contain` never crops. Bottom-aligned so all three stand on one line. */ .trio img{width:100%;height:440px;object-fit:contain;object-position:center bottom; display:block} .cap{margin-top:var(--s4);font:400 20px/1.4 var(--ff);color:var(--ink-4);max-width:88ch} /* ── what the holder holds: five tiles, from the page's own five ─────────── */ /* ⚠ min-height, NEVER height. Centred at their natural 240px these five read as a strip floating in a 668px band. A minimum lets them hold the slide without ever being able to truncate their own copy — which is defect #2 at the top of this file, and it is not coming back. */ .tiles5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3); align-content:center} .tiles5 div{display:grid;align-content:space-between;gap:var(--s5);min-height:440px; padding:var(--s4);border:1px solid var(--line);border-radius:14px;background:var(--panel)} .tiles5 i{font-style:normal;font:600 17px/1 var(--mono);letter-spacing:.16em;color:var(--acc)} .tiles5 b{display:block;font:800 30px/1.14 var(--ff);color:var(--ink);letter-spacing:-.01em} .tiles5 span{display:block;margin-top:var(--s2);font:400 21px/1.45 var(--ff);color:var(--ink-3)} .tiles5 .tx{align-self:end} /* ── the cover, full bleed ─────────────────────────────────────────────── The mark sits top-left over the art, the headline bottom-left under it. ⚠ The scrim has to reach further up than the stock one: the headline is two lines of 132px type, not a strap line. */ .cov--bleed{padding:var(--s6) var(--s8);grid-template-rows:auto 1fr auto} .cov--bleed .mark{grid-column:1/-1;align-self:start; font:600 22px/1 var(--mono);letter-spacing:.44em;text-transform:uppercase;color:var(--ink)} .cov--bleed .wrap{grid-column:1/-1;align-self:end;display:grid;gap:var(--s3);padding:0} .cov--bleed .hero{max-width:16ch} .cov--bleed .lead{max-width:46ch;color:var(--ink-2)} .cov--bleed .foot{padding-top:var(--s4)} .cov--bleed .scrim{background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.86) 30%,rgba(0,0,0,.42) 58%,rgba(0,0,0,.12) 78%,transparent 100%)} /* ⚠ THE BAKED "WHITELABEL" LANDED UNDER THE LIVE HEADLINE. The plate carries its own wordmark at mid-height, and the cover's headline sits at 45-70% — so "Tokenize your brand." printed straight across it, two typefaces in one line of sight. A near-1:1 aspect leaves no slack to pan with object-position, so the plate is scaled up and lifted: the lockup and the cards move into the top half, the headline gets clean ground underneath. */ /* ⚠ AND NOT WITH A transform. scale(1.2) grew the element's scroll box and _deck.mjs failed slide 1 "too wide by 192px" — overflow:hidden hides it from the eye, not from the measurement. Sizing the absolutely-positioned plate instead keeps width at 100% (no horizontal overflow at all) and puts its bottom edge exactly on 100% (no vertical overflow either), while the negative top does the lifting — a negative offset is clipped, never scrolled. */ .cov--bleed .plate--bleed{top:-34%;height:134%} /* ══════════════════════════════════════════════════════════════════════════ v7 — HIS EIGHT NOTES ON THE VISUALS ────────────────────────────────────────────────────────────────────────── 1 the cover is the PAGE's hero, not a card-fan plate 2 every deliverable carries the page's own icon 3 the app slide is ONE phone, not three screens 4 regulars + holders are ONE slide, with the page's own holders row 5 the card and day one are ONE slide 7 "real cards, real counters" is replaced by the platform ══════════════════════════════════════════════════════════════════════════ */ /* ── the cover: /whitelabel's hero, rebuilt in live type ─────────────────── */ .cov--hero{position:relative} .cov--hero::before{ /* the page's own lime bloom behind it */ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(52% 58% at 78% 42%,color-mix(in srgb,var(--acc) 15%,transparent) 0%,transparent 70%), radial-gradient(60% 70% at 8% 88%,color-mix(in srgb,var(--acc) 7%,transparent) 0%,transparent 72%); } .cov--hero .mark{font-size:19px;letter-spacing:.28em;color:var(--ink-3);text-transform:uppercase} .cov--hero .hero{max-width:14ch} .cov--hero .lead{max-width:40ch} /* ⚠ SIX CHIPS WRAP TO TWO ROWS IN AN 840px COLUMN, and two rows pushed the cover 74px past the page. Smaller chips keep them on one line; the gate turned that from a guess into a number. */ .kit{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:4px} .kit li{padding:8px 15px;border-radius:999px;border:1px solid var(--line); font:500 18px/1 var(--ff);color:var(--ink-2);white-space:nowrap} .kit li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--acc);margin-right:8px;vertical-align:middle} .cov--hero .wrapL{gap:var(--s3)} /* ⚠ CONTAIN THE PHONE. `.cov .art img` is object-fit:cover, which on a 0.68 portrait plate in a 960x1080 column cuts the top and bottom off the screen that is the whole subject. */ .art--phone img{object-fit:contain!important;object-position:center!important} .art--phone::after{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.4) 12%,transparent 34%)!important} /* ── the deliverables, each with the page's own icon ─────────────────────── */ .eight--ic div{grid-template-columns:auto 1fr;gap:var(--s3);align-items:center} .dic{position:relative;display:grid;place-items:center;font-style:normal; width:58px;height:58px;border-radius:16px;flex:0 0 auto; border:1px solid color-mix(in srgb,var(--acc) 42%,transparent); background:color-mix(in srgb,var(--acc) 9%,transparent)} .dic svg{width:27px;height:27px;fill:none;stroke:var(--acc); stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible} /* ── one phone, big ─────────────────────────────────────────────────────── */ .col--phone{justify-items:center} .phone-plate{width:auto;height:760px;max-width:100%;object-fit:contain;display:block} /* ── customers become tokenized holders: the card + the page's own row ──── */ .holders{display:grid;grid-template-rows:auto auto;gap:var(--s5);align-content:center} .holders__card{width:520px;justify-self:center;height:auto;display:block} .holders__row{width:100%;height:auto;display:block} /* ── the card and day one, side by side ─────────────────────────────────── */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-content:center} .duo figure{margin:0;display:grid;gap:var(--s3)} .duo img{width:100%;height:440px;object-fit:cover;display:block;border-radius:14px; border:1px solid var(--line);background:#000} .duo figcaption{font:400 21px/1.4 var(--ff);color:var(--ink-3)} /* ── a cover that is nothing but the key frame ─────────────────────────── No grid, no chrome, no live type: the artwork carries the headline. The hairline and the footer are suppressed because both would land on the frame's own top bar and its stock strip. */ .cov--art{display:block;padding:0;overflow:hidden} .cov--art::after{display:none} .cov--art .plate--bleed{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center} /* the customer buying in, above the page's own holders row */ .holders__shot{width:900px;justify-self:center;height:auto;display:block; border-radius:16px;border:1px solid var(--line)} /* ══════════════════════════════════════════════════════════════════════════ CUSTOMERS → TOKENIZED HOLDERS, built live ────────────────────────────────────────────────────────────────────────── He sent a reference for this slide. It is drawn in the deck rather than screenshotted because every glyph and every word here is vector or live type — a raster of it would be the one soft thing on the page, and it would go stale the moment the copy moved. ══════════════════════════════════════════════════════════════════════════ */ /* ⚠ SCOPED TO .stack. A bare `.head--row` is (0,1,0) and `.stack .head` is (0,2,0), so the modifier lost and the lead stayed under the headline. */ /* ⚠ AND THE COLUMNS HAVE TO BE RATIOS, NOT `auto`. With `auto` the LEAD sized itself first at its own measure and left the headline a 560px column, which broke it into five lines. */ .stack .head--row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:var(--s5)} .stack .head--row .lead{max-width:40ch;margin-bottom:6px} .head--row .lead b{color:var(--ink);font-weight:600} /* ⚠ 5px, and it comes out of the GAP. The gate measured this slide 5px past the page; every type size here is on the modular scale and stays there. */ .xform{display:grid;align-content:center;gap:20px;justify-items:center} .xform__gate{font:600 22px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase; color:var(--acc)} .xform__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:var(--s6);width:100%} .xform__side{display:flex;justify-content:center;gap:var(--s4)} .xform__side--on{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--acc) 34%,transparent))} .pg{position:relative;display:block;width:56px;height:56px;color:var(--ink-4)} .pg svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .pg--on{color:var(--acc)} /* the lit dot that marks a holder */ .pg--on b{position:absolute;top:2px;right:4px;width:13px;height:13px;border-radius:50%; background:var(--acc)} .pg--mid{color:var(--acc);width:58px;height:58px} /* ⚠ THE GATE IS A LINE THROUGH THE WHOLE ROW, not a border on the middle cell — a border would stop at the glyph's own box and read as a divider between two lists rather than as a threshold they pass through. */ .xform__arrow{position:relative;display:grid;place-items:center;padding:0 var(--s3)} .xform__arrow::before{content:"";position:absolute;left:50%;top:-14px;bottom:-58px; width:2px;transform:translateX(-50%); background:linear-gradient(180deg,transparent,var(--acc) 22%,var(--acc) 78%,transparent)} .xform__chev{position:absolute;left:calc(50% + 16px);width:30px;height:30px;fill:none; stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .xform__labels{display:grid;grid-template-columns:1fr 1fr;width:100%; padding-top:var(--s3);border-top:1px dashed var(--line); font:600 21px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase; color:var(--ink-3);text-align:center} .xform__note{font:400 22px/1.4 var(--ff);color:var(--ink-3);max-width:110ch;text-align:center} .xform__note b{color:var(--ink);font-weight:600} .htiles{display:grid;grid-template-columns:repeat(5,1fr);gap:0;width:100%; border-top:1px solid var(--line);padding-top:var(--s3)} .htiles div{display:grid;justify-items:center;text-align:center;gap:10px; padding:0 var(--s3);border-right:1px solid var(--line)} .htiles div:last-child{border-right:0} .hic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%; border:1px solid color-mix(in srgb,var(--acc) 40%,transparent); background:radial-gradient(circle,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%); box-shadow:0 0 22px -6px color-mix(in srgb,var(--acc) 46%,transparent)} .hic svg{width:26px;height:26px;fill:none;stroke:var(--acc);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;overflow:visible} .htiles b{font:700 24px/1.2 var(--ff);color:var(--ink);letter-spacing:-.01em} .htiles em{font-style:normal;font:400 19px/1.42 var(--ff);color:var(--ink-3)} /* the staking pools, as the app lists them */ .pools{display:grid;gap:10px;margin-top:var(--s2)} .pools div{display:flex;justify-content:space-between;align-items:center; padding:13px 22px;border-radius:12px;background:var(--panel); border:1px solid color-mix(in srgb,var(--acc) 22%,transparent)} .pools b{font:600 27px/1 var(--ff);color:var(--ink);letter-spacing:-.01em} .pools span{font:800 27px/1 var(--ff);color:var(--acc);letter-spacing:-.01em} /* the close carries the longest headline in the deck */ .hero--close{font-size:96px;max-width:none;line-height:.98} /* a plate that must be seen whole, in a .cov art column */ .art--fit img{object-fit:contain!important;object-position:center!important} .art--fit::after{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.38) 12%,transparent 34%)!important}