/* Foxx Cyber portal — marketing + account stylesheet. Design language: a dark frame (header, hero, footer) around a light, hairline-bordered page. Surfaces are layered whites and one soft grey; every card is a 1px border on a large radius; the brand orange is spent on actions and on one glow behind the hero. The site's signature is the custody trace in the home hero: a live-looking Bedrock package view that walks one control from narrative to evidence to the signed affirmation. Type: Geist (variable, self-hosted) for everything, differentiated by weight and tracking; Geist Mono for control IDs, hashes, and small labels. The CSP is default-src 'self': no CDN fonts, no data: URIs, no style="" attributes in templates — icons are drawn with borders and inline SVG. Single hand-written stylesheet, no framework. Account/admin primitives live from the "Cards" comment down and are shared with the customer area. */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/geist-var.woff2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/geist-mono-var.woff2") format("woff2"); } :root { /* Brand — Fox Orange on a near-black navy frame. */ --orange: #f0762b; --orange-deep: #d95f16; --orange-soft: #fff1e8; --teal: #2fb5b8; /* one job: "evidence is current" */ /* Light page */ --bg: #ffffff; --surface: #f6f7f9; /* the one grey; alternating bands + pills */ --border: #e6e8ec; --border-strong: #cfd3da; --fg: #0c0e14; --fg-2: #3d4250; --muted: #6b7180; /* Dark frame */ --dark: #0b0d12; --dark-2: #12151c; /* raised surface on dark */ --dark-3: #191d26; --dark-border: rgb(255 255 255 / 0.09); --dark-border-strong: rgb(255 255 255 / 0.16); --dark-fg: #f3f4f6; --dark-fg-2: #b4b9c4; --dark-muted: #7d8494; /* Legacy aliases still used by the account/admin half. */ --navy: var(--fg); --navy-dark: var(--dark); --steel: var(--fg-2); --ink: var(--fg); --line: var(--border); --line-strong: var(--border-strong); --bg-alt: var(--surface); --rail: 0px; --radius: 0.625rem; --radius-lg: 1rem; --radius-xl: 1.375rem; --shadow-xs: 0 1px 2px rgb(12 14 20 / 0.05); --shadow-sm: 0 1px 2px rgb(12 14 20 / 0.05), 0 0.25rem 0.75rem -0.25rem rgb(12 14 20 / 0.08); --shadow-md: 0 1px 2px rgb(12 14 20 / 0.05), 0 0.75rem 1.75rem -0.75rem rgb(12 14 20 / 0.18); --shadow-lg: 0 1.5rem 3rem -1.2rem rgb(12 14 20 / 0.35); --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale */ --fs-2xs: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.9rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: clamp(1.9rem, 1.35rem + 1.8vw, 2.6rem); /* section h2 */ --fs-3xl: clamp(2.6rem, 1.8rem + 3.6vw, 4.75rem); /* hero h1 */ --fs-page: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem); /* page-head h1 */ --wrap: 1120px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --overlap: 7rem; /* how far the hero panel hangs into the page */ --ring: 0 0 0 3px rgb(240 118 43 / 0.22); --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: light; } /* Dark mode follows the OS setting. Only the light-page tokens move: the frame (header/hero/footer) is already dark and gets one notch deeper so it still reads as a frame. `data-theme="light"` on opts a page out (the admin shell keeps its own light stylesheet). Mode-specific screenshots swap via in the templates. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0f1218; --surface: #151922; --border: rgb(255 255 255 / 0.09); --border-strong: rgb(255 255 255 / 0.2); --fg: #f3f4f6; --fg-2: #c3c8d2; --muted: #8b92a3; --orange-deep: #ff9a58; /* link/check colour needs to lift on dark */ --orange-soft: rgb(240 118 43 / 0.16); --dark: #07080b; --dark-2: #0f1218; --dark-3: #171b24; --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 0.25rem 0.75rem -0.25rem rgb(0 0 0 / 0.5); --shadow-md: 0 1px 2px rgb(0 0 0 / 0.4), 0 0.75rem 1.75rem -0.75rem rgb(0 0 0 / 0.7); --shadow-lg: 0 1.5rem 3rem -1.2rem rgb(0 0 0 / 0.8); --ring: 0 0 0 3px rgb(240 118 43 / 0.35); } :root:not([data-theme="light"]) .btn-primary:hover { background: #ff8a3d; } :root:not([data-theme="light"]) .field-error { color: #ff8a80; } :root:not([data-theme="light"]) .chip-live { color: #7fe0a8; background: rgb(76 195 138 / 0.14); border-color: rgb(76 195 138 / 0.35); } :root:not([data-theme="light"]) .pill-open { color: #8cc4f5; background: rgb(31 111 178 / 0.2); } :root:not([data-theme="light"]) .pill-progress { color: #f2c46d; background: rgb(138 90 0 / 0.25); } :root:not([data-theme="light"]) .pill-resolved { color: #7fe0a8; background: rgb(16 107 67 / 0.25); } :root:not([data-theme="light"]) .plan-card.featured { background: #171b25; box-shadow: 0 0 0 1px rgb(240 118 43 / 0.7), 0 0 4rem -1rem rgb(240 118 43 / 0.35), 0 1.5rem 3.5rem -1.5rem rgb(0 0 0 / 0.9); } :root:not([data-theme="light"]) .panel { background: #12151d; } :root:not([data-theme="light"]) .hero-bg::after { opacity: 0.8; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: clip; /* full-bleed bands use 100vw; never let that scroll the page */ font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--fg); background: var(--bg); display: flex; min-height: 100vh; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); width: 100%; } main.wrap { flex: 1; padding-top: 2.5rem; padding-bottom: 4rem; } img, svg { max-width: 100%; } a { color: var(--fg); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s var(--ease); } a:hover { color: var(--orange-deep); } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; } /* Skip link — first tab stop on every page. */ .skip { position: absolute; left: 1rem; top: -3rem; z-index: 100; background: var(--fg); color: #fff; padding: 0.5rem 0.9rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; } .skip:focus { top: 1rem; } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Type — one family, carried by weight and tracking. */ h1, h2, .display { font-family: var(--font-display); color: var(--fg); text-wrap: balance; } h1 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; } h2 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; } h3 { font-weight: 600; letter-spacing: -0.015em; color: var(--fg); } .lede { font-size: var(--fs-lg); line-height: 1.6; color: var(--muted); max-width: 40rem; text-wrap: pretty; } .muted { color: var(--muted); font-size: 0.94em; } .mono { font-family: var(--font-mono); } /* Eyebrow pill — a small bordered label with an orange dot. Replaces the old margin kicker; the class name stays so every page keeps working. */ .kicker, .overline { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.1rem; padding: 0.3rem 0.8rem 0.3rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: var(--fs-xs); font-weight: 500; color: var(--fg-2); line-height: 1.4; } .kicker::before, .overline::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgb(240 118 43 / 0.18); } /* Header — part of the dark frame. Sticky, blurred, hairline underneath. */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--dark-border); background: rgb(11 13 18 / 0.78); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); } .nav-row { display: flex; align-items: center; justify-content: space-between; padding-top: 0.7rem; padding-bottom: 0.7rem; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; color: #fff; text-decoration: none; } .brand img { height: 28px; width: 28px; } .brand:hover { color: #fff; } .nav { display: flex; gap: 0.1rem; align-items: center; } .nav a { text-decoration: none; color: var(--dark-fg-2); font-weight: 500; font-size: 0.9rem; padding: 0.5rem 0.75rem; border-radius: 999px; transition: background-color 0.15s var(--ease), color 0.15s var(--ease); } .nav a:hover { color: #fff; background: rgb(255 255 255 / 0.07); } .nav a.active { color: #fff; } .nav .btn { margin-left: 0.6rem; } /* .nav a's link colors outrank .btn-primary (0,1,1 vs 0,1,0) — restate the button at equal-or-higher specificity. In the dark header the primary is white. */ .nav a.btn-primary { color: var(--dark); background: #fff; padding: 0.5rem 1rem; box-shadow: none; } .nav a.btn-primary:hover { color: var(--dark); background: #e9eaee; } /* Footer — the bottom of the frame. */ .site-footer { background: var(--dark); color: var(--dark-fg-2); padding: 4rem 0 2rem; font-size: 0.9rem; border-top: 1px solid var(--dark-border); } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; } .footer-brand { display: flex; align-items: center; gap: 0.55rem; color: #fff; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; text-decoration: none; } .footer-brand img { width: 26px; height: 26px; } .footer-brand:hover { color: #fff; } .footer-tag { margin: 0.9rem 0 0; max-width: 22rem; color: var(--dark-muted); text-wrap: pretty; font-size: var(--fs-sm); } .footer-col h3 { margin: 0 0 0.7rem; font-weight: 500; font-size: var(--fs-xs); color: var(--dark-muted); } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col a { color: var(--dark-fg-2); text-decoration: none; display: inline-block; padding: 0.25rem 0; font-size: var(--fs-sm); } .footer-col a:hover { color: #fff; } .footer-base { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--dark-border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--dark-muted); font-size: var(--fs-xs); } .footer-base p { margin: 0; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } } /* Account — calm dashboard rows, not a card mosaic. */ .app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; } .app-head h1 { margin: 0 0 0.25rem; } .app-head .muted { margin: 0; } .app-head form { margin-top: 0.5rem; } .panel-rows { border-top: 1px solid var(--border); } .panel-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.35rem 0.2rem; border-bottom: 1px solid var(--border); } .panel-row h2 { margin: 0 0 0.25rem; font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; } .panel-row p { margin: 0; font-size: var(--fs-sm); } .panel-row .btn, .panel-row .chip { flex: none; } .chip-soon { color: var(--muted); background: var(--surface); border-color: var(--border); } .panel-row.panel-col { display: block; } .panel-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 0.6rem; } .license-key { font-family: var(--font-mono); font-size: 0.95em; letter-spacing: 0.02em; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.15rem; border-radius: var(--radius); text-decoration: none; font-weight: 500; font-size: 0.92rem; line-height: 1.25; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--orange); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(12 14 20 / 0.12); } .btn-primary:hover { background: var(--orange-deep); color: #fff; } .btn-dark { background: var(--fg); color: var(--bg); } .btn-dark:hover { background: var(--fg-2); color: var(--bg); } .btn-outline { border-color: var(--border-strong); color: var(--fg); background: var(--bg); } .btn-outline:hover { border-color: var(--fg); color: var(--fg); background: var(--surface); } .btn-ghost { border-color: var(--dark-border-strong); color: var(--dark-fg); background: rgb(255 255 255 / 0.04); } .btn-ghost:hover { border-color: rgb(255 255 255 / 0.4); color: #fff; background: rgb(255 255 255 / 0.09); } .btn-lg { padding: 0.8rem 1.4rem; font-size: 1rem; border-radius: 0.75rem; } .btn-sm { padding: 0.4rem 0.8rem; font-size: var(--fs-xs); } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .btn .arrow { display: inline-block; transition: transform 0.18s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* --------------------------------------------------------------------------- Home hero — dark ground, faint grid, an orange glow low behind the panel. The custody trace panel hangs off the bottom edge into the light page. --------------------------------------------------------------------------- */ .hero { margin: -2.5rem calc(50% - 50vw) 0; padding: clamp(4rem, 8vw, 6.5rem) 0 0; position: relative; color: var(--dark-fg); } .hero-bg { position: absolute; inset: 0; overflow: hidden; background: var(--dark); z-index: 0; } .hero-bg::before { /* grid */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px); background-size: 3rem 3rem; -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(60% 70% at 50% 40%, #000 30%, transparent 100%); } .hero-bg::after { /* glow */ content: ""; position: absolute; left: 50%; bottom: -12rem; width: 70rem; height: 32rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(240 118 43 / 0.38), rgb(240 118 43 / 0.08) 55%, transparent 75%); filter: blur(10px); } .hero-inner { position: relative; z-index: 1; text-align: center; max-width: 54rem; margin: 0 auto; } .hero-news { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.75rem; padding: 0.3rem 0.9rem 0.3rem 0.35rem; border-radius: 999px; text-decoration: none; border: 1px solid var(--dark-border-strong); background: rgb(255 255 255 / 0.04); color: var(--dark-fg-2); font-size: var(--fs-xs); font-weight: 500; transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background-color 0.15s var(--ease); } .hero-news:hover { border-color: rgb(255 255 255 / 0.35); color: #fff; background: rgb(255 255 255 / 0.08); } .hero-news-tag { background: var(--orange); color: #fff; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; } .hero-news .arrow { transition: transform 0.18s var(--ease); } .hero-news:hover .arrow { transform: translateX(3px); } .hero h1 { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.045em; line-height: 1; margin: 0 auto 1.4rem; color: #fff; max-width: 20ch; } .hero h1 .accent { background: linear-gradient(92deg, #ffc394 0%, var(--orange) 55%, #ff9a55 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lede { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.55; color: var(--dark-fg-2); max-width: 38rem; margin: 0 auto 2rem; text-wrap: pretty; } .hero-ctas { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* The custody trace: a Bedrock package view. Window chrome, a requirement list, the trace for the selected requirement, and the SPRS score. */ .panel-wrap { position: relative; z-index: 2; margin: clamp(3rem, 6vw, 4.5rem) auto calc(-1 * var(--overlap)); max-width: 62rem; } .panel { border-radius: var(--radius-xl); background: var(--dark-2); color: var(--dark-fg-2); border: 1px solid var(--dark-border-strong); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), 0 2rem 5rem -1.5rem rgb(0 0 0 / 0.7), 0 0 8rem -2rem rgb(240 118 43 / 0.45); overflow: hidden; font-size: var(--fs-xs); text-align: left; } .panel-bar { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--dark-border); background: var(--dark); } .panel-dots { display: flex; gap: 0.35rem; } .panel-dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgb(255 255 255 / 0.14); } .panel-crumb { color: var(--dark-muted); font-family: var(--font-mono); font-size: 0.72rem; display: flex; gap: 0.5rem; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .panel-crumb b { color: var(--dark-fg); font-weight: 500; } .panel-pill { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid rgb(47 181 184 / 0.4); color: #7fdce0; background: rgb(47 181 184 / 0.1); } .panel-body { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 12rem; min-height: 19rem; } .panel-body > * { padding: 1rem 1.1rem; } .panel-body > * + * { border-left: 1px solid var(--dark-border); } .p-title { margin: 0 0 0.6rem; display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--dark-muted); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } .p-title span { font-family: var(--font-mono); color: var(--dark-fg-2); letter-spacing: 0; } .p-list ul { list-style: none; margin: 0; padding: 0; } .p-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 0.45rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--dark-fg-2); } .p-list li.is-active { background: rgb(255 255 255 / 0.07); color: #fff; box-shadow: inset 0 0 0 1px var(--dark-border-strong); } .p-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #4cc38a; flex: none; } .p-dot.open { background: var(--orange); } .p-head { margin: 0 0 1rem; color: var(--dark-fg); font-size: 0.86rem; line-height: 1.45; } .p-head .p-id { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; color: #fff; background: rgb(255 255 255 / 0.1); padding: 0.1rem 0.45rem; border-radius: 0.35rem; margin-right: 0.5rem; } .trace { list-style: none; margin: 0; padding: 0; position: relative; } .trace::before { content: ""; position: absolute; left: 0.55rem; top: 0.9rem; bottom: 0.9rem; width: 1px; background: var(--dark-border-strong); transform-origin: top; } .t-step { position: relative; padding: 0.55rem 0 0.55rem 1.9rem; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: baseline; } .t-step::before { content: ""; position: absolute; left: 0.2rem; top: 0.95rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--dark-2); border: 1px solid var(--dark-border-strong); } .t-step.is-done::before { background: #4cc38a; border-color: #4cc38a; box-shadow: 0 0 0 3px rgb(76 195 138 / 0.18); } .t-step.is-signed::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 3px rgb(240 118 43 / 0.22); } .t-k { color: var(--dark-muted); font-size: 0.72rem; font-weight: 500; } .t-v { color: var(--dark-fg); font-family: var(--font-mono); font-size: 0.76rem; overflow-wrap: anywhere; } .t-s { font-size: 0.66rem; font-family: var(--font-mono); padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--dark-border-strong); color: var(--dark-fg-2); white-space: nowrap; } .t-s.ok { color: #7fdce0; border-color: rgb(47 181 184 / 0.4); background: rgb(47 181 184 / 0.1); } .t-s.signed { color: #ffb27a; border-color: rgb(240 118 43 / 0.45); background: rgb(240 118 43 / 0.12); } .t-m { grid-column: 2 / -1; font-family: var(--font-mono); font-size: 0.68rem; color: var(--dark-muted); margin-top: 0.15rem; } .p-score { text-align: center; } @property --p { syntax: ""; inherits: false; initial-value: 0; } .ring-wrap { position: relative; width: 6.5rem; height: 6.5rem; margin: 0.4rem auto 0.5rem; } .ring { --p: 1; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--orange) calc(var(--p) * 360deg), rgb(255 255 255 / 0.08) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); } .ring-val { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 1.6rem; letter-spacing: -0.04em; line-height: 1; } .ring-val small { font-size: 0.72rem; color: var(--dark-muted); font-weight: 500; letter-spacing: 0; margin-left: 0.15rem; } .p-score .p-cap { margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--dark-muted); } .p-score .p-signed { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0; font-family: var(--font-mono); font-size: 0.7rem; color: #ffb27a; } .p-score dl { margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--dark-border); display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.75rem; text-align: left; font-size: 0.74rem; } .p-score dt { color: var(--dark-muted); margin: 0; } .p-score dd { margin: 0; color: var(--dark-fg); font-family: var(--font-mono); text-align: right; } /* Entrance — one orchestrated moment: copy rises, panel lifts, the trace draws top to bottom, then the score ring fills and the affirmation signs. */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes lift { from { opacity: 0; transform: translateY(28px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes drawY { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes fill { from { --p: 0; } to { --p: 1; } } .hero-inner > * { animation: rise 0.6s var(--ease-out) backwards; } .hero-inner > :nth-child(2) { animation-delay: 0.06s; } .hero-inner > :nth-child(3) { animation-delay: 0.12s; } .hero-inner > :nth-child(4) { animation-delay: 0.18s; } .panel-wrap { animation: lift 0.9s var(--ease-out) 0.25s backwards; } .trace::before { animation: drawY 0.9s var(--ease-out) 0.9s backwards; } .t-step { animation: rise 0.5s var(--ease-out) backwards; } .t-step:nth-child(1) { animation-delay: 0.9s; } .t-step:nth-child(2) { animation-delay: 1.15s; } .t-step:nth-child(3) { animation-delay: 1.4s; } .ring { animation: fill 1.1s var(--ease-out) 1.2s backwards; } .p-score .p-signed { animation: rise 0.5s var(--ease-out) 1.9s backwards; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-inner > *, .panel-wrap, .trace::before, .t-step, .ring, .p-score .p-signed { animation: none; } .btn, .btn .arrow, .tile { transition: none; } } @media (max-width: 900px) { .panel-body { grid-template-columns: 11rem minmax(0, 1fr); } .p-score { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--dark-border); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 0 1.5rem; align-items: center; text-align: left; } .p-score .ring-wrap { grid-column: 1; grid-row: 1 / 4; margin: 0; } .p-score .p-cap, .p-score .p-signed { grid-column: 2; margin: 0; } .p-score dl { grid-column: 2; margin-top: 0.6rem; padding-top: 0.6rem; } } @media (max-width: 640px) { .panel-body { grid-template-columns: 1fr; } .p-list { display: none; } .p-trace { border-left: 0; } .t-step { grid-template-columns: 4.5rem minmax(0, 1fr); } .t-s { grid-column: 2; justify-self: start; margin-top: 0.2rem; } :root { --overlap: 4rem; } } /* Under the hero: the trust row, sitting where the panel lands. */ .after-hero { padding-top: calc(var(--overlap) + 3rem); } .trust-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } .trust-row li { padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-sm); color: var(--fg-2); display: flex; align-items: center; gap: 0.6rem; } .trust-row b { font-family: var(--font-mono); font-weight: 500; color: var(--fg); font-size: 0.85rem; white-space: nowrap; } @media (max-width: 800px) { .trust-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .trust-row { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- Section grammar. A section stacks an eyebrow, a heading, and a lede, then its content. `.center` variants align the head for the home page. --------------------------------------------------------------------------- */ .section { padding-block: clamp(3.5rem, 7vw, 6rem); } .section-head { margin-bottom: 2.75rem; max-width: 42rem; } .section-head.center { text-align: center; margin-inline: auto; } .section-head.center .lede { margin-inline: auto; } .section-head h2 { font-size: var(--fs-2xl); margin: 0 0 1rem; } .section-head h1 { font-size: var(--fs-page); margin: 0 0 1rem; } .section-head .lede { margin: 0; } .section-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2.5rem; } .section-ctas.center { justify-content: center; } .page-head + .section { padding-top: 0.5rem; } /* Bands break out of main.wrap to run edge to edge. padding-block, never the `padding: x 0` shorthand — a band's inner element is `.wrap .section`, and the shorthand would zero .wrap's gutter. */ .band { margin-inline: calc(50% - 50vw); } .band-mist { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .band-cta { background: var(--dark); color: var(--dark-fg-2); } .band-dark { color: var(--dark-fg-2); background: var(--dark); position: relative; } .band-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50rem 24rem at 100% 0%, rgb(47 181 184 / 0.12), transparent 60%); } .band-dark > * { position: relative; } .band:last-child { margin-bottom: -4rem; } .band-dark h2, .band-dark h3, .band-cta h2, .band-cta h3 { color: #fff; } .band-dark .kicker, .band-cta .kicker, .kicker-onDark { color: var(--dark-fg-2); border-color: var(--dark-border-strong); background: rgb(255 255 255 / 0.04); } .band-dark .lede, .band-cta .lede, .lede-onDark { color: var(--dark-fg-2); } .band-dark a:not(.btn), .band-cta a:not(.btn) { color: #fff; } .chip-onDark { color: var(--dark-fg-2); background: rgb(255 255 255 / 0.07); border-color: var(--dark-border-strong); } .band-dark .btn-outline, .band-cta .btn-outline { border-color: var(--dark-border-strong); color: #fff; background: rgb(255 255 255 / 0.04); } .band-dark .btn-outline:hover, .band-cta .btn-outline:hover { border-color: rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.09); } .product-title { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .product-title .chip { font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0; } /* Tiles — the one card primitive. */ .tile { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-xs); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease); } .tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .tile h3 { margin: 0 0 0.4rem; font-size: var(--fs-md); } .tile p { margin: 0; font-size: var(--fs-sm); color: var(--muted); text-wrap: pretty; } .tile-tag { display: inline-block; margin: 0 0 0.9rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; } .band-dark .tile { background: var(--dark-2); border-color: var(--dark-border); box-shadow: none; } .band-dark .tile:hover { border-color: var(--dark-border-strong); } .band-dark .tile p { color: var(--dark-fg-2); } /* The lifecycle — three steps on one line. Numbering is load-bearing: the stages happen in this order, and stage 3 feeds stage 1 again. */ .chain-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; position: relative; } .chain-node { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem 1.6rem 1.7rem; box-shadow: var(--shadow-xs); } .node-num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.6rem; margin: 0 0 1.1rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--fg); background: var(--surface); border: 1px solid var(--border); } .chain-node h3 { margin: 0 0 0.15rem; font-size: var(--fs-lg); } .node-product { margin: 0 0 0.8rem; font-size: var(--fs-xs); font-weight: 500; color: var(--orange-deep); } .chain-node p:last-child { margin: 0; font-size: var(--fs-sm); color: var(--muted); text-wrap: pretty; } .chain-cycle { margin: 1.5rem 0 0; font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 0.5rem; } .chain-cycle::before { content: "\21BB"; color: var(--orange); font-size: 1.1rem; line-height: 1; } .band-dark .chain-node { background: var(--dark-2); border-color: var(--dark-border); box-shadow: none; } .band-dark .node-num { background: var(--dark-3); border-color: var(--dark-border-strong); color: #fff; } .band-dark .chain-node p:last-child { color: var(--dark-fg-2); } /* Bento — a screenshot tile plus fact tiles on a 3-column grid. */ .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .bento .span-2 { grid-column: span 2; grid-row: span 2; } .bento .shot { margin: 0; } .bento-shot { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .bento-shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--border); } .bento-shot figcaption { padding: 1rem 1.4rem 1.1rem; font-size: var(--fs-sm); color: var(--muted); } .bento-shot figcaption b { display: block; color: var(--fg); font-weight: 600; margin-bottom: 0.15rem; } .tile .stat-big { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--fg); margin: 0.4rem 0 0.9rem; font-variant-numeric: tabular-nums; } .tile .stat-big small { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; margin-left: 0.25rem; } .meter { height: 0.4rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; margin: 0.9rem 0 0.4rem; } .meter i { display: block; height: 100%; width: 94%; border-radius: 999px; background: linear-gradient(90deg, var(--orange), #ffab6e); } .tile .meter-cap { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); display: flex; justify-content: space-between; } /* Product proof — the screenshot carries the claim, then the list qualifies it and the facts answer "where does it run". */ .feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem 3.5rem; align-items: start; } .feature .shot { grid-column: 1 / -1; } .feature > div > h3:first-child { margin-top: 0; } .shot { margin: 0; } .shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg); box-shadow: var(--shadow-lg); } .shot figcaption { margin-top: 0.9rem; font-size: var(--fs-xs); color: var(--muted); text-wrap: pretty; } .band-dark .shot img { border-color: var(--dark-border-strong); box-shadow: 0 1.5rem 3.5rem -1.4rem rgb(0 0 0 / 0.8); } .band-dark .shot figcaption { color: var(--dark-muted); } /* Check lists — a drawn check in a soft disc. */ .checks, .plan-features { list-style: none; padding: 0; margin: 0; } .checks li, .plan-features li { position: relative; padding: 0 0 0 1.85rem; margin-bottom: 0.7rem; font-size: var(--fs-sm); text-wrap: pretty; } .checks li::before, .plan-features li::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--orange-soft); } .checks li::after, .plan-features li::after { content: ""; position: absolute; left: 0.39rem; top: 0.42rem; width: 0.28rem; height: 0.5rem; border: solid var(--orange-deep); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .band-dark .checks li { color: var(--dark-fg-2); } .band-dark .checks li::before { background: rgb(240 118 43 / 0.18); } .band-dark .checks li::after { border-color: #ffb27a; } .facts { display: grid; gap: 1rem; } .fact { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; background: var(--surface); } .fact h3 { margin: 0 0 0.3rem; font-size: var(--fs-md); } .fact p { margin: 0; font-size: var(--fs-sm); color: var(--muted); text-wrap: pretty; } .band-dark .fact { background: var(--dark-2); border-color: var(--dark-border); } .band-dark .fact h3 { color: #fff; } .band-dark .fact p { color: var(--dark-fg-2); } /* Audience + proof — tiles. */ .audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .audience { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.4rem; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .audience:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .audience h3 { margin: 0 0 0.4rem; font-size: var(--fs-lg); } .audience p { margin: 0 0 1.1rem; font-size: var(--fs-sm); color: var(--muted); text-wrap: pretty; flex: 1; } .proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .proof { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; } .proof h3 { margin: 0 0 0.35rem; font-size: var(--fs-md); } .proof p { margin: 0; font-size: var(--fs-sm); color: var(--muted); text-wrap: pretty; } .proof .checks { margin-top: 0.8rem; } .band-dark .proof { background: var(--dark-2); border-color: var(--dark-border); } /* Stat grid — a fact rendered as a figure. */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1rem; } .stat { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.1rem; background: var(--bg); min-width: 0; } .stat h3, .stat strong { display: block; margin: 0 0 0.2rem; font-weight: 600; font-size: clamp(1.2rem, 0.95rem + 0.7vw, 1.5rem); line-height: 1.15; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; } .stat p { margin: 0; font-size: var(--fs-sm); color: var(--muted); } .mt-lg { margin-top: 2.5rem; } .rail-in { margin-left: 0; } .mt-md { margin-top: 1.75rem; } .guides-more { margin: 1.5rem 0 0; } .cta-copy { max-width: 44rem; } .cta-copy h2 { font-size: var(--fs-2xl); margin: 0 0 1rem; } .cta-copy .lede { margin: 0; } .cta-copy .section-ctas { margin-top: 2rem; } /* Closing CTA — a dark card with the hero's glow, inside the light page. */ .cta-card { position: relative; overflow: hidden; text-align: center; background: var(--dark); color: var(--dark-fg-2); border-radius: var(--radius-xl); border: 1px solid var(--dark-border-strong); padding: clamp(3rem, 6vw, 5rem) var(--gutter); box-shadow: var(--shadow-lg); } .cta-card::before { content: ""; position: absolute; left: 50%; bottom: -14rem; width: 60rem; height: 26rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(240 118 43 / 0.4), transparent 72%); filter: blur(12px); } .cta-card > * { position: relative; } .cta-card h2 { color: #fff; font-size: var(--fs-2xl); margin: 0 auto 1rem; max-width: 24ch; } .cta-card .lede { color: var(--dark-fg-2); margin: 0 auto; } .cta-card .section-ctas { justify-content: center; margin-top: 2rem; } @media (max-width: 960px) { .audience-grid { grid-template-columns: 1fr 1fr; } .bento { grid-template-columns: 1fr 1fr; } .bento .span-2 { grid-column: 1 / -1; } } @media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: 2rem; } .proof-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .chain-track { grid-template-columns: 1fr; } } @media (max-width: 560px) { .audience-grid, .bento { grid-template-columns: 1fr; } } /* Product rows — one product, one job, one link. */ .product-rows { padding-top: 3.5rem; max-width: 46rem; } .product-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; padding: 1.9rem 0; border-top: 1px solid var(--border); } .product-rows .kicker { margin-bottom: 1.2rem; } .product-num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--orange-deep); padding-top: 0.35rem; } .product-row h2 { margin: 0 0 0.5rem; font-size: var(--fs-xl); } .product-row p { margin: 0 0 0.8rem; text-wrap: pretty; } .product-link { font-weight: 500; text-decoration: none; color: var(--fg); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 0.35rem; } .product-link:hover { color: var(--orange-deep); } .product-link .arrow { display: inline-block; transition: transform 0.18s var(--ease); color: var(--orange); } .product-link:hover .arrow { transform: translateX(4px); } /* Page header — shared marketing page opening. */ .page-head { padding-top: clamp(1rem, 3vw, 2.5rem); margin-bottom: clamp(1.5rem, 4vw, 3rem); max-width: 44rem; } .page-head.center { text-align: center; margin-inline: auto; } .page-head.center .lede { margin-inline: auto; } .page-head h1 { font-size: var(--fs-page); margin: 0 0 1.1rem; } .page-head h1 .accent { color: var(--orange); } .page-head .lede { margin: 0; max-width: 40rem; } .page-head .section-ctas { margin-top: 1.75rem; } /* Contact — form + "what happens next" aside */ .contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3.5rem; align-items: start; } .contact-grid .form { margin-top: 0; } .contact-aside { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.7rem 1.3rem; } .contact-aside h2 { margin: 0 0 0.8rem; font-size: var(--fs-lg); } .next-steps { margin: 0 0 1rem; padding-left: 1.2rem; } .next-steps li { margin: 0 0 0.85rem; font-size: var(--fs-sm); } .next-steps strong { display: block; color: var(--fg); font-size: var(--fs-md); } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 2rem; } } /* --------------------------------------------------------------------------- Pricing — four plans, four cards. The contractor plan is the featured one and inverts to the dark frame. A CSS-only monthly/annual switch: the radio inputs sit inside .pricing and :has() swaps which price is visible. --------------------------------------------------------------------------- */ .billing { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.25rem; margin: 1.75rem 0 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .billing label { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1rem; border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); cursor: pointer; transition: background-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .billing input:checked + label { background: var(--bg); color: var(--fg); box-shadow: var(--shadow-sm); } .billing input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 2px; } .billing .save { font-size: 0.68rem; font-weight: 600; color: var(--orange-deep); background: var(--orange-soft); padding: 0.1rem 0.45rem; border-radius: 999px; } .price-a { display: none; } .pricing:has(#bill-annual:checked) .price-a { display: block; } .pricing:has(#bill-annual:checked) .price-m { display: none; } .plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.75rem; align-items: stretch; } .plan-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.6rem 1.5rem 1.6rem; box-shadow: var(--shadow-xs); position: relative; } .plan-card.featured { background: var(--dark); color: var(--dark-fg-2); border-color: transparent; box-shadow: 0 0 0 1px rgb(240 118 43 / 0.55), 0 1.5rem 3.5rem -1.5rem rgb(12 14 20 / 0.6); } .plan-card.featured::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(30rem 14rem at 50% 110%, rgb(240 118 43 / 0.28), transparent 70%); } .plan-card > * { position: relative; } .plan-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .plan-audience { margin: 0; display: inline-flex; align-items: center; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-2xs); font-weight: 500; color: var(--fg-2); white-space: nowrap; } .plan-card.featured .plan-audience { border-color: var(--dark-border-strong); background: rgb(255 255 255 / 0.06); color: var(--dark-fg); } .plan-card .badge { position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%); margin: 0; box-shadow: 0 0 0 4px var(--bg); z-index: 1; } .plan-card h2 { margin: 0 0 1rem; font-size: var(--fs-lg); min-height: 2.5em; line-height: 1.25; } .plan-card.featured h2 { color: #fff; } .plan-card .plan-desc { margin: 1.5rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); text-wrap: pretty; } .plan-card.featured .plan-desc { border-top-color: var(--dark-border); } .plan-card.featured .plan-desc { color: var(--dark-fg-2); } .plan-card .price { margin: 0; font-size: 2.5rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; } .plan-card.featured .price { color: #fff; } .plan-card .price-period { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); letter-spacing: 0; } .plan-card.featured .price-period { color: var(--dark-muted); } .plan-card .price-sub { margin: 0.5rem 0 0; font-size: var(--fs-xs); color: var(--muted); min-height: 1.4em; } .plan-card.featured .price-sub { color: var(--dark-muted); } .plan-card .btn { margin-top: 1.4rem; width: 100%; } .plan-card.featured .btn-outline { border-color: var(--dark-border-strong); color: #fff; background: rgb(255 255 255 / 0.05); } .plan-card.featured .btn-outline:hover { background: rgb(255 255 255 / 0.1); } .plan-card .plan-features { margin-top: 1.1rem; } .plan-card .btn + .plan-features { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--border); } .plan-card.featured .btn + .plan-features { border-top-color: var(--dark-border); } .plan-card .plan-features li { font-size: var(--fs-xs); margin-bottom: 0.6rem; } .plan-card.featured .plan-features li { color: var(--dark-fg-2); } .plan-card.featured .plan-features li::before { background: rgb(240 118 43 / 0.2); } .plan-card.featured .plan-features li::after { border-color: #ffb27a; } .plan-inc { margin: 0 0 0.6rem; font-size: 0.7rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .plan-card.featured .plan-inc { color: var(--dark-muted); } @media (max-width: 1040px) { .plans { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .plans { grid-template-columns: 1fr; } } /* The storage add-on — one wide strip under the plans. */ .pricing-addon { margin-top: 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem 2rem; align-items: center; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .pricing-addon h2 { margin: 0 0 0.2rem; font-size: var(--fs-md); } .pricing-addon p { margin: 0; font-size: var(--fs-sm); color: var(--muted); text-wrap: pretty; } .addon-price { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.04em; color: var(--fg); white-space: nowrap; } .addon-price small { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 0.2rem; } .addon-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--bg); display: grid; place-items: center; color: var(--orange-deep); } @media (max-width: 640px) { .pricing-addon { grid-template-columns: auto minmax(0, 1fr); } .addon-price { grid-column: 2; } } /* Included everywhere + FAQ. */ .inc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 800px) { .inc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .inc-grid { grid-template-columns: 1fr; } } .faq { border-top: 1px solid var(--border); max-width: 46rem; } .faq details { border-bottom: 1px solid var(--border); } .faq summary { list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 500; color: var(--fg); position: relative; font-size: var(--fs-md); } .faq summary::-webkit-details-marker { display: none; } .faq summary::before, .faq summary::after { content: ""; position: absolute; right: 0.6rem; top: 50%; width: 0.85rem; height: 1.5px; background: var(--muted); transform: translateY(-50%); transition: transform 0.2s var(--ease); } .faq summary::after { transform: translateY(-50%) rotate(90deg); } .faq details[open] summary::after { transform: translateY(-50%) rotate(0); } .faq details p { margin: 0 0 1.2rem; font-size: var(--fs-sm); color: var(--muted); max-width: 42rem; text-wrap: pretty; } .pricing-note { margin-top: 2.5rem; } .pricing-faq { margin-top: 3.5rem; max-width: 46rem; } .pricing-faq h2 { font-size: var(--fs-xl); margin-bottom: 1rem; } .pricing-faq dt { font-weight: 600; color: var(--fg); margin-top: 1.1rem; } .pricing-faq dd { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--fs-sm); } /* Plan cards — kept for the account area (/account/plans). */ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 24rem)); gap: 1rem; margin-top: 2.2rem; } .plan { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 1.75rem 1.75rem; background: var(--bg); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; align-items: flex-start; transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease); } .plan:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); } .plan.featured { border-color: rgb(240 118 43 / 0.55); box-shadow: 0 0 0 1px rgb(240 118 43 / 0.25), var(--shadow-xs); } .plan h2 { margin: 0 0 0.3rem; font-size: var(--fs-lg); } .plan .price { font-size: 2rem; font-weight: 600; color: var(--fg); margin: 0.2rem 0 0.6rem; letter-spacing: -0.04em; } .price-period { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); letter-spacing: 0; } .plan .plan-desc { margin: 0 0 0.9rem; } .plan .plan-features { margin: 0 0 1.4rem; } .plan .btn { margin-top: auto; } .plan-grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .price-alt { margin: -0.3rem 0 0.7rem; font-size: var(--fs-sm); color: var(--muted); } .plan .plan-audience { margin: 0 0 0.6rem; } .plan-buy { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 0.5rem; } .plan-buy .units { display: flex; flex-direction: column; font-size: var(--fs-sm); gap: 0.25rem; } .plan-buy .units input { max-width: 7rem; } .plan-buy .units-note { margin: 0; font-size: var(--fs-xs, 0.8rem); } .inline-pair { display: flex; gap: 0.5rem; } .inline-pair input { min-width: 0; } /* Learn index — editorial list, not boxes. */ .article-list { padding-left: 0; list-style: none; max-width: 46rem; margin-top: 0; border-top: 1px solid var(--border); } .article-list li { border-bottom: 1px solid var(--border); } .article-list a { display: block; position: relative; padding: 1.2rem 2rem 1.2rem 0.2rem; text-decoration: none; } .article-title { display: block; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); font-size: var(--fs-lg); line-height: 1.25; transition: color 0.15s var(--ease); } /* Out of flow: in the text run, a title that fills its measure pushes the hidden arrow onto a line of its own and opens a phantom gap. */ .article-title .arrow { position: absolute; right: 0.2rem; top: 1.2rem; opacity: 0; transform: translateX(-4px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); color: var(--orange); } .article-list a:hover .article-title { color: var(--orange-deep); } .article-list a:hover .arrow { opacity: 1; transform: none; } .article-desc { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 0.3rem; } .feature-list { padding-left: 1.15rem; margin: 0.85rem 0 1.1rem; } .feature-list li { margin: 0.35rem 0; } /* Articles */ .article { max-width: 44rem; text-align: left; } .article h1 { font-size: var(--fs-page); margin: 0.5rem 0 1rem; } .article h2 { margin-top: 2.4rem; font-size: var(--fs-xl); } .article h3 { margin-top: 1.6rem; font-size: var(--fs-lg); color: var(--fg-2); } .article a { color: var(--orange-deep); } .article blockquote { border-left: 3px solid var(--orange); margin: 1.2rem 0; padding: 0.6rem 1.2rem; background: var(--orange-soft); border-radius: 0 var(--radius) var(--radius) 0; } .article table { border-collapse: collapse; width: 100%; margin: 1.1rem 0; font-size: var(--fs-sm); } .article th, .article td { border: 1px solid var(--border); padding: 0.55rem 0.7rem; text-align: left; } .article th { background: var(--surface); color: var(--fg); } /* Cards */ .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; margin-top: 2.2rem; text-align: left; } .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem; background: var(--bg); box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, transform 0.15s; } .card:hover { box-shadow: var(--shadow-md); } .card.featured { border-color: var(--orange); border-top-width: 3px; } .card h2 { margin-top: 0; font-size: 1.2rem; } .price { font-size: 1.7rem; font-weight: 600; color: var(--fg); margin: 0.25rem 0 0.75rem; letter-spacing: -0.03em; } .badge { display: inline-flex; align-items: center; background: var(--orange); color: #fff; font-size: 0.68rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; margin: 0 0 0.6rem; letter-spacing: 0.01em; white-space: nowrap; } /* Forms */ .form { max-width: 40rem; margin-top: 1.5rem; text-align: left; } .form.narrow { max-width: 24rem; } .form-row { margin-bottom: 1.05rem; } .form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form label { display: block; font-weight: 600; font-size: 0.95rem; color: var(--navy); } .form input, .form textarea, .form select { display: block; width: 100%; margin-top: 0.35rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; color: var(--ink); background: var(--bg); } .form input, .form textarea, .form select { transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--orange); box-shadow: var(--ring); } .field-error { display: block; color: #b3261e; font-weight: 500; font-size: 0.875rem; margin-top: 0.3rem; } /* Auth — centered card for sign in / sign up / reset flows */ .auth-card { max-width: 26.5rem; margin: 1.5rem auto 0; padding: 2.2rem 2.4rem 2rem; border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); background: var(--bg); box-shadow: var(--shadow-md); } .auth-card h1 { font-size: var(--fs-xl); margin: 0 0 1.1rem; } .auth-card .lede { font-size: var(--fs-sm); margin: -0.6rem 0 1.1rem; } .auth-card .form { margin-top: 0; max-width: none; } .auth-card .btn { width: 100%; text-align: center; } .auth-card > .muted { margin: 1.3rem 0 0; font-size: var(--fs-sm); } /* Auth status pages — verified / check email / link expired */ .auth-status { max-width: 30rem; margin: 3.5rem auto 0; text-align: center; } .auth-status h1 { margin-bottom: 0.8rem; } .auth-status .lede { margin: 0 auto 1.6rem; } /* Honeypot — visually removed, still submittable by naive bots. */ .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Admin shell lives in admin.css (loaded only by admin_base.html); the table, chip, and empty-state primitives below are shared with the account area. */ .page-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; } .page-row h1 { margin: 0 0 0.4rem; } .page-row .muted { max-width: 40rem; margin: 0; } .page-row .btn { flex: none; margin-top: 0.3rem; } .admin-table { width: 100%; border-collapse: collapse; margin-top: 1.6rem; font-size: var(--fs-sm); } .admin-table th, .admin-table td { text-align: left; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--line); } .admin-table th { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .admin-table tbody tr { transition: background-color 0.12s var(--ease); } .admin-table tbody tr:hover { background: var(--bg-alt); } .admin-table td.num { font-variant-numeric: tabular-nums; } .admin-table .row-action { text-align: right; } .chip { display: inline-block; font-size: var(--fs-2xs); font-weight: 650; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid transparent; text-transform: capitalize; } .chip-live { color: #106b43; background: #e5f5ec; border-color: #bfe6d1; } .chip-archived { color: var(--muted); background: var(--bg-alt); border-color: var(--line); } .empty-state { margin-top: 1.8rem; padding: 2.6rem 2rem; text-align: center; border: 1.5px dashed var(--line); border-radius: calc(var(--radius) * 2); } .empty-state p { margin: 0 0 0.5rem; } .empty-state .btn { margin-top: 0.9rem; } /* label.check — must outrank `.form label`'s display:block. */ .form label.check, .check { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin-top: 1.6rem; } .check input { width: auto; margin-top: 0; } .badge-success { background: #1c7c3f; } .setting-current { display: block; font-weight: 400; font-size: var(--fs-xs); margin-top: 0.15rem; } .settings-section { margin: 2rem 0 0.3rem; font-size: var(--fs-lg); } .tickets-head { margin-top: 2.5rem; } @media (max-width: 640px) { .form-row.two { grid-template-columns: 1fr; } /* Nav wraps to a second line on phones; keep it right-aligned under the brand so the Sign In button sits cleanly at the edge, not adrift below the logo. */ .nav { gap: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.15rem; } .nav a { padding: 0.7rem 0.35rem; font-size: 0.85rem; } /* ≥44px touch targets */ .nav .btn { margin-left: 0.25rem; padding: 0.45rem 0.7rem; font-size: 0.85rem; } .brand span { display: none; } /* logo mark alone on small screens */ /* Four links plus the button won't fit a 390px row; Partners is the least urgent on a phone and stays reachable from the footer. */ .nav a[href="/partners"] { display: none; } .site-footer a { padding: 0.6rem 0.15rem; } /* Split header/action rows stack instead of squeezing a title and a button into one line with a 2rem gutter. */ .app-head, .page-row, .sd-head, .panel-row-head { flex-direction: column; gap: 0.6rem; } .app-head, .page-row { align-items: flex-start; } .panel-row:not(.panel-col) { flex-direction: column; align-items: flex-start; gap: 0.7rem; } .app-head form, .page-row .btn, .panel-row .btn { margin-top: 0; } .sd-composer-actions { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ── Account area: tabs, team table actions ────────────────────────────────── The account section grew from one page to four (overview, profile, team, support), so it needs a way to move between them. Tabs rather than a sidebar: four items don't earn a whole column, and this keeps the mobile layout a single flow. */ .account-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1.25rem 0 0.5rem; border-bottom: 1px solid var(--line); } .account-tabs a { padding: 0.5rem 0.85rem; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .account-tabs a:hover { color: var(--ink); } .account-tabs a.active { color: var(--orange-deep); border-bottom-color: var(--orange); font-weight: 600; } /* Row-level controls in the members/invites tables. Each control is its own form (no JS to serialise several actions into one), so they need to sit on a line together rather than stacking as block elements. */ .row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: flex-end; } .inline-form { display: inline-flex; margin: 0; } .row-actions select { font-size: var(--fs-xs, 0.8125rem); padding: 0.25rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); } .btn-sm { padding: 0.25rem 0.6rem; font-size: var(--fs-xs, 0.8125rem); } @media (max-width: 40rem) { .row-actions { justify-content: flex-start; } } /* --------------------------------------------------------------------------- Service desk — customer support (list, ticket detail, new request). Uses the shared tokens; component names are sd-* to stay collision-free. The status pills are a shared vocabulary, so they keep short names. --------------------------------------------------------------------------- */ /* status pills */ .pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-2xs); font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; } .pill::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; } .pill-open { color: #1f6fb2; background: #eaf3fb; } .pill-progress { color: #8a5a00; background: #fbf1de; } .pill-you { color: var(--orange-deep); background: var(--orange-soft); } .pill-resolved { color: #106b43; background: #e7f4ec; } .sd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* header action row */ .sd-actions { display: flex; align-items: center; gap: 0.6rem; } /* requests list */ .sd-list { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: var(--fs-sm); } .sd-list th, .sd-list td { text-align: left; padding: 0.7rem 0.65rem; border-bottom: 1px solid var(--line); vertical-align: middle; } .sd-list th { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .sd-list tbody tr { transition: background-color 0.12s var(--ease); } .sd-list tbody tr:hover { background: var(--bg-alt); } .sd-list a.sd-reflink { font-weight: 700; color: var(--navy); } .sd-list a.sd-reflink:hover { color: var(--orange-deep); } .sd-list .sd-summary { color: var(--ink); } .sd-list .sd-when { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .sd-empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; margin-top: 1.2rem; background: var(--bg-alt); } .sd-empty p { margin: 0 0 0.9rem; color: var(--muted); } /* breadcrumb + ticket header */ .sd-crumb { font-size: var(--fs-xs); color: var(--muted); margin: 0.4rem 0 0.9rem; } .sd-head { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.1rem 1.3rem; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; } .sd-head .sd-ref { font-size: var(--fs-2xs); font-weight: 700; color: var(--muted); letter-spacing: 0.05em; font-family: ui-monospace, monospace; } .sd-head h2 { font-size: var(--fs-lg); margin: 0.15rem 0 0.5rem; line-height: 1.25; color: var(--navy); } .sd-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; font-size: var(--fs-xs); color: var(--muted); } .sd-meta b { color: var(--ink); font-weight: 600; } /* layout: thread + side rail */ .sd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.2rem; margin-top: 1.2rem; align-items: start; } @media (max-width: 760px) { .sd-grid { grid-template-columns: 1fr; } } .sd-thread { display: flex; flex-direction: column; gap: 0.9rem; } .sd-msg { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 0.9rem 1.1rem; } .sd-msg.support { border-left: 3px solid var(--orange); } .sd-msg-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; } .sd-avatar { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: 800; color: #fff; flex: none; } .sd-avatar.cust { background: var(--navy); } .sd-avatar.team { background: var(--orange); } .sd-who { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); } .sd-when { font-size: var(--fs-2xs); color: var(--muted); margin-left: auto; white-space: nowrap; } .sd-body { font-size: var(--fs-sm); color: var(--ink); } .sd-body p { margin: 0.2rem 0; } .badge-you { font-size: var(--fs-2xs); font-weight: 700; color: var(--orange-deep); background: var(--orange-soft); border-radius: 999px; padding: 0.1rem 0.5rem; } /* reply composer */ .sd-composer { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; margin-top: 0.2rem; } .sd-composer h3 { margin: 0 0 0.5rem; font-size: var(--fs-sm); color: var(--navy); } .sd-composer textarea { width: 100%; min-height: 5.5rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.7rem; font: inherit; font-size: var(--fs-sm); resize: vertical; } .sd-composer textarea:focus { outline: none; border-color: var(--orange); box-shadow: var(--ring); } .sd-composer-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem; } .sd-attach { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; } /* side rail */ .sd-rail { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; } .sd-rail dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.85rem; } .sd-rail dt { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.15rem; } .sd-rail dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); } .sd-divider { border-top: 1px solid var(--line); margin: 0.2rem 0; } .sd-rail form { margin: 0; } .sd-resolve { width: 100%; justify-content: center; margin-top: 0.2rem; } /* --------------------------------------------------------------------------- Responsive tables — the account area's data tables (licenses, invoices, members, invites, support requests) would otherwise overflow a phone and be clipped by body{overflow-x:clip}, hiding the right-hand columns for good. Tables opt in with `.rtable`; each carries data-label="". On phones the table becomes a stack of labeled cards — every value stays reachable, and it reads like a native mobile list rather than a scrolled spreadsheet. Above the breakpoint .rtable is inert (normal table layout). --------------------------------------------------------------------------- */ @media (max-width: 640px) { .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; } /* Hide the header row visually but keep it for screen readers. */ .rtable thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .rtable tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-sm); padding: 0.35rem 0.95rem; margin-bottom: 0.85rem; } .rtable td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-align: right; padding: 0.5rem 0; border: 0; border-bottom: 1px solid var(--line); } .rtable tr td:last-child { border-bottom: 0; } .rtable td::before { content: attr(data-label); text-align: left; flex: none; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .rtable td:empty { display: none; } /* e.g. an actions cell with no actions */ /* First cell is the card's title: full width, left-aligned, no label. */ .rtable td.rt-title { display: block; text-align: left; } .rtable td.rt-title::before { content: none; } /* Row actions get the full width and sit left, buttons wrapping as needed. */ .rtable td.row-actions { justify-content: flex-start; text-align: left; } .rtable td.row-actions::before { content: none; } } /* Flowdown band under the plans: same shell as the storage add-on, with the price and CTA stacked at the end so the toggle-aware price stays legible. */ .pricing-product .addon-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; flex: none; } .pricing-product .addon-side .addon-price { margin: 0; } .pricing-product .plan-audience { margin: 0 0 0.2rem; } @media (max-width: 700px) { .pricing-product .addon-side { align-items: flex-start; } }