/* ============================================================ flowscan — foundations. One theme, light. There used to be two and a switch in the nav; both are gone, and every token below is the light value that survived. If a dark room is ever wanted again it is a second :root block and a class on , not a rewrite — but nothing in here branches on a theme any more, so do not reintroduce half of one. ============================================================ */ :root { color-scheme: light; --bg: #f2f5f9; --bg-2: #ffffff; --bg-3: #e9eef5; --ink: #141a27; --ink-2: #34405a; --muted: #5b6980; --faint: #8593a9; --line: rgba(20, 30, 50, 0.11); --line-2: rgba(20, 30, 50, 0.2); --card: #ffffff; --card-2: #ffffff; /* --green-lit is DEEPER than --green, not brighter. The name is from the dark theme, where it was the accent that had to glow off a near-black background; on white the same job wants the opposite direction, so it is now the pressed / gradient-end green. --green is the one you want for text and icons. */ --green: #2f9a3f; --green-lit: #248a33; --green-dim: rgba(47, 154, 63, 0.11); --green-deep: #237e30; --navy: #232b3e; --shadow: 0 22px 55px -30px rgba(23, 38, 66, 0.4); --glow: 0 0 0 1px rgba(47, 154, 63, 0.3), 0 12px 34px -16px rgba(47, 154, 63, 0.4); --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --pad: clamp(20px, 5vw, 80px); --maxw: 1240px; --r: 16px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; /* NOT hidden — hidden kills position:sticky */ } body.menu-open { overflow: hidden; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.028em; line-height: 1.03; } h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); font-weight: 900; } h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); } h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -0.018em; } p { margin: 0; } ::selection { background: var(--green); color: #fff; } :focus-visible { outline: 2px solid var(--green-lit); outline-offset: 3px; border-radius: 6px; } .skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--green); color: #fff; font-weight: 700; transition: top 0.2s ease; } .skip:focus { top: 12px; } /* ---------- shared type ---------- */ .eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); } .lede { font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--ink-2); max-width: 54ch; } .muted { color: var(--muted); } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; min-height: 48px; /* touch target */ border-radius: 12px; font-weight: 650; font-size: 0.96rem; letter-spacing: -0.005em; border: 1px solid var(--line-2); color: var(--ink); transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--green); border-color: transparent; color: #fff; box-shadow: var(--glow); } .btn-primary:hover { background: var(--green-deep); } .btn-ghost { background: var(--card); } .btn-ghost:hover { background: var(--card-2); border-color: var(--line-2); } .btn-sm { padding: 9px 16px; min-height: 40px; font-size: 0.88rem; border-radius: 10px; } .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* ---------- reveal ---------- */ [data-reveal] { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal][data-d='1'] { transition-delay: 0.07s; } [data-reveal][data-d='2'] { transition-delay: 0.14s; } [data-reveal][data-d='3'] { transition-delay: 0.21s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } .btn:hover { transform: none; } }