/* ============================================================ Platinum 2.0 — Application Shell & Design System Layered on top of Bootstrap 5.3.3. Sections 01. Tokens (color, spacing, radius, shadow, motion, z-index) 02. Dark-mode token overrides 03. Bootstrap variable bridges 04. Reset / typography 05. App shell layout 06. Sidebar 07. Topbar 08. Impersonation banner 09. Content area & breadcrumbs 10. Page header 11. Cards 12. Tables 13. Stat cards & KPI row 14. Empty state 15. Banners 16. Dropdowns & notifications 17. Tabs 18. Tags & status chips 19. Segmented control 20. Filter bar 21. Toolbar 22. Section header 23. Progress & stepper 24. Skeleton loader 25. Keyboard shortcut 26. Command palette 27. Drawer / sheet 28. Toast 29. Timeline / activity feed 30. Forms 31. Avatars & avatar group 32. Detail layout 33. Buttons polish 34. Anonymous (auth) shell 35. Mobile 36. Print 37. Reduced motion ============================================================ */ /* ── 01. Tokens ─────────────────────────────────────────────── */ :root { color-scheme: light; /* Brand navy — the exact ink of the Platinum wordmark (logos/logo-platinum-horizontal.svg, rgb(13,27,62)). This is the anchor colour for the sidebar and every "brand surface" in the app. */ --pl-brand: #0d1b3e; /* Brand ink ramp + accents — the platinumsystem.com "H27" brand system. navy #0d1b3e is the anchor; ink/void sit under it so navy can read as a raised plane. Persimmon (coral) is the signature accent and stays scarce (≤10% of any surface); sky and sage are the supporting accents. */ --pl-brand-void: #060c1e; --pl-brand-ink: #0a1330; --pl-brand-up: #14244f; --pl-coral: #e8593a; --pl-coral-dark: #c94a2d; --pl-coral-light: #ffab96; --pl-coral-soft: #fdeee9; --pl-sky: #3b86bc; --pl-sky-light: #8bbedd; --pl-sky-soft: #ebf4fb; --pl-sage: #7a9e8e; --pl-sage-light: #a9cfbe; --pl-sage-soft: #f0f5f2; /* Platform accent. WAS #6d5efc (violet) — an invented hue that entered when the .pacct directory kit was mistaken for "the reference". The reference is the public site (platinumsystem.com), whose palette is LOCKED to navy / coral / sky / sage and contains no violet at all. Aliased rather than deleted so the ~35 downstream consumers become on-brand immediately instead of falling back to an unstyled value. */ --pl-accent-2: var(--pl-sky); /* Primary scale — derived from the brand navy above. 900 IS the logo ink; 600 is the lighter navy used for interactive elements (buttons, links, focus rings) so hover/active states still have somewhere to travel. */ --pl-primary-50: #eef2f9; --pl-primary-100: #d5deef; --pl-primary-200: #adbedd; --pl-primary-300: #7d97c6; --pl-primary-400: #5271ab; --pl-primary-500: #33528d; --pl-primary-600: #1e3c72; --pl-primary-700: #17305c; --pl-primary-800: #122549; --pl-primary-900: #0d1b3e; --pl-primary-950: #070f24; /* Aliases (existing — keep for back-compat) */ --pl-primary: var(--pl-primary-600); --pl-primary-hover: var(--pl-primary-700); --pl-primary-soft: var(--pl-primary-50); --pl-primary-ring: rgba(30, 60, 114, 0.18); /* Neutral scale — the brand "ice" ramp (white + cool blue-tinted greys from the marketing site: ice #f7fafd · ice-2 #edf4fb · hair #e3eaf2), running down into the brand ink (#0a1330) and void (#060c1e) at the deep end. */ --pl-neutral-0: #ffffff; --pl-neutral-50: #f7fafd; --pl-neutral-100: #edf4fb; --pl-neutral-200: #e3eaf2; --pl-neutral-300: #c9d6e4; --pl-neutral-400: #93a5bd; --pl-neutral-500: #5f718c; --pl-neutral-600: #49596f; --pl-neutral-700: #364257; --pl-neutral-800: #1e2a44; --pl-neutral-900: #0a1330; --pl-neutral-950: #060c1e; /* Text */ --pl-text: var(--pl-neutral-900); /* was var(--pl-neutral-500) #5f718c — 4.48:1 on --pl-surface-alt, just under AA, and surface-alt is where muted text lives most: table headers, zebra rows, the segmented tab well, chips. #5c6d87 is the smallest step that clears 4.5 (4.74 on alt, 5.26 on surface, 5.02 on bg). The neutral ramp itself is unchanged — --pl-neutral-500 is still #5f718c. */ --pl-text-muted: #5c6d87; --pl-text-subtle: #5b6a86; /* was var(--pl-neutral-400) #94a3b8 — failed WCAG AA on light surfaces */ --pl-text-inverse: var(--pl-neutral-0); /* Surfaces */ --pl-bg: var(--pl-neutral-50); --pl-surface: var(--pl-neutral-0); --pl-surface-alt: var(--pl-neutral-100); /* Alias for tinted bands (zebra rows, chips, insight strips). Defined via --pl-surface-alt so the dark block re-themes it for free — do not give it a literal hex. */ --pl-surface-2: var(--pl-surface-alt); --pl-surface-elevated: var(--pl-neutral-0); --pl-surface-sunken: var(--pl-neutral-100); --pl-overlay: rgba(13, 27, 62, 0.45); /* Borders */ --pl-border: var(--pl-neutral-200); --pl-border-strong: var(--pl-neutral-300); --pl-border-hairline: rgba(13, 27, 62, 0.06); --pl-ring: var(--pl-primary-ring); /* Status colors — mapped onto the brand semantics: success = sage, warning = persimmon-dark, info = sky. Solids are deepened just enough to keep white text ≥4.5:1; the soft/bg tints are the site's own. */ --pl-success: #4e7a66; --pl-success-50: #f0f5f2; --pl-success-soft: #e2ede7; --pl-success-border: #c6dbd0; --pl-success-text: #3a5d4c; --pl-warning: #c94a2d; --pl-warning-50: #fdf4f0; --pl-warning-soft: #fdeee9; --pl-warning-border: #f6cfc2; --pl-warning-text: #a03a22; --pl-danger: #dc2626; --pl-danger-50: #fef2f2; --pl-danger-soft: #fee2e2; --pl-danger-border: #fecaca; --pl-danger-text: #991b1b; --pl-info: #3579aa; --pl-info-50: #f2f8fc; --pl-info-soft: #ebf4fb; --pl-info-border: #c6def0; --pl-info-text: #2b6390; /* Shape — the brand is SQUARE-ish and calm. Measured off the public site: .h27-btn is 4px, .h27-card is 6px, the card icon tile is 8px. Nothing on the site exceeds 8px except a pill. The ramp below previously ran 4→24px and the semantic names below it said 10/14/18, which is why the product read as a rounded 2020-era SaaS app even after its colours were corrected. Everything now lands in the 3–12px band, and the semantic names sit exactly on the site's values. */ --pl-radius-xs: 3px; --pl-radius-sm: 4px; --pl-radius: 6px; --pl-radius-md: 6px; --pl-radius-lg: 8px; --pl-radius-xl: 8px; --pl-radius-2xl: 12px; --pl-radius-pill: 9999px; /* Reach for these by name, not for the numeric ramp. */ --pl-radius-control: 4px; /* buttons, chips, tab segments */ --pl-radius-card: 6px; /* cards, tab strips, panels */ --pl-radius-tile: 8px; /* header tiles, icon tiles */ /* Shadows */ --pl-shadow-xs: 0 1px 1px rgba(13, 27, 62, 0.04); --pl-shadow-sm: 0 1px 2px rgba(13, 27, 62, 0.05); --pl-shadow: 0 1px 3px rgba(13, 27, 62, 0.07), 0 1px 2px rgba(13, 27, 62, 0.04); --pl-shadow-md: 0 4px 6px -1px rgba(13, 27, 62, 0.08), 0 2px 4px -2px rgba(13, 27, 62, 0.05); --pl-shadow-lg: 0 10px 25px -10px rgba(13, 27, 62, 0.18); --pl-shadow-xl: 0 20px 35px -10px rgba(13, 27, 62, 0.22); --pl-shadow-2xl: 0 25px 50px -12px rgba(13, 27, 62, 0.28); --pl-shadow-inner: inset 0 1px 2px rgba(13, 27, 62, 0.05); /* Motion — the site settles rather than snaps. These were Material's curves (0.4,0,0.2,1) at 140ms, which read snappy and utilitarian; the brand's are a long decelerating ease that arrives softly. Durations are unchanged so nothing in the app suddenly feels sluggish. */ --pl-ease: cubic-bezier(0.16, 1, 0.3, 1); --pl-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --pl-ease-in: cubic-bezier(0.4, 0, 1, 1); --pl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --pl-dur-instant: 80ms; --pl-dur-fast: 140ms; --pl-dur-base: 220ms; --pl-dur-slow: 320ms; /* Z-index */ --pl-z-sidebar: 1040; --pl-z-backdrop: 1045; --pl-z-topbar: 1030; --pl-z-dropdown: 1060; --pl-z-drawer: 1070; --pl-z-modal: 1080; --pl-z-toast: 1100; /* Typography */ --pl-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --pl-font-mono: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Display serif — DM Serif Display owns the big headlines on the marketing site; here it carries page titles and hero moments only. Inter keeps everything functional. */ --pl-font-display: "DM Serif Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --pl-fs-xs: 0.6875rem; /* 11 */ --pl-fs-sm: 0.75rem; /* 12 */ --pl-fs-base: 0.875rem; /* 14 */ --pl-fs-md: 0.9375rem; /* 15 */ --pl-fs-lg: 1rem; /* 16 */ --pl-fs-xl: 1.125rem; /* 18 */ --pl-fs-2xl: 1.25rem; /* 20 */ --pl-fs-3xl: 1.5rem; /* 24 */ --pl-fs-4xl: 1.875rem; /* 30 */ --pl-fs-5xl: 2.25rem; /* 36 */ /* Fluid display steps, ported from the site's scale and shrunk for a dense tool (the site's d1 tops out at 58px, which no application page can use). These are for hero/anon/empty-state headlines, not for table chrome. */ --pl-d1: clamp(1.5rem, 2.4vw, 2.125rem); /* 24 → 34 */ --pl-d2: clamp(1.25rem, 1.8vw, 1.625rem); /* 20 → 26 */ --pl-d3: clamp(1.0625rem, 1.3vw, 1.25rem); /* 17 → 20 */ --pl-fw-regular: 400; --pl-fw-medium: 500; --pl-fw-semibold: 600; --pl-fw-bold: 700; /* The eyebrow is weight 800. Without this token every eyebrow-ish rule in the tree hard-coded 800 or gave up and used 600. */ --pl-fw-extrabold: 800; /* ── Name aliases ──────────────────────────────────────────────────── Six token names are referenced across the tree that were never declared here. Every reference guarded itself with a fallback, so nothing looked broken — but each one silently froze a literal (#e7efff, #1d4ed8, 400) that no brand change could ever reach. Declaring them routes those consumers back through the token layer. */ --pl-navy: var(--pl-brand); --pl-border-subtle: var(--pl-border-hairline); --pl-primary-subtle: var(--pl-primary-soft); --pl-fw-normal: var(--pl-fw-regular); --pl-mono: var(--pl-font-mono); --pl-elevation-4: var(--pl-surface-sunken); --pl-lh-tight: 1.2; --pl-lh-snug: 1.35; --pl-lh-base: 1.5; --pl-lh-relaxed: 1.625; /* Spacing scale (companion to Bootstrap) */ --pl-space-0: 0; --pl-space-1: 0.25rem; --pl-space-2: 0.5rem; --pl-space-3: 0.75rem; --pl-space-4: 1rem; --pl-space-5: 1.25rem; --pl-space-6: 1.5rem; --pl-space-8: 2rem; --pl-space-10: 2.5rem; --pl-space-12: 3rem; --pl-space-16: 4rem; --pl-wizard-gap-x: clamp(0.75rem, 1.1vw, 1.25rem); --pl-wizard-gap-y: clamp(0.85rem, 1.3vw, 1.5rem); /* Layout — the content column is deliberately FLUID (.pl-content is width:100% with no cap), so there is no --pl-content-max here. A page that wants a reading measure caps itself; do not reintroduce a global cap. */ --pl-sidebar-w: 260px; --pl-sidebar-rail-w: 76px; --pl-topbar-h: 56px; /* Readability measures — the two the kit already enforces, named so a new surface does not have to re-derive them (hint text 70ch, subtitles 64ch). */ --pl-measure-prose: 70ch; --pl-measure-lede: 64ch; /* ── New: surfaces & elevation ────────────────────────────── */ --pl-elevation-1: var(--pl-surface); --pl-elevation-2: var(--pl-surface); --pl-elevation-3: var(--pl-surface); /* ── New: glass / backdrop ─────────────────────────────────── */ --pl-glass-bg: rgba(255, 255, 255, 0.72); --pl-glass-border: rgba(13, 27, 62, 0.08); --pl-backdrop-blur: 12px; /* ── New: native UI ─────────────────────────────────────────── */ --pl-scrollbar-track: transparent; --pl-scrollbar-thumb: rgba(13, 27, 62, 0.18); --pl-scrollbar-thumb-hover: rgba(13, 27, 62, 0.32); --pl-selection-bg: var(--pl-primary-100); --pl-selection-fg: var(--pl-primary-900); --pl-focus-ring: var(--pl-primary-ring); --pl-focus-ring-offset-color: var(--pl-bg); --pl-accent: var(--pl-primary-600); /* ── New: text variants ────────────────────────────────────── */ --pl-text-strong: var(--pl-neutral-900); /* (existing) --pl-text-inverse: var(--pl-neutral-0); — keep */ /* ── New: "on solid" text (text on solid status/primary fills) ─ */ --pl-on-primary: #ffffff; --pl-on-success: #ffffff; --pl-on-warning: #ffffff; --pl-on-danger: #ffffff; --pl-on-info: #ffffff; /* ── New: status icon colors (between solid and text) ──────── */ --pl-success-icon: var(--pl-success); --pl-warning-icon: var(--pl-warning); --pl-danger-icon: var(--pl-danger); --pl-info-icon: var(--pl-info); /* ── New: extended palette ─────────────────────────────────── */ --pl-primary-light: #33528d; /* used in many gradients */ /* DEPRECATED decorative hues. Purple and pink are not in the locked palette. They existed as first-class tokens, so surfaces kept reaching for them (pipeline_template, permissions_kit, role_matrix, the forms kit, dashboard chart tones). Aliased onto sky and coral so every existing consumer becomes on-brand with no edit; do not reference these names in new code. */ --pl-purple: var(--pl-sky); --pl-purple-soft: var(--pl-sky-soft); --pl-purple-border: var(--pl-info-border); --pl-purple-text: var(--pl-info-text); --pl-pink: var(--pl-coral); --pl-pink-soft: var(--pl-coral-soft); --pl-pink-border: var(--pl-warning-border); --pl-pink-text: var(--pl-warning-text); --pl-cyan: #0891b2; --pl-cyan-soft: #ecfeff; --pl-cyan-border: #a5f3fc; --pl-cyan-text: #0e7490; --pl-rating-star: #f59e0b; --pl-code-bg: #0a1330; /* code blocks intentionally dark in both themes */ --pl-code-fg: #e3eaf2; /* ── New: links (separate from primary) ────────────────────── */ --pl-link: var(--pl-primary); --pl-link-hover: var(--pl-primary-hover); /* ── New: overlays ─────────────────────────────────────────── */ --pl-overlay-strong: rgba(13, 27, 62, 0.6); --pl-overlay-light: rgba(13, 27, 62, 0.25); /* ── New: shadow lift (sticky footers/floating bars) ───────── */ --pl-shadow-lift: 0 -6px 18px rgba(13, 27, 62, 0.06), var(--pl-shadow-sm); /* ── New: input surface (slightly different from card surface) ─ */ --pl-input-bg: var(--pl-surface); --pl-input-bg-hover: var(--pl-primary-50); /* ── New: tint family (auto-flip in dark — high-leverage) ──── */ --pl-primary-tint: var(--pl-primary-50); --pl-primary-tint-hover: var(--pl-primary-100); --pl-primary-on-tint: var(--pl-primary-700); --pl-success-tint: var(--pl-success-soft); --pl-success-on-tint: var(--pl-success-text); /* Completed the set — warning/danger/info had a -soft but no tint pair, so a soft-tint status chip had to reach for two different families depending on the tone. All five now read the same way: --pl-X-tint behind --pl-X-on-tint. Defined through -soft/-text, which the dark block already flips, so these need no dark override of their own. */ --pl-warning-tint: var(--pl-warning-soft); --pl-warning-on-tint: var(--pl-warning-text); --pl-danger-tint: var(--pl-danger-soft); --pl-danger-on-tint: var(--pl-danger-text); --pl-info-tint: var(--pl-info-soft); --pl-info-on-tint: var(--pl-info-text); --pl-neutral-tint: var(--pl-neutral-100); --pl-neutral-on-tint: var(--pl-text-muted); --pl-icon-accent: var(--pl-primary-600); /* ── New: the header-tile recipe (house style §4) ─────────── 56px / 18px radius / violet→navy gradient / white icon. It was hard-coded in .pl-page-header__icon, .pacct-head__tile and a dozen page-level style blocks; naming it means a tile is one token away instead of four values, and the gradient can be retuned in one place. */ --pl-tile-size: 56px; /* The site paints planes flat and separates them with a hairline; it does not use gradient fills or blurred drop shadows on chrome. The tile is therefore the brand navy, flat, in both themes — which is also why its ink stays white in both. Do NOT reach for --pl-on-primary on a tile: that one flips to near-black in dark and would put dark ink on navy. */ --pl-tile-gradient: var(--pl-primary-900); --pl-tile-shadow: none; --pl-on-tile: #ffffff; /* ── New: skeleton shimmer (must be visible in both themes) ── */ --pl-skeleton-from: var(--pl-neutral-100); --pl-skeleton-via: var(--pl-neutral-200); --pl-skeleton-to: var(--pl-neutral-100); /* ── Bootstrap bridges (so .text-muted, .border, .modal, .dropdown etc. follow our theme) ─ */ --bs-body-bg: var(--pl-bg); --bs-body-color: var(--pl-text); --bs-emphasis-color: var(--pl-text-strong); --bs-secondary-bg: var(--pl-surface-alt); --bs-tertiary-bg: var(--pl-surface-sunken); --bs-border-color: var(--pl-border); --bs-border-color-translucent: var(--pl-border-hairline); --bs-link-color: var(--pl-link); --bs-link-hover-color: var(--pl-link-hover); --bs-secondary-color: var(--pl-text-muted); --bs-tertiary-color: var(--pl-text-subtle); --bs-heading-color: var(--pl-text-strong); --bs-code-color: var(--pl-danger-text); --bs-highlight-bg: var(--pl-warning-soft); /* ── Bootstrap SEMANTIC bridge ─────────────────────────────────────── Without these, every .text-bg-success / .bg-warning-subtle / .btn-outline-info / .text-danger in the tree renders STOCK Bootstrap 5.3 — #0d6efd electric blue, #198754 emerald, #ffc107 amber, #0dcaf0 cyan — inside a navy/sage/coral product. 75 templates were affected. The neutrals above were bridged in the 2026-08 pass; the semantics were missed, which is why "token-clean" pages still looked wrong. */ --bs-primary: var(--pl-primary); --bs-primary-rgb: 30, 60, 114; --bs-secondary: var(--pl-text-muted); --bs-success: var(--pl-success); --bs-success-rgb: 78, 122, 102; --bs-warning: var(--pl-warning); --bs-warning-rgb: 201, 74, 45; --bs-danger: var(--pl-danger); --bs-danger-rgb: 220, 38, 38; --bs-info: var(--pl-info); --bs-info-rgb: 53, 121, 170; /* The -subtle / -emphasis / -border triplets back .text-bg-*, .bg-*-subtle and .text-*-emphasis, which the tree uses far more than the solids. */ --bs-primary-bg-subtle: var(--pl-primary-soft); --bs-primary-border-subtle: var(--pl-primary-200); --bs-primary-text-emphasis: var(--pl-primary-700); --bs-success-bg-subtle: var(--pl-success-soft); --bs-success-border-subtle: var(--pl-success-border); --bs-success-text-emphasis: var(--pl-success-text); --bs-warning-bg-subtle: var(--pl-warning-soft); --bs-warning-border-subtle: var(--pl-warning-border); --bs-warning-text-emphasis: var(--pl-warning-text); --bs-danger-bg-subtle: var(--pl-danger-soft); --bs-danger-border-subtle: var(--pl-danger-border); --bs-danger-text-emphasis: var(--pl-danger-text); --bs-info-bg-subtle: var(--pl-info-soft); --bs-info-border-subtle: var(--pl-info-border); --bs-info-text-emphasis: var(--pl-info-text); --bs-secondary-bg-subtle: var(--pl-surface-alt); --bs-secondary-border-subtle: var(--pl-border); --bs-secondary-text-emphasis: var(--pl-text-muted); /* Bootstrap's own shape + focus ring, pulled onto the brand geometry. */ --bs-border-radius: var(--pl-radius); --bs-border-radius-sm: var(--pl-radius-sm); --bs-border-radius-lg: var(--pl-radius-lg); --bs-border-radius-xl: var(--pl-radius-lg); --bs-border-radius-2xl: var(--pl-radius-2xl); --bs-border-radius-pill: var(--pl-radius-pill); } /* ── 02. Dark-mode token overrides ──────────────────────────── */ [data-theme="dark"] { color-scheme: dark; /* Text — bump subtle to pass WCAG */ --pl-text: #eef3f9; --pl-text-muted: #93a5bd; --pl-text-subtle: #8b9cb6; --pl-text-strong: #ffffff; --pl-text-inverse: #0a1330; /* Surfaces — the brand ink ramp from the marketing site: the void (#060c1e) is the canvas, ink (#0a1330) the resting surface, the brand navy (#0d1b3e) one step up, navy-up (#14244f) the raised plane. */ --pl-bg: #060c1e; --pl-surface: #0a1330; --pl-surface-alt: #0d1b3e; --pl-surface-elevated: #14244f; --pl-surface-sunken: #040814; --pl-elevation-1: #0d1b3e; --pl-elevation-2: #14244f; --pl-elevation-3: #1b2f63; /* Borders — must be visible */ --pl-border: rgba(255, 255, 255, 0.12); --pl-border-strong: rgba(255, 255, 255, 0.22); --pl-border-hairline: rgba(255, 255, 255, 0.06); /* Brand alias re-tuned for legibility on dark. The ink ramp swallows the navy scale, so dark mode accents ride on the sky tint (#8bbedd) — the marketing site's own on-dark accent — well above 4.5:1 on the void. */ --pl-primary: #8bbedd; --pl-primary-hover: #a9d2e9; --pl-primary-soft: rgba(59, 134, 188, 0.20); --pl-primary-ring: rgba(139, 190, 221, 0.32); --pl-primary-light: #8bbedd; --pl-on-primary: #071626; /* Status solids — brand semantics with on-dark tints (sage-lt / coral-lt) */ --pl-success: #7a9e8e; --pl-success-soft: rgba(122, 158, 142, 0.16); --pl-success-border: rgba(122, 158, 142, 0.35); --pl-success-text: #a9cfbe; --pl-success-icon: #a9cfbe; --pl-on-success: #0a1a13; --pl-warning: #e8593a; --pl-warning-soft: rgba(201, 74, 45, 0.20); --pl-warning-border: rgba(232, 89, 58, 0.38); --pl-warning-text: #ffab96; --pl-warning-icon: #ffab96; --pl-on-warning: #2b0d05; --pl-danger: #ef4444; --pl-danger-soft: rgba(220, 38, 38, 0.18); --pl-danger-border: rgba(220, 38, 38, 0.35); --pl-danger-text: #f87171; --pl-danger-icon: #f87171; --pl-on-danger: #2d0606; --pl-info: #5fa3d0; --pl-info-soft: rgba(59, 134, 188, 0.20); --pl-info-border: rgba(59, 134, 188, 0.40); --pl-info-text: #8bbedd; --pl-info-icon: #8bbedd; --pl-on-info: #06131e; /* The -50 tints are the palest step of each status ramp and several kits use them as a BACKGROUND (team_management, brand_wizard, the clinic toast). They were defined only in light, so in dark those surfaces stayed near-white with near-white text on them. Flip them to the same translucent wash the -soft step uses, one shade calmer. */ --pl-success-50: rgba(122, 158, 142, 0.10); --pl-warning-50: rgba(201, 74, 45, 0.12); --pl-danger-50: rgba(220, 38, 38, 0.11); --pl-info-50: rgba(59, 134, 188, 0.12); /* Same defect in the brand accent family: the -soft steps are marketing-site paper tints (#fdeee9 / #ebf4fb / #f0f5f2) and read as white plates on the void. The solids themselves stay put — they are already on-dark legible. */ --pl-coral-soft: rgba(232, 89, 58, 0.16); --pl-sky-soft: rgba(59, 134, 188, 0.16); --pl-sage-soft: rgba(122, 158, 142, 0.16); /* Extended palette — deprecated purple/pink, aliased onto sky/coral to match the light block. See the note beside their light-mode declarations. */ --pl-purple-soft: rgba(59, 134, 188, 0.20); --pl-purple-border: rgba(59, 134, 188, 0.35); --pl-purple-text: var(--pl-sky-light); --pl-pink-soft: rgba(232, 89, 58, 0.18); --pl-pink-border: rgba(232, 89, 58, 0.35); --pl-pink-text: var(--pl-coral-light); --pl-cyan-soft: rgba(8, 145, 178, 0.18); --pl-cyan-border: rgba(8, 145, 178, 0.35); --pl-cyan-text: #67e8f9; --pl-rating-star: #fbbf24; --pl-code-bg: #0a1120; --pl-code-fg: #e3eaf2; /* Links — sky tint in dark */ --pl-link: #8bbedd; --pl-link-hover: #a9d2e9; /* Overlays */ --pl-overlay: rgba(3, 7, 20, 0.7); --pl-overlay-strong: rgba(0, 0, 0, 0.78); --pl-overlay-light: rgba(3, 7, 20, 0.4); /* Glass */ --pl-glass-bg: rgba(10, 19, 48, 0.72); --pl-glass-border: rgba(255, 255, 255, 0.08); /* Shadows — cover ALL sizes (xs, sm, base, md, lg, xl, 2xl, inner) */ --pl-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.35); --pl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --pl-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --pl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --pl-shadow-lg: 0 10px 25px -10px rgba(0, 0, 0, 0.6); --pl-shadow-xl: 0 20px 35px -10px rgba(0, 0, 0, 0.7); --pl-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8); --pl-shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.45); --pl-shadow-lift: 0 -6px 18px rgba(0, 0, 0, 0.45), var(--pl-shadow-sm); /* Native UI */ --pl-accent: #8bbedd; --pl-focus-ring: rgba(139, 190, 221, 0.40); --pl-focus-ring-offset-color: var(--pl-bg); --pl-scrollbar-track: transparent; --pl-scrollbar-thumb: rgba(255, 255, 255, 0.14); --pl-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28); --pl-selection-bg: rgba(59, 134, 188, 0.45); --pl-selection-fg: #eef3f9; /* Inputs */ --pl-input-bg: rgba(255, 255, 255, 0.03); --pl-input-bg-hover: rgba(59, 134, 188, 0.12); /* Tint family (auto-flips) */ --pl-primary-tint: rgba(59, 134, 188, 0.16); --pl-primary-tint-hover: rgba(59, 134, 188, 0.28); --pl-primary-on-tint: #8bbedd; --pl-success-tint: rgba(122, 158, 142, 0.18); --pl-success-on-tint: #a9cfbe; --pl-neutral-tint: rgba(255, 255, 255, 0.06); --pl-icon-accent: #8bbedd; /* Skeleton */ --pl-skeleton-from: #0d1b3e; --pl-skeleton-via: #1b2f63; --pl-skeleton-to: #0d1b3e; /* Tile (DS-09, 2026-09-23). The flat navy tile (#0d1b3e) on the void (#060c1e) measured ~1.14:1 and was the same colour as --pl-surface-alt, so the header tile vanished on every alt band in dark. Raised to the brand-up step and edged with the theme hairline so it reads as a plane; ink stays white. */ --pl-tile-gradient: var(--pl-brand-up); --pl-tile-shadow: inset 0 0 0 1px var(--pl-border); /* Bootstrap -rgb bridges follow the solids they bridge. Without these, .bg-primary / .bg-opacity-* / .text-bg-* and the .btn focus ring painted light-mode navy on ink while --pl-primary had flipped to sky. */ --bs-primary-rgb: 139, 190, 221; --bs-success-rgb: 122, 158, 142; --bs-warning-rgb: 232, 89, 58; --bs-danger-rgb: 239, 68, 68; --bs-info-rgb: 95, 163, 208; } /* ── Theme-swap transition lock (toggled by PL.theme JS) ────── */ html.pl-theme-switching *, html.pl-theme-switching *::before, html.pl-theme-switching *::after { transition: none !important; animation-duration: 0s !important; } /* ── 03. Bootstrap variable bridges ─────────────────────────── */ .btn-primary { --bs-btn-bg: var(--pl-primary); --bs-btn-color: var(--pl-on-primary); --bs-btn-border-color: var(--pl-primary); --bs-btn-hover-bg: var(--pl-primary-hover); --bs-btn-hover-color: var(--pl-on-primary); --bs-btn-hover-border-color: var(--pl-primary-hover); --bs-btn-active-bg: var(--pl-primary-hover); --bs-btn-active-color: var(--pl-on-primary); --bs-btn-active-border-color: var(--pl-primary-hover); --bs-btn-disabled-bg: var(--pl-primary); --bs-btn-disabled-color: var(--pl-on-primary); --bs-btn-disabled-border-color: var(--pl-primary); } .btn-outline-primary { --bs-btn-color: var(--pl-primary); --bs-btn-border-color: var(--pl-primary); --bs-btn-hover-bg: var(--pl-primary); --bs-btn-hover-color: var(--pl-on-primary); --bs-btn-hover-border-color: var(--pl-primary); --bs-btn-active-bg: var(--pl-primary); --bs-btn-active-color: var(--pl-on-primary); --bs-btn-active-border-color: var(--pl-primary); --bs-btn-disabled-color: var(--pl-primary); --bs-btn-disabled-border-color: var(--pl-primary); } .btn-primary, .btn-outline-primary { /* Reads the bridge so the ring follows the theme (sky in dark). */ --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } /* Secondary / light — neutral surfaces */ .btn-secondary { --bs-btn-bg: var(--pl-surface-alt); --bs-btn-color: var(--pl-text); --bs-btn-border-color: var(--pl-border-strong); --bs-btn-hover-bg: var(--pl-surface-elevated); --bs-btn-hover-color: var(--pl-text); --bs-btn-hover-border-color: var(--pl-border-strong); --bs-btn-active-bg: var(--pl-surface-elevated); --bs-btn-active-color: var(--pl-text); --bs-btn-active-border-color: var(--pl-border-strong); --bs-btn-disabled-bg: var(--pl-surface-sunken); --bs-btn-disabled-color: var(--pl-text-subtle); --bs-btn-disabled-border-color: var(--pl-border); } .btn-light { --bs-btn-bg: var(--pl-surface); --bs-btn-color: var(--pl-text); --bs-btn-border-color: var(--pl-border); --bs-btn-hover-bg: var(--pl-surface-alt); --bs-btn-hover-color: var(--pl-text); --bs-btn-hover-border-color: var(--pl-border-strong); --bs-btn-active-bg: var(--pl-surface-alt); --bs-btn-active-color: var(--pl-text); --bs-btn-active-border-color: var(--pl-border-strong); --bs-btn-disabled-bg: var(--pl-surface-sunken); --bs-btn-disabled-color: var(--pl-text-subtle); --bs-btn-disabled-border-color: var(--pl-border); } /* Status solid buttons */ .btn-success { --bs-btn-bg: var(--pl-success); --bs-btn-color: var(--pl-on-success); --bs-btn-border-color: var(--pl-success); --bs-btn-hover-bg: var(--pl-success); --bs-btn-hover-color: var(--pl-on-success); --bs-btn-hover-border-color: var(--pl-success); --bs-btn-active-bg: var(--pl-success); --bs-btn-active-color: var(--pl-on-success); --bs-btn-active-border-color: var(--pl-success); --bs-btn-disabled-bg: var(--pl-success); --bs-btn-disabled-color: var(--pl-on-success); --bs-btn-disabled-border-color: var(--pl-success); --bs-btn-focus-shadow-rgb: 78, 122, 102; } .btn-warning { --bs-btn-bg: var(--pl-warning); --bs-btn-color: var(--pl-on-warning); --bs-btn-border-color: var(--pl-warning); --bs-btn-hover-bg: var(--pl-warning); --bs-btn-hover-color: var(--pl-on-warning); --bs-btn-hover-border-color: var(--pl-warning); --bs-btn-active-bg: var(--pl-warning); --bs-btn-active-color: var(--pl-on-warning); --bs-btn-active-border-color: var(--pl-warning); --bs-btn-disabled-bg: var(--pl-warning); --bs-btn-disabled-color: var(--pl-on-warning); --bs-btn-disabled-border-color: var(--pl-warning); --bs-btn-focus-shadow-rgb: 201, 74, 45; } .btn-danger { --bs-btn-bg: var(--pl-danger); --bs-btn-color: var(--pl-on-danger); --bs-btn-border-color: var(--pl-danger); --bs-btn-hover-bg: var(--pl-danger); --bs-btn-hover-color: var(--pl-on-danger); --bs-btn-hover-border-color: var(--pl-danger); --bs-btn-active-bg: var(--pl-danger); --bs-btn-active-color: var(--pl-on-danger); --bs-btn-active-border-color: var(--pl-danger); --bs-btn-disabled-bg: var(--pl-danger); --bs-btn-disabled-color: var(--pl-on-danger); --bs-btn-disabled-border-color: var(--pl-danger); --bs-btn-focus-shadow-rgb: 220, 38, 38; } .btn-info { --bs-btn-bg: var(--pl-info); --bs-btn-color: var(--pl-on-info); --bs-btn-border-color: var(--pl-info); --bs-btn-hover-bg: var(--pl-info); --bs-btn-hover-color: var(--pl-on-info); --bs-btn-hover-border-color: var(--pl-info); --bs-btn-active-bg: var(--pl-info); --bs-btn-active-color: var(--pl-on-info); --bs-btn-active-border-color: var(--pl-info); --bs-btn-disabled-bg: var(--pl-info); --bs-btn-disabled-color: var(--pl-on-info); --bs-btn-disabled-border-color: var(--pl-info); --bs-btn-focus-shadow-rgb: 53, 121, 170; } /* Outline status buttons */ .btn-outline-secondary { --bs-btn-color: var(--pl-text); --bs-btn-border-color: var(--pl-border-strong); --bs-btn-hover-bg: var(--pl-surface-alt); --bs-btn-hover-color: var(--pl-text); --bs-btn-hover-border-color: var(--pl-border-strong); --bs-btn-active-bg: var(--pl-surface-alt); --bs-btn-active-color: var(--pl-text); --bs-btn-active-border-color: var(--pl-border-strong); --bs-btn-disabled-color: var(--pl-text-subtle); --bs-btn-disabled-border-color: var(--pl-border); } .btn-outline-light { --bs-btn-color: var(--pl-text); --bs-btn-border-color: var(--pl-border); --bs-btn-hover-bg: var(--pl-surface-alt); --bs-btn-hover-color: var(--pl-text); --bs-btn-hover-border-color: var(--pl-border-strong); --bs-btn-active-bg: var(--pl-surface-alt); --bs-btn-active-color: var(--pl-text); --bs-btn-active-border-color: var(--pl-border-strong); --bs-btn-disabled-color: var(--pl-text-subtle); --bs-btn-disabled-border-color: var(--pl-border); } .btn-outline-success { --bs-btn-color: var(--pl-success-text); --bs-btn-border-color: var(--pl-success); --bs-btn-hover-bg: var(--pl-success); --bs-btn-hover-color: var(--pl-on-success); --bs-btn-hover-border-color: var(--pl-success); --bs-btn-active-bg: var(--pl-success); --bs-btn-active-color: var(--pl-on-success); --bs-btn-active-border-color: var(--pl-success); --bs-btn-disabled-color: var(--pl-success-text); --bs-btn-disabled-border-color: var(--pl-success); --bs-btn-focus-shadow-rgb: 78, 122, 102; } .btn-outline-warning { --bs-btn-color: var(--pl-warning-text); --bs-btn-border-color: var(--pl-warning); --bs-btn-hover-bg: var(--pl-warning); --bs-btn-hover-color: var(--pl-on-warning); --bs-btn-hover-border-color: var(--pl-warning); --bs-btn-active-bg: var(--pl-warning); --bs-btn-active-color: var(--pl-on-warning); --bs-btn-active-border-color: var(--pl-warning); --bs-btn-disabled-color: var(--pl-warning-text); --bs-btn-disabled-border-color: var(--pl-warning); --bs-btn-focus-shadow-rgb: 201, 74, 45; } .btn-outline-danger { --bs-btn-color: var(--pl-danger-text); --bs-btn-border-color: var(--pl-danger); --bs-btn-hover-bg: var(--pl-danger); --bs-btn-hover-color: var(--pl-on-danger); --bs-btn-hover-border-color: var(--pl-danger); --bs-btn-active-bg: var(--pl-danger); --bs-btn-active-color: var(--pl-on-danger); --bs-btn-active-border-color: var(--pl-danger); --bs-btn-disabled-color: var(--pl-danger-text); --bs-btn-disabled-border-color: var(--pl-danger); --bs-btn-focus-shadow-rgb: 220, 38, 38; } .btn-outline-info { --bs-btn-color: var(--pl-info-text); --bs-btn-border-color: var(--pl-info); --bs-btn-hover-bg: var(--pl-info); --bs-btn-hover-color: var(--pl-on-info); --bs-btn-hover-border-color: var(--pl-info); --bs-btn-active-bg: var(--pl-info); --bs-btn-active-color: var(--pl-on-info); --bs-btn-active-border-color: var(--pl-info); --bs-btn-disabled-color: var(--pl-info-text); --bs-btn-disabled-border-color: var(--pl-info); --bs-btn-focus-shadow-rgb: 53, 121, 170; } /* Dark mode: button-color refinements */ [data-theme="dark"] .btn-primary { --bs-btn-color: var(--pl-on-primary); --bs-btn-hover-color: var(--pl-on-primary); --bs-btn-active-color: var(--pl-on-primary); } [data-theme="dark"] .btn-light { --bs-btn-bg: var(--pl-surface-alt); --bs-btn-color: var(--pl-text); --bs-btn-border-color: var(--pl-border); --bs-btn-hover-bg: var(--pl-surface-elevated); --bs-btn-hover-color: var(--pl-text); --bs-btn-hover-border-color: var(--pl-border-strong); --bs-btn-active-bg: var(--pl-surface-elevated); --bs-btn-disabled-bg: var(--pl-surface-sunken); --bs-btn-disabled-color: var(--pl-text-subtle); } [data-theme="dark"] .btn-secondary { --bs-btn-bg: var(--pl-surface-alt); --bs-btn-color: var(--pl-text); --bs-btn-border-color: var(--pl-border-strong); --bs-btn-hover-bg: var(--pl-surface-elevated); --bs-btn-hover-color: var(--pl-text); --bs-btn-hover-border-color: var(--pl-border-strong); } [data-theme="dark"] .btn:disabled, [data-theme="dark"] .btn.disabled { opacity: 0.55; } /* Bootstrap utility overrides for dark mode */ [data-theme="dark"] .bg-white { background-color: var(--pl-surface) !important; color: var(--pl-text) !important; } [data-theme="dark"] .bg-light { background-color: var(--pl-surface-alt) !important; color: var(--pl-text) !important; } [data-theme="dark"] .bg-body { background-color: var(--pl-bg) !important; } [data-theme="dark"] .bg-body-tertiary, [data-theme="dark"] .bg-body-secondary { background-color: var(--pl-surface-alt) !important; } [data-theme="dark"] .text-dark { color: var(--pl-text) !important; } [data-theme="dark"] .text-black { color: var(--pl-text-strong) !important; } [data-theme="dark"] .text-body-secondary { color: var(--pl-text-muted) !important; } [data-theme="dark"] .shadow-sm { box-shadow: var(--pl-shadow-sm) !important; } [data-theme="dark"] .shadow { box-shadow: var(--pl-shadow) !important; } [data-theme="dark"] .shadow-lg { box-shadow: var(--pl-shadow-lg) !important; } [data-theme="dark"] .border { border-color: var(--pl-border) !important; } [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--pl-border) !important; } [data-theme="dark"] hr { border-color: var(--pl-border); opacity: 1; } a { color: var(--pl-link); text-decoration: none; } a:hover { color: var(--pl-link-hover); } /* ── 04. Reset / typography ─────────────────────────────────── */ html, body { height: 100%; } body { background: var(--pl-bg); color: var(--pl-text); font-family: var(--pl-font-sans); font-size: var(--pl-fs-base); line-height: var(--pl-lh-base); font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .tabular-nums, .pl-num { font-variant-numeric: tabular-nums; } h1, h2, h3, h4, h5, h6 { color: var(--pl-text); font-weight: var(--pl-fw-semibold); letter-spacing: -0.011em; line-height: var(--pl-lh-tight); } h1 { font-size: var(--pl-fs-3xl); font-weight: var(--pl-fw-bold); } h2 { font-size: var(--pl-fs-2xl); font-weight: var(--pl-fw-bold); } h3 { font-size: var(--pl-fs-xl); } h4 { font-size: var(--pl-fs-lg); } h5 { font-size: var(--pl-fs-md); } h6 { font-size: var(--pl-fs-base); } .text-muted { color: var(--pl-text-muted) !important; } .text-subtle { color: var(--pl-text-subtle) !important; } .label-caps { font-size: var(--pl-fs-xs); font-weight: var(--pl-fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pl-text-subtle); } /* Focus — ONE ring for the kit (2026-09-23). A crisp 2px outline in the primary plus a soft --pl-focus-ring halo (the token flips to sky in dark). .btn is named so this beats Bootstrap's own .btn:focus-visible, which zeroes the outline; form controls keep their :focus ring (§05, higher specificity, by design). Component rules that need to keep an inset hairline under the ring (a.pl-stat, a.pl-kpi) restate the shadow with both layers. */ .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, :focus-visible { outline: 2px solid var(--pl-primary); outline-offset: 2px; box-shadow: 0 0 0 3px var(--pl-focus-ring); } .form-control, .form-select { /* background-COLOR, not the `background` shorthand: the shorthand resets background-repeat/position/size, which wipes the .form-select dropdown chevron's no-repeat and makes the SVG tile across the whole field. */ background-color: var(--pl-surface); color: var(--pl-text); border-color: var(--pl-border); } .form-control:focus, .form-select:focus { border-color: var(--pl-primary); box-shadow: 0 0 0 3px var(--pl-primary-ring); background-color: var(--pl-surface); color: var(--pl-text); } .form-control::placeholder { color: var(--pl-text-subtle); } .form-label { font-weight: var(--pl-fw-medium); font-size: var(--pl-fs-base); color: var(--pl-text); } /* ── Native UI: selection, scrollbars, accent, autofill ────── */ ::selection { background: var(--pl-selection-bg); color: var(--pl-selection-fg); } ::-moz-selection { background: var(--pl-selection-bg); color: var(--pl-selection-fg); } html { scrollbar-color: var(--pl-scrollbar-thumb) var(--pl-scrollbar-track); scrollbar-width: thin; } ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: var(--pl-scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--pl-scrollbar-thumb); border-radius: 999px; border: 1px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--pl-scrollbar-thumb-hover); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Accent on native controls */ input, textarea, select, progress { accent-color: var(--pl-accent); } /* Autofill */ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--pl-input-bg) inset; -webkit-text-fill-color: var(--pl-text); caret-color: var(--pl-text); transition: background-color 5000s ease-in-out 0s; } [data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] textarea:-webkit-autofill, [data-theme="dark"] select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--pl-surface-alt) inset; } /* Dark mode: native date/time picker indicator inversion */ [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(0.85); opacity: 0.7; } /* Dark mode: Bootstrap form-select chevron. Repeat/position/size are restated here (not just background-image): surfaces that swap in the dark chevron without Bootstrap's base .form-select rule (e.g. wizards loading brand_wizard.css) would otherwise tile the SVG across the whole field. */ [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238c9bb3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; } /* Disabled controls */ .form-control:disabled, .form-select:disabled, .form-check-input:disabled { background-color: var(--pl-surface-sunken); color: var(--pl-text-subtle); border-color: var(--pl-border); cursor: not-allowed; } /* ── 05. App shell layout ───────────────────────────────────── */ /* Pre-paint state restore (see the sidebar bootstrap in base.html): freeze all motion until the first frame is on screen, so a restored collapsed sidebar appears already collapsed instead of sliding shut on every page load. */ .pl-boot *, .pl-boot *::before, .pl-boot *::after { transition: none !important; animation: none !important; } .pl-app { display: grid; grid-template-columns: var(--pl-sidebar-w) 1fr; min-height: 100vh; transition: grid-template-columns var(--pl-dur-base) var(--pl-ease); } .pl-main { display: flex; flex-direction: column; min-width: 0; } /* ── 06. Sidebar ────────────────────────────────────────────── */ /* Brand navy gradient — anchored on the logo ink #0d1b3e (var(--pl-brand), logos/logo-platinum-horizontal.svg). A slightly lifted navy at the top settles into the exact brand navy, then deepens to near-black with a soft fade-out at the bottom. */ .pl-sidebar { /* A FLAT ink plane. The site builds contrast by stacking solid bands (.h27-act--ink / --void) and separating them with a hairline; it uses no gradient fills and no drop shadows on chrome anywhere. A vertical navy gradient under a 12px black shadow is the 2018-2020 admin-template signature and was the single most dating detail in the shell. */ background: var(--pl-brand-ink); border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: var(--pl-z-sidebar); display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.08) transparent; } .pl-sidebar::-webkit-scrollbar { width: 3px; } .pl-sidebar::-webkit-scrollbar-track { background: transparent; } .pl-sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.08); border-radius: var(--pl-radius-pill); } .pl-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.2); } /* The bottom fade existed to hide the seam where the sidebar gradient met the viewport edge. The plane is flat now, so there is no seam and the fade only dimmed the last nav item. Removed. */ .pl-sidebar__brand { display: flex; align-items: center; gap: 0.625rem; padding: 0 1rem; height: var(--pl-topbar-h); border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-weight: var(--pl-fw-bold); font-size: 1.375rem; color: #fff; text-decoration: none; letter-spacing: 0.04em; flex-shrink: 0; } .pl-sidebar__brand:hover { color: #fff; } /* Two cuts of the same logo: the horizontal wordmark when the sidebar is expanded, the icon-only mark in the collapsed rail. Exactly one is visible at a time — the rail swap lives in the collapsed block further down. */ .pl-sidebar__brand-wordmark { height: 26px; width: auto; max-width: 100%; display: block; flex: 0 1 auto; min-width: 0; object-fit: contain; object-position: left center; transition: transform var(--pl-dur-fast) var(--pl-ease); } .pl-sidebar__brand-mark { height: 30px; width: 30px; display: none; flex-shrink: 0; object-fit: contain; transition: transform var(--pl-dur-fast) var(--pl-ease); } .pl-sidebar__brand:hover .pl-sidebar__brand-wordmark, .pl-sidebar__brand:hover .pl-sidebar__brand-mark { transform: scale(1.04); } .pl-sidebar__brand-tier { margin-left: auto; font-size: 0.5625rem; line-height: 1; font-weight: var(--pl-fw-semibold); letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 0.1rem 0.375rem; } .pl-sidebar__brand:hover .pl-sidebar__brand-tier { background: rgba(255, 255, 255, 0.16); color: #fff; } .pl-sidebar__tenant { margin: 0.5rem 0.75rem; padding: 0.5rem 0.625rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--pl-radius); display: flex; align-items: center; gap: 0.5rem; font-size: var(--pl-fs-sm); color: rgba(255, 255, 255, 0.92); cursor: pointer; transition: background-color var(--pl-dur-fast) var(--pl-ease); text-decoration: none; } .pl-sidebar__tenant:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .pl-sidebar__tenant .bi { color: rgba(255, 255, 255, 0.75); } .pl-sidebar__tenant-name { flex: 1 1 auto; font-weight: var(--pl-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pl-sidebar__tenant-tier { font-size: var(--pl-fs-xs); color: rgba(255, 255, 255, 0.6); text-transform: capitalize; } .pl-sidebar__search { padding: 0 0.75rem 0.5rem; position: relative; } .pl-sidebar__search input { width: 100%; height: 32px; padding: 0 0.625rem 0 2rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--pl-radius-sm); font-size: var(--pl-fs-sm); color: #fff; } .pl-sidebar__search input::placeholder { color: rgba(255, 255, 255, 0.5); } .pl-sidebar__search input:focus { background: rgba(255, 255, 255, 0.1); /* A 25%-alpha sky ring was all but invisible against the navy rail. The replacement ring for a cancelled outline has to be readable on the surface it actually sits on, which here is the darkest plane in the app. */ border-color: var(--pl-sky-light); box-shadow: 0 0 0 3px rgba(139, 190, 221, 0.45); outline: none; } .pl-sidebar__search .bi { position: absolute; left: 1.375rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; pointer-events: none; } .pl-sidebar__nav { padding: 0.25rem 0.5rem 1rem; flex: 1 1 auto; } .pl-sidebar__section-label { padding: 0.875rem 0.875rem 0.25rem; font-size: var(--pl-fs-xs); font-weight: var(--pl-fw-bold); letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; display: flex; align-items: center; gap: 0.375rem; } .pl-sidebar__section-label .bi { font-size: 0.75rem; opacity: 0.6; } .pl-sidebar__group { margin-top: 0.125rem; } .pl-sidebar__group-label { padding: 0.5rem 0.875rem 0.25rem; font-size: 0.625rem; font-weight: var(--pl-fw-semibold); letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; cursor: default; user-select: none; border-radius: var(--pl-radius-sm); } /* The plain label is a non-interactive caption (cursor:default, no tabindex), so cancelling its outline costs nothing. The [data-pl-group-toggle] variant below IS a control, and this blanket rule was silently stripping its focus ring too — a keyboard user collapsing a nav group had no indicator. */ .pl-sidebar__group-label:focus { outline: none; } .pl-sidebar__group-label:focus-visible { outline: none; } .pl-sidebar__group-label[data-pl-group-toggle]:focus-visible { /* The rail is the brand navy in both themes, so the ring is on-dark ink, not --pl-primary-ring (which is tuned for light surfaces). */ box-shadow: 0 0 0 2px rgba(139, 190, 221, 0.65); } /* Collapsible section header — interactive variant (e.g. SUBSCRIPTIONS). */ .pl-sidebar__group-label[data-pl-group-toggle] { cursor: pointer; transition: color var(--pl-dur-fast) var(--pl-ease), background-color var(--pl-dur-fast) var(--pl-ease); } .pl-sidebar__group-label[data-pl-group-toggle]:hover { color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.04); } .pl-sidebar__group-label[data-pl-group-toggle]:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.3); outline-offset: -2px; } /* Caret: hidden on plain labels, shown + rotating on collapsible headers. */ .pl-sidebar__group-label .caret { display: none; } .pl-sidebar__group-label[data-pl-group-toggle] .caret { display: inline-block; font-size: 0.6rem; color: rgba(255, 255, 255, 0.35); transition: transform var(--pl-dur-fast) var(--pl-ease), color var(--pl-dur-fast) var(--pl-ease); } .pl-sidebar__group-label[data-pl-group-toggle]:hover .caret { color: rgba(255, 255, 255, 0.7); } .pl-sidebar__group.is-collapsed > .pl-sidebar__group-label[data-pl-group-toggle] .caret { transform: rotate(-90deg); } .pl-sidebar__group.is-collapsed .pl-sidebar__items { display: none; } /* ── Nested sidebar groups (two-level menus, e.g. Digital Presence) ── */ .pl-sidebar__group-icon { display: inline-block; font-size: 0.75rem; margin-right: 0.4rem; opacity: 0.7; vertical-align: -1px; } .pl-sidebar__group--nested { margin-top: 0.125rem; } /* Category rows: icon sits in the same fixed 20px column as leaf-item icons so every glyph in the sidebar lines up vertically. */ .pl-sidebar__group-label--nested > span { display: flex; align-items: center; gap: 0.625rem; min-width: 0; overflow: hidden; } .pl-sidebar__group-label--nested .pl-sidebar__group-icon { font-size: 1.1rem; width: 20px; text-align: center; margin-right: 0; opacity: 0.85; flex-shrink: 0; vertical-align: baseline; } .pl-sidebar__group-label--nested { /* Look like a regular .pl-sidebar__item row — including the 3px active rail a link reserves, so branch and leaf glyphs share one vertical column. */ margin-left: 1px; border-left: 3px solid transparent; padding: 0.4375rem 0.75rem 0.4375rem 0.875rem; font-size: var(--pl-fs-md); font-weight: var(--pl-fw-medium); letter-spacing: normal; color: rgba(255, 255, 255, 0.85); text-transform: none; border-radius: var(--pl-radius-sm); cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; transition: background-color var(--pl-dur-fast) var(--pl-ease), color var(--pl-dur-fast) var(--pl-ease); } .pl-sidebar__group-label--nested:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .pl-sidebar__group-label--nested:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.3); outline-offset: -2px; } .pl-sidebar__group-label--nested .caret { display: inline-block; font-size: 0.65rem; color: rgba(255, 255, 255, 0.5); transition: transform var(--pl-dur-fast) var(--pl-ease); } .pl-sidebar__group-label--nested:hover .caret { color: rgba(255, 255, 255, 0.85); } .pl-sidebar__group--nested.is-collapsed > .pl-sidebar__group-label--nested .caret { transform: rotate(-90deg); } .pl-sidebar__items--nested { margin-left: 1.125rem; padding-left: 0.375rem; border-left: 1px solid rgba(255, 255, 255, 0.06); } .pl-sidebar__items--nested .pl-sidebar__item { padding-left: 0.5rem; font-size: var(--pl-fs-base); color: rgba(255, 255, 255, 0.7); position: relative; } .pl-sidebar__items--nested .pl-sidebar__item:hover, .pl-sidebar__items--nested .pl-sidebar__item.is-active { color: #fff; } /* Every row carries its own icon — a glyph names the destination faster than a bullet, and the indent rail already carries the depth cue. Nested glyphs step down one notch from the top-level 1.1rem so hierarchy still reads at a glance. */ .pl-sidebar__items--nested .pl-sidebar__item > .bi { display: inline-block; font-size: 1rem; width: 18px; color: rgba(255, 255, 255, 0.62); } .pl-sidebar__items--nested .pl-sidebar__item:hover > .bi, .pl-sidebar__items--nested .pl-sidebar__item.is-active > .bi { color: #fff; } /* ── Item-level sub-menus (third level, e.g. Communications ▸ Compose) ── The parent row sits in the same icon column as its sibling links (same glyph size, same indent) and only the caret marks it as expandable; its children step in once more behind their own rail so depth reads at a glance. */ .pl-sidebar__group--submenu { margin-top: 0; } .pl-sidebar__group-label--submenu { padding: 0.4375rem 0.75rem 0.4375rem 0.5rem; /* Same left offset as the leaf rows it sits beside (see --nested above). */ margin-left: 1px; border-left: 3px solid transparent; font-size: var(--pl-fs-base); font-weight: var(--pl-fw-regular, 400); color: rgba(255, 255, 255, 0.7); position: relative; } /* Branch rows keep their icon in the same 18px column as the leaf rows below. */ .pl-sidebar__group-label--submenu .pl-sidebar__group-icon { display: inline-block; font-size: 1rem; width: 18px; opacity: 0.78; } .pl-sidebar__group-label--submenu:hover .pl-sidebar__group-icon, .pl-sidebar__group--submenu.has-active > .pl-sidebar__group-label--submenu .pl-sidebar__group-icon { opacity: 1; } /* Trail state: the branch holding the current page stays lit while collapsed. */ .pl-sidebar__group--submenu.has-active > .pl-sidebar__group-label--submenu { color: #fff; font-weight: var(--pl-fw-medium); } .pl-sidebar__items--submenu { margin-left: 1.25rem; padding-left: 0.25rem; border-left: 1px solid rgba(255, 255, 255, 0.08); } .pl-sidebar__items--submenu .pl-sidebar__item { padding-left: 0.4375rem; font-size: calc(var(--pl-fs-base) - 0.5px); color: rgba(255, 255, 255, 0.62); } .pl-sidebar__items--submenu .pl-sidebar__item > .bi { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.55); } .pl-sidebar__items { display: flex; flex-direction: column; gap: 1px; } .pl-sidebar__item { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.75rem 0.4375rem 0.875rem; border-radius: var(--pl-radius-sm); color: rgba(255, 255, 255, 0.85); font-size: var(--pl-fs-md); font-weight: var(--pl-fw-medium); border-left: 3px solid transparent; margin-left: 1px; transition: background-color var(--pl-dur-fast) var(--pl-ease), color var(--pl-dur-fast) var(--pl-ease); position: relative; text-decoration: none; } .pl-sidebar__item:hover { /* Sky-tinted lift — a plain white/navy tint was invisible on the navy rail. (The rgba line is the fallback for a browser without color-mix.) */ background: rgba(255, 255, 255, 0.07); background: color-mix(in srgb, var(--pl-sky-light) 14%, transparent); color: #fff; } .pl-sidebar__item .bi { font-size: 1.1rem; color: rgba(255, 255, 255, 0.72); flex-shrink: 0; width: 20px; text-align: center; transition: color var(--pl-dur-fast) var(--pl-ease); } .pl-sidebar__item:hover .bi { color: #fff; } .pl-sidebar__item.is-active { background: rgba(255, 255, 255, 0.1); color: #fff; border-left-color: var(--pl-coral); font-weight: var(--pl-fw-semibold); } .pl-sidebar__item.is-active .bi { color: #fff; } .pl-sidebar__item:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.3); outline-offset: -2px; } .pl-sidebar__item-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; transition: transform var(--pl-dur-base) var(--pl-ease); } /* Counts on the rail. The rail is navy in BOTH themes, so these are one on-dark treatment (a solid tone fill measured 2.2–2.6:1 here and failed AA; a translucent wash of the tone under the tone's light ink passes). A plain count is neutral; a tone is what makes one stand out. Tones are the H27 status family — sage / coral / red — never amber. */ .pl-sidebar__badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: var(--pl-fs-xs); font-weight: var(--pl-fw-semibold); letter-spacing: 0.02em; line-height: 1.4; padding: 1px 6px; border-radius: var(--pl-radius-pill); min-width: 18px; text-align: center; flex-shrink: 0; } .pl-sidebar__badge--muted { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); } .pl-sidebar__badge--success { background: color-mix(in srgb, var(--pl-sage) 24%, transparent); color: var(--pl-sage-light); } .pl-sidebar__badge--warning { background: color-mix(in srgb, var(--pl-coral) 22%, transparent); color: var(--pl-coral-light); } .pl-sidebar__badge--danger { background: color-mix(in srgb, var(--pl-danger) 26%, transparent); color: color-mix(in srgb, var(--pl-danger) 55%, var(--pl-neutral-0)); } .pl-sidebar__footer { margin-top: auto; padding: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; background: rgba(0, 0, 0, 0.12); color: rgba(255, 255, 255, 0.92); } .pl-sidebar__footer .pl-icon-btn { color: rgba(255, 255, 255, 0.7); } .pl-sidebar__footer .pl-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .pl-sidebar__footer-meta { flex: 1 1 auto; min-width: 0; line-height: 1.25; } .pl-sidebar__footer-name { font-size: var(--pl-fs-base); font-weight: var(--pl-fw-semibold); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-sidebar__footer-sub { font-size: var(--pl-fs-sm); color: rgba(255, 255, 255, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── 07. Topbar ─────────────────────────────────────────────── */ .pl-topbar { position: sticky; top: 0; z-index: var(--pl-z-topbar); background: var(--pl-surface); border-bottom: 1px solid var(--pl-border); height: var(--pl-topbar-h); display: flex; align-items: center; padding: 0 1rem; gap: 0.75rem; /* No backdrop blur. Frosted-glass chrome is a 2020-21 idiom and the brand uses none of it — solid surface, hairline underneath. */ } .pl-topbar__toggle { display: inline-flex; background: transparent; border: 0; width: 40px; height: 40px; border-radius: var(--pl-radius-control); color: var(--pl-text-muted); font-size: 1.3rem; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background var(--pl-dur-fast) var(--pl-ease), color var(--pl-dur-fast) var(--pl-ease), transform var(--pl-dur-fast) var(--pl-ease); } .pl-topbar__toggle:hover { background: var(--pl-surface-alt); color: var(--pl-primary); } .pl-topbar__toggle:active { transform: scale(0.92); } .pl-topbar__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pl-primary-ring); } @media (min-width: 769px) { /* Collapsed = compact ICON RAIL (mini sidebar), not fully hidden. Modern SaaS pattern (Linear / Vercel / Notion): every nav icon stays visible and clickable; labels appear as native tooltips on hover. */ /* The class sits on (set pre-paint by the base.html bootstrap) and is mirrored onto .pl-app; both selectors are kept so either carrier works. */ .pl-app.is-sidebar-collapsed, .is-sidebar-collapsed .pl-app { grid-template-columns: var(--pl-sidebar-rail-w) 1fr; } .is-sidebar-collapsed .pl-sidebar { width: var(--pl-sidebar-rail-w); } /* Brand: swap the horizontal wordmark for the icon-only mark, centered */ .is-sidebar-collapsed .pl-sidebar__brand { justify-content: center; padding: 0 0.5rem; gap: 0; } .is-sidebar-collapsed .pl-sidebar__brand-wordmark { display: none; } .is-sidebar-collapsed .pl-sidebar__brand-mark { display: block; } .is-sidebar-collapsed .pl-sidebar__brand-tier { display: none; } /* Section markers collapse to a hairline divider; group labels hide */ .is-sidebar-collapsed .pl-sidebar__section-label { height: 1px; padding: 0; margin: 0.6rem 0.85rem; overflow: hidden; color: transparent; background: rgba(255, 255, 255, 0.1); } .is-sidebar-collapsed .pl-sidebar__section-label .bi { display: none; } .is-sidebar-collapsed .pl-sidebar__group-label { display: none; } /* Force every item visible even inside a previously-collapsed group */ .is-sidebar-collapsed .pl-sidebar__group.is-collapsed .pl-sidebar__items { display: block; } /* Items: equal-sized square buttons, centered icon, no label */ .is-sidebar-collapsed .pl-sidebar__items { padding: 0; } .is-sidebar-collapsed .pl-sidebar__item { justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0.25rem auto; border-radius: var(--pl-radius-2xl); border-left: 0; } .is-sidebar-collapsed .pl-sidebar__item .bi { font-size: 1.15rem; width: auto; } .is-sidebar-collapsed .pl-sidebar__item-label { display: none; } .is-sidebar-collapsed .pl-sidebar__item:hover { background: rgba(255, 255, 255, 0.09); } .is-sidebar-collapsed .pl-sidebar__item.is-active { border-left: 0; background: rgba(255, 255, 255, 0.14); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } /* Count badges shrink to a notification dot pinned to the icon corner */ .is-sidebar-collapsed .pl-sidebar__badge { position: absolute; top: 6px; right: 6px; min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; line-height: 0; border-radius: 50%; box-shadow: 0 0 0 2px #14244f; } /* Nested groups flatten: hide sub-headers, drop the indent rail, and let every child's icon sit in the same centred column as a top-level row */ .is-sidebar-collapsed .pl-sidebar__group-label--nested { display: none; } .is-sidebar-collapsed .pl-sidebar__items--nested { margin-left: 0; padding-left: 0; border-left: 0; } .is-sidebar-collapsed .pl-sidebar__items--nested .pl-sidebar__item { padding-left: 0; } .is-sidebar-collapsed .pl-sidebar__items--nested .pl-sidebar__item > .bi { display: inline-block; font-size: 1.15rem; width: auto; } /* Footer: avatar only, centered */ .is-sidebar-collapsed .pl-sidebar__footer { justify-content: center; padding: 0.75rem 0; } .is-sidebar-collapsed .pl-sidebar__footer-meta, .is-sidebar-collapsed .pl-sidebar__footer .pl-icon-btn { display: none; } } /* ── Topbar breadcrumbs (replaces former .pl-search) ──────── */ .pl-topbar__crumbs { flex: 1 1 auto; min-width: 0; /* allow children to truncate */ overflow: hidden; display: flex; align-items: center; } .pl-topbar__crumbs-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.15rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; /* Firefox */ min-width: 0; max-width: 100%; } .pl-topbar__crumbs-list::-webkit-scrollbar { display: none; } .pl-topbar__crumbs-item { display: inline-flex; align-items: center; gap: 0.15rem; flex-shrink: 0; min-width: 0; } .pl-topbar__crumb { display: inline-flex; align-items: center; gap: 0.4rem; height: 32px; padding: 0 0.65rem; border-radius: var(--pl-radius-pill); font-size: 0.82rem; font-weight: 500; color: var(--pl-text-muted); text-decoration: none; white-space: nowrap; transition: background-color var(--pl-dur-fast) var(--pl-ease), color var(--pl-dur-fast) var(--pl-ease); max-width: 240px; } .pl-topbar__crumb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pl-topbar__crumb .bi { font-size: 0.95rem; flex-shrink: 0; opacity: 0.95; } .pl-topbar__crumb:hover, .pl-topbar__crumb:focus-visible { background: var(--pl-primary-soft); color: var(--pl-primary-700); outline: none; } .pl-topbar__crumb:focus-visible { box-shadow: 0 0 0 3px var(--pl-primary-ring); } /* Tenant root chip — slightly stronger emphasis */ .pl-topbar__crumb--tenant { background: var(--pl-primary-soft); color: var(--pl-primary-700); font-weight: var(--pl-fw-semibold); } .pl-topbar__crumb--tenant:hover { background: var(--pl-primary-100); color: var(--pl-primary-800); } .pl-topbar__crumb--tenant .bi { color: var(--pl-primary-600); } /* Current page — strongest emphasis, no hover treatment */ .pl-topbar__crumb--current { color: var(--pl-text); font-weight: var(--pl-fw-semibold); cursor: default; background: transparent; } .pl-topbar__crumb--current:hover { background: transparent; color: var(--pl-text); } .pl-topbar__crumb--current .bi { color: var(--pl-primary-600); } .pl-topbar__crumbs-sep { color: var(--pl-text-subtle); font-size: 0.7rem; margin: 0 0.05rem; flex-shrink: 0; } .pl-topbar__actions { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; margin-left: 0.5rem; } /* Search everything — the CRM command palette's launcher, in the topbar. Sits in the actions strip (not pinned over the page) so it is in the same place on a dashboard, a report and a record detail, and never lands on top of whatever buttons the page put in its top-right corner. Styled as a soft search FIELD rather than an icon button: it is the only control in this strip that takes typing, and reading as a field is what makes somebody click it without being told. Collapses to the bare magnifier below lg, where the strip is tight. */ .pl-search { display: inline-flex; align-items: center; gap: 0.4rem; padding: 4px 10px; border-radius: var(--pl-radius-pill); border: 1px solid var(--pl-border); background: var(--pl-surface, var(--bs-body-bg)); color: var(--pl-text-muted, var(--bs-secondary-color)); font-size: var(--pl-fs-sm); line-height: 1.4; text-decoration: none; transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; } .pl-search:hover, .pl-search:focus-visible { border-color: var(--bs-primary); color: var(--bs-primary); box-shadow: 0 1px 6px rgb(13 27 62 / 10%); outline: none; } /* A11Y: the rule above cancels the outline and replaces it with a 10% shadow that is IDENTICAL to the hover state — keyboard focus was invisible on the topbar's search launcher. Restate the real ring after it. */ .pl-search:focus-visible { box-shadow: 0 0 0 3px var(--pl-primary-ring), 0 1px 6px rgb(13 27 62 / 10%); } .pl-search .bi { font-size: 0.9rem; } .pl-search__kbd { padding: 0 0.32rem; border: 1px solid var(--pl-border); border-radius: 4px; background: var(--bs-tertiary-bg, transparent); font-family: inherit; font-size: var(--pl-fs-xs, 0.6875rem); color: inherit; opacity: 0.85; } /* Topbar action button — a labelled control in the actions strip, for work that belongs to no single page (currently: "Pull website leads", which sits right after the search box). Deliberately shaped like .pl-search — same pill, same border, same collapse-to-icon below lg — so the two read as one pair rather than as a field with a stray button glued on. It is a