/* Wonderleaf welcome-giga — shared base system (2026-07-27) Tokens from prod + research-derived motion grammar. Every prototype imports this. */ /* ---------- fonts (self-hosted, prod files) ---------- */ /* ---------- tokens ---------- */ :root{ --paper:#fbf6e9; --paper-deep:#f4eedb; --surface:#fffdf3; --ink:#1a1d24; --body:#4c4336; --muted:#5c5f66; /* 07-28 (merged in from the wonder-page prototype 07-30, #508 inheritance audit): was #6a6d74 — 4.47:1 nominal on paper-deep and 3.71:1 as actually PAINTED (antialiasing thins a light caption), i.e. under the 4.5:1 HARD FLOOR on every .quiet caption and figcaption this file styles. #5c5f66 is 5.9:1 on paper / 5.5:1 on paper-deep nominal, ~4.6:1 painted. */ --wood:#5a3825; --wood-light:#7a5238; --wood-dark:#2d1810; --leaf:#2f4a26; --leaf-dark:#24391d; --leaf-sage:#7a9568; --gold:#c8a050; --gold-soft:#edc87c; --hairline:rgba(90,56,37,.22); --serif:"Cormorant Garamond",Garamond,serif; --prose:Lora,Georgia,serif; --ui:Quicksand,system-ui,sans-serif; --hand:Caveat,cursive; /* motion grammar (benchmark-converged) */ --ease:cubic-bezier(.4,0,.2,1); --ease-hero:cubic-bezier(.23,1,.32,1); --ease-settle:cubic-bezier(.34,1.2,.64,1); --d-micro:.18s; --d-state:.45s; --d-enter:.6s; --d-hero:.9s; } /* ---------- reset-lite ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--paper);color:var(--body);font:400 19px/1.55 var(--prose); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit} button{font:inherit;cursor:pointer} ::selection{background:#e9dcb8;color:var(--ink)} :focus-visible{outline:2px solid var(--wood);outline-offset:3px;border-radius:4px} /* ---------- type roles ---------- */ .display{font-family:var(--serif);font-weight:600;color:var(--ink);line-height:1.07;letter-spacing:-.01em} .display em{font-style:italic;font-weight:500} .kicker{font:600 12.5px var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--wood)} .smallcaps{font-family:var(--serif);font-weight:600;letter-spacing:.14em;text-transform:uppercase} .hand{font-family:var(--hand);font-weight:500} .quiet{font:500 15px var(--ui);color:var(--muted)} /* ---------- structure ---------- */ .rule{border:0;border-top:1px solid var(--hairline)} .measure{max-width:680px;margin-inline:auto} /* ---------- buttons (prod treatments) ---------- */ .btn{display:inline-flex;align-items:center;gap:.5em;font:600 17px var(--ui);color:var(--paper); background:var(--ink);border:0;border-radius:99px;padding:15px 34px;text-decoration:none; box-shadow:0 5px 22px rgba(26,29,36,.2);transition:background var(--d-micro) ease,transform var(--d-micro) ease} .btn:hover{background:#33291c} .btn.leaf{background:var(--leaf);font-weight:700;font-size:16px;padding:13px 27px} .btn.leaf:hover{background:var(--leaf-dark)} .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none;padding:8px 18px} .btn.ghost:hover{background:var(--ink);color:var(--paper)} .linkq{font:500 15px var(--ui);color:var(--muted);text-decoration:none;border-bottom:1px solid #cbbf9f;padding-bottom:1px} .linkq:hover{color:var(--wood)} /* ---------- text-over-art readability (4.5:1 law — centred halo, boxes banned) ---------- */ .halo{text-shadow:0 0 14px rgba(251,246,233,.95),0 0 34px rgba(251,246,233,.9),0 0 60px rgba(251,246,233,.8);color:var(--ink)} .halo-dark{text-shadow:0 1px 4px rgba(20,14,8,.85),0 0 22px rgba(20,14,8,.75),0 0 48px rgba(20,14,8,.6);color:var(--paper)} /* ---------- reveal engine (wl.js adds .js to , .rv-in when visible) ---------- Content is ALWAYS visible without JS — hidden states only apply under .js */ .js [data-rv]{opacity:0;transform:translateY(18px); transition:opacity var(--d-enter) var(--ease),transform var(--d-enter) var(--ease); transition-delay:calc(var(--i,0)*90ms)} .js [data-rv].rv-in{opacity:1;transform:none} .js [data-rv="hero"]{transform:translateY(12px);transition-duration:var(--d-hero);transition-timing-function:var(--ease-hero)} .js [data-rv="scale"]{transform:translateY(10px) scale(.97)} .js [data-rv="scale"].rv-in{transform:none} /* reversible reveals (body[data-rv-reverse]): an element that left through the TOP retreats upward, so scrolling up un-shows things exactly the way they came in */ .js [data-rv].rv-from-top{transform:translateY(-18px)} .js [data-rv="hero"].rv-from-top{transform:translateY(-12px)} .js [data-rv="scale"].rv-from-top{transform:translateY(-10px) scale(.97)} .js .line.rv-from-top>span{transform:translateY(-150%)} /* on the way out, drop the stagger so a block leaves as one piece */ .js body[data-rv-reverse] [data-rv]:not(.rv-in){transition-delay:0s} /* masked line rise (R8) — wrap each line: text ⚠️ INK HEADROOM (founder bug 2026-07-28): overflow:hidden + tight display line-height clips descender INK ("g", "y", italics) below the line box. The padding/negative-margin pair gives the ink room without changing layout. NEVER remove it. */ .line{display:block;overflow:hidden; /* Ink headroom on ALL sides — Cormorant italic ink escapes the line box above (f ascender), below (f/g/y descenders) AND sideways (italic overhang). The negative margins cancel the padding in layout, so rhythm is unchanged. */ padding:.35em .2em;margin:-.35em -.2em} /* 150% rise, not 112%: the hidden span must clear the .3em bottom ink-headroom or it peeks into the padding zone before its reveal */ .js .line>span{display:block;transform:translateY(150%);transition:transform .55s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*100ms)} .js .rv-in .line>span, .js .line.rv-in>span{transform:none} /* ---------- idle life (≤3-5 elements per page, long periods, small amplitudes) ---------- */ @keyframes wl-bob{from{transform:translateY(-3px) rotate(-.4deg)}to{transform:translateY(3px) rotate(.4deg)}} .bob{animation:wl-bob 4.5s ease-in-out infinite alternate} @keyframes wl-breath{from{transform:scale(1)}to{transform:scale(1.03)}} .breath{animation:wl-breath 3.5s ease-in-out infinite alternate;transform-origin:50% 80%} @keyframes wl-drift{from{transform:translate(-2.5%,1.5%) rotate(-4deg)}to{transform:translate(2.5%,-1.5%) rotate(4deg)}} .drift{animation:wl-drift 20s ease-in-out infinite alternate} /* draw-on SVG: set pathLength=1 on the path */ .js .draw path,.js path.draw{stroke-dasharray:1;stroke-dashoffset:1} .js .rv-in.draw path,.js .rv-in .draw path,.js path.draw.rv-in{transition:stroke-dashoffset 1.1s var(--ease) .15s;stroke-dashoffset:0} /* highlight sweep behind a key phrase */ /* box-decoration-break:clone is REQUIRED (merged in from the wonder-page prototype 07-30, #508 inheritance audit) — without it a span that WRAPS gets ONE background box spanning every line, which paints a band through the middle of the text and reads as a strikethrough instead of a highlighter. Geometry (0 62%/0% 42%) is unchanged: that is the founder-approved welcome-page look. */ .mark-sweep{background:linear-gradient(rgba(237,200,124,.55),rgba(237,200,124,.55)) no-repeat 0 62%/0% 42%; -webkit-box-decoration-break:clone;box-decoration-break:clone; transition:background-size .5s cubic-bezier(.8,0,.2,1) .2s} .mark-sweep.rv-in{background-size:100% 42%} /* ---------- micro-hover ---------- */ .lift{transition:transform var(--d-micro) ease,box-shadow var(--d-micro) ease} .lift:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(45,24,16,.24)} /* ---------- safety rails ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .js [data-rv]{opacity:1!important;transform:none!important} .js .line>span{transform:none!important} .js .draw path,.js path.draw{stroke-dashoffset:0!important} .mark-sweep{background-size:100% 42%!important} } html.perf-low .bob,html.perf-low .breath,html.perf-low .drift{animation:none}