/* ── site.css — the ONE stylesheet for ifloor.app (mockup 24, Q-687) ───────── Replaces styles.css + book.css. The site adopts the app's token architecture so site and product read as one family: warm paper ground with dark twins, semantic triads, serif display for what is READ and Inter for what is OPERATED (DESIGN-STANDARD, THE HOUSE STYLE). Every colour is a token; a literal beside a token is the whole dark-mode bug class the app paid for. Theme has THREE states (law 7 + the app's own mechanism): · no attribute on → follow the device (prefers-color-scheme) · → the visitor chose; theme.js sets it BEFORE paint from localStorage so nothing flashes. Dark tokens are defined twice on purpose — once under the media query (guarded so an explicit light choice beats a dark OS) and once under the attribute — and NEVER anywhere else. A colour whose only definition sits inside one of those blocks is a colour that fails in the other state. `--brand` is iFloor's OWN teal/copper identity. `--tenant` is the colour a store's app wears inside the product frames — a variable on purpose, so the hero swatch can repaint every frame and SHOW white-label instead of saying it. ─────────────────────────────────────────────────────────────────────────── */ :root { --paper: #FAF8F4; --panel: #FFFFFF; --sunk: #F1EEE7; --ink: #141B17; --ink-2: #39463F; --mute: #5F6B65; --faint: #9AA49D; --rule: #E6E2D9; --rule-2: #D5D0C4; --brand: #0d5c63; --brand-readable: #0d5c63; --brand-ink: #FFFFFF; --accent: #c9743a; --accent-readable: #985221; --tenant: #007db7; --tenant-readable: #005f8e; --ok: #166534; --ok-bg: rgba(34, 197, 94, .12); --warn: #c2410c; --warn-bg: rgba(249, 115, 22, .12); --danger: #991b1b; --danger-bg: rgba(239, 68, 68, .12); --info: #1d4ed8; --info-bg: rgba(59, 130, 246, .12); --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; --r: 16px; --r-sm: 9px; --shadow: 0 10px 30px rgba(20, 27, 23, .08); --shadow-frame: 0 22px 60px rgba(16, 24, 40, .18); --wrap: 1140px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #15181B; --panel: #1E2226; --sunk: #262B30; --ink: #EEF1EC; --ink-2: #C6CDC5; --mute: #8E9890; --faint: #6F7A73; --rule: #2C3238; --rule-2: #3A424A; --brand: #2fbfb5; --brand-readable: #6fd6cf; --brand-ink: #08201e; --accent: #e8945c; --accent-readable: #f0b184; --tenant-readable: #6FC0EA; --ok: #7FD9A2; --ok-bg: rgba(34, 197, 94, .16); --warn: #F2A65B; --warn-bg: rgba(249, 115, 22, .18); --danger: #F0A79E; --danger-bg: rgba(239, 68, 68, .18); --info: #9BD3F0; --info-bg: rgba(59, 130, 246, .18); --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-frame: 0 22px 60px rgba(0, 0, 0, .45); color-scheme: dark; } } :root[data-theme="dark"] { --paper: #15181B; --panel: #1E2226; --sunk: #262B30; --ink: #EEF1EC; --ink-2: #C6CDC5; --mute: #8E9890; --faint: #6F7A73; --rule: #2C3238; --rule-2: #3A424A; --brand: #2fbfb5; --brand-readable: #6fd6cf; --brand-ink: #08201e; --accent: #e8945c; --accent-readable: #f0b184; --tenant-readable: #6FC0EA; --ok: #7FD9A2; --ok-bg: rgba(34, 197, 94, .16); --warn: #F2A65B; --warn-bg: rgba(249, 115, 22, .18); --danger: #F0A79E; --danger-bg: rgba(239, 68, 68, .18); --info: #9BD3F0; --info-bg: rgba(59, 130, 246, .18); --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-frame: 0 22px 60px rgba(0, 0, 0, .45); color-scheme: dark; } /* ── base ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* 100% not 100vw — 100vw ignores the scrollbar and this site scrolled sideways once (Q-551). */ body { margin: 0; width: 100%; background: var(--paper); color: var(--ink); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; } button { font: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; } .narrow { max-width: 760px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ── type ─────────────────────────────────────────────────────────────────── */ .eyebrow { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-readable); font-weight: 700; margin: 0; } .h1 { font: 500 clamp(40px, 5.2vw, 64px)/1.04 var(--display); letter-spacing: -.015em; margin: 12px 0 16px; text-wrap: balance; } .h2 { font: 500 clamp(28px, 3.4vw, 40px)/1.12 var(--display); letter-spacing: -.012em; margin: 8px 0 10px; text-wrap: balance; } .h3 { font: 600 20px/1.25 var(--display); margin: 0 0 6px; } .lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 640px; margin: 0; } .lede.sm { font-size: 16px; } .body { color: var(--ink-2); font-size: 15px; line-height: 1.65; } .body p { margin: 0 0 12px; } .body strong { color: var(--ink); } .money { font-family: var(--display); font-variant-numeric: tabular-nums; } .mt { margin-top: 34px; } .mt-s { margin-top: 18px; } .faint, .muted { color: var(--mute); } .small { font-size: 13px; } /* ── header — one shared chrome; the theme toggle lives here like the app's pill ── */ .hd { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .hd .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; } .brand-mark { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; } .brand-mark svg { width: 30px; height: 30px; display: block; } .brand-mark.small, .brand-mark.small svg { width: 24px; height: 24px; } /* the floor lays itself — one bar at a time, once, on load */ .bm-b { opacity: var(--o); animation: lay .5s calc(var(--i) * 45ms) both cubic-bezier(.22, 1, .36, 1); } @keyframes lay { from { transform: translateX(-4px); opacity: 0; } to { transform: none; opacity: var(--o); } } .hd nav { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; color: var(--ink-2); } .hd nav > a:hover { color: var(--ink); } .hd .sep { width: 1px; height: 20px; background: var(--rule); } .nav-drop { position: relative; } .nav-drop summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; } .nav-drop summary::-webkit-details-marker { display: none; } .nav-drop summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 3px; } .nav-menu { position: absolute; top: calc(100% + 12px); left: -12px; min-width: 300px; background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-frame); padding: 8px; display: grid; gap: 2px; } .nav-menu a { display: block; padding: 10px 12px; border-radius: 10px; } .nav-menu a:hover { background: var(--sunk); } .nav-menu a strong { display: block; color: var(--ink); font-weight: 650; } .nav-menu a span { display: block; color: var(--mute); font-size: 13px; } .tg { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--panel); display: grid; place-items: center; color: var(--mute); cursor: pointer; padding: 0; } .tg:hover { color: var(--ink); } .tg svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .tg .moon { display: none; } :root[data-theme="dark"] .tg .sun { display: none; } :root[data-theme="dark"] .tg .moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tg .sun { display: none; } :root:not([data-theme="light"]) .tg .moon { display: block; } } .hide-sm { } @media (max-width: 900px) { .hd nav { gap: 12px; } .hd nav .hide-sm, .hd nav .sep { display: none; } .hd .wrap { height: 58px; } } /* ── buttons — one height, one radius, full state set (laws 12/13) ─────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 11px; font-weight: 600; font-size: 14.5px; border: 1px solid var(--rule-2); background: var(--panel); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; white-space: nowrap; } .btn:hover { background: var(--sunk); } .btn:active { transform: translateY(1px); } .btn.p { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .btn.p:hover { filter: brightness(1.06); background: var(--brand); } .btn.sm, .btn-small { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: var(--r-sm); } .btn.lg { height: 48px; padding: 0 22px; font-size: 15.5px; } .btn-ghost { background: transparent; } .cta-actions, .hero-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 22px 0 22px; } /* ── sections & cards — one card grammar (house style §3) ─────────────────── */ .sec, .section { padding: 80px 0; } .sec.tight, .section-tight { padding: 52px 0; } .sec.alt, .band { background: var(--panel); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .section-head { max-width: 760px; margin-bottom: 26px; } .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; } .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); } .card.flat, .cards .card { box-shadow: none; } .card h3, .card h4 { font: 600 16px/1.3 var(--display); margin: 0 0 6px; } .card p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; } .card .lab, .lab { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); font-weight: 700; } .kpi .n { font: 500 34px/1.05 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .kpi .l { font-size: 12.5px; color: var(--mute); margin-top: 4px; line-height: 1.4; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; } .pill.live, .pill-ok { background: var(--ok-bg); color: var(--ok); } .pill.soon, .pill-wait { background: var(--sunk); color: var(--ink-2); } .pill.new, .pill-info { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent-readable); } .pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .feat { border-left: 2px solid var(--rule-2); padding: 2px 0 2px 16px; margin-bottom: 18px; } .feat h4 { margin: 0 0 3px; font-size: 15.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .feat p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; } .callout, .band-note { background: color-mix(in srgb, var(--brand) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--rule)); border-radius: var(--r); padding: 20px 22px; } .callout .h3, .band-note .h3 { color: var(--brand-readable); } .callout p, .band-note p { margin: 0; font-size: 14px; color: var(--ink-2); } .quote { font: italic 500 22px/1.35 var(--display); color: var(--ink); padding-left: 18px; border-left: 3px solid var(--accent); } .quote cite { display: block; font: 500 12.5px/1.4 var(--sans); font-style: normal; color: var(--mute); margin-top: 8px; } .tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; } .tbl th, .tbl td { padding: 11px 14px; border-bottom: 1px solid var(--rule); text-align: left; } .tbl th { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); background: var(--sunk); } .tbl td.n, .tbl th.n { text-align: right; font-family: var(--display); font-variant-numeric: tabular-nums; } .tbl tr.tot td { font-weight: 700; border-top: 2px solid var(--rule-2); } .tbl tr:last-child td { border-bottom: 0; } .scroll-x { overflow-x: auto; } .tabs { display: inline-flex; background: var(--sunk); border-radius: 10px; padding: 3px; gap: 2px; max-width: 100%; overflow: auto; } .tabs span, .tabs a { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--mute); white-space: nowrap; } .tabs .on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); } .ticks { list-style: none; padding: 0; margin: 12px 0 0; } .ticks li { padding: 6px 0 6px 24px; position: relative; color: var(--ink-2); font-size: 14.5px; } .ticks li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok); } .strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .strip > div { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 16px 18px; } .strip strong { display: block; font: 600 16px var(--display); margin-bottom: 4px; } .strip span { color: var(--ink-2); font-size: 14px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; } .split-col h3 { font: 600 20px/1.25 var(--display); margin: 0 0 8px; } .split-col p { color: var(--ink-2); } .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; padding: 40px 0; } .feature.reverse .feature-art { order: 2; } .feature-copy h3, .feature-copy h2 { font: 500 clamp(24px, 3vw, 32px)/1.15 var(--display); margin: 8px 0 10px; } .feature-copy p { color: var(--ink-2); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--rule-2); } .mock { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-frame); overflow: hidden; font-size: 13px; } .mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--sunk); border-bottom: 1px solid var(--rule); color: var(--mute); font-size: 12px; } .mock-body { padding: 14px 16px; } .mock-title { font: 600 15px var(--display); margin: 0 0 8px; } .mock-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); } .mock-row:last-child { border-bottom: 0; } .mock-total { display: flex; justify-content: space-between; padding-top: 10px; font-weight: 700; font-family: var(--display); } .reveal { } .updated { color: var(--mute); font-size: 13px; } .legal { max-width: 760px; } .legal h2 { font: 600 22px/1.3 var(--display); margin: 34px 0 10px; } .legal h3 { font: 600 17px/1.3 var(--display); margin: 22px 0 8px; } .legal p, .legal li { color: var(--ink-2); font-size: 15px; line-height: 1.7; } .legal ul { padding-left: 20px; } /* ── the hero ────────────────────────────────────────────────────────────── */ .hero { padding: 64px 0 40px; position: relative; overflow: hidden; } .hero.short { padding-bottom: 20px; } .hero .wrap { position: relative; } .hero-glow { position: absolute; inset: -20% -10% auto; height: 70%; pointer-events: none; background: radial-gradient(60% 60% at 20% 20%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), radial-gradient(40% 50% at 85% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); } .hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 8px; } .hero-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 6px; } .hero-stats .n { font: 500 26px/1 var(--display); font-variant-numeric: tabular-nums; } .hero-stats .l { font-size: 12.5px; color: var(--mute); margin-top: 4px; max-width: 132px; line-height: 1.35; } .stage { margin-top: 34px; } .page-hero { padding: 56px 0 24px; } /* ── home: one app not five · what's new · chapters ─────────────────────── */ .replaces { display: grid; grid-template-columns: repeat(5, 1fr) auto 1fr; gap: 10px; align-items: center; } .replaces .old { background: var(--sunk); border: 1px dashed var(--rule-2); border-radius: 12px; padding: 12px 14px; color: var(--mute); font-size: 13px; text-decoration: line-through; text-decoration-color: var(--danger); } .replaces .arrow { font: 500 26px var(--display); color: var(--faint); padding: 0 6px; } .replaces .one { background: var(--panel); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--rule)); border-radius: 12px; padding: 12px 14px; font-weight: 600; box-shadow: var(--shadow); } .replaces .one small { display: block; font-weight: 500; color: var(--mute); font-size: 12px; } .newgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .newgrid .card { padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; } .newgrid .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--sunk); display: grid; place-items: center; color: var(--ink-2); } .newgrid .ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .newgrid h4 { font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .newgrid .when { font-size: 11.5px; color: var(--mute); margin-top: 6px; } .chapter { display: grid; grid-template-columns: 5fr 6fr; gap: 40px; align-items: center; padding: 56px 0; border-top: 1px solid var(--rule); } .chapter.flip { grid-template-columns: 6fr 5fr; } .chapter.first { border-top: 0; padding-top: 0; } .chapter .num { font: 500 13px var(--display); color: var(--faint); letter-spacing: .06em; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; } .chapter .frame { min-width: 0; } .chapter.solo { display: block; } .trio3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .getstarted { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; } /* ── pricing ─────────────────────────────────────────────────────────────── */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; } .plan { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column; } .plan.hot, .plan-featured { border-color: color-mix(in srgb, var(--brand) 55%, var(--rule)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent), var(--shadow); } .plan .flag, .plan-flag { position: absolute; top: -11px; left: 22px; background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; } .plan h3, .plan h4 { font: 600 22px/1.2 var(--display); margin: 0; } .plan .who { font-size: 13px; color: var(--mute); margin: 4px 0 14px; } .plan-price { margin: 0; font: 500 34px/1 var(--display); font-variant-numeric: tabular-nums; } .plan-price span, .plan-setup { font: 500 13px var(--sans); color: var(--mute); margin-left: 6px; } .plan-tba { font: italic 500 14px var(--sans); color: var(--mute); } .plan-blurb { font-size: 13.5px; color: var(--ink-2); flex: 1; margin: 12px 0 16px; } .plan ul { list-style: none; padding: 0; margin: 16px 0 18px; font-size: 13.5px; color: var(--ink-2); flex: 1; } .plan li { padding: 6px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 8px; align-items: flex-start; } .plan li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ok-bg); flex: 0 0 auto; margin-top: 3px; box-shadow: inset 0 0 0 1px var(--ok); } .plan li.no { color: var(--faint); } .plan li.no::before { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); } .notice { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule)); border-radius: var(--r); padding: 14px 18px; color: var(--ink-2); font-size: 14px; } .cmp { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; } .cmp th, .cmp td { padding: 11px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } .cmp thead th { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); background: var(--sunk); } .cmp th[scope="row"] { font-weight: 600; } .cmp th[scope="row"] span { display: block; font-weight: 400; color: var(--mute); font-size: 12.5px; } .cmp .cmp-group th { background: var(--sunk); font: 600 13px var(--display); } .cmp td { text-align: center; font-variant-numeric: tabular-nums; } .cmp-yes { width: 16px; height: 16px; stroke: var(--ok); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; } .cmp-no { color: var(--mute); } .cmp-limit { font-family: var(--display); font-weight: 600; } .cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; } .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .faq details { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 18px; } .faq summary { cursor: pointer; font: 600 15px/1.35 var(--display); list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq details p { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); } .addon { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; } /* ── forms (law 13: focus darkens the field's own line, never a second box) ── */ .form-wrap { max-width: 820px; } .lead-form { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); display: grid; gap: 14px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: block; } .field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; } .field > span i { color: var(--danger); font-style: normal; margin-left: 2px; } .field input, .field textarea, .field select { width: 100%; height: 44px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--panel); color: var(--ink); padding: 0 12px; font: 15px var(--sans); } .field textarea { height: 110px; padding: 10px 12px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .hp { position: absolute; left: -9999px; } .form-note { font-size: 12.5px; color: var(--mute); margin: 8px 0 0; } .lead-form .btn { width: 100%; } /* ── changelog page (rendered by scripts/build-changelog.mjs) ─────────────── */ .log-day { padding-block: 26px 6px; } .log-date { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); margin: 0 0 14px; } .log-entry { border: 1px solid var(--rule); background: var(--panel); border-radius: var(--r); padding: 20px 22px; margin-bottom: 12px; } .log-entry h3 { font: 600 20px/1.3 var(--display); margin: 10px 0 8px; } .log-entry p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0 0 8px; } .log-entry p:last-child { margin-bottom: 0; } .log-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .log-version { font: 600 13px var(--display); font-variant-numeric: tabular-nums; color: var(--ink); padding: 2px 8px; border: 1px solid var(--rule); border-radius: 6px; } .log-version:hover { border-color: var(--brand); color: var(--brand-readable); } .log-aud { font-size: 12px; color: var(--ink-2); padding: 2px 8px; border-radius: 999px; background: var(--sunk); } .log-newest { margin-top: 10px; } .log-newest a { color: var(--brand-readable); } /* ── footer ─────────────────────────────────────────────────────────────── */ .ft { border-top: 1px solid var(--rule); padding: 44px 0 26px; background: var(--panel); } .ft .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 28px; } .ft h5 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; } .ft nav a { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 7px; } .ft nav a:hover { color: var(--ink); } .ft .blurb { font-size: 13.5px; color: var(--mute); margin: 10px 0 0; max-width: 300px; } .ft .cta { background: var(--sunk); border-radius: 12px; padding: 16px 18px; } .ft .cta b { display: block; font: 600 16px var(--display); margin-bottom: 4px; } .ft .cta p { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); } .ft .fine { font-size: 12.5px; color: var(--mute); margin-top: 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 14px; } /* ══ PRODUCT FRAMES — the shipped grammar (rail + pill + one job one row, the portal, the quotes list, the labour deck, comms, the installer phone). Drawn from mockups 16/18/19/20/21/22 and the live tokens; never a screenshot. ══ */ .ic { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -3px; } .ic.sm { width: 14px; height: 14px; } .app { display: grid; grid-template-columns: 200px 1fr; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-frame); font-size: 12.5px; line-height: 1.4; text-align: left; } .app.compact { grid-template-columns: 52px 1fr; } .rail { background: var(--panel); border-right: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 420px; } .compact .rail { min-height: 0; } .rail-brand { display: flex; align-items: center; gap: 8px; padding: 14px 12px 12px; border-bottom: 1px solid var(--rule); } .rail-mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(150deg, var(--tenant), color-mix(in srgb, var(--tenant) 70%, #000)); flex: 0 0 auto; } .rail-name { font-weight: 700; font-size: 12.5px; line-height: 1.1; white-space: nowrap; } .rail-branch { font-size: 10px; color: var(--mute); } .rail-nav { flex: 1; padding: 8px 8px 0; display: flex; flex-direction: column; gap: 1px; } .rsec { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 8px 8px 3px; } .ritem { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: var(--mute); font-size: 12px; font-weight: 500; } .ritem .c { margin-left: auto; font-size: 10px; font-weight: 800; background: var(--sunk); color: var(--ink-2); border-radius: 999px; padding: 0 6px; font-variant-numeric: tabular-nums; } .ritem.on { background: color-mix(in srgb, var(--tenant) 16%, var(--panel)); color: var(--tenant-readable); font-weight: 600; } .rail-foot { border-top: 1px solid var(--rule); padding: 9px 12px; display: flex; align-items: center; gap: 8px; } .rf-av { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--tenant) 16%, var(--panel)); color: var(--tenant-readable); display: grid; place-items: center; font-size: 9.5px; font-weight: 700; } .rf-n { font-size: 11.5px; font-weight: 600; line-height: 1.1; } .rf-r { font-size: 9.5px; color: var(--mute); } .rf-x { margin-left: auto; width: 24px; height: 24px; border: 1px solid var(--rule); border-radius: 7px; display: grid; place-items: center; color: var(--mute); } .compact .rail-brand { justify-content: center; padding: 12px 0; } .compact .rail-name, .compact .rail-branch, .compact .ritem span, .compact .rsec, .compact .rf-n, .compact .rf-r, .compact .rf-x { display: none; } .compact .ritem { justify-content: center; padding: 8px 0; } .compact .rail-foot { justify-content: center; } .main { padding: 12px 14px 16px; min-width: 0; position: relative; } .pillbar { display: flex; justify-content: flex-end; margin-bottom: 10px; } .pillc { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--panel); border: 1px solid var(--rule); border-radius: 999px; box-shadow: 0 6px 20px rgba(16, 24, 40, .10); } .psearch { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: 999px; color: var(--mute); font-size: 12px; min-width: 150px; } .pbtn { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--mute); position: relative; } .pbtn .b { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: #b42318; color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; } .pdiv { width: 1px; height: 18px; background: var(--rule); } .phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .ptitle { font: 600 19px/1.15 var(--display); } .psub { font-size: 11.5px; color: var(--mute); margin-top: 2px; } .abtn { height: 28px; padding: 0 11px; white-space: nowrap; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; } .abtn.go { background: var(--tenant); border-color: var(--tenant); color: #fff; } .panel { background: var(--panel); border: 1px solid var(--rule); border-radius: 13px; overflow: hidden; } .ph { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rule); } .ph .t { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); font-weight: 700; } .ph .n { font-size: 10.5px; font-weight: 800; background: var(--sunk); color: var(--ink-2); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; } .ph .go { margin-left: auto; font-size: 11.5px; color: var(--tenant-readable); font-weight: 600; } .ph .filters { margin-left: auto; display: flex; gap: 4px; } .chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; } .chip.on { background: color-mix(in srgb, var(--tenant) 16%, var(--panel)); color: var(--tenant-readable); } .job { display: grid; grid-template-columns: 3px 1fr; border-bottom: 1px solid var(--rule); } .job:last-child { border-bottom: 0; } .job .acc { background: var(--tenant); } .job.ok .acc { background: var(--ok); } .job.warn .acc { background: var(--warn); } .job.dan .acc { background: var(--danger); } .job.idle .acc { background: var(--rule-2); } .jb { padding: 7px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .jl1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .jnm { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jref { font-family: var(--display); font-size: 11px; color: var(--mute); white-space: nowrap; } .jamt { margin-left: auto; font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; white-space: nowrap; } .jl2 { display: flex; align-items: center; gap: 8px; min-width: 0; } .track { display: flex; align-items: center; flex: 0 0 auto; } .track i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-2); display: block; } .track i.done { background: var(--ok); } .track i.now { background: var(--tenant); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant) 22%, transparent); } .track i.late { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); } .track s { width: 9px; height: 1.5px; background: var(--rule-2); display: block; } .track s.done { background: var(--ok); } .jnext { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .jnext b { font-weight: 650; } .jmeta { font-size: 11px; color: var(--mute); white-space: nowrap; } .sb { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; white-space: nowrap; } .sb-a { background: var(--warn-bg); color: var(--warn); } .sb-r { background: var(--danger-bg); color: var(--danger); } .sb-g { background: var(--ok-bg); color: var(--ok); } .sb-b { background: var(--info-bg); color: var(--info); } .sb-q { background: var(--sunk); color: var(--ink-2); } .cols2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: start; } .stack { display: flex; flex-direction: column; gap: 10px; } .mini { background: var(--panel); border: 1px solid var(--rule); border-radius: 13px; padding: 10px 12px; } .mini .l { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); font-weight: 700; } .mini .v { font: 600 20px/1.15 var(--display); font-variant-numeric: tabular-nums; margin-top: 3px; } .mini .d { font-size: 11px; color: var(--mute); margin-top: 2px; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .arow { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--rule); font-size: 12px; } .arow:last-child { border-bottom: 0; } .arow .amt { margin-left: auto; font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .av { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; background: #2563eb; } .av.g { background: #15803d; } .av.o { background: #c2410c; } .av.p { background: #7c3aed; } .qt { width: 100%; border-collapse: collapse; font-size: 12px; } .qt th { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); background: var(--sunk); } .qt td { height: 44px; padding: 0 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: middle; } .qt tr:last-child td { border-bottom: 0; } .qt .ref { font-family: var(--display); color: var(--mute); } .qt .amt { text-align: right; font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 600; } .qt .age { font-variant-numeric: tabular-nums; font-weight: 700; } .qt .age.hot { color: var(--danger); } .qt .age.warm { color: var(--warn); } .qt .nm { font-weight: 650; } .qt .cell { display: flex; align-items: center; gap: 8px; } .portal { background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-frame); font-size: 13px; color: var(--ink); } .pt-top { padding: 16px 18px 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--tenant) 22%, var(--panel)), var(--panel)); border-bottom: 1px solid var(--rule); } .pt-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; } .pt-brand i { width: 22px; height: 22px; border-radius: 6px; background: var(--tenant); display: block; } .pt-brand small { margin-left: auto; font-weight: 500; color: var(--mute); font-size: 11px; } .pt-h { font: 500 21px/1.15 var(--display); margin: 12px 0 4px; } .pt-sub { font-size: 12px; color: var(--ink-2); } .journey { display: flex; align-items: center; margin: 14px 0 4px; } .journey b { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-2); display: block; flex: 0 0 auto; } .journey b.done { background: var(--ok); } .journey b.now { background: var(--tenant); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tenant) 22%, transparent); } .journey s { flex: 1; height: 2px; background: var(--rule-2); display: block; } .journey s.done { background: var(--ok); } .jl { display: flex; justify-content: space-between; font-size: 10px; color: var(--mute); margin-top: 6px; } .jl b { color: var(--ink); font-weight: 700; } .pt-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .pcard { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 12px 14px; } .pcard .lab { font-size: 10.5px; } .pcard .v { font: 500 18px/1.2 var(--display); margin-top: 3px; } .pcard .v em { font-style: normal; color: var(--mute); font-size: 13px; } .pcard .d { font-size: 11.5px; color: var(--mute); margin-top: 2px; } .pcard.todo { border-color: color-mix(in srgb, var(--tenant) 40%, var(--rule)); background: color-mix(in srgb, var(--tenant) 7%, var(--panel)); } .pcard .go { margin-top: 9px; height: 34px; border-radius: 9px; background: var(--tenant); color: #fff; font-weight: 600; font-size: 12.5px; display: grid; place-items: center; } .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .trio .pcard .v { font-size: 16px; } .prow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; } .prow:last-child { border-bottom: 0; } .deck { background: var(--panel); border: 1px solid var(--rule); border-radius: 13px; padding: 11px 13px; } .deck .top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .deck .who { font: 600 16px/1.2 var(--display); } .deck .ref { font-family: var(--display); color: var(--mute); font-size: 12px; } .deck .st { margin-left: auto; } .money3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .money3 div { background: var(--sunk); border-radius: 9px; padding: 7px 9px; } .money3 .l { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); font-weight: 700; } .money3 .v { font: 600 15px/1.2 var(--display); font-variant-numeric: tabular-nums; margin-top: 1px; } .money3 .v.due { color: var(--warn); } .bar-actions { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; } .bar-actions .more { margin-left: auto; color: var(--mute); font-weight: 800; letter-spacing: .1em; } .fifty { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .lff { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; } .lff .h { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-bottom: 1px solid var(--rule); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); font-weight: 700; } .lff .h b { font: 600 13px var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; } .lff .li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 11px; border-bottom: 1px solid var(--rule); font-size: 11.5px; } .lff .li:last-child { border-bottom: 0; } .lff .li span:last-child { font-family: var(--display); font-variant-numeric: tabular-nums; } .lff .li.act { background: var(--ok-bg); } .comms { display: grid; grid-template-columns: 200px 1fr; min-height: 300px; } .people { border-right: 1px solid var(--rule); background: var(--panel); } .person { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--rule); font-size: 11.5px; } .person.on { background: color-mix(in srgb, var(--tenant) 12%, var(--panel)); } .person .nm { font-weight: 650; } .person .lst { color: var(--mute); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; } .person .t { margin-left: auto; font-size: 10px; color: var(--mute); } .thread { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); } .thread .who { display: flex; align-items: center; gap: 8px; } .thread .who .nm { font: 600 15px var(--display); } .thread .chan { margin-left: auto; padding: 2px; } .ev { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; } .ev .k { color: var(--mute); margin-top: 3px; } .ev .k.sms { color: var(--info); } .ev .k.call { color: var(--ok); } .ev .k.mail { color: var(--warn); } .ev .bub { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 6px 9px; max-width: 80%; } .ev .bub.me { background: color-mix(in srgb, var(--tenant) 14%, var(--panel)); border-color: color-mix(in srgb, var(--tenant) 30%, var(--rule)); margin-left: auto; } .ev .meta { font-size: 10px; color: var(--mute); margin-top: 2px; } .compose { margin-top: auto; display: flex; gap: 6px; align-items: center; background: var(--panel); border: 1px solid var(--rule-2); border-radius: 10px; padding: 6px 8px; font-size: 11.5px; color: var(--mute); } .compose .send { margin-left: auto; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--tenant); color: #fff; font-weight: 700; font-size: 11px; display: grid; place-items: center; } .phone { width: 230px; max-width: 100%; border-radius: 26px; border: 6px solid #1a1d21; background: var(--paper); overflow: hidden; box-shadow: var(--shadow-frame); font-size: 11.5px; color: var(--ink); margin: 0 auto; } .phone .st { display: flex; justify-content: space-between; padding: 6px 14px 0; font-size: 10px; color: var(--mute); } .phone .in { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; } .phone .h { font: 600 15px/1.2 var(--display); } .phone .card { padding: 10px 11px; border-radius: 12px; box-shadow: none; } .phone .lab { font-size: 9.5px; } .phone .v { font: 500 14px/1.2 var(--display); margin-top: 2px; } .phone .d { font-size: 10.5px; color: var(--mute); } .phone .go { height: 38px; border-radius: 11px; background: var(--tenant); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 12.5px; } .phone .row { display: flex; justify-content: space-between; font-size: 11px; padding: 5px 0; border-bottom: 1px solid var(--rule); } .phone .row:last-child { border-bottom: 0; } .installers-frame { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; } /* ── responsive — measured breakpoints, nothing scrolls sideways ────────── */ @media (max-width: 1000px) { .g2, .g3, .g4, .chapter, .chapter.flip, .plans, .faq, .newgrid, .cols2, .split, .feature, .trio3, .field-row, .getstarted, .installers-frame { grid-template-columns: 1fr; } .feature.reverse .feature-art { order: 0; } .replaces { grid-template-columns: 1fr 1fr; } .replaces .arrow { display: none; } .ft .cols { grid-template-columns: 1fr 1fr; } .chapter { gap: 24px; padding: 40px 0; } .addon { grid-template-columns: 1fr; } .comms { grid-template-columns: 1fr; } .people { display: none; } } @media (max-width: 640px) { .wrap { padding: 0 16px; } .sec, .section { padding: 52px 0; } .hero { padding: 36px 0 24px; } .app { grid-template-columns: 1fr; } .app .rail { display: none; } .app.compact { grid-template-columns: 52px 1fr; } .app.compact .rail { display: flex; } .ft .cols { grid-template-columns: 1fr; } .replaces { grid-template-columns: 1fr; } .fifty, .two, .trio, .money3 { grid-template-columns: 1fr 1fr; } .stage .app .cols2 { grid-template-columns: 1fr; } .hero-stats { gap: 18px; } .ph .filters { display: none; } .lead-form { padding: 16px; } } /* ── compatibility for the carried-over pages (about, storefront, demo, thanks, legal) ── */ .h-xl { font: 500 clamp(36px, 4.6vw, 52px)/1.06 var(--display); letter-spacing: -.015em; margin: 12px 0 16px; text-wrap: balance; } .h-lg { font: 500 clamp(26px, 3.2vw, 36px)/1.14 var(--display); letter-spacing: -.012em; margin: 8px 0 10px; text-wrap: balance; } .page-hero .lede { margin-top: 4px; } .cta { padding: 60px 0 80px; } .cta .h-lg { margin-top: 0; } .band-deep { background: color-mix(in srgb, var(--brand) 12%, var(--panel)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .band-deep h2, .band-deep h3 { color: var(--ink); } .band-deep p, .band-deep li { color: var(--ink-2); } p.callout { font: 500 18px/1.55 var(--display); color: var(--ink); } .thanks-hero { padding: 80px 0 100px; }