/* ============================================================================ SellFalcon marketing site - sellfalcon.com Design language lifted from the extension's premium layer (extension/src/styles/premium.css): Inter, vibrant blue #1768f2 gradients, glass surfaces, soft deep shadows, generous radii. Fully static, no build step. Dark theme via html[data-theme="dark"] (stamped by an inline script in ); light is the default. ============================================================================ */ /* ---- Self-hosted Inter (variable: one file per subset covers 400-800) ---- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/inter-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/inter-var-latin.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ------------------------------ Tokens ------------------------------------ */ /* Redesign (September 2026). The palette below is the one the redesign ships, name for name: --pg/--pn/--pn2/--pn3 are the surfaces, --ink/--ink2/--dim/ --faint the inks, --acc the brand blue, --pos/--warn/--neg the three status families (each a fill, a wash and an ink). Fills hold ONE value in both themes; only surfaces, inks and washes flip. Below the new names sit the older names every stylesheet in the repo already uses, pointed at the new values, so the marketing pages and the tool share one palette without a rewrite. Every rule in every stylesheet may use either set. */ :root { --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Surfaces: the page always sits darker than the panels. */ --pg: #DEE7F6; --pn: #FCFDFF; --pn2: #F2F6FD; --pn3: #DCE5F4; /* A SELECTED row: a step in lightness, never a blue wash (owner's call, Round GL), so dark mode can answer with its own step. */ --row-picked: #DCE5F6; /* Lines. */ --ln: rgba(20, 40, 80, .15); --ln2: rgba(20, 40, 80, .23); --off: #C3CEDF; --onacc: var(--pn); /* Inks. --faint is tuned for --pn only; on a tinted surface use --dim. */ --ink: #0E1729; --ink2: #31405C; --dim: #4E5C75; --faint: #586580; /* Accent. --acc is a FILL, --acci is the ink that reads on a panel. */ --acc: #1768f2; --acc2: #0b4db8; --acc-rgb: 23, 104, 242; --accw: rgba(var(--acc-rgb), .10); --acci: #115ddd; --pos-ondark: #71E5A9; --grad-cta: linear-gradient(152deg, #3B86FF 0%, var(--acc) 32%, var(--acc2) 72%, #082A63 100%); /* Glass: floating chrome only, never a content card. */ --glass: rgba(250, 252, 255, .72); --glass2: rgba(251, 252, 254, .95); --glassbd: rgba(20, 40, 80, .13); --glasshi: rgba(255, 255, 255, .55); /* Status: fill / wash / ink. */ --pos: #18a85d; --posw: #E6F7EF; --posi: #0b6e39; --warn: #d97706; --warnw: #FFF5E6; --warni: #8A4B08; --neg: #ef4056; --negw: #FEEFF2; --negi: #B4243A; /* Elevation, radii, motion. */ --sh: 0 1px 2px rgba(16, 32, 64, .07), 0 3px 10px rgba(16, 32, 64, .05); --sh2: 0 12px 32px rgba(16, 32, 64, .15); --rw: 9px; --cp: 18px; --ez: cubic-bezier(.2, .85, .22, 1); /* ---- Older names, same palette ---- */ --blue-50: #eef7ff; --blue-100: #d9ecff; --blue-200: #b6d8ff; --blue-300: #84bcff; --blue-400: #4d99ff; --blue-500: #1768f2; --blue-600: #115ddd; --blue-700: #0b4db8; --blue-800: #0a397e; --blue-900: #061c3d; --green-300: #70dda3; --green-400: #35c878; --green-500: #18a85d; --green-600: #0f8b48; --green-700: #0b6e39; --amber-500: #d97706; --red-500: #ef4056; --violet-500: #7c4fe0; --bg: var(--pg); --surface: var(--pn); --surface-2: var(--pn2); --surface-3: var(--pn3); --surface-glass: var(--glass); --border: var(--ln); --border-strong: var(--ln2); --text: var(--ink); --text-2: var(--ink2); --muted: var(--dim); --subtle: var(--faint); --navy-bg: radial-gradient(circle at 18% 0%, rgba(77, 153, 255, 0.22), transparent 42%), linear-gradient(135deg, #0a2f6b 0%, #071f47 100%); --navy-text: #f2f7ff; --navy-sub: rgba(222, 236, 255, 0.78); --navy-border: rgba(255, 255, 255, 0.14); --success: var(--pos); --success-bg: var(--posw); --success-ink: var(--posi); --warning: var(--warn); --warning-bg: var(--warnw); --warning-ink: var(--warni); --danger: var(--neg); --danger-bg: var(--negw); --danger-ink: var(--negi); --r-sm: 9px; --r-md: 12px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; --shadow-sm: var(--sh); --shadow: var(--sh); --shadow-md: var(--sh2); --shadow-lg: var(--sh2); --ring: 0 0 0 3px var(--accw); --ring-line: var(--acc); --t-fast: 0.15s; --t-med: 0.24s; --ease: var(--ez); --container: 1140px; /* How far the toast stack sits off the bottom. A page with a fixed footer bar can raise it so a toast never covers the buttons it is talking about (ui.css reads it). Defined here so it is a real token, not a guess. */ --sf-toast-offset: 20px; color-scheme: light; } /* Dark: the same panels a step down, tinted-blue surfaces neutralised (the owner's call, 2026-08-09: blue is an ACCENT in dark, never a background). Inks and washes flip; --acc, --pos, --warn and --neg do not. */ html[data-theme="dark"] { --pg: #080C13; --pn: #141A28; --pn2: #0F1521; --pn3: #1F2939; --row-picked: #1B2437; --ln: rgba(150, 180, 255, .15); --ln2: rgba(150, 180, 255, .26); --off: #3B4759; --onacc: #0F1521; --ink: #EEF2FA; --ink2: #D3DBEA; --dim: #A4AFC5; --faint: #93A0B9; --accw: rgba(var(--acc-rgb), .22); --acci: #7FB4FF; --glass: rgba(16, 22, 34, .66); --glass2: rgba(19, 25, 38, .95); --glassbd: rgba(150, 180, 255, .14); --glasshi: rgba(255, 255, 255, .07); --posw: rgba(24, 168, 93, .15); --posi: #71E5A9; --warnw: rgba(217, 119, 6, .16); --warni: #FFCE86; --negw: rgba(239, 64, 86, .16); --negi: #FF9AA8; --sh: 0 1px 2px rgba(0, 0, 0, .45); --sh2: 0 14px 36px rgba(0, 0, 0, .55); /* Older names that flip. */ --blue-50: #1B2437; --blue-100: #1F2939; --blue-200: #2A3548; --blue-300: #7FB4FF; --blue-400: #7FB4FF; --blue-600: #7FB4FF; --navy-bg: radial-gradient(circle at 18% 0%, rgba(23, 104, 242, 0.16), transparent 45%), linear-gradient(135deg, #141A28 0%, #080C13 100%); --navy-border: rgba(255, 255, 255, 0.12); --ring: 0 0 0 3px var(--accw); --ring-line: #7FB4FF; color-scheme: dark; } /* ------------------------------ Reset / base ------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* Class display rules (e.g. .btn's inline-flex) must never defeat the hidden attribute; same fix as the reports page and the admin console. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: var(--blue-600); text-decoration: none; } a:hover { text-decoration: underline; } html[data-theme="dark"] a { color: var(--blue-400); } h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; } p { margin: 0 0 1em; } ::selection { background: rgba(23, 104, 242, 0.2); } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } /* ...but on BUTTONS that ring never appeared. The rule above hands focus to a box-shadow, and every button variant re-declares box-shadow for its own resting elevation - .btn below, .btn.primary, .auth-tab.active, and .btn.mini which forces it to none - all later in the file at equal or higher specificity, so the resting shadow won every time. Keyboard focus was invisible on Get beta access, Sign in, Refresh, Sign out, Copy and every action button in the app. An outline cannot be clobbered that way (nothing else sets it), and it paints outside the border so focusing never nudges the layout. Inputs keep the box-shadow ring - theirs works. */ button:focus-visible, a.btn:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--ring-line); outline-offset: 2px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 22px; } .section { padding: 84px 0; } .section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .section-head h2 { font-size: clamp(28px, 4vw, 40px); } .section-head p { color: var(--muted); font-size: 17px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--blue-500) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--blue-500) 22%, transparent); color: var(--blue-600); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 18px; } html[data-theme="dark"] .eyebrow { color: var(--blue-300); } .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 0 4px rgba(53, 200, 120, 0.2); } /* ------------------------------ Buttons ----------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); text-decoration: none; } .btn:active { transform: translateY(0) scale(0.99); } .btn.primary { position: relative; overflow: hidden; border-color: transparent; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; box-shadow: 0 12px 28px rgba(23, 104, 242, 0.24); } .btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.28) 45%, transparent 70%); transform: translateX(-140%); pointer-events: none; } @keyframes sheen { to { transform: translateX(150%); } } .btn.primary:hover::after { animation: sheen 0.72s var(--ease); } .btn.big { padding: 16px 32px; font-size: 16px; border-radius: var(--r-lg); } .btn.ghost { background: transparent; box-shadow: none; } .btn.on-navy { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); color: #fff; } .btn.on-navy:hover { border-color: rgba(255, 255, 255, 0.5); } /* ------------------------------ Header ------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--surface-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease); } .site-header.scrolled { border-bottom-color: var(--border); box-shadow: 0 8px 24px rgba(9, 30, 66, .07); } html[data-theme="dark"] .site-header.scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); } .brand img { transition: transform var(--t-med) var(--ease); } .brand:hover img { transform: rotate(-6deg) scale(1.06); } .site-header .container { display: flex; align-items: center; gap: 26px; min-height: 68px; /* Round FZ: the header alone gets more room than the page body. Brand 143 + nav 825 + theme 32 + button 115 + three 26px gaps is 1193, against a 1140px body container - so something had to give and it was the brand. Widening the header, and nothing else, is what stops the squeeze without touching the reading width of any page. */ max-width: 1280px; } /* The nav has more links than room, and the container's max-width means a 1920px screen is no roomier than a 1324px one - so this is not a narrow-band problem and a narrow-band fix would have left the widest screens clipping five pixels off the last link. A flex row that cannot fit clips silently, which is the worst way for a nav to fail. It gives up padding first, which nobody notices, before it gives up links, which everybody does. */ @media (min-width: 1101px) { .site-header .site-nav { gap: 1px; padding-left: 26px; } .site-header .site-nav a { padding-left: 8px; padding-right: 8px; } } .brand { display: flex; align-items: center; /* Round FZ (owner: on the inner pages "the Logo moves very closer to Features option thats not looks good and not its orginal position"). Both halves of that were true and both came from the same cause. The header is a flex row and the nav on an inner page was 759px wide against the homepage's 687px, so there was no free space left: `margin-left: auto` on the nav resolved to 0 and the nav landed 26px from the brand instead of 56px, AND the brand itself was shrunk 37px, squeezing the gap between the mark and the word. flex: none stops the squeeze; the nav gets the minimum separation below and gives up its own width first. */ flex: none; gap: 11px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); text-decoration: none; } .brand:hover { text-decoration: none; } /* Round FY (owner: the logo "is small and feels not on its exact place"). Two things were true at once. It was small: 34px against a 19px wordmark and a 38px-tall search pill, so it read as the lightest thing in a row of heavier ones. And it sat a shade high: the tile is square while the wordmark's optical centre is below its box's middle, so baseline-ish alignment put the mark above the text it belongs to. Bigger, and nudged down by the hair that difference is worth. */ .brand img { width: 38px; height: 38px; border-radius: 10px; display: block; position: relative; top: 1px; } /* On dark the logo tile's own dark-blue corner sat against a near-black header and the mark lost its edge (owner feedback). A hairline ring and a little lift give it back, without touching the artwork itself. */ html[data-theme="dark"] .brand img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.5); } /* Outline buttons: --text-2 reads as pale blue on dark, which the owner flagged as hard to read. Plain white text on the same surface. Variants that set their own colour on a coloured background are excluded: this selector outranks them, so without the :not() it would quietly take over .primary and .on-navy too. */ html[data-theme="dark"] .btn:not(.primary):not(.on-navy) { color: var(--text); } .brand .falcon { color: var(--blue-600); } html[data-theme="dark"] .brand .falcon { color: var(--blue-400); } .site-nav { display: flex; align-items: center; gap: 4px; /* auto keeps the nav right when there is room; the padding is the floor for when there is not, so the first link can never sit on the wordmark. */ margin-left: auto; padding-left: 30px; min-width: 0; } .site-nav a { padding: 8px 13px; border-radius: var(--r-pill); color: var(--muted); font-size: 14.5px; font-weight: 600; /* Round CX (owner's screenshot): a crowded desktop nav wrapped "How it works" and the CTA onto two lines. Labels never break mid-phrase. */ white-space: nowrap; } .site-nav a:hover { color: var(--text); background: var(--surface-3); text-decoration: none; } .header-cta { margin-left: 6px; } .header-cta .btn { padding: 9px 18px; font-size: 14px; white-space: nowrap; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); } .theme-toggle .moon, html[data-theme="dark"] .theme-toggle .sun { display: block; } .theme-toggle .sun, html[data-theme="dark"] .theme-toggle .moon { display: none; } .nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); cursor: pointer; align-items: center; justify-content: center; } /* ------------------------------ Hero -------------------------------------- */ .hero { position: relative; overflow: hidden; padding: 92px 0 60px; } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; } .hero::before { width: 560px; height: 560px; top: -220px; right: -140px; background: rgba(23, 104, 242, 0.16); } .hero::after { width: 420px; height: 420px; bottom: -220px; left: -120px; background: rgba(53, 200, 120, 0.12); } html[data-theme="dark"] .hero::before { background: rgba(23, 104, 242, 0.22); } html[data-theme="dark"] .hero::after { background: rgba(53, 200, 120, 0.1); } @keyframes sf-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } html.js .hero-copy > * { animation: sf-rise .7s var(--ease) both; } html.js .hero-copy > .eyebrow { animation-delay: .02s; } html.js .hero-copy > h1 { animation-delay: .08s; } html.js .hero-copy > .lede { animation-delay: .16s; } html.js .hero-copy > .hero-ctas { animation-delay: .24s; } html.js .hero-copy > .hero-note { animation-delay: .32s; } html.js .hero-visual { animation: sf-rise .8s var(--ease) .2s both; } @media (prefers-reduced-motion: reduce) { html.js .hero-copy > *, html.js .hero-visual { animation: none; } } .hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; } .hero h1 { font-size: clamp(32px, 4.2vw, 48px); letter-spacing: -0.03em; text-wrap: balance; } .hero h1 .accent { background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="dark"] .hero h1 .accent { background: linear-gradient(135deg, var(--blue-400), var(--blue-300)); -webkit-background-clip: text; background-clip: text; } .hero .lede { font-size: 18px; color: var(--muted); max-width: 54ch; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 14px; } .hero-note { display: flex; flex-wrap: wrap; gap: 16px; color: var(--subtle); font-size: 13.5px; font-weight: 600; } .hero-note span { display: inline-flex; align-items: center; gap: 6px; } .hero-note svg { width: 15px; height: 15px; color: var(--green-500); flex: none; } /* ------------------------- Product mockup (CSS-drawn) --------------------- */ .mockup { position: relative; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; font-size: 12px; } .mockup-titlebar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .mockup-titlebar .dots { display: flex; gap: 6px; } .mockup-titlebar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); opacity: 0.6; } .mockup-titlebar .addr { flex: 1; margin-left: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--subtle); font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mockup-body { padding: 14px; display: grid; gap: 12px; } .mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .mock-kpi { padding: 10px 11px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); } .mock-kpi .label { display: block; color: var(--subtle); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .mock-kpi .value { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; } .mock-kpi.profit { border-color: color-mix(in srgb, var(--green-500) 35%, transparent); background: var(--success-bg); } .mock-kpi.profit .value { color: var(--success-ink); } .mock-card { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; } .mock-card-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 11.5px; } .mock-live { display: inline-flex; align-items: center; gap: 5px; color: var(--success-ink); background: var(--success-bg); border-radius: var(--r-pill); padding: 3px 9px; font-size: 10px; font-weight: 700; } .mock-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(53, 200, 120, 0.35); } 50% { box-shadow: 0 0 0 5px rgba(53, 200, 120, 0); } } .mock-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); } .mock-row:last-child { border-bottom: 0; } .mock-row .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 12px; } .mock-row .ic.drop { background: var(--warning-bg); color: var(--warning-ink); } .mock-row .ic.oos { background: var(--danger-bg); color: var(--danger-ink); } .mock-row .ic.ok { background: var(--success-bg); color: var(--success-ink); } .mock-row .txt { flex: 1; min-width: 0; } .mock-row .txt strong { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-row .txt span { color: var(--muted); font-size: 10.5px; } .mock-actions { display: flex; gap: 6px; flex: none; } .mock-btn { padding: 4px 10px; border-radius: var(--r-pill); font-size: 10px; font-weight: 800; border: 1px solid var(--border); color: var(--muted); background: var(--surface); } .mock-btn.apply { border-color: transparent; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; } .mockup-caption { margin-top: 12px; text-align: center; color: var(--subtle); font-size: 12px; } /* ------------------------------ Stats strip ------------------------------- */ .stats { border-block: 1px solid var(--border); background: var(--surface-2); } .stats .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-block: 26px; } .stat { text-align: center; } .stat strong { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; } .stat span { color: var(--muted); font-size: 13px; } /* ------------------------------ Feature grid ------------------------------ */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); } .feature .icon { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); } .feature:hover .icon { transform: translateY(-2px) scale(1.06) rotate(-4deg); } .feature .icon { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 16px; color: #fff; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); box-shadow: 0 8px 20px rgba(23, 104, 242, 0.22); } .feature .icon.green { background: linear-gradient(135deg, var(--green-400), var(--green-600)); box-shadow: 0 8px 20px rgba(24, 168, 93, 0.2); } .feature .icon.violet { background: linear-gradient(135deg, var(--violet-500), var(--blue-700)); box-shadow: 0 8px 20px rgba(124, 79, 224, 0.2); } .feature .icon svg { width: 22px; height: 22px; } /* Round FZ (owner: "In Free Tools use the extension actual Logo its our"). The Order Address Copier has 1,000+ users and its own artwork; a generic copy glyph made it look like a placeholder for a tool we had not built. Its mark is ALREADY a tile with its own gradient and corner radius, so the wrapper's gradient and shadow would put a frame around a frame - hence the background and shadow come off the span and go onto the image itself. */ .feature .icon.icon-art { background: none; box-shadow: none; width: 46px; height: 46px; border-radius: 13px; } .feature .icon.icon-art img { width: 46px; height: 46px; display: block; border-radius: 13px; box-shadow: 0 8px 20px rgba(23, 104, 242, .24); } .feature h3 { font-size: 18px; margin-bottom: 8px; } .feature p { color: var(--muted); font-size: 14.5px; margin: 0; } /* ------------------------------ How it works ------------------------------ */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; } .step { position: relative; padding: 26px 22px 22px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); } .step .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; font-weight: 800; font-size: 15px; margin-bottom: 14px; box-shadow: 0 8px 18px rgba(23, 104, 242, 0.24); } .step { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); } .step:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); } .step h3 { font-size: 16.5px; } .step p { color: var(--muted); font-size: 14px; margin: 0; } /* ------------------------------ Honesty (navy) ---------------------------- */ .honesty { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--navy-bg); color: var(--navy-text); padding: 56px; box-shadow: var(--shadow-lg); } .honesty h2 { font-size: clamp(26px, 3.4vw, 36px); } .honesty .sub { color: var(--navy-sub); font-size: 16.5px; max-width: 62ch; } .honesty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 34px; } .truth { display: flex; gap: 13px; padding: 17px 18px; border-radius: var(--r-md); border: 1px solid var(--navy-border); background: rgba(255, 255, 255, 0.05); } .truth svg { width: 20px; height: 20px; flex: none; color: var(--green-300); margin-top: 2px; } .truth strong { display: block; font-size: 14.5px; margin-bottom: 2px; } .truth span { color: var(--navy-sub); font-size: 13.5px; line-height: 1.5; } .honesty .roadmap { margin: 30px 0 0; padding: 15px 18px; border-radius: var(--r-md); border: 1px dashed rgba(255, 255, 255, 0.28); color: var(--navy-sub); font-size: 14px; } .honesty .roadmap strong { color: var(--navy-text); } /* ------------------------------ Why it exists ------------------------------ Problem cards. The number is decorative (aria-hidden in the markup) and sits behind the heading, so it can be large without ever being read out. */ .problems { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .problem { position: relative; overflow: hidden; /* Column + margin-top:auto on .fix lines the green answers up along the bottom of a row, so two cards of unequal text length still read as a pair rather than as one card with a hole under it. */ display: flex; flex-direction: column; padding: 26px 28px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); } .problem:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); } /* The first card spans the row so the list reads 1 / 2-3 / 4-5 rather than as five equal tiles: the opening problem is the one every seller feels first. */ .problems .problem:first-child { grid-column: 1 / -1; } .problem .pain-no { position: absolute; top: 6px; right: 16px; font-size: 62px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: color-mix(in srgb, var(--blue-500) 12%, transparent); pointer-events: none; } .problem h3 { font-size: 19px; margin-bottom: 10px; padding-right: 56px; } .problem p { color: var(--muted); font-size: 14.5px; margin: 0 0 12px; } .problem .fix { margin: auto 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--success-bg); border: 1px solid color-mix(in srgb, var(--success) 26%, transparent); color: var(--text-2); font-size: 14px; } .problem .fix b { color: var(--success-ink); } /* ------------------------------ Founder note ------------------------------ */ .founder { display: flex; gap: 20px; margin-top: 26px; padding: 30px 32px; border-radius: var(--r-lg); border: 1px solid var(--border); border-left: 4px solid var(--blue-500); background: var(--surface-2); } .founder-mark { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .founder-body { max-width: 74ch; } .founder-body p { color: var(--text-2); font-size: 15.5px; margin: 0 0 12px; } .founder-sign { margin: 18px 0 0 !important; font-weight: 800; font-size: 16px !important; color: var(--text) !important; } .founder-sign span { display: block; font-weight: 600; font-size: 13.5px; color: var(--muted); margin-top: 2px; } /* ------------------------------ Build status ------------------------------ Three honest columns. The middle one is deliberately the loudest: it is the only place on the page that is allowed to build anticipation, and it earns that by naming what is being written rather than promising "big things". */ #roadmap .section-head .eyebrow { margin-bottom: 14px; } .build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; } .build { padding: 24px 26px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); } .build-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em; margin-bottom: 16px; } .build-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .build.live .build-tag { background: var(--success-bg); color: var(--success-ink); } .build.now .build-tag { background: color-mix(in srgb, var(--blue-500) 14%, var(--surface)); color: var(--blue-600); } .build.next .build-tag { background: var(--surface-3); color: var(--muted); } html[data-theme="dark"] .build.now .build-tag { color: var(--blue-300); } .build.now { border-color: color-mix(in srgb, var(--blue-500) 42%, transparent); box-shadow: 0 14px 40px rgba(23, 104, 242, 0.16); } .build ul { list-style: none; display: grid; gap: 11px; } .build li { position: relative; padding-left: 24px; color: var(--muted); font-size: 14.5px; line-height: 1.55; } .build li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--border-strong); } .build.live li::before { border-color: var(--success); background: var(--success); } .build.now li::before { border-color: var(--blue-500); } .build li b { color: var(--text); font-weight: 700; } .build-note { margin: 26px auto 0; max-width: 78ch; text-align: center; padding: 16px 20px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); color: var(--muted); font-size: 14.5px; } .build-note strong { color: var(--text); } /* ------------------------------ Pricing ----------------------------------- */ .pricing-wrap { display: grid; grid-template-columns: minmax(0, 420px); justify-content: center; } .price-card { position: relative; padding: 38px 34px 34px; border-radius: var(--r-xl); border: 1px solid color-mix(in srgb, var(--blue-500) 30%, var(--border)); background: var(--surface); box-shadow: var(--shadow-md); text-align: center; } .price-card .plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--green-400), var(--green-600)); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 8px 18px rgba(24, 168, 93, 0.3); white-space: nowrap; } .price-card .amount { font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 12px 0 2px; } .price-card .amount small { font-size: 18px; font-weight: 700; color: var(--muted); letter-spacing: 0; } .price-card .period { color: var(--muted); font-size: 14px; margin-bottom: 22px; } .price-list { list-style: none; margin: 0 0 26px; padding: 0; text-align: left; } .price-list li { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; font-size: 14.5px; color: var(--text-2); } .price-list svg { width: 18px; height: 18px; flex: none; color: var(--green-500); margin-top: 2px; } .pricing-honesty { max-width: 640px; margin: 30px auto 0; text-align: center; color: var(--muted); font-size: 14px; } /* ------------------------------ FAQ --------------------------------------- */ .faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; } .faq-list details { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 700; font-size: 15.5px; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary:hover { color: var(--blue-600); } html[data-theme="dark"] .faq-list summary:hover { color: var(--blue-300); } .faq-list details { transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); } .faq-list details[open] { border-color: color-mix(in srgb, var(--blue-500) 26%, var(--border)); box-shadow: var(--shadow-sm); } .faq-list .faq-body { animation: sf-rise .3s var(--ease); } .faq-list summary .chev { flex: none; width: 20px; height: 20px; color: var(--subtle); transition: transform var(--t-med) var(--ease); } .faq-list details[open] summary .chev { transform: rotate(180deg); } .faq-list .faq-body { padding: 0 22px 18px; color: var(--muted); font-size: 14.5px; } .faq-list .faq-body p:last-child { margin-bottom: 0; } /* ------------------------------ CTA band ---------------------------------- */ .cta-band { border-radius: var(--r-xl); background: var(--navy-bg); color: var(--navy-text); padding: 56px; text-align: center; box-shadow: var(--shadow-lg); } .cta-band h2 { font-size: clamp(26px, 3.4vw, 36px); } .cta-band p { color: var(--navy-sub); max-width: 56ch; margin: 0 auto 28px; } .cta-band .btn.primary { box-shadow: 0 16px 40px rgba(9, 30, 66, 0.4); } /* Waitlist form (CTA band): posts to the backend, mailto fallback below. */ .waitlist-form { display: flex; gap: 12px; justify-content: center; max-width: 520px; margin: 0 auto; } .waitlist-form input[type="email"] { flex: 1; min-width: 0; padding: 14px 18px; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-size: 15px; } .waitlist-form input[type="email"]::placeholder { color: rgba(222, 236, 255, 0.55); } .waitlist-form input[type="email"]:focus-visible { outline: none; border-color: var(--blue-300); box-shadow: 0 0 0 4px rgba(132, 188, 255, 0.25); } .waitlist-note { margin: 14px auto 0; font-size: 13px; color: var(--navy-sub); max-width: 56ch; } .waitlist-note a { color: var(--blue-300); } .waitlist-note.ok { color: var(--green-300); font-weight: 600; } .waitlist-note.err { color: #ffd089; } /* Audit #31, closed in Round DM: the app pages' minimal footer carried the same inline style pasted into four HTML files - the definition lives here once now, so the next page cannot drift. */ .footer-legal.bare { border-top: none; margin-top: 0; padding-top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 560px) { .waitlist-form { flex-direction: column; } } /* ------------------------------ Footer ------------------------------------ */ .site-footer { border-top: 1px solid var(--border); background: var(--surface-2); padding: 44px 0 36px; font-size: 14px; color: var(--muted); } .footer-grid { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; justify-content: space-between; } .footer-brand { max-width: 340px; } .footer-brand .brand { margin-bottom: 10px; } .footer-links { display: flex; gap: 56px; flex-wrap: wrap; } /* Round CX (owner's screenshot): the markup's column headings are h3, but only h4 was ever styled - so "Product"/"Support" rendered as bare page headings and threw the whole footer's formatting off. Both are styled so neither markup choice can regress this again. */ .footer-links h3, .footer-links h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--subtle); margin: 0 0 12px; } .footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .footer-links a { color: var(--muted); } .footer-links a:hover { color: var(--text); } .footer-legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; color: var(--subtle); } /* ------------------------------ Subpages ---------------------------------- */ .page-hero { padding: 72px 0 8px; text-align: center; } .page-hero h1 { font-size: clamp(30px, 4vw, 42px); } .page-hero p { color: var(--muted); max-width: 62ch; margin: 0 auto; font-size: 17px; } .prose { max-width: 780px; margin: 0 auto; } .prose h2 { font-size: 24px; margin-top: 44px; } .prose h3 { font-size: 18px; margin-top: 28px; } .prose p, .prose li { color: var(--text-2); font-size: 15.5px; } .prose ul { padding-left: 22px; } .prose .updated { color: var(--subtle); font-size: 13.5px; } .prose .callout { padding: 18px 22px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--blue-500) 26%, var(--border)); background: color-mix(in srgb, var(--blue-500) 6%, var(--surface)); margin: 22px 0; } .prose .callout p:last-child { margin-bottom: 0; } .table-scroll { overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch; } .table-scroll table { margin: 0; min-width: 560px; } .prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 18px 0; } .prose th, .prose td { text-align: left; padding: 10px 12px; border: 1px solid var(--border); vertical-align: top; } .prose th { background: var(--surface-2); font-size: 13px; } .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; } /* Install page steps */ .install-steps { max-width: 780px; margin: 0 auto; display: grid; gap: 16px; counter-reset: install; } .install-step { display: flex; gap: 20px; padding: 24px 26px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); } .install-step .num { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 8px 18px rgba(23, 104, 242, 0.24); } .install-step h3 { font-size: 17px; margin-bottom: 6px; } .install-step p, .install-step li { color: var(--muted); font-size: 14.5px; } .install-step p:last-child { margin-bottom: 0; } .install-step ol, .install-step ul { margin: 8px 0 0; padding-left: 20px; } .install-step li { margin-bottom: 5px; } .checklist { max-width: 780px; margin: 40px auto 0; padding: 26px 30px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--green-500) 34%, var(--border)); background: var(--success-bg); } .checklist h3 { color: var(--success-ink); font-size: 17px; } .checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text-2); } .checklist svg { width: 18px; height: 18px; flex: none; color: var(--green-500); margin-top: 2px; } /* ------------------------------ Auth / account ---------------------------- */ .auth-section { padding-top: 56px; } .auth-shell { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); max-width: 880px; margin: 0 auto; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; } .auth-side { background: var(--navy-bg); color: var(--navy-text); padding: 42px 36px; display: flex; flex-direction: column; gap: 14px; } .auth-side img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 12px 30px rgba(4, 22, 56, 0.45); } .auth-side h2 { font-size: 24px; margin: 8px 0 0; } .auth-side p { color: var(--navy-sub); font-size: 14.5px; margin: 0; } .auth-side ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; } .auth-side li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--navy-sub); } .auth-side li svg { width: 17px; height: 17px; flex: none; color: var(--green-300); margin-top: 1px; } .auth-main { padding: 42px 40px; } .auth-main h1 { font-size: 26px; margin-bottom: 4px; } .auth-main .note { color: var(--muted); font-size: 14px; } .auth-tabs { display: flex; margin: 20px 0; padding: 4px; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--border); } .auth-tab { flex: 1; padding: 9px 12px; border-radius: var(--r-pill); border: none; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: color var(--t-fast) var(--ease); } .auth-tab.active { background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; box-shadow: 0 6px 16px rgba(23, 104, 242, 0.28); } .auth-main form { display: grid; gap: 7px; } .auth-main label { font-size: 13px; font-weight: 700; color: var(--text-2); margin-top: 8px; } .auth-main input { padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; } .auth-main input:focus-visible { outline: none; border-color: var(--blue-500); box-shadow: var(--ring); } .auth-main form .btn { margin-top: 16px; width: 100%; } .auth-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); } .auth-note.err { color: var(--danger-ink); font-weight: 600; } /* The code box sits beside its own Send button: one row, and the button never shrinks below its label (a "Send me a code" button that wraps to two lines looks broken, and this is the first thing a new user ever presses). THE BUTTON'S WIDTH MUST BE SAID WITH THE FULL SELECTOR: the generic `.auth-main form .btn { width: 100% }` above outranks a plain `.auth-coderow .btn`, and with it the Send button swallowed the whole row - the code box the user actually types into was a sliver a single digit wide (owner's screenshot, 2026-08-15). The field is the point of the row; the button is its helper. */ .auth-coderow { display: flex; gap: 8px; align-items: stretch; } .auth-coderow input { flex: 1; min-width: 0; letter-spacing: 4px; font-weight: 700; text-align: center; } .auth-main form .auth-coderow .btn { flex: none; white-space: nowrap; width: auto; margin-top: 0; } .auth-alt { margin: 10px 0 0; } /* A button that reads as a link. It must BE a button - "Forgotten your password?" performs an action on this page, it does not go anywhere, and a bare would lie about that to a screen reader. */ .linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--blue-600); cursor: pointer; text-decoration: underline; } .linkbtn:hover { color: var(--blue-700); } html[data-theme="dark"] .linkbtn { color: var(--blue-400); } .account-rows { margin: 22px 0; display: grid; } .account-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; } .account-row span:first-child { color: var(--muted); } .acc-chip { display: inline-block; padding: 3px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; background: var(--success-bg); color: var(--success-ink); border: 1px solid color-mix(in srgb, var(--green-500) 30%, transparent); } .acc-chip.plan { background: color-mix(in srgb, var(--blue-500) 10%, var(--surface)); color: var(--blue-600); border-color: color-mix(in srgb, var(--blue-500) 25%, transparent); } html[data-theme="dark"] .acc-chip.plan { color: var(--blue-300); } .acc-chip.bad { background: var(--danger-bg); color: var(--danger-ink); border-color: color-mix(in srgb, var(--red-500) 30%, transparent); } .auth-coming { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); background: var(--surface-2); color: var(--muted); font-size: 13.5px; margin-bottom: 20px; } .auth-coming svg { width: 18px; height: 18px; flex: none; color: var(--blue-500); margin-top: 1px; } @media (max-width: 760px) { .auth-shell { grid-template-columns: 1fr; } .auth-side { padding: 30px 26px; } .auth-side ul { display: none; } .auth-main { padding: 30px 24px; } } /* --------------------------- Anchored sections ----------------------------- The homepage is one long scrolling page; nav links are plain anchors with CSS smooth scrolling. scroll-margin keeps a jumped-to section's heading clear of the sticky header. */ .section[id] { scroll-margin-top: 76px; } .site-nav a[aria-current="page"] { color: var(--text); background: var(--surface-3); } /* Drawer-only beta button: the header CTA disappears under 720px, so the mobile menu carries its own. Hidden everywhere else. */ .nav-cta { display: none; } /* ------------------------------ Social sign-in ---------------------------- */ .sso-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font-size: 12.5px; font-weight: 600; } .sso-divider::before, .sso-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .sso-buttons { display: grid; gap: 9px; } .btn.sso { width: 100%; justify-content: center; gap: 10px; font-size: 14.5px; padding: 11px 18px; } .btn.sso svg { width: 18px; height: 18px; flex: none; } /* ------------------------------ Account extras ---------------------------- */ .acc-key { display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .btn.mini { padding: 5px 12px; font-size: 12.5px; border-radius: 9px; box-shadow: none; } .acc-pass { margin: 0 0 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); } .acc-pass summary { cursor: pointer; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--text-2); list-style: none; display: flex; align-items: center; justify-content: space-between; } .acc-pass summary::-webkit-details-marker { display: none; } .acc-pass summary::after { content: "+"; font-size: 16px; color: var(--muted); } .acc-pass[open] summary::after { content: "\2212"; } .acc-pass form { display: grid; gap: 7px; padding: 0 16px 16px; } .acc-pass label { font-size: 13px; font-weight: 700; color: var(--text-2); margin-top: 6px; } .acc-pass input { padding: 11px 13px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; } .acc-pass input:focus-visible { outline: none; border-color: var(--blue-500); box-shadow: var(--ring); } .acc-pass form .btn { margin-top: 10px; } .acc-pass .auth-note { padding: 0 16px 14px; margin: 0; } .auth-note.ok { color: var(--success-ink); font-weight: 600; } /* ------------------------------ Support page ------------------------------ */ .support-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 22px; align-items: start; max-width: 980px; margin: 0 auto; } .support-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 26px 28px; } .support-card h2 { font-size: 19px; margin-bottom: 4px; } .support-sub { color: var(--muted); font-size: 14px; } .support-card form { display: grid; gap: 7px; margin-top: 14px; } .support-card label { font-size: 13px; font-weight: 700; color: var(--text-2); margin-top: 6px; } .support-card input, .support-card textarea, .support-card select { padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; resize: vertical; /* A file input's INTRINSIC width ("Choose files No file chosen") is wider than a phone column and does not shrink on its own - it overflowed feedback.html at 390px before this cap. */ width: 100%; min-width: 0; max-width: 100%; } .support-card input:focus-visible, .support-card textarea:focus-visible, .support-card select:focus-visible { outline: none; border-color: var(--blue-500); box-shadow: var(--ring); } .support-card .sup-urgent { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--danger-ink); font-size: 13px; font-weight: 700; } .support-card .sup-urgent input { width: 15px; height: 15px; accent-color: var(--red-500); } .sup-chat-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 10px; } .support-card form .btn { margin-top: 12px; } .support-links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; } .support-links li { color: var(--muted); font-size: 14px; } .support-email { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-weight: 700; font-size: 14.5px; } @media (max-width: 860px) { .support-grid { grid-template-columns: 1fr; } } /* ------------------------------ Reveal on scroll -------------------------- Hidden state only applies once the inline head script stamps html.js, so content is never invisible for a no-JS visitor. */ html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); } html.js .reveal.in { opacity: 1; transform: none; } /* ------------------------------ 404 --------------------------------------- */ .error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 80px 22px; } .error-page .code { font-size: 96px; font-weight: 800; letter-spacing: -0.05em; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } html[data-theme="dark"] .error-page .code { background: linear-gradient(135deg, var(--blue-400), var(--blue-300)); -webkit-background-clip: text; background-clip: text; } /* ------------------------------ Responsive -------------------------------- */ /* Round DH (panel finding): THE NAV COLLAPSES AT 1100px, NOT 980px. Every nav link is nowrap, so the row cannot shrink below its own min-content: brand + eight links + toggle + CTA needs roughly 1030px of container, and the sign-in page carries a ninth link. Between 981px and ~1100px - iPad landscape, a real buyer's device - the header overflowed the viewport and the page gained a sideways scrollbar with the money CTA floating past the edge. The hamburger now takes over before that band. */ @media (max-width: 1100px) { /* The full inline nav needs ~1000px; below that the hamburger takes over. */ .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 18px 18px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); } .site-nav.open { display: flex; } .site-nav a { padding: 12px 14px; font-size: 16px; } .nav-toggle { display: inline-flex; } .theme-toggle { margin-left: auto; } } @media (max-width: 980px) { .hero .container { grid-template-columns: 1fr; gap: 44px; } .hero { padding-top: 64px; } .features-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .honesty { padding: 40px 30px; } .honesty-grid { grid-template-columns: 1fr; } .stats .container { grid-template-columns: repeat(2, 1fr); } .build-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .section { padding: 60px 0; } .header-cta { display: none; } .site-nav .nav-cta { display: block; font-weight: 700; color: var(--blue-600); } html[data-theme="dark"] .site-nav .nav-cta { color: var(--blue-300); } .features-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .problems { grid-template-columns: 1fr; } .problem { padding: 22px 20px; } .problem h3 { padding-right: 44px; font-size: 17.5px; } .problem .pain-no { font-size: 48px; } .founder { flex-direction: column; gap: 14px; padding: 24px 20px; } .mock-kpis { grid-template-columns: repeat(2, 1fr); } .cta-band { padding: 40px 24px; } .install-step { flex-direction: column; gap: 12px; } .footer-links { gap: 32px; } } /* Round DH (panel finding): iOS Safari ZOOMS the page whenever a focused input's font is under 16px, and it does not zoom back out. Every field on the money path was below that line - the sign-up email, the six-digit code, the new password, the support form - so a phone buyer typed their details while panning a zoomed page sideways. 16px on small screens only; the desktop sizes are untouched. */ @media (max-width: 900px) { .auth-main input, .support-card input, .support-card textarea, .support-card select { font-size: 16px; } } /* ------------------------------ Motion guard ------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.js .reveal { opacity: 1; transform: none; } } /* ---------------- Round M: signed-in app mode, pre-paint ----------------- */ /* The app pages' inline head script stamps html.sf-app BEFORE first paint when a session token exists, so switching between tool pages never flashes the marketing nav or the "Your account" button (owner feedback). The JS setAppNav() still runs afterwards; this only closes the paint gap. */ html.sf-app .site-header .site-nav, html.sf-app .site-header .nav-toggle, html.sf-app .site-header .header-cta { display: none !important; } html.sf-app .site-header .theme-toggle { margin-left: auto; } /* Round N: reports keeps a top nav (no sidebar there yet), so its app mode hides the MARKETING links only until reports.js swaps in the app links (data-app is stamped by setAppNav) - no marketing-tabs flash. */ html.sf-appnav .site-header .site-nav { visibility: hidden; } html.sf-appnav .site-header .site-nav[data-app] { visibility: visible; } html.sf-appnav .site-header .header-cta { display: none !important; } /* Reports has no sidebar, so its links live in the header - the hamburger must stay reachable on narrow screens or the page becomes a dead end. */ html.sf-appnav .site-header .nav-toggle { display: none; } @media (max-width: 980px) { html.sf-appnav .site-header .nav-toggle { display: inline-flex; } } /* Round O: support joins the app shell for signed-in users; visitors get the plain page (support stays public on purpose). The sidebar markup ships in the page but only renders in app mode. */ .support-shell { display: block; } /* Round DH (the owner's find, from the pricing page's Contact support): the shell carries BOTH classes, and dashboard.css loads after this file, so its .dash-shell grid (232px sidebar track + main) was beating this rule for signed-OUT visitors - with the sidebar hidden, the whole page fell into the 232px track, one word per line. Scoped to the signed-out state so the signed-in grid rules below keep winning exactly as before. */ html:not(.sf-app) .dash-shell.support-shell { display: block; } .support-shell .sf-appside { display: none; } html.sf-app .support-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 26px; align-items: start; } html.sf-app .support-shell > * { min-width: 0; } html.sf-app .support-shell .sf-appside { display: grid; position: sticky; top: 86px; gap: 12px; } .support-hero { margin-bottom: 18px; } .support-hero h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 4px; } .support-hero p { color: var(--muted); margin: 0; } @media (max-width: 980px) { html.sf-app .support-shell { grid-template-columns: 1fr; gap: 12px; } /* The track cap has to live HERE, not in dashboard.css: this selector is more specific, so it wins wherever the two disagree. Without it the sidebar's single grid column sizes to the pill row's max-content and the whole support page scrolled sideways on a phone (615px on a 390px screen) while every other page was fine. */ html.sf-app .support-shell .sf-appside { position: static; gap: 8px; min-width: 0; grid-template-columns: minmax(0, 1fr); } } /* Round R: the ONE logo lives in the top header on every page (the Round O sidebar logo is gone, so the old desktop rule hiding the header brand on app pages would leave no logo at all). */ /* ============ App shell alignment (owner feedback, 2026-08-10) ============= The marketing header/footer are capped at --container (1140px) while the app content runs to min(1680px, 96vw). On a wide screen that left the logo indented from the sidebar's edge and the theme/account controls floating well inside the right edge. In APP MODE the chrome now shares the app's width, so the logo sits directly above the sidebar and the actions sit at the far right - leaving room for more header tools later. */ html.sf-app .site-header .container, html.sf-app .site-footer .container { max-width: none; padding: 0 clamp(20px, 2.2vw, 40px); } /* One centred footer line instead of two blocks pushed to opposite edges. */ .footer-legal { justify-content: center; text-align: center; gap: 6px 10px; } .footer-legal > span + span::before { content: "ยท"; margin-right: 10px; color: var(--subtle); } /* ---------------- Support page: match the app (owner feedback) ------------- Signed-in, support is a tool page: the sidebar is the same width as every other page's, the content starts at the left edge instead of floating in a centred 980px block, and the heading matches the dashboard's. Signed-out visitors keep the centred marketing treatment. */ html.sf-app .support-shell { grid-template-columns: 232px minmax(0, 1fr); gap: 30px; } html.sf-app .support-grid { max-width: none; margin: 0; gap: 18px; } html.sf-app .support-hero { margin-bottom: 22px; } html.sf-app .support-hero h1 { font-size: clamp(25px, 3.4vw, 32px); letter-spacing: -0.03em; } html.sf-app .support-hero p { font-size: 14px; } /* The desktop rule above sits AFTER the max-width:980px block, and at equal specificity the later rule wins - so the mobile collapse defined earlier was silently dead and the support page laid out two columns on a phone (615px wide on a 390px screen). Re-stated here, after it, where it can actually take effect. A responsive override must come after the rule it overrides. */ @media (max-width: 980px) { html.sf-app .support-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; } } html.sf-app .support-card { border-radius: var(--r-lg); padding: 22px 24px; transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); } html.sf-app .support-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); } @media (max-width: 1180px) { html.sf-app .support-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- Round CN: the legal pages, and the four facts only the owner can supply. A placeholder has to look like a placeholder. Styled as an obvious gap rather than as text, so nobody can read past one and take the sentence around it as a statement - a terms page that quietly states the wrong governing law is worse than no terms page, because it is a claim rather than a gap. The harness ties these to the draft banner: while one remains, the banner stating the document is not in force must remain too. --------------------------------------------------------------------------- */ .fill { display: inline; padding: 1px 7px; border-radius: 5px; background: var(--warning-bg); color: var(--warning-ink); border: 1px dashed var(--warning); font-weight: 700; font-size: .95em; } .callout.draft-note { border-left: 3px solid var(--warning); } /* Round CN: the status page. Two states and a third that says it could not tell - because "we could not measure this from here" is a real answer and pretending otherwise is the thing this page exists not to do. */ .status-list { display: grid; gap: 10px; margin: 0 0 34px; } .status-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); } .status-row strong { display: block; font-size: 15px; color: var(--text); margin-bottom: 2px; } .status-row span:not(.status-dot) { color: var(--muted); font-size: 14px; } .status-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; margin-top: 6px; background: var(--border-strong); } .status-dot.ok { background: var(--success); } .status-dot.bad { background: var(--danger); } /* Round CX: the pricing grid holds several provider-priced cards. Round CY (owner's screenshot): balanced columns instead of a lonely wrapped card, equal heights, and every button on the same baseline. */ .pricing-wrap.multi { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; max-width: 1080px; margin: 0 auto; align-items: stretch; } .pricing-wrap.multi .price-card { display: flex; flex-direction: column; } .pricing-wrap.multi .price-card .period { margin-bottom: 22px; } .pricing-wrap.multi .price-card > a.btn { margin-top: auto; } .pricing-wrap.multi .price-card .amount { font-size: 44px; } .pricing-wrap.multi .price-card .amount.talk { font-size: 32px; line-height: 1.5; padding: 6px 0; } /* Round CX: social links in the footer - rendered by site.js only for accounts whose URL is configured, so no icon is ever a dead end. */ .sf-social { display: flex; gap: 10px; margin-top: 16px; } .sf-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } /* Each network wears its own colour (owner's feedback: a grey WhatsApp glyph read as broken beside the real brand marks). X follows the theme because its mark is black-on-light, white-on-dark. */ .sf-social a.whatsapp { color: #25d366; } .sf-social a.youtube { color: #ff0000; } .sf-social a.facebook { color: #1877f2; } .sf-social a.instagram { color: #e4405f; } .sf-social a.x { color: var(--text); } .sf-social a:hover { border-color: currentColor; transform: translateY(-1px); } .sf-social svg { width: 18px; height: 18px; } /* The changelog (changelog.html). Dated blocks rather than a wall of prose: the date is the thing people scan for, so it carries a rule of its own and the entries under it hang off it. Everything else is .prose, so the page inherits the same reading width and colours as the policy pages. */ .log-entry { margin-top: 34px; } .log-entry:first-of-type { margin-top: 8px; } .log-date { font-size: 19px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text); } .log-list { margin: 0; padding-left: 20px; } .log-list li { margin-bottom: 10px; } .log-list li:last-child { margin-bottom: 0; } .log-list strong { color: var(--text); } /* --------------------------------------------------------------------------- Round EV (design night): the dark-anchor sweep. The global dark rule `html[data-theme="dark"] a` outweighs any class-only anchor colour, so every anchor below wore link-blue in the dark theme only - the top nav on every marketing page, the wordmark, the footer columns. Each gets its light-mode colour back at matching specificity. The harness now audits every page for this class of bug, so the next anchor-styled element cannot regress quietly. */ html[data-theme="dark"] .site-nav a { color: var(--muted); } html[data-theme="dark"] .site-nav a:hover { color: var(--text); } html[data-theme="dark"] .site-nav a[aria-current="page"] { color: var(--text); } html[data-theme="dark"] a.brand { color: var(--text); } html[data-theme="dark"] .footer-links a { color: var(--muted); } html[data-theme="dark"] .footer-links a:hover { color: var(--text); } /* The navy CTA panel is navy in BOTH themes, so its link keeps the lighter blue that reads on navy - the global dark rule was quietly darkening it. */ html[data-theme="dark"] .waitlist-note a { color: var(--blue-300); }