/* Fristal stylesheet. One file, no build step, system fonts only. Sections: 1 tokens · 2 base · 3 layout, header, footer · 4 components (buttons, forms, cards, tables, badges, alerts) 5 public pages · 6 app pages · 7 reporting clock · 8 print Contrast: text/background pairs below are chosen for WCAG AA (4.5:1) in both schemes. */ /* 1. Tokens ------------------------------------------------------------------------------------ */ :root { color-scheme: light dark; /* Surfaces and text: cool slate neutrals */ --bg: #f5f7fa; --surface: #ffffff; --surface-2: #eef2f6; --ink: #0d1726; --muted: #4a586b; --line: #e1e6ed; --line-strong: #c3ccd8; --field: #76849a; /* borders of inputs and check boxes: 3:1 against the surface (WCAG 1.4.11) */ /* Brand: deep navy for primary actions and dark bands, one cobalt accent for links, focus and highlights */ --primary: #12284a; --primary-hover: #1c3966; --primary-ink: #ffffff; --accent: #2456d3; --accent-hover: #1b47b8; --accent-ink: #ffffff; --accent-soft: #ebf1fd; --accent-text: #1f4fc6; /* Dark navy bands (hero, call to action) look the same in both schemes */ --navy: #0a1931; --navy-2: #102549; --navy-ink: #f1f5fb; --navy-muted: #b4c2d8; --navy-accent: #9cbcff; --navy-line: rgb(255 255 255 / .12); /* Status colours: each has a text colour, a soft background and a border */ --crit: #9b1c1c; --crit-bg: #fdeeee; --crit-line: #f0b4b4; --high: #9a3a07; --high-bg: #fff0e3; --high-line: #f0c09a; --med: #6b5000; --med-bg: #fcf5d9; --med-line: #e2cb70; --low: #22558a; --low-bg: #e9f2fb; --low-line: #b0cbe6; --unk: #4a586b; --unk-bg: #eef2f6; --unk-line: #c9d2dd; --ok: #146138; --ok-bg: #e7f6ec; --ok-line: #a3d6b4; --kev: #ffffff; --kev-bg: #5b21b6; --kev-line: #5b21b6; /* filled violet, so it never reads as just another severity */ /* Logo: navy tile, white F, bright cobalt deadline marker; inverted in the dark scheme */ --logo-tile: #12284a; --logo-glyph: #ffffff; --logo-due: #6f9bff; --focus: #2456d3; --ring: 0 0 0 3px rgb(36 86 211 / .25); --shadow-sm: 0 1px 2px rgb(13 23 38 / .06); --shadow: 0 1px 2px rgb(13 23 38 / .05), 0 4px 12px rgb(13 23 38 / .05); --shadow-lg: 0 2px 4px rgb(13 23 38 / .04), 0 12px 32px rgb(13 23 38 / .10); /* Type */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-xs: .8125rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); --fs-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); --fs-3xl: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem); /* Spacing (4px base) */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 5rem; --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --measure: 66ch; --wrap: 72rem; --tap: 2.75rem; /* 44px minimum tap target */ } @media (prefers-color-scheme: dark) { :root { --bg: #080d16; --surface: #0f1724; --surface-2: #162133; --ink: #e7ecf3; --muted: #9eabbe; --line: #1f2b3d; --line-strong: #34445c; --field: #72829b; --primary: #dbe5f5; --primary-hover: #ffffff; --primary-ink: #0a1931; --accent: #7ea6ff; --accent-hover: #a3c0ff; --accent-ink: #081633; --accent-soft: #14244a; --accent-text: #93b4ff; --navy: #0b1527; --navy-2: #12223d; --crit: #ffb4b0; --crit-bg: #3a1517; --crit-line: #7e3236; --high: #ffc394; --high-bg: #38210f; --high-line: #7a4a22; --med: #f0d36a; --med-bg: #2f280c; --med-line: #6e5d1b; --low: #a9cdf3; --low-bg: #10253b; --low-line: #2e5780; --unk: #9eabbe; --unk-bg: #162133; --unk-line: #34445c; --ok: #8ddba8; --ok-bg: #0f2c1c; --ok-line: #2b6644; --kev: #1b0d3d; --kev-bg: #c8b0ff; --kev-line: #c8b0ff; --logo-tile: #dbe5f5; --logo-glyph: #12284a; --logo-due: #2456d3; --focus: #93b4ff; --ring: 0 0 0 3px rgb(147 180 255 / .3); --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 12px rgb(0 0 0 / .25); --shadow-lg: 0 2px 4px rgb(0 0 0 / .3), 0 16px 40px rgb(0 0 0 / .45); } } /* 2. Base -------------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } body { margin: 0; font: var(--fs-base)/1.6 var(--font); color: var(--ink); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } main { flex: 1; } h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 var(--s3); font-weight: 680; text-wrap: balance; } h1 { font-size: var(--fs-2xl); letter-spacing: -.025em; } h2 { font-size: var(--fs-xl); margin-top: var(--s7); letter-spacing: -.02em; } h3 { font-size: var(--fs-md); } h4 { font-size: var(--fs-base); } p, ul, ol, dl { margin: 0 0 var(--s4); } p, li { max-width: var(--measure); text-wrap: pretty; } .cards p, .cards li, td p, table p, .stage-card p, .nav li, .hero p.lead { max-width: none; } a { color: var(--accent-text); text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); } strong, b { font-weight: 650; } small, .small { font-size: var(--fs-sm); } .muted { color: var(--muted); } .mono { font-family: var(--mono); font-size: var(--fs-xs); word-break: break-all; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -999px; top: var(--s2); z-index: 100; } .skip:focus { left: var(--s2); background: var(--surface); color: var(--ink); padding: var(--s3) var(--s4); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-weight: 600; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; } img, svg { max-width: 100%; } /* 3. Layout ------------------------------------------------------------------------------------ */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); } main { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: var(--s7) var(--s5) var(--s8); } main.full { max-width: none; padding: 0; } .narrow { max-width: 42rem; } main > .narrow { margin-inline: auto; } .page-head { margin-bottom: var(--s5); } .page-head h1 { margin-bottom: var(--s2); } .page-head .sub { color: var(--muted); margin: 0; } .crumbs { font-size: var(--fs-sm); margin-bottom: var(--s3); color: var(--muted); } .actions { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; } .stack > * + * { margin-top: var(--s4); } @media (max-width: 40rem) { .wrap, main { padding-left: var(--s4); padding-right: var(--s4); } main { padding-top: var(--s5); padding-bottom: var(--s7); } } /* Header: sticky, translucent. Below 48rem the menu collapses behind a toggle (app.js); without JS it wraps. */ .site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); } .nav { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); max-width: var(--wrap); margin: 0 auto; padding: var(--s3) var(--s5); min-height: 4rem; } .nav-menu { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); list-style: none; margin: 0; padding: 0; align-items: center; } .nav-menu a:not(.button), .nav-menu button.link { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--s3); border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 560; transition: color .12s, background-color .12s; } .nav-menu a:not(.button):hover, .nav-menu button.link:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; } .nav-menu a[aria-current="page"] { color: var(--ink); background: var(--surface-2); } .nav-menu .nav-cta { margin-left: var(--s2); } .nav-menu form { margin: 0; } .nav-menu form > button { margin-top: 0; } .logo { display: inline-flex; align-items: center; gap: .6rem; min-height: var(--tap); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.03em; line-height: 1; } .logo svg { width: 1.75rem; height: 1.75rem; flex: none; } .logo .word { padding-bottom: .05em; } /* Fristal mark: a tile holding an F whose middle bar ends at a deadline marker. Works anywhere _logo.html is included. */ .brand-tile { fill: var(--logo-tile); } .brand-f { fill: var(--logo-glyph); } .brand-due { fill: var(--logo-due); } .nav-toggle { display: none; } .nav-toggle svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .nav-toggle .x { display: none; } .nav-toggle[aria-expanded="true"] .x { display: block; } .nav-toggle[aria-expanded="true"] .bars { display: none; } @media (max-width: 48rem) { /* Without JS the menu wraps onto several lines, so don't let a tall header stick over the page */ html:not(.js) .site-header { position: static; } .nav { padding: var(--s2) var(--s4); min-height: 3.5rem; } .nav-menu { gap: 0 var(--s1); margin-inline: calc(-1 * var(--s3)); } .nav-menu a:not(.button), .nav-menu button.link { min-height: var(--tap); } .nav-menu .nav-cta { margin-left: 0; } /* With JS: a toggle and a drop-down panel */ .js .nav-toggle { display: inline-flex; width: var(--tap); height: var(--tap); min-height: 0; padding: 0; margin-right: calc(-1 * var(--s2)); background: transparent; border: 1px solid transparent; color: var(--ink); border-radius: var(--radius-sm); box-shadow: none; } .js .nav-toggle:hover { background: var(--surface-2); } .js .nav-menu { display: none; } .js .nav[data-open] .nav-menu { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: var(--s2) var(--s4) var(--s4); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); } .js .nav[data-open] .nav-menu li { border-bottom: 1px solid var(--line); } .js .nav[data-open] .nav-menu li.nav-cta { border-bottom: 0; order: 1; padding-top: var(--s4); } .js .nav[data-open] .nav-menu a:not(.button), .js .nav[data-open] .nav-menu button.link { display: flex; width: 100%; min-height: 3rem; padding: 0 var(--s2); justify-content: flex-start; font-size: var(--fs-base); color: var(--ink); border-radius: 0; } .js .nav[data-open] .nav-menu a[aria-current="page"] { background: none; box-shadow: inset 3px 0 0 var(--accent); padding-left: var(--s4); } .js .nav[data-open] .nav-menu .button { width: 100%; min-height: 3rem; font-size: var(--fs-base); } } .banner { margin: 0; padding: var(--s2) var(--s4); text-align: center; font-size: var(--fs-sm); background: var(--surface-2); color: var(--muted); border-bottom: 1px solid var(--line); max-width: none; } /* Footer */ .site-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: auto; color: var(--muted); font-size: var(--fs-sm); } .site-footer .wrap { padding-top: var(--s7); padding-bottom: var(--s6); display: grid; grid-template-columns: auto 1fr; gap: var(--s4) 0; align-items: stretch; } .site-footer .wrap > .logo, .site-footer nav { padding-bottom: var(--s5); border-bottom: 1px solid var(--line); } .site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s1); padding-left: var(--s6); } .site-footer nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); } .site-footer nav a:hover { background: var(--surface-2); } .disclaimer { grid-column: 1 / -1; max-width: 64rem; margin: var(--s2) 0 0; font-size: var(--fs-xs); line-height: 1.65; } @media (max-width: 48rem) { .site-footer .wrap { grid-template-columns: 1fr; padding-top: var(--s6); gap: var(--s3); } .site-footer .wrap > .logo { padding-bottom: 0; border-bottom: 0; } .site-footer nav a { padding: 0; } .site-footer nav { justify-content: flex-start; margin: 0; padding-inline: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 4. Components -------------------------------------------------------------------------------- */ /* Buttons: primary is navy (light scheme) or pale (dark scheme); secondary is outlined */ .button, button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font: inherit; font-weight: 600; font-size: var(--fs-sm); line-height: 1.25; padding: .6rem 1.1rem; min-height: var(--tap); border: 1px solid var(--primary); border-radius: var(--radius-sm); text-align: center; background: var(--primary); color: var(--primary-ink); cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm); transition: background-color .12s, border-color .12s, box-shadow .12s, color .12s; } .button:hover, button:hover { background: var(--primary-hover); border-color: var(--primary-hover); text-decoration: none; } .button.small { min-height: 2.25rem; padding: .35rem .85rem; font-size: var(--fs-sm); } .button.large { min-height: 3rem; padding: .75rem 1.4rem; font-size: var(--fs-base); } button.secondary, .button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); } button.secondary:hover, .button.secondary:hover { background: var(--surface-2); border-color: var(--muted); } button.danger, .button.danger { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); box-shadow: none; } button.danger:hover, .button.danger:hover { background: var(--crit-line); border-color: var(--crit); } button.danger.solid { background: var(--crit); color: var(--surface); border-color: var(--crit); } button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent-text); font-weight: 400; font-size: inherit; text-decoration: underline; text-underline-offset: .2em; display: inline; box-shadow: none; } button.link:hover { background: none; } button:disabled { opacity: .5; cursor: not-allowed; } form.inline { display: inline; } .arrow-link { display: inline-flex; align-items: center; gap: .35em; min-height: var(--tap); font-weight: 600; text-decoration: none; } .arrow-link::after { content: "→"; transition: transform .15s; } .arrow-link:hover::after { transform: translateX(3px); } /* Forms */ label { display: block; margin: var(--s4) 0 var(--s2); font-weight: 600; font-size: var(--fs-sm); } label.choice { display: flex; gap: var(--s3); align-items: flex-start; font-weight: 400; font-size: var(--fs-base); margin: var(--s2) 0; padding: var(--s3) var(--s4); min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color .12s, background-color .12s; } label.choice:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); } label.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } label.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } input[type=checkbox], input[type=radio] { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; flex: none; accent-color: var(--accent); } input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { display: block; width: 100%; font: inherit; font-size: max(16px, var(--fs-base)); padding: .6rem .8rem; min-height: var(--tap); border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s; } input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { border-color: var(--muted); } textarea { min-height: 5rem; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; } input:not([type=checkbox]):not([type=radio]):focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); box-shadow: var(--ring); } input[type=file] { padding: var(--s4); min-height: 5.5rem; background: var(--surface-2); border: 1.5px dashed var(--field); box-shadow: none; cursor: pointer; font-size: var(--fs-sm); } input[type=file]:hover { border-color: var(--accent); background: var(--accent-soft); } input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: var(--s3); padding: .5rem .9rem; min-height: 2.5rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; } form > button, form > .actions { margin-top: var(--s5); } .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6); box-shadow: var(--shadow); } .form-card > :last-child { margin-bottom: 0; } @media (max-width: 40rem) { .form-card { padding: var(--s5) var(--s4); } } .help { color: var(--muted); font-size: var(--fs-sm); margin: var(--s2) 0 0; } fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 var(--s4); padding: var(--s5); background: var(--surface); min-width: 0; box-shadow: var(--shadow-sm); } fieldset.invalid { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); } legend { font-weight: 650; padding: 0; max-width: 100%; float: left; width: 100%; margin-bottom: var(--s3); font-size: var(--fs-md); line-height: 1.4; } legend + * { clear: both; } legend .progress { display: block; color: var(--accent-text); font-weight: 650; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s1); } details { margin: var(--s2) 0; } summary { cursor: pointer; font-weight: 600; } summary:hover { color: var(--accent-text); } details.why { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--muted); } details.why summary { font-weight: 550; display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent-text); } details.why p { margin: 0 0 var(--s2); padding: var(--s3) var(--s4); background: var(--surface-2); border-radius: var(--radius-sm); max-width: none; } /* Cards and panels */ .card, .cards article, .summary, .callout, .stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); } .card, .cards article { box-shadow: var(--shadow-sm); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--s4); } .cards article h3 { margin-bottom: var(--s2); } .cards article > :last-child { margin-bottom: 0; } .callout { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); max-width: var(--measure); } .callout > :last-child { margin-bottom: 0; } .summary { box-shadow: var(--shadow); margin: var(--s5) 0; } blockquote { border-left: 3px solid var(--accent); margin: var(--s5) 0; padding: var(--s1) var(--s5); font-size: var(--fs-lg); line-height: 1.45; font-weight: 560; max-width: 36rem; } /* Tables */ /* position: relative makes the wrapper the containing block for absolutely-positioned .sr-only text inside cells; otherwise it escapes the scroller and widens the page. */ .table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; box-shadow: var(--shadow-sm); } .table-wrap:focus-visible { outline-offset: 0; } table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); } th, td { border-bottom: 1px solid var(--line); padding: var(--s3) var(--s4); text-align: left; vertical-align: top; } tbody tr:last-child > * { border-bottom: 0; } thead th { background: var(--surface-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; white-space: nowrap; } tbody th { font-weight: 600; } tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 50%, transparent); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Badges: severity text is always spelt out, never colour alone */ .badge { display: inline-flex; align-items: center; gap: .4em; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--line-strong); font-size: var(--fs-xs); font-weight: 650; line-height: 1.5; white-space: nowrap; background: var(--surface-2); color: var(--muted); text-transform: none; } .badge.sev-critical, .sev-critical.badge { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); text-transform: capitalize; } .badge.sev-high { background: var(--high-bg); color: var(--high); border-color: var(--high-line); text-transform: capitalize; } .badge.sev-medium { background: var(--med-bg); color: var(--med); border-color: var(--med-line); text-transform: capitalize; } .badge.sev-low { background: var(--low-bg); color: var(--low); border-color: var(--low-line); text-transform: capitalize; } .badge.sev-unknown { background: var(--unk-bg); color: var(--unk); border-color: var(--unk-line); text-transform: capitalize; } .badge.sev-critical::before, .badge.sev-high::before, .badge.sev-medium::before, .badge.sev-low::before, .badge.sev-unknown::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; } .badge.sev-critical::before { border-radius: 1px; transform: rotate(45deg); } /* shape differs too, for colour-blind users */ .badge.sev-low::before, .badge.sev-unknown::before { background: transparent; border: 2px solid currentColor; } .badge.kev { background: var(--kev-bg); color: var(--kev); border-color: var(--kev-line); letter-spacing: .01em; } .badge.kev::before { content: ""; width: .6em; height: .8em; background: currentColor; clip-path: polygon(0 0, 100% 15%, 70% 45%, 100% 75%, 12% 100%, 12% 100%, 0 100%); } .badge.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); } .badge.warn { background: var(--med-bg); color: var(--med); border-color: var(--med-line); } .badge.plain { background: var(--surface-2); color: var(--ink); } .sev { display: flex; gap: var(--s2); list-style: none; padding: 0; margin: 0 0 var(--s4); flex-wrap: wrap; } .sev li { padding: .2rem .8rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); font-size: var(--fs-sm); text-transform: capitalize; font-variant-numeric: tabular-nums; } .sev li.sev-critical { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); } .sev li.sev-high { background: var(--high-bg); color: var(--high); border-color: var(--high-line); } .sev li.sev-medium { background: var(--med-bg); color: var(--med); border-color: var(--med-line); } .sev li.sev-low { background: var(--low-bg); color: var(--low); border-color: var(--low-line); } .sev li.sev-unknown { color: var(--unk); } /* Alerts */ .flash { display: block; padding: var(--s3) var(--s4); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); border-left-width: 4px; background: var(--surface); margin: 0 0 var(--s4); max-width: none; } .flash.error { background: var(--crit-bg); border-color: var(--crit-line); border-left-color: var(--crit); color: var(--ink); } .flash.warn { background: var(--med-bg); border-color: var(--med-line); border-left-color: var(--med); color: var(--ink); } .flash.success { background: var(--ok-bg); border-color: var(--ok-line); border-left-color: var(--ok); color: var(--ink); } .flash.info { background: var(--accent-soft); border-color: transparent; border-left-color: var(--accent); } .flash.kev-alert { background: var(--surface); border-color: var(--line-strong); border-left-color: var(--kev-bg); } .flash a { color: inherit; font-weight: 600; } .warn { color: var(--med); } .warn-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); } .warn-list li { max-width: none; padding: var(--s3) var(--s4); background: var(--med-bg); border: 1px solid var(--med-line); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-sm); } .warn-list a { font-weight: 600; color: inherit; } .countdown { font-variant-numeric: tabular-nums; font-weight: 650; } .kev-hit { color: var(--ink); } /* 5. Public pages ------------------------------------------------------------------------------ */ .section { padding: var(--s8) 0; } .section.tint { background: var(--surface); border-block: 1px solid var(--line); } .section h2 { margin-top: 0; font-size: var(--fs-2xl); } .section-head { max-width: 44rem; margin-bottom: var(--s6); } .section-head h2 { margin-bottom: var(--s3); } .section-head > :last-child { margin-bottom: 0; } .eyebrow { color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s3); } .section-intro { color: var(--muted); font-size: var(--fs-md); margin-bottom: var(--s6); } @media (max-width: 52rem) { .section { padding: var(--s7) 0; } .section-head { margin-bottom: var(--s5); } } /* Hero: navy band with a faint grid and a glow, the same in both schemes */ .hero { position: relative; overflow: hidden; color: var(--navy-ink); padding: var(--s8) 0 calc(var(--s8) + var(--s2)); background: radial-gradient(50rem 28rem at 88% -10%, rgb(64 112 235 / .38), transparent 65%), radial-gradient(36rem 20rem at -10% 110%, rgb(64 112 235 / .14), transparent 70%), linear-gradient(180deg, var(--navy), var(--navy-2)); } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--navy-line) 1px, transparent 1px), linear-gradient(90deg, var(--navy-line) 1px, transparent 1px); background-size: 56px 56px; opacity: .35; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%); } .hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s7); align-items: center; } .hero h1 { font-size: var(--fs-3xl); line-height: 1.04; letter-spacing: -.035em; margin-bottom: var(--s5); font-weight: 720; color: #fff; } .hero .lead { font-size: var(--fs-md); line-height: 1.65; color: var(--navy-muted); margin-bottom: var(--s6); max-width: 36rem; } .hero .descriptor { display: inline-flex; align-items: center; gap: var(--s2); padding: .3rem .8rem .3rem .6rem; margin-bottom: var(--s5); border-radius: 999px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); color: var(--navy-ink); font-weight: 560; font-size: var(--fs-sm); } .hero .descriptor::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--navy-accent); box-shadow: 0 0 0 3px rgb(156 188 255 / .25); } .hero a { color: var(--navy-accent); } .hero .button, .cta-band .button { background: #fff; border-color: #fff; color: var(--navy); box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 6px 20px rgb(0 0 0 / .2); } .hero .button:hover, .cta-band .button:hover { background: #e3ebfa; border-color: #e3ebfa; } .hero .button.ghost { background: transparent; border-color: rgb(255 255 255 / .28); color: var(--navy-ink); box-shadow: none; } .hero .button.ghost:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .45); } .hero :focus-visible, .cta-band :focus-visible { outline-color: #fff; } .hero .trust { color: var(--navy-muted); font-size: var(--fs-sm); margin: var(--s6) 0 0; padding-top: var(--s5); border-top: 1px solid var(--navy-line); max-width: 36rem; } .hero .actions { gap: var(--s3); } @media (max-width: 56rem) { .hero { padding: var(--s7) 0; } .hero .wrap { grid-template-columns: 1fr; gap: var(--s6); } } @media (max-width: 40rem) { .hero .actions .button { width: 100%; } .hero .button.large { white-space: normal; } } /* Product preview card in the hero: static illustration of the clock, marked aria-hidden */ .preview { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); padding: 0; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -12px rgb(0 0 0 / .55), 0 18px 36px -18px rgb(0 0 0 / .5); } .preview-bar { display: flex; gap: 6px; padding: var(--s3) var(--s4); background: var(--surface-2); border-bottom: 1px solid var(--line); } .preview-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); } .preview-body { padding: var(--s4) var(--s4) var(--s4); } .preview-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s4); font-size: var(--fs-sm); } .preview-head strong { font-size: var(--fs-base); } .preview .mini { display: grid; gap: var(--s2); } .mini-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); } .mini-row .dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; border: 2px solid var(--line-strong); color: var(--muted); } .mini-row.done .dot { background: var(--ok); border-color: var(--ok); color: var(--surface); } .mini-row.now { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .mini-row.now .dot { border-color: var(--accent); color: var(--accent-text); } .mini-row b { display: block; font-size: var(--fs-sm); } .mini-row span.s { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; } .mini-row .t { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-md); white-space: nowrap; } .mini-row.done .t { color: var(--ok); font-size: var(--fs-sm); } .mini-row:not(.done):not(.now) .t { color: var(--muted); font-size: var(--fs-sm); font-weight: 550; } .preview-foot { margin: var(--s4) 0 0; font-size: var(--fs-xs); color: var(--muted); } @media (max-width: 24rem) { .mini-row { grid-template-columns: auto minmax(0, 1fr); } .mini-row .t { grid-column: 2; } } /* Problem */ .problem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s7); align-items: start; } .problem-grid h2 { margin-bottom: var(--s5); } .facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); counter-reset: fact; } .facts li { position: relative; padding: var(--s4) var(--s5) var(--s4) 3.75rem; border-bottom: 1px solid var(--line); max-width: none; counter-increment: fact; } .facts li:last-child { border-bottom: 0; } .facts li::before { content: counter(fact, decimal-leading-zero); position: absolute; left: var(--s5); top: var(--s4); font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 1.6rem; } .section.tint .facts { background: var(--bg); } @media (max-width: 52rem) { .problem-grid { grid-template-columns: 1fr; gap: var(--s5); } .facts li { padding-left: 3.25rem; } .facts li::before { left: var(--s4); } } /* How it works */ .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); counter-reset: step; } .steps li { counter-increment: step; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); max-width: none; box-shadow: var(--shadow-sm); } .steps li::before { content: counter(step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: var(--primary); color: var(--primary-ink); font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--s4); font-variant-numeric: tabular-nums; } .steps li:last-child { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .steps h3 { font-size: var(--fs-md); } .steps p { color: var(--muted); } .steps p:last-child { margin-bottom: 0; } .steps p.small { color: var(--ink); padding: var(--s3); background: var(--surface-2); border-radius: var(--radius-sm); margin-top: var(--s4); } @media (max-width: 52rem) { .steps { grid-template-columns: 1fr; } } /* Features: a ruled grid of tiles; the last tile is the free-scan link */ .features.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .features.cards article, .features.cards .tile-cta { border: 0; border-radius: 0; box-shadow: none; background: var(--surface); padding: var(--s5); margin: 0; } .features.cards h3 { font-size: var(--fs-base); } .features.cards article p { color: var(--muted); font-size: var(--fs-sm); } .features.cards .tile-cta { background: var(--accent-soft); font-size: var(--fs-sm); display: flex; flex-direction: column; justify-content: center; } .features.cards .tile-cta a { font-weight: 650; font-size: var(--fs-base); } .section.tint .features.cards article { background: var(--surface); } @media (max-width: 64rem) { .features.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 36rem) { .features.cards { grid-template-columns: 1fr; } } .icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; margin-bottom: var(--s4); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); } .icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .scope-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); } .scope-notes .callout { max-width: none; margin: 0; background: var(--surface); border-color: var(--line); padding: var(--s4) var(--s5); font-size: var(--fs-sm); } .scope-notes .callout strong { display: block; font-size: var(--fs-base); margin-bottom: var(--s1); } @media (max-width: 52rem) { .scope-notes { grid-template-columns: 1fr; } } /* Pricing: one card per plan. Cards line up row-by-row on wide screens (subgrid) and stack on phones. */ .plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; } .plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow-sm); min-width: 0; } @supports (grid-template-rows: subgrid) { .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; } } .plan h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--fs-md); margin: 0 0 var(--s3); } .plan-price { margin: 0 0 var(--s2); color: var(--muted); font-size: var(--fs-sm); } .plan-price strong { font-size: 2.25rem; font-weight: 720; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); margin-right: .15em; font-variant-numeric: tabular-nums; } .plan-for { margin: 0 0 var(--s5); color: var(--muted); font-size: var(--fs-sm); } .plan .button { width: 100%; margin-bottom: var(--s5); align-self: start; } .plan-products { display: flex; justify-content: space-between; gap: var(--s3); margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); max-width: none; } .plan-products span { color: var(--muted); } .plan-features { list-style: none; padding: var(--s4) 0 0; margin: 0; display: grid; gap: var(--s2); align-content: start; font-size: var(--fs-sm); } .plan-features li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--s2); max-width: none; line-height: 1.45; } .plan-features li::before { content: ""; width: 1rem; height: 1rem; margin-top: .1rem; border-radius: 50%; background: var(--ok-bg) no-repeat center / .65rem; border: 1px solid var(--ok-line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%23146138' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .plan-features li.no { color: var(--muted); } .plan-features li.no::before { background: none; border: 0; content: "–"; text-align: center; line-height: 1.2rem; color: var(--line-strong); } .plan.featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-lg); } .plan.featured .badge { position: absolute; top: 0; left: var(--s5); transform: translateY(-50%); background: var(--primary); color: var(--primary-ink); border-color: var(--primary); padding: .15rem .7rem; } @media (prefers-color-scheme: dark) { .plan-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%238ddba8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } } @media (max-width: 64rem) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .plans { grid-template-columns: 1fr; } .plan { grid-row: auto; display: flex; } .plan-features li.no { display: none; } } .price-note { margin-top: var(--s5); color: var(--muted); font-size: var(--fs-sm); max-width: none; } /* FAQ */ .faq-grid { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--s7); align-items: start; } @media (max-width: 52rem) { .faq-grid { grid-template-columns: 1fr; gap: var(--s4); } } .faq { max-width: 48rem; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); margin: 0; } .faq summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s4); align-items: center; min-height: 3.5rem; padding: var(--s3) 0; font-size: var(--fs-base); font-weight: 600; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: .55rem; height: .55rem; margin-right: .3rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-25%) rotate(45deg); transition: transform .15s; } .faq details[open] summary::after { transform: translateY(15%) rotate(-135deg); } .faq details p { margin: 0 0 var(--s5); color: var(--muted); max-width: 42rem; } .cta-band { position: relative; overflow: hidden; color: var(--navy-ink); border-radius: var(--radius-lg); padding: var(--s7) var(--s6); margin-top: var(--s8); display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); align-items: center; justify-content: space-between; background: radial-gradient(30rem 16rem at 100% 0%, rgb(64 112 235 / .4), transparent 70%), linear-gradient(135deg, var(--navy), var(--navy-2)); } .cta-band h2 { margin: 0; font-size: var(--fs-xl); color: #fff; } .cta-band p { margin: var(--s2) 0 0; color: var(--navy-muted); } @media (max-width: 40rem) { .cta-band { padding: var(--s6) var(--s5); margin-top: var(--s7); } .cta-band .button { width: 100%; } } /* Free tools: scope checker, scan */ .lead { font-size: var(--fs-md); color: var(--muted); line-height: 1.6; } .tool-head { margin-bottom: var(--s6); } .tool-head h1 { font-size: var(--fs-2xl); } .tool-meta { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: var(--s4) 0 0; color: var(--ink); font-size: var(--fs-sm); } .tool-meta li { display: inline-flex; gap: var(--s2); align-items: center; max-width: none; padding: .2rem .75rem .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .tool-meta li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); } .checker > button[type=submit] { width: 100%; } .signup-cta { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius); padding: var(--s5); margin: var(--s5) 0 0; } .signup-cta h3 { margin-bottom: var(--s2); } .signup-cta p { margin-bottom: var(--s4); } .signup-cta .small { margin: var(--s3) 0 0; color: var(--muted); } .result { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6); box-shadow: var(--shadow); overflow: hidden; } .result::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--accent); } .result.probably_out::before { background: var(--ok); } .result.lawyer::before { background: var(--med); } .result h1 { font-size: var(--fs-2xl); } .result .actions { margin: var(--s5) 0; } @media (max-width: 40rem) { .result { padding: var(--s5) var(--s4); } .result .actions .button, .result .actions button { width: 100%; } } .note { color: var(--muted); font-size: var(--fs-sm); padding-left: var(--s3); border-left: 2px solid var(--line-strong); } .answers { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); } .answers summary { min-height: var(--tap); display: flex; align-items: center; } .answers ol { padding-left: 1.25rem; } .answers li { margin-bottom: var(--s3); color: var(--muted); } .answer { font-weight: 600; color: var(--ink); } .checker fieldset { scroll-margin-top: 5rem; } .summary h2 { font-size: var(--fs-lg); margin-top: 0; } .stat-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s4); } .stat { flex: 1 1 8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); background: var(--bg); } .stat b { display: block; font-size: var(--fs-xl); line-height: 1.1; font-variant-numeric: tabular-nums; } .stat span { font-size: var(--fs-xs); color: var(--muted); } .stat.kev-stat { border-color: var(--kev-bg); } .stat.kev-stat b { color: var(--ink); } .form-card form > button[type=submit] { width: 100%; } .form-card + .help { margin-top: var(--s4); } /* Auth pages: one centred card */ .auth { max-width: 28rem; margin: var(--s4) auto 0; } .auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s6); box-shadow: var(--shadow-lg); } .auth-card .form-card { border: 0; padding: 0; box-shadow: none; background: none; border-radius: 0; } .auth-card > .logo-mark { display: block; width: 2.5rem; height: 2.5rem; margin-bottom: var(--s5); } .auth-card > .logo-mark svg { width: 100%; height: 100%; } .auth h1 { font-size: var(--fs-xl); margin-bottom: var(--s2); } .auth-card > .muted { margin-bottom: var(--s5); } .auth-card > h1 + .form-card, .auth-card > h1 + .flash { margin-top: var(--s5); } .auth .demo { margin-top: var(--s3); } .auth .demo button { width: 100%; margin-top: 0; } .auth form button[type=submit]:not(.secondary) { width: 100%; } .auth .choice { font-size: var(--fs-sm); margin-top: var(--s5); } .auth-alt { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin: var(--s5) auto 0; max-width: none; } .auth-alt a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; } form.auth-alt button.link { min-height: var(--tap); } @media (max-width: 40rem) { .auth { margin-top: 0; } .auth-card { padding: var(--s5) var(--s4); border-radius: var(--radius); } } /* Error and other empty states */ .empty { text-align: center; padding: var(--s7) var(--s5); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); } .empty h3 { margin-bottom: var(--s2); } .empty p { margin-inline: auto; color: var(--muted); } .error-page { text-align: center; padding: var(--s8) var(--s5); border-style: solid; border-color: var(--line); box-shadow: var(--shadow); margin-top: var(--s5); } .error-page h1 { font-size: var(--fs-2xl); } .error-page p:last-child { margin-bottom: 0; margin-top: var(--s5); } .error-page::before { content: ""; display: block; width: 3rem; height: 3rem; margin: 0 auto var(--s5); border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); box-shadow: inset 0 0 0 10px var(--surface-2), inset 0 0 0 12px var(--line-strong); } @media (max-width: 40rem) { .error-page { padding: var(--s7) var(--s4); } } /* Legal pages */ .legal { padding-block: var(--s2) var(--s6); } .legal-version { display: inline-block; padding: .15rem .65rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); } .legal h1 { margin-top: var(--s4); font-size: var(--fs-2xl); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s5); } .legal h2 { margin-top: var(--s7); font-size: var(--fs-xl); } .legal h3 { margin-top: var(--s5); } .legal p, .legal li { line-height: 1.7; } .legal table { font-size: var(--fs-sm); } .legal .table-wrap { margin: var(--s4) 0 var(--s5); } .legal hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; } .legal td, .legal th { min-width: 9rem; } .legal :is(p, li) { overflow-wrap: anywhere; } /* 6. App pages --------------------------------------------------------------------------------- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); } .crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--accent-text); text-decoration: underline; } .crumbs + .app-head, .crumbs + h1, .crumbs + .clock-head { margin-top: 0; } .app-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s5); margin-bottom: var(--s6); } .app-head h1 { margin: 0; overflow-wrap: anywhere; } .app-head .sub { margin: var(--s2) 0 0; color: var(--muted); } .app-head > .actions { margin: 0; gap: var(--s2); } .app-section { margin-top: var(--s7); } .app-section > h2 { font-size: var(--fs-lg); margin-top: 0; } .section-title { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s4); } .section-title h2 { margin: 0; font-size: var(--fs-lg); } .section-title .meta { color: var(--muted); font-size: var(--fs-sm); } @media (max-width: 40rem) { .app-head { margin-bottom: var(--s5); } .app-head > .button, .app-head > .actions { width: 100%; } .app-head > .actions .button { flex: 1 1 auto; min-height: var(--tap); } .app-section { margin-top: var(--s6); } } /* Stat tiles */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s5); } .stats .stat { position: relative; display: flex; flex-direction: column; gap: var(--s1); background: var(--surface); padding: var(--s4) var(--s5); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .stats .stat b { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; } .stats .stat span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; } .stat.attn { border-color: var(--kev-bg); box-shadow: inset 0 3px 0 var(--kev-bg), var(--shadow-sm); } .stat.attn b { color: var(--kev-bg); } @media (max-width: 52rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats .stat { padding: var(--s3) var(--s4); } } /* Running clocks on the dashboard */ .clock-list { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: var(--s2); } .clock-list li { max-width: none; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: var(--s3) var(--s4) var(--s3) 3.25rem; box-shadow: var(--shadow-sm); } .clock-list li::before { content: ""; position: absolute; left: 1.25rem; top: 50%; width: .625rem; height: .625rem; margin-top: -.3125rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .clock-list li:has(.countdown.overdue) { border-left-color: var(--crit); } .clock-list li:has(.countdown.overdue)::before { background: var(--crit); box-shadow: 0 0 0 4px color-mix(in srgb, var(--crit) 22%, transparent); } .clock-list li:has(.chip.soon) { border-left-color: var(--med); } .clock-list li:has(.chip.soon)::before { background: var(--med); box-shadow: 0 0 0 4px color-mix(in srgb, var(--med) 22%, transparent); } .clock-list + .help { margin-bottom: 0; } .app-section + .flash, .app-section + .stats { margin-top: var(--s5); } .clock-list a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 650; overflow-wrap: anywhere; } .chip { display: inline-flex; align-items: center; padding: .25rem .75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 650; font-size: var(--fs-sm); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } .chip.overdue, .countdown.overdue { color: var(--crit); } .chip.overdue { background: var(--crit-bg); border-color: var(--crit-line); } .chip.soon { background: var(--med-bg); color: var(--med); border-color: var(--med-line); } /* Product rows on the dashboard */ .product-grid { display: grid; gap: var(--s3); } .product-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(5.5rem, auto)); gap: var(--s3) var(--s6); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5); box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s; } .product-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow); } .product-row h3 { margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere; } .product-row h3 a { color: var(--accent-text); text-decoration: none; } .product-row h3 a:hover { color: var(--accent-text); text-decoration: underline; } .product-row .v { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); } .product-row .k { display: block; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s1); } .product-row .n { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; } .product-row .n.zero { color: var(--muted); font-weight: 500; } .product-row .span-all { padding-top: var(--s3); border-top: 1px solid var(--line); } @media (max-width: 52rem) { .product-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s4); } .product-row > :first-child { grid-column: 1 / -1; } .product-row h3 a { display: inline-flex; align-items: center; min-height: var(--tap); } } /* Findings filters and tables */ .filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); align-items: center; } .filters .lbl { font-size: var(--fs-sm); color: var(--muted); margin-right: var(--s1); } .filters button { min-height: 2.25rem; padding: .25rem .85rem; font-size: var(--fs-sm); border-radius: 999px; background: var(--surface); color: var(--ink); border-color: var(--line-strong); font-weight: 550; box-shadow: none; } .filters button:hover { background: var(--surface-2); border-color: var(--muted); } .filters button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .filters .count { font-weight: 400; opacity: .8; font-variant-numeric: tabular-nums; } @media (max-width: 48rem) { .filters button { min-height: var(--tap); } } .no-match { display: none; padding: var(--s5); text-align: center; color: var(--muted); } [data-filter-empty] .no-match { display: block; } tr[hidden] { display: none !important; } .findings td.desc { min-width: 16rem; max-width: 30rem; color: var(--muted); } .findings .vid { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 650; } .findings .ids { display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start; } .findings td, .findings th { vertical-align: top; } .findings .button.small { white-space: nowrap; } tr.is-kev { box-shadow: inset 4px 0 0 var(--kev-bg); } tr.is-kev > th, tr.is-kev > td { background: color-mix(in srgb, var(--kev-bg) 5%, transparent); } /* Tables with .table-cards reflow into one card per row on phones; each cell shows its column name from data-label. */ @media (max-width: 40rem) { .table-wrap:has(> table.table-cards) { overflow: visible; background: none; border: 0; box-shadow: none; border-radius: 0; } table.table-cards, table.table-cards tbody { display: block; } table.table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } table.table-cards tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--s4); padding: var(--s4); margin-bottom: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } table.table-cards tr:hover { background: var(--surface); } table.table-cards tr > * { display: block; padding: 0; border: 0; min-width: 0; max-width: none; grid-column: 1 / -1; overflow-wrap: anywhere; } table.table-cards tr > .half { grid-column: auto; } table.table-cards [data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--s1); font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } table.table-cards tr > th[scope=row] { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); font-size: var(--fs-base); } table.table-cards td[colspan] { grid-column: 1 / -1; } table.table-cards tr.is-kev { border-color: var(--kev-bg); box-shadow: inset 4px 0 0 var(--kev-bg), var(--shadow-sm); } table.table-cards tr.is-kev > * { background: none; } .findings td.desc { min-width: 0; max-width: none; } .findings .button.small { width: 100%; min-height: var(--tap); white-space: normal; } .findings .ids { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); } table.table-cards .mono { word-break: break-all; } } /* Upload and scan */ .upload-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow-sm); } .upload-box form > label:first-of-type { margin-top: 0; } .upload-box select { max-width: 24rem; } .upload-box .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } .upload-box .row label:first-child { margin-top: 0; } @media (max-width: 40rem) { .upload-box { padding: var(--s4); } .upload-box .row { grid-template-columns: 1fr; } .upload-box select { max-width: none; } .upload-box button[type=submit] { width: 100%; } } .scan-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); color: var(--muted); font-size: var(--fs-sm); margin: var(--s3) 0; } .scan-line p, .scan-line form { margin: 0; max-width: none; } .scan-line button.link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; } .app-section > details > summary { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent-text); } dl.fields { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); font-size: var(--fs-sm); } dl.fields dt, dl.fields dd { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); margin: 0; } dl.fields dt { font-weight: 600; color: var(--muted); background: var(--surface-2); } dl.fields dd { word-break: break-word; max-width: none; } dl.fields dt:last-of-type, dl.fields dd:last-of-type { border-bottom: 0; } @media (max-width: 40rem) { dl.fields { grid-template-columns: 1fr; } dl.fields dt { border-bottom: 0; padding-bottom: 0; background: none; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; } dl.fields dd { padding-top: var(--s1); } } /* 7. Reporting clock (hero feature) ------------------------------------------------------------ */ .clock-head { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5) var(--s6); margin-bottom: var(--s4); box-shadow: var(--shadow-sm); overflow: hidden; } .clock-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--kev-bg); } .clock-head h1 { margin-bottom: var(--s3); overflow-wrap: anywhere; } .clock-head .eyebrow { display: inline-flex; align-items: center; gap: var(--s2); } .clock-head .eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .clock-head .meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; color: var(--muted); font-size: var(--fs-sm); margin: 0; max-width: none; } .clock-head .meta > span:first-child { font-family: var(--mono); font-size: var(--fs-xs); overflow-wrap: anywhere; } .clock-head .meta strong { color: var(--ink); } @media (max-width: 40rem) { .clock-head { padding: var(--s4) var(--s4) var(--s4) var(--s5); } } .scope-note { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); max-width: none; } .timeline { list-style: none; padding: 0; margin: var(--s5) 0 var(--s6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); counter-reset: tl; } .stage-card { max-width: none; position: relative; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--line-strong); border-radius: var(--radius); padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s1); box-shadow: var(--shadow); } .stage-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); margin-bottom: var(--s1); } .stage-card .when { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .stage-card .name { font-weight: 650; font-size: var(--fs-md); } .stage-card .big { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 720; line-height: 1.15; letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin: var(--s2) 0 0; } .stage-card .due { font-size: var(--fs-sm); color: var(--muted); } .stage-card .progress-line { margin-top: auto; padding-top: var(--s4); font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: var(--s3); font-variant-numeric: tabular-nums; } .stage-card a.go { display: block; padding-block: .7rem; margin-top: var(--s1); font-weight: 600; font-size: var(--fs-sm); line-height: 1.45; align-self: flex-start; } .stage-card a.go::after { content: "\00a0→"; } .stage-card.waiting a.go { margin-top: auto; } .meter { flex: 1; height: .5rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); } .meter > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .meter > i.p0 { width: 0; } .meter > i.p1 { width: 17%; } .meter > i.p2 { width: 33%; } .meter > i.p3 { width: 50%; } .meter > i.p4 { width: 67%; } .meter > i.p5 { width: 83%; } .meter > i.p6 { width: 100%; } /* States: on track = blue, due soon = amber, overdue = red, submitted = green, not started = grey and quiet. Each also has a text chip. */ .stage-card.active { border-top-color: var(--accent); } .stage-card.soon { border-top-color: var(--med); } .stage-card.soon .big { color: var(--med); } .stage-card.soon .meter > i { background: var(--med); } .stage-card.overdue { border-top-color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); } .stage-card.overdue .big { color: var(--crit); } .stage-card.overdue .meter > i { background: var(--crit); } .stage-card.overdue .meter { background: var(--surface); } .stage-card.done { border-top-color: var(--ok); } .stage-card.done .big { color: var(--ok); } .stage-card.done .meter > i { background: var(--ok); } .stage-card.waiting { background: var(--surface-2); border-style: dashed; border-top-style: solid; box-shadow: none; } .stage-card.waiting .big { color: var(--muted); font-size: var(--fs-lg); font-weight: 650; } .state-chip { align-self: flex-start; } .badge.state-chip.plain { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } @media (max-width: 56rem) { .timeline { grid-template-columns: 1fr; } .stage-card .big { font-size: 2rem; } } .calm-note { display: flex; gap: var(--s3); align-items: flex-start; background: var(--accent-soft); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-bottom: var(--s3); max-width: none; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } .calm-note p { margin: 0; max-width: none; } .calm-note svg { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem; fill: none; stroke: var(--accent-text); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 40rem) { .calm-note { padding: var(--s3) var(--s4); } } .stage { padding: 0; margin: var(--s5) 0; box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 5rem; } .stage-top { padding: var(--s4) var(--s5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface-2); } .stage-top h2 { margin: 0; font-size: var(--fs-lg); } .stage-top p { margin: 0; max-width: none; font-size: var(--fs-sm); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; } .stage-top .countdown { font-size: var(--fs-md); color: var(--ink); padding: .15rem .7rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); } .stage-top .countdown.overdue { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); } .stage-body { padding: var(--s5); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); } .stage-body h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-bottom: var(--s3); } .stage-body .col > :last-child { margin-bottom: 0; } .stage-foot { padding: var(--s2) var(--s5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0 var(--s5); font-size: var(--fs-sm); max-width: none; margin: 0; background: var(--surface-2); } .stage-foot a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; } @media (max-width: 52rem) { .stage-body { grid-template-columns: 1fr; gap: var(--s5); } .stage-top, .stage-body, .stage-foot { padding-left: var(--s4); padding-right: var(--s4); } } @media (max-width: 40rem) { .fields-form button[type=submit] { width: 100%; } } .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); } .checklist li { max-width: none; } .checklist form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s1) var(--s3); margin: 0; } button.tick { display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--s3); flex: 1 1 100%; width: 100%; min-height: 3rem; text-align: left; font-weight: 450; font-size: var(--fs-sm); line-height: 1.45; padding: var(--s3) var(--s4); margin: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none; } button.tick:hover { background: var(--surface-2); border-color: var(--line-strong); } button.tick .box { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .05rem; border: 2px solid var(--field); border-radius: 5px; background: var(--surface); display: grid; place-items: center; } button.tick[aria-pressed="true"] { background: var(--ok-bg); border-color: var(--ok-line); } button.tick[aria-pressed="true"] .box { background: var(--ok); border-color: var(--ok); } button.tick[aria-pressed="true"] .box::after { content: ""; width: .3rem; height: .6rem; border: solid var(--surface); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); } button.tick[aria-pressed="true"] .label { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); } .checklist .done-at { flex-basis: 100%; padding-left: calc(var(--s4) + 1.25rem + var(--s3)); font-size: var(--fs-xs); } .fields-form label:first-of-type { margin-top: 0; } .fields-form .actions { margin-top: var(--s4); } .section-corrective { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow-sm); } .section-corrective h2 { margin-top: 0; font-size: var(--fs-lg); } @media (max-width: 40rem) { .section-corrective { padding: var(--s4); } .section-corrective button[type=submit] { width: 100%; } } #pf-h + dl.fields { margin-bottom: var(--s5); } /* Confirm-exploited page */ .timeline-mini { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .timeline-mini li { max-width: none; display: grid; grid-template-columns: 6rem 1fr; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); } .timeline-mini li:last-child { border-bottom: 0; } .timeline-mini b { color: var(--accent-text); font-variant-numeric: tabular-nums; } @media (max-width: 24rem) { .timeline-mini li { grid-template-columns: 1fr; gap: 0; } } .confirm .form-card .actions { margin-top: var(--s5); } .confirm .form-card .actions a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); } @media (max-width: 40rem) { .confirm .form-card .actions button { width: 100%; } .confirm .form-card .actions a { width: 100%; justify-content: center; } } /* Account: settings sections with the heading beside the content on wide screens */ .settings { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--s3) var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); } .settings > h2 { margin: 0; } .settings-body > :last-child { margin-bottom: 0; } .settings-body > form > button { margin-top: var(--s3); } .settings .form-card form > button[type=submit] { width: auto; min-width: 8rem; } @media (max-width: 40rem) { .settings .form-card form > button[type=submit], .settings-body > form > button { width: 100%; } } @media (max-width: 52rem) { .settings { grid-template-columns: 1fr; padding-top: var(--s5); } } .plan-card { display: flex; flex-direction: column; } .plan-card.current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow); } .plan-card .price { font-size: var(--fs-2xl); font-weight: 720; letter-spacing: -.02em; line-height: 1.1; margin-bottom: var(--s3); } .plan-card .price span { font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; color: var(--muted); } .plan-card > p:not(.price) { color: var(--muted); font-size: var(--fs-sm); } .plan-card form { margin-top: auto; } .plan-card form button { width: 100%; margin-top: 0; } .plan-card > p:last-child { margin-top: auto; } code { font-family: var(--mono); font-size: .9em; padding: .1em .35em; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); overflow-wrap: anywhere; } /* Evidence log */ .evidence-actions { margin-bottom: var(--s5); } .evidence-actions a:not(.button) { display: inline-flex; align-items: center; min-height: var(--tap); } td.when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); } main:not(.full) .flashes { padding: 0; } main.full .flashes { padding-top: var(--s4); } .form-card label:first-child { margin-top: 0; } form > input[type=hidden] + label { margin-top: 0; } .span-all { grid-column: 1 / -1; } .app-section:first-child, .clock-first { margin-top: 0; } .app-head h1 .muted { font-weight: 400; } details > .table-wrap { margin-top: var(--s3); } details:has(> .table-wrap) > summary { padding: var(--s2) 0; } .section-title + .filters, .section-title + .table-wrap { margin-top: 0; } #pf-h { font-size: var(--fs-lg); margin-top: 0; } .h-sec { font-size: var(--fs-lg); margin-top: 0; } .plan-card form { margin-top: var(--s3); } .app-section .cards { margin-top: var(--s4); margin-bottom: var(--s4); } /* htmx indicator styles, served from here because the CSP (style-src 'self') blocks htmx's injected