/* ========================================================================== LocateAU - application stylesheet Layered on top of Pico CSS v2 (loaded first, from CDN). Shape lock: panels and cards 12px, inputs 10px, buttons pill. One border per container - no nested bezels. Colour lock: one accent (rust) used across every page and both themes. Theme lock: one theme per page; light by default, dark via prefers-color-scheme. Motion: transform + opacity only, custom cubic-bezier, reduced-motion honoured. Nothing already on screen at load animates in. Width: content fills a 1280px shell; code blocks wrap rather than scroll. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Pico scales the root font up to 21px on wide screens, which inflates every rem in this sheet. Pin it so the type scale below means what it says. */ font-size: 16px; /* Palette - light */ --bg: #f5f5f3; --bg-sunk: #ececeA; --surface: #ffffff; --surface-2: #fafaf8; --ink: #16181a; --ink-soft: #3d4247; --muted: #5c6166; --line: rgba(22, 24, 26, 0.11); --line-strong: rgba(22, 24, 26, 0.2); --accent: #b23a18; --accent-hover: #99310f; --accent-ink: #ffffff; --accent-wash: rgba(178, 58, 24, 0.08); --shadow-ambient: 0 1px 2px rgba(22, 24, 26, 0.04), 0 12px 32px -12px rgba(22, 24, 26, 0.14); --shadow-lift: 0 2px 4px rgba(22, 24, 26, 0.05), 0 24px 56px -20px rgba(22, 24, 26, 0.22); --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* Type */ --font-sans: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace; /* Shape */ --r-shell: 18px; --r-core: 12px; --r-input: 10px; /* Motion */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 220ms; --dur-mid: 420ms; --dur-slow: 780ms; /* Rhythm */ --shell-w: 1280px; --gutter: clamp(1.25rem, 3vw, 2rem); --section-y: clamp(2.75rem, 4.5vw, 4rem); /* Pico overrides so form controls and base type inherit our system */ --pico-font-family: var(--font-sans); --pico-border-radius: var(--r-input); --pico-background-color: var(--bg); --pico-color: var(--ink); --pico-primary: var(--accent); --pico-primary-hover: var(--accent-hover); --pico-primary-background: var(--accent); --pico-primary-inverse: var(--accent-ink); --pico-form-element-background-color: var(--surface); --pico-form-element-border-color: var(--line-strong); --pico-form-element-focus-color: var(--accent); --pico-muted-color: var(--muted); --pico-spacing: 1rem; --pico-typography-spacing-vertical: 1rem; } @media (prefers-color-scheme: dark) { :root { --bg: #0c0e10; --bg-sunk: #08090b; --surface: #141719; --surface-2: #1a1e21; --ink: #e9eae8; --ink-soft: #c4c7c5; --muted: #9aa0a6; --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.18); --accent: #e8623a; --accent-hover: #f2734d; --accent-ink: #180a05; --accent-wash: rgba(232, 98, 58, 0.12); --shadow-ambient: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -16px rgba(0, 0, 0, 0.7); --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.55), 0 28px 64px -22px rgba(0, 0, 0, 0.8); --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07); } } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Pico paints a background on , which stops body's background from propagating to the canvas. The nav's top margin collapses through body, so without this the strip above the nav shows Pico's white, not our page colour. This also fixes the overscroll colour. */ html { background: var(--bg); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Fine grid texture. Fixed and non-interactive so it never repaints on scroll. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 84px 84px; opacity: 0.5; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%); } main, header, footer { position: relative; z-index: 1; } /* Pico pads header/main and spaces sections; our own sections own their rhythm. */ header.nav { padding: 0; } main { margin: 0; padding: 0; } main > section { margin: 0; } h1, h2, h3, h4 { font-weight: 500; color: var(--ink); letter-spacing: -0.03em; line-height: 1.08; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.22em; } a:hover { color: var(--accent); } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .shell { width: 100%; max-width: var(--shell-w); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--sunk { background: var(--bg-sunk); } .section--tight { padding-block: clamp(1.75rem, 3vw, 2.5rem); } /* Pico marks list items with a square; our own classed lists supply their own markers or none at all. Marker only - spacing stays with each component, which would otherwise lose to this rule's higher specificity. */ ul[class] > li { list-style: none; } /* Page header: title and its supporting line share the row instead of leaving the right half of the screen empty. */ .page-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3.5rem); align-items: end; padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line); } .page-intro .display { margin: 0; max-width: 15ch; } .page-intro .lede, .page-intro .body { margin: 0; max-width: 54ch; padding-bottom: 0.2rem; } @media (max-width: 860px) { .page-intro { grid-template-columns: 1fr; align-items: start; } .page-intro .display { max-width: none; } } .rule { height: 1px; border: 0; margin: 0; background: var(--line); } /* -------------------------------------------------------------------------- 3. Type utilities -------------------------------------------------------------------------- */ .display { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -0.032em; line-height: 1.06; font-weight: 500; } .h2 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem); letter-spacing: -0.035em; line-height: 1.1; } .h3 { font-size: clamp(1.02rem, 0.96rem + 0.28vw, 1.15rem); letter-spacing: -0.02em; line-height: 1.25; } .lede { font-size: 1.05rem; line-height: 1.6; color: var(--muted); max-width: 52ch; } .body { color: var(--muted); max-width: 65ch; } .body--tight { max-width: 48ch; } .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.7rem; } .mono { font-family: var(--font-mono); } .endpoint { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: -0.01em; color: var(--muted); display: inline-flex; align-items: center; gap: 0.55rem; } .endpoint b { font-weight: 500; color: var(--accent); } .accent { color: var(--accent); } /* -------------------------------------------------------------------------- 4. Buttons -------------------------------------------------------------------------- */ .btn { --btn-bg: transparent; --btn-fg: var(--ink); --btn-line: var(--line-strong); display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.7rem 0.7rem 1.35rem; border-radius: 999px; border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-sans); font-size: 0.925rem; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; width: auto; margin: 0; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .btn:hover { color: var(--btn-fg); } .btn:active { transform: scale(0.98); } .btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-line: transparent; box-shadow: var(--shadow-ambient); } .btn--primary:hover { --btn-bg: var(--accent-hover); } .btn--ghost:hover { --btn-line: var(--line-strong); background: var(--accent-wash); } .btn--plain { padding: 0.7rem 0; border-color: transparent; background: none; } .btn--plain:hover { color: var(--accent); background: none; } .btn--block { width: 100%; justify-content: center; padding-inline: 1.35rem; } /* Pico stretches buttons inside a form to the full row. */ .btn:not(.btn--block) { width: auto; } .btn--sm { font-size: 0.875rem; padding: 0.5rem 0.5rem 0.5rem 1rem; } .btn--sm .btn__icon { width: 1.5rem; height: 1.5rem; } /* Trailing icon nests inside its own circle, flush with the button's inner padding. */ .btn__icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 0.85rem; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .btn--ghost .btn__icon, .btn--plain .btn__icon { background: var(--accent-wash); } .btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.05); } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } /* -------------------------------------------------------------------------- 5. Panels - one border, one radius. No nested bezels. -------------------------------------------------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-core); } /* Kept so existing markup works, but it draws nothing of its own. */ .panel__inner { border-radius: inherit; overflow: hidden; } /* -------------------------------------------------------------------------- 6. Navigation -------------------------------------------------------------------------- */ .nav { position: sticky; top: clamp(0.75rem, 2vw, 1.25rem); z-index: 40; margin-block-start: clamp(0.75rem, 2vw, 1.25rem); } .nav__bar { display: flex; align-items: center; gap: 1.5rem; height: 64px; padding: 0 0.6rem 0 1.25rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--shadow-ambient); } .nav__brand { display: inline-flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; font-weight: 500; letter-spacing: -0.025em; text-decoration: none; margin-right: auto; } .nav__brand span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; } .nav__links { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .nav__links a { font-size: 0.9rem; color: var(--muted); text-decoration: none; transition: color var(--dur-fast) var(--ease); } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); } .nav__actions { display: flex; align-items: center; gap: 0.5rem; } /* Hamburger: two bars that rotate into an X. */ .nav__toggle { display: none; position: relative; width: 42px; height: 42px; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; } .nav__toggle span { position: absolute; left: 50%; width: 16px; height: 1.5px; margin-left: -8px; background: var(--ink); transition: transform var(--dur-mid) var(--ease), opacity var(--dur-fast) var(--ease); } .nav__toggle span:nth-child(1) { top: 17px; } .nav__toggle span:nth-child(2) { top: 23px; } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); } .nav__sheet { position: fixed; inset: 0; z-index: 39; display: grid; align-content: center; gap: 0.5rem; padding: 2rem var(--gutter) 4rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); opacity: 0; visibility: hidden; transition: opacity var(--dur-mid) var(--ease), visibility var(--dur-mid); } .nav__sheet[data-open="true"] { opacity: 1; visibility: visible; } .nav__sheet a { font-size: 1.75rem; letter-spacing: -0.03em; text-decoration: none; padding-block: 0.5rem; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .nav__sheet[data-open="true"] a { opacity: 1; transform: translateY(0); } .nav__sheet[data-open="true"] a:nth-child(1) { transition-delay: 60ms; } .nav__sheet[data-open="true"] a:nth-child(2) { transition-delay: 110ms; } .nav__sheet[data-open="true"] a:nth-child(3) { transition-delay: 160ms; } .nav__sheet[data-open="true"] a:nth-child(4) { transition-delay: 210ms; } .nav__sheet[data-open="true"] a:nth-child(5) { transition-delay: 260ms; } .nav__sheet[data-open="true"] a:nth-child(6) { transition-delay: 310ms; } @media (max-width: 860px) { .nav__links, .nav__actions .btn--ghost[data-auth] { display: none; } .nav__toggle { display: block; } .nav__bar { padding-right: 0.55rem; } } @media (max-width: 460px) { .nav__bar { gap: 0.75rem; padding-left: 0.9rem; } .nav__brand span { display: none; } } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; padding-block: 1.75rem clamp(2rem, 4vw, 3rem); } .hero__copy { max-width: none; } .hero .display { margin-bottom: 1rem; } .hero .lede { margin-bottom: 1.5rem; max-width: 50ch; } .hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; margin-top: 1.25rem; font-size: 0.825rem; color: var(--muted); } .hero__meta span { display: inline-flex; align-items: center; gap: 0.4rem; } .hero__meta i { color: var(--accent); font-size: 0.95rem; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-block: 1.75rem 2.5rem; } .hero__copy { max-width: 100%; } } /* -------------------------------------------------------------------------- 8. Code sample - one flat card, tabs in the header strip, never scrolls sideways -------------------------------------------------------------------------- */ .sample { border: 1px solid var(--line); border-radius: var(--r-core); background: var(--surface); overflow: hidden; } .sample__radio { position: absolute; opacity: 0; pointer-events: none; } .sample__tabs { display: flex; gap: 1.25rem; padding: 0 0.95rem; border-bottom: 1px solid var(--line); background: var(--surface-2); } .sample__tab { font-size: 0.8rem; color: var(--muted); padding: 0.7rem 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .sample__tab:hover { color: var(--ink); } .sample__pane { display: none; } .sample__radio:nth-of-type(1):checked ~ .sample__tabs .sample__tab:nth-of-type(1), .sample__radio:nth-of-type(2):checked ~ .sample__tabs .sample__tab:nth-of-type(2) { color: var(--ink); border-bottom-color: var(--accent); } .sample__radio:nth-of-type(1):checked ~ .sample__body .sample__pane:nth-of-type(1), .sample__radio:nth-of-type(2):checked ~ .sample__body .sample__pane:nth-of-type(2) { display: block; } .sample__radio:focus-visible ~ .sample__tabs .sample__tab { outline: 2px solid var(--accent); outline-offset: 2px; } /* Long lines wrap rather than opening a horizontal scrollbar. */ pre.code { margin: 0; padding: 1rem 1.1rem; overflow: hidden; background: transparent; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.65; color: var(--ink-soft); tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; } pre.code code { font-family: inherit; background: none; padding: 0; color: inherit; font-size: inherit; } .tok-key { color: var(--muted); } .tok-str { color: var(--accent); } .tok-num { color: var(--ink); } .tok-verb { color: var(--accent); font-weight: 500; } .tok-com { color: var(--muted); opacity: 0.75; } /* -------------------------------------------------------------------------- 9. Stat strip -------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stats > div { padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--line); } .stats > div:first-child { border-left: 0; } .stats dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.65rem; } .stats dd { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .stats small { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--muted); letter-spacing: 0; } @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats > div:nth-child(odd) { border-left: 0; } .stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); } } /* -------------------------------------------------------------------------- 10. Bento - exactly five cells for five endpoints -------------------------------------------------------------------------- */ .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } .bento__cell { grid-column: span 2; display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.5rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-shell); background: var(--surface); box-shadow: var(--inner-highlight); text-decoration: none; transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease); } .bento__cell:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-lift); color: inherit; } .bento__cell--wide { grid-column: span 4; } /* Tinted cells so the grid is not six identical white boxes. */ .bento__cell--tint { background: radial-gradient(120% 140% at 100% 0%, var(--accent-wash), transparent 62%), var(--surface); } .bento__cell--sunk { background: var(--surface-2); } .bento__cell p { color: var(--muted); font-size: 0.925rem; } .bento__cell .h3 { margin-top: 0.15rem; } @media (max-width: 880px) { .bento { grid-template-columns: 1fr; gap: 0.85rem; } .bento__cell, .bento__cell--wide { grid-column: span 1; } } /* -------------------------------------------------------------------------- 11. Statement band -------------------------------------------------------------------------- */ .statement { font-size: clamp(1.6rem, 1rem + 2.6vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.16; max-width: 22ch; font-weight: 500; } .statement em { font-style: italic; font-weight: 500; line-height: 1.1; padding-bottom: 0.08em; display: inline-block; } .statement-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; } @media (max-width: 820px) { .statement-grid { grid-template-columns: 1fr; gap: 2rem; align-items: start; } .statement { max-width: 100%; } } /* -------------------------------------------------------------------------- 12. Steps rail -------------------------------------------------------------------------- */ .rail { display: grid; gap: 0; } .rail__item { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1rem, 4vw, 4rem); padding-block: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--line); } .rail__item:last-child { border-bottom: 1px solid var(--line); } .rail__item p { color: var(--muted); max-width: 58ch; } .rail__item pre.code { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-core); margin-top: 1rem; padding: 0.9rem 1.1rem; font-size: 0.78rem; } @media (max-width: 760px) { .rail__item { grid-template-columns: 1fr; gap: 0.75rem; } } /* -------------------------------------------------------------------------- 13. Plans -------------------------------------------------------------------------- */ .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; } .plan__inner { padding: clamp(1.75rem, 3vw, 2.5rem); } .plan--featured { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 32%, transparent); } .plan__name { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .plan__price { display: flex; align-items: baseline; gap: 0.5rem; margin-block: 1rem 0.35rem; font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .plan__price small { font-size: 0.9rem; color: var(--muted); letter-spacing: 0; } .plan__list { list-style: none; margin: 1.75rem 0 2rem; padding: 0; display: grid; gap: 0.7rem; font-size: 0.925rem; color: var(--muted); } .plan__list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.65rem; align-items: start; } .plan__list i { color: var(--accent); font-size: 0.95rem; line-height: 1.5; } @media (max-width: 820px) { .plans { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 14. Split layout and coverage list -------------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } /* Jurisdiction counts in two columns so the row fills the available width. */ .coverage-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); } .coverage-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); } .coverage-list b { font-family: var(--font-mono); font-weight: 400; font-size: 0.85rem; color: var(--ink); font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .coverage-list { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 15. Product entries (products.html) -------------------------------------------------------------------------- */ /*
inherits Pico's card chrome; this entry is a plain grid row. */ .product { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); margin: 0; padding: clamp(2.25rem, 4vw, 3.25rem) 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; } .product > .panel { align-self: start; } .product__meta { position: sticky; top: 6rem; align-self: start; } .product__meta .h2 { margin-block: 0.9rem 1rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); } .product__meta p { color: var(--muted); max-width: 42ch; } .product__use { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); } .product__use strong { color: var(--ink); font-weight: 500; display: block; margin-bottom: 0.3rem; } .product__note { margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--r-core); background: var(--accent-wash); font-size: 0.875rem; color: var(--ink-soft); } @media (max-width: 900px) { .product { grid-template-columns: 1fr; } .product__meta { position: static; } } /* -------------------------------------------------------------------------- 16. Tables -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border-radius: var(--r-core); } table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0; } table.data th, table.data td { text-align: left; padding: 0.85rem 1.1rem; border: 0; background: none; } table.data thead th { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--line); } table.data tbody td { color: var(--muted); } table.data tbody th { font-weight: 500; color: var(--ink); } table.data tbody tr + tr th, table.data tbody tr + tr td { border-top: 1px solid var(--line); } table.data td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 17. Prose (legal pages) -------------------------------------------------------------------------- */ .prose { max-width: 68ch; } .prose h2 { font-size: 1.35rem; margin-block: 2.75rem 0.9rem; } .prose h2:first-of-type { margin-top: 0; } .prose p { color: var(--muted); margin-bottom: 1rem; } .prose ul { color: var(--muted); padding-left: 1.1rem; margin-bottom: 1rem; } .prose li { margin-bottom: 0.45rem; } .prose strong { color: var(--ink); font-weight: 500; } .notice { padding: 1.1rem 1.35rem; border-radius: var(--r-core); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-wash); font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 2.5rem; } /* -------------------------------------------------------------------------- 18. Auth pages -------------------------------------------------------------------------- */ .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; /* Nav is 84px tall including its top margin, so this fills the viewport exactly and the form never needs scrolling. */ min-height: calc(100dvh - 5.25rem); padding-block: clamp(1.5rem, 3vw, 2.5rem); max-width: 62rem; margin-inline: auto; } .auth__aside { max-width: 34ch; } .auth__aside .h2 { margin-bottom: 1.25rem; } .auth__card { width: 100%; max-width: 26rem; justify-self: end; } .auth__card .panel__inner { padding: clamp(1.5rem, 3vw, 2.25rem); } .auth__card h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } .auth__card .body { font-size: 0.9rem; margin-bottom: 1.75rem; } .auth__foot { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); text-align: center; } .auth__foot a { color: var(--ink); } @media (max-width: 900px) { .auth { grid-template-columns: 1fr; min-height: 0; } .auth__aside { display: none; } .auth__card { justify-self: stretch; max-width: 100%; } } /* -------------------------------------------------------------------------- 19. Forms - label above, helper below label, error below field -------------------------------------------------------------------------- */ .field { display: grid; gap: 0.4rem; margin-bottom: 1.15rem; } .field label { font-size: 0.85rem; font-weight: 500; color: var(--ink); margin: 0; } .field__help { font-size: 0.8rem; color: var(--muted); } .field input { margin: 0; height: 2.9rem; padding-inline: 0.9rem; border-radius: var(--r-input); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 0.95rem; font-family: var(--font-sans); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .field input::placeholder { color: var(--muted); opacity: 0.85; } .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); outline: none; } .field input[aria-invalid="true"] { border-color: var(--accent); } .field__error { font-size: 0.8rem; color: var(--accent); min-height: 1rem; } .field__error:empty { min-height: 0; } .form__error, .form__ok { display: none; padding: 0.8rem 1rem; border-radius: var(--r-input); font-size: 0.875rem; margin-bottom: 1.15rem; } .form__error[data-show="true"], .form__ok[data-show="true"] { display: block; } .form__error { background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); color: var(--ink); } .form__ok { background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink-soft); } /* Button busy state */ .btn:disabled, .btn[aria-disabled="true"] { --btn-bg: var(--bg-sunk); --btn-fg: var(--muted); --btn-line: var(--line-strong); box-shadow: none; cursor: not-allowed; opacity: 1; } .btn:disabled .btn__icon, .btn[aria-disabled="true"] .btn__icon { background: var(--line); } .btn[data-busy="true"] { pointer-events: none; opacity: 0.72; } .btn[data-busy="true"] .btn__label::after { content: ""; display: inline-block; width: 0.5rem; animation: dots 1.2s steps(4, end) infinite; } @keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } /* -------------------------------------------------------------------------- 20. Footer - compact, sits on a sunk band, no oversized gap above it -------------------------------------------------------------------------- */ .footer { border-top: 1px solid var(--line); background: var(--bg-sunk); padding-block: 2.5rem 1.5rem; margin-top: clamp(2.5rem, 4vw, 4rem); } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); } .footer__grid h3 { font-size: 0.8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 0.7rem; } .footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .footer__grid a { font-size: 0.85rem; color: var(--muted); text-decoration: none; } .footer__grid a:hover { color: var(--accent); } .footer__brand .nav__brand { font-size: 0.95rem; } .footer__brand p { font-size: 0.85rem; color: var(--muted); max-width: 34ch; margin-top: 0.6rem; } .footer__base { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); } @media (max-width: 820px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } } /* -------------------------------------------------------------------------- 21. Scroll reveal - only armed when JS is available -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } .js .reveal[data-delay="1"] { transition-delay: 50ms; } .js .reveal[data-delay="2"] { transition-delay: 100ms; } .js .reveal[data-delay="3"] { transition-delay: 150ms; } } /* -------------------------------------------------------------------------- 22. Utilities -------------------------------------------------------------------------- */ .stack-sm > * + * { margin-top: 0.75rem; } .stack > * + * { margin-top: 1.25rem; } .stack-lg > * + * { margin-top: 2.5rem; } .center-narrow { max-width: 44rem; margin-inline: auto; text-align: center; } .center-narrow .lede { margin-inline: auto; } .center-narrow .btn-row { justify-content: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* ========================================================================== 23. Dashboard Denser than the public site on purpose. Same tokens, same shapes, but product-UI patterns rather than landing-page composition. ========================================================================== */ .subnav { border-bottom: 1px solid var(--line); margin-bottom: clamp(2rem, 4vw, 3rem); } .subnav__list { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .subnav__list::-webkit-scrollbar { display: none; } .subnav__list a { display: block; padding: 0.85rem 0.9rem; font-size: 0.9rem; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .subnav__list a:hover { color: var(--ink); } .subnav__list a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } .page-head { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; justify-content: space-between; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .page-head h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); letter-spacing: -0.03em; margin-bottom: 0.4rem; } .page-head p { color: var(--muted); font-size: 0.925rem; max-width: 58ch; } /* Stat tiles */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.85rem; margin-bottom: 1.5rem; } .tile { padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: var(--r-shell); background: var(--surface); box-shadow: var(--inner-highlight); } .tile dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .tile dd { margin: 0; font-size: 1.75rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; } .tile dd small { display: block; margin-top: 0.35rem; font-size: 0.8rem; letter-spacing: 0; color: var(--muted); } /* Quota meter */ .meter { margin-top: 0.85rem; } .meter__track { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; } .meter__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width var(--dur-slow) var(--ease); } /* Status pills. Semantic state only. */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; } .badge--live { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); background: var(--accent-wash); } .badge--off { opacity: 0.75; } /* Data panels */ .data-panel { margin-bottom: 1.5rem; } .data-panel__head { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); } .data-panel__head h2 { font-size: 0.95rem; letter-spacing: -0.01em; } table.data td.key { font-family: var(--font-mono); font-size: 0.82rem; } table.data tbody tr.is-clickable { cursor: pointer; } table.data tbody tr.is-clickable:hover th, table.data tbody tr.is-clickable:hover td { background: var(--accent-wash); } table.data tbody tr[data-selected="true"] th, table.data tbody tr[data-selected="true"] td { background: var(--accent-wash); } /* Loading, empty and error states */ .state { padding: clamp(2rem, 5vw, 3.25rem) 1.25rem; text-align: center; } .state h3 { font-size: 1.05rem; margin-bottom: 0.5rem; } .state p { color: var(--muted); font-size: 0.9rem; max-width: 42ch; margin-inline: auto; } .state .btn-row { justify-content: center; margin-top: 1.35rem; } .skeleton-rows { padding: 0.5rem 1.1rem 1.1rem; } .skeleton { height: 0.85rem; border-radius: 4px; background: var(--line); margin-top: 1rem; } .skeleton--wide { width: 100%; } .skeleton--mid { width: 62%; } .skeleton--short { width: 34%; } @media (prefers-reduced-motion: no-preference) { .skeleton { background: linear-gradient(90deg, var(--line) 0%, var(--surface-2) 50%, var(--line) 100%); background-size: 200% 100%; animation: shimmer 1.6s var(--ease) infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } } /* One-time secret reveal */ .secret { border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); background: var(--accent-wash); border-radius: var(--r-shell); padding: 1.35rem 1.5rem; margin-bottom: 1.5rem; } .secret h2 { font-size: 1.05rem; margin-bottom: 0.4rem; } .secret p { color: var(--ink-soft); font-size: 0.9rem; max-width: 56ch; } .secret__value { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.1rem; } .secret__value code { flex: 1 1 20rem; padding: 0.75rem 0.9rem; border-radius: var(--r-input); border: 1px solid var(--line-strong); background: var(--surface); font-family: var(--font-mono); font-size: 0.85rem; word-break: break-all; color: var(--ink); } /* Filters */ .filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); } .filters .field { margin: 0; gap: 0.3rem; min-width: 9rem; flex: 0 1 auto; } .filters label { font-size: 0.78rem; color: var(--muted); } .filters select, .filters input { margin: 0; height: 2.4rem; /* Pico adds vertical padding to form controls; with a fixed height that pushes the text out of the box. */ padding-block: 0; padding-inline: 0.65rem; line-height: 2.4rem; border-radius: var(--r-input); border: 1px solid var(--line-strong); background-color: var(--surface); color: var(--ink); font-size: 0.875rem; font-family: var(--font-sans); } .filters select { padding-right: 2rem; } .filters .btn { flex: 0 0 auto; } /* Pagination */ .pager { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); } .pager__controls { display: flex; gap: 0.5rem; } .pager button[disabled] { opacity: 0.4; pointer-events: none; } /* Request detail */ .detail__grid { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 0.6rem 1.25rem; font-size: 0.875rem; padding: 1.25rem 1.35rem; } .detail__grid dt { color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.15rem; } .detail__grid dd { margin: 0; font-family: var(--font-mono); font-size: 0.85rem; word-break: break-all; } @media (max-width: 620px) { .detail__grid { grid-template-columns: 1fr; gap: 0.25rem 0; } .detail__grid dd { margin-bottom: 0.85rem; } } /* Two-column dashboard split */ .dash-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; } @media (max-width: 900px) { .dash-split { grid-template-columns: 1fr; } } /* Usage by endpoint */ .barlist { display: grid; gap: 0.9rem; padding: 1.25rem 1.35rem; } .barlist__row { display: grid; gap: 0.4rem; } .barlist__label { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; } .barlist__label span:first-child { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); } .barlist__label span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; } .barlist__bar { height: 3px; border-radius: 999px; background: var(--accent); min-width: 2px; } .btn--danger { --btn-fg: var(--accent); --btn-line: color-mix(in srgb, var(--accent) 38%, transparent); } .btn--danger:hover { background: var(--accent-wash); }