/* ====================================================================== * * Landing page. * * Deliberately NOT built on modeler.css: that file sets * `html,body{height:100%}` and `body{overflow:hidden;display:flex}` for an * app shell that must never scroll, which is precisely wrong for a document * page. The design tokens below are copied from its :root so the two stay * visually identical — if you change a colour there, change it here. * * No JS dependency, no webfont, no build step. Same rules as the rest of * the project. * ====================================================================== */ :root{ --bg:#0e1116; --bg-2:#151a21; --bg-3:#1c222b; --bg-4:#232b36; --line:#2b3441; --line-2:#38424f; --fg:#e6ebf2; --fg-2:#a5b1c2; --fg-3:#6f7d8f; --accent:#4c8dff; --accent-2:#7aa9ff; --accent-soft:rgba(76,141,255,.14); --good:#3ecf8e; --warn:#f0b429; --bad:#f4636e; --radius:8px; --radius-lg:12px; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --shadow:0 8px 28px rgba(0,0,0,.45); --wrap:1080px; } /* The app remembers a theme in localStorage and stamps data-theme on . Honour it here so arriving from the app is not a jarring flash. */ html[data-theme="light"]{ --bg:#f6f8fb; --bg-2:#ffffff; --bg-3:#f0f3f8; --bg-4:#e6ebf2; --line:#dde3ec; --line-2:#c8d1de; --fg:#131922; --fg-2:#4d5a6b; --fg-3:#8593a5; --accent:#1f6feb; --accent-2:#1a5ed1; --accent-soft:rgba(31,111,235,.10); --good:#1a8f5f; --warn:#b07000; --bad:#d0343f; --shadow:0 8px 28px rgba(16,24,40,.12); } *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; } a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0} p{margin:0} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} /* ------------------------------------------------------------- header */ .top{ position:sticky;top:0;z-index:10; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .top .wrap{display:flex;align-items:center;gap:16px;height:60px} .brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:17px;color:var(--fg)} .brand:hover{text-decoration:none} .top nav{margin-left:auto;display:flex;align-items:center;gap:22px} .top nav a{color:var(--fg-2);font-size:14.5px} .top nav a:hover{color:var(--fg)} /* -------------------------------------------------------------- buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 18px;border-radius:var(--radius);border:1px solid var(--line-2); background:var(--bg-3);color:var(--fg);font-weight:550;font-size:15px; cursor:pointer;white-space:nowrap; } .btn:hover{background:var(--bg-4);text-decoration:none} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)} .btn.lg{padding:13px 22px;font-size:16px} /* ----------------------------------------------------------------- hero */ .hero{padding:76px 0 64px;position:relative;overflow:hidden} .hero::before{ content:"";position:absolute;inset:-40% 0 auto -10%;height:620px; background:radial-gradient(50% 50% at 30% 40%,var(--accent-soft),transparent 70%); pointer-events:none; } .hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center} .eyebrow{ display:inline-block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--fg-3);font-weight:600;margin-bottom:16px; } .hero h1{font-size:clamp(34px,5vw,52px);font-weight:700} .hero h1 em{font-style:normal;color:var(--accent)} .hero .lede{margin-top:18px;font-size:18px;color:var(--fg-2);max-width:34em} .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .cta-note{margin-top:14px;font-size:14px;color:var(--fg-3)} .hero figure{margin:0} .hero svg{width:100%;height:auto;display:block} /* --------------------------------------------------------------- panels */ section{padding:64px 0;border-top:1px solid var(--line)} .sec-head{max-width:38em;margin-bottom:36px} .sec-head h2{font-size:clamp(24px,3vw,32px)} .sec-head p{margin-top:12px;color:var(--fg-2)} .grid{display:grid;gap:18px} .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c2{grid-template-columns:repeat(2,1fr)} .card{ background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg); padding:22px; } .card h3{font-size:17px;margin-bottom:9px} .card p{color:var(--fg-2);font-size:15px} /* --------------------------------------------------------------- format */ .fmt{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px} .fmt span{ font:12.5px/1 var(--mono);letter-spacing:.02em; padding:7px 10px;border-radius:6px; background:var(--bg-3);border:1px solid var(--line);color:var(--fg-2); } .fmt span.in{border-style:dashed} /* -------------------------------------------------------------- compare */ table.cmp{width:100%;border-collapse:collapse;font-size:15px} table.cmp th,table.cmp td{ text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top; } table.cmp thead th{color:var(--fg-3);font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:600} table.cmp tbody th{font-weight:550;color:var(--fg)} table.cmp td{color:var(--fg-2)} .tick{color:var(--good);font-weight:650} .cross{color:var(--fg-3)} .scroll-x{overflow-x:auto} /* --------------------------------------------------------------- footer */ footer{border-top:1px solid var(--line);padding:38px 0 56px;color:var(--fg-3);font-size:14px} footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center} footer nav{margin-left:auto;display:flex;gap:20px} footer a{color:var(--fg-2)} /* ---------------------------------------------------------- responsive */ @media (max-width:860px){ .hero{padding:52px 0 44px} .hero .wrap{grid-template-columns:1fr;gap:36px} .hero figure{order:-1;max-width:420px} .grid.c3,.grid.c2{grid-template-columns:1fr} .top nav{gap:16px} .top nav a.hide-sm{display:none} }