/* ===== Lysia landing — ported 1:1 from the LandingPage mock export. ===== Token contract drives theme via [data-mode] on (theme-init.js owns it, matching the rest of the app). Light paints by default; dark overrides. */ :root, html[data-mode="light"]{ --bg:#faf9f5; --bg-deep:#f3f0e7; --surface:#fffdf8; --surface-raised:#fffefb; --ink:#222f37; --ink-muted:#4a5a61; --ink-subtle:#7c8884; --border:#e7dfd0; --border-strong:#d4cab6; --slate:#7d9aa0; --slate-2:#8fa9ae; --em:#3c545a; --accent:#a8623a; --accent-soft:rgba(168,98,58,.10); --trunk:#e7d8c4; --grove-bg-op:.5; --bg-grove-op:.2; --ready-green:#4f8a64; --lamp:transparent; --ease:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.32,.72,0,1); --dur-1:.55s; --dur-2:.8s; --dur-3:1.1s; --shadow-1:0 1px 2px rgba(60,42,28,.08); --shadow-2:0 1px 2px rgba(60,42,28,.05), 0 10px 30px rgba(60,42,28,.08); --shadow-3:0 2px 8px rgba(50,38,26,.07), 0 26px 64px rgba(50,38,26,.13); color-scheme:light; } html[data-mode="dark"]{ --bg:#1a1e1c; --bg-deep:#151816; --surface:#232825; --surface-raised:#2b302c; --ink:#ece3d3; --ink-muted:#b4b3a4; --ink-subtle:#868a7d; --border:#343a33; --border-strong:#4c5249; --slate:#9fb7ba; --slate-2:#aec4c6; --em:#c3d4d2; --accent:#c87d52; --accent-soft:rgba(200,125,82,.16); --trunk:#d9c7ac; --grove-bg-op:.34; --bg-grove-op:.12; --ready-green:#79b389; --lamp:radial-gradient(120% 90% at 50% -8%, rgba(210,150,86,.16), transparent 58%); --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.55); --shadow-3:0 2px 10px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.66); color-scheme:dark; } html,body{ margin:0; padding:0; background:var(--bg); } #lysia-root *{ box-sizing:border-box; } #lysia-root{ position:relative; isolation:isolate; min-height:100vh; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .5s var(--ease), color .5s var(--ease); } #lysia-root a{ color:inherit; text-decoration:none; } #lysia-root ::selection{ background:var(--accent-soft); color:var(--ink); } /* paper fiber grain — fixed, inert */ #lysia-root::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:80; opacity:.04; background-image:radial-gradient(currentColor .6px,transparent .6px),radial-gradient(currentColor .5px,transparent .5px); background-size:7px 7px,11px 11px; background-position:0 0,3px 5px; color:var(--ink); } @keyframes lyRise{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} } @keyframes lyRiseSm{ from{opacity:0; transform:translateY(11px)} to{opacity:1; transform:none} } @keyframes lyDraw{ from{transform:scaleX(0); opacity:0} to{transform:scaleX(1); opacity:.5} } @keyframes lyBloom{ from{opacity:0; filter:blur(9px)} to{opacity:1; filter:blur(0)} } @keyframes lyBreathe{ 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-7px) rotate(.5deg)} } @keyframes lyBreatheB{ 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-11px) rotate(-.45deg)} } #lysia-root :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* skip-to-content — off-screen until focused (was inline onfocus/onblur; CSP-blocked) */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:6px; font:600 13px 'Inter',sans-serif; } .skip-link:focus{ left:12px; top:12px; } @media (prefers-reduced-motion: reduce){ #lysia-root *, #lysia-root *::before, #lysia-root *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } } /* ----- pre-rendered MathJax SVG (no runtime MathJax under strict CSP) ----- */ mjx-container[jax="SVG"]{ direction:ltr; } mjx-container[jax="SVG"] > svg{ overflow:visible; min-height:1px; min-width:1px; max-width:100%; } mjx-container[jax="SVG"][display="true"]{ display:block; text-align:center; margin:0; } mjx-assistive-mml{ position:absolute!important; top:0; left:0; clip:rect(1px,1px,1px,1px); padding:1px 0 0 0!important; border:0!important; display:block!important; width:auto!important; overflow:hidden!important; -webkit-user-select:none; user-select:none; } /* ----- hover states (the mock's inert style-hover="" attrs, made real) ----- */ .lh-h0:hover{color:var(--ink);background:color-mix(in oklch,var(--ink) 5%,transparent);} .lh-h1:hover{color:var(--ink);background:color-mix(in oklch,var(--ink) 5%,transparent);} .lh-h2:hover{border-color:var(--ink);} .lh-h3:hover{transform:translateY(-2px);box-shadow:var(--shadow-3);} .lh-h4:hover{color:var(--ink);} .lh-h5:hover{border-color:var(--ink);color:var(--accent);} .lh-h6:hover{border-color:var(--ink);color:var(--accent);} .lh-h7:hover{transform:translateY(-2px);box-shadow:var(--shadow-3);} .lh-h8:hover{color:var(--ink);} .lh-h9:hover{color:var(--ink);} .lh-themebtn:hover{color:var(--ink);border-color:var(--ink);} /* ---- mode-dependent brand mark (2026-07-02): slate tile in light, cream tile in dark — the slate tile disappeared into the dark nav. Marketing + auth pages load this sheet; the app/org shells carry the same rules in appshell.css. */ .brand-mark-light{ display:block; } .brand-mark-dark{ display:none; } html[data-mode="dark"] .brand-mark-light{ display:none; } html[data-mode="dark"] .brand-mark-dark{ display:block; } /* The two detailed watercolor grove trees: natural wash in light; in dark they're desaturated + inverted to a pale "bones" x-ray (grove option 3). */ html[data-mode="dark"] #bg-grove img{ filter:grayscale(1) invert(.92); } /* ---- site footer (shared: landing · pricing · login · register · reset) ---- One class-based footer so copy edits (contact address, policy links) happen here + one markup template, not five diverging inline-styled copies. */ .site-foot{ width:100%; max-width:1180px; margin:0 auto; padding:56px clamp(20px,5vw,40px) 36px; border-top:1px solid var(--border); } .site-foot-grid{ display:flex; flex-wrap:wrap; gap:36px 64px; justify-content:space-between; align-items:flex-start; } .site-foot-brand{ display:flex; flex-direction:column; gap:16px; min-width:200px; } .site-foot-home{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; } .site-foot-home img{ width:24px; height:24px; border-radius:6px; } .site-foot-name{ font:500 20px 'Newsreader',Georgia,serif; color:var(--ink); } .site-foot-label{ font:500 13px 'Inter',sans-serif; color:var(--ink); } .site-foot-cols{ display:flex; gap:clamp(40px,6vw,88px); flex-wrap:wrap; } .site-foot-col{ display:flex; flex-direction:column; gap:14px; min-width:120px; } .site-foot-col-title{ font:600 14px 'Inter',sans-serif; color:var(--ink); } .site-foot-link{ font:400 14px 'Inter',sans-serif; color:var(--ink-subtle); } .site-foot-tagline{ margin-top:48px; padding-top:16px; border-top:1px solid var(--border); font:600 10px 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-subtle); }