@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ========================================================================== Pioneer Vision Reports — SKINS -------------------------------------------------------------------------- A "skin" changes the SHAPE of the UI (density, geometry, elevation, typography, nav treatment) — not just the palette. It is independent of light/dark: Loaded AFTER app.css / components.css so skin rules win. NOTE: @import must stay the first line of this file or it is ignored. To add a skin: copy the [data-skin="..."] block and change the tokens. Structural tokens below default to the CURRENT look, so data-skin="default" is a no-op and nothing changes until a skin is chosen. ========================================================================== */ :root { /* ---- Structural tokens (new) ---- */ --pv-ui-font: var(--pv-font-sans); --pv-ui-size: .875rem; --pv-ui-tracking: 0; --pv-heading-weight: 800; --pv-heading-tracking: -.01em; /* Density */ --pv-nav-h: 44px; --pv-cell-y: .75rem; --pv-cell-x: 1rem; --pv-card-pad: 1.25rem; /* Geometry */ --pv-r-card: var(--pv-r-lg); --pv-r-control: var(--pv-r-md); --pv-r-pill: var(--pv-r-full); --pv-border-w: 1px; /* Chrome */ --pv-label-transform: uppercase; --pv-label-tracking: .05em; --pv-nav-active-radius: 10px; } /* ========================================================================== LINEAR — compact, sharp, hairline borders, near-flat elevation ========================================================================== */ [data-skin="linear"] { /* Type — Inter, smaller, tighter */ --pv-ui-font: 'Inter', system-ui, -apple-system, sans-serif; --pv-font-sans: 'Inter', system-ui, -apple-system, sans-serif; --pv-font-display: 'Inter'; --pv-ui-size: .8125rem; --pv-ui-tracking: -.005em; --pv-heading-weight: 600; --pv-heading-tracking: -.02em; /* Density — tight */ --pv-nav-h: 32px; --pv-cell-y: .5rem; --pv-cell-x: .75rem; --pv-card-pad: 1rem; /* Geometry — sharp */ --pv-r-sm: 4px; --pv-r-md: 6px; --pv-r-lg: 8px; --pv-r-xl: 8px; --pv-r-card: 8px; --pv-r-control: 6px; --pv-r-pill: 4px; --pv-nav-active-radius: 6px; /* Elevation — essentially flat; structure comes from hairlines */ --pv-shadow-xs: none; --pv-shadow-sm: none; --pv-shadow-md: 0 2px 4px rgba(0,0,0,.04); --pv-shadow-lg: 0 8px 24px rgba(0,0,0,.10); /* Palette — Linear indigo on near-neutral greys */ --pv-accent: #5e6ad2; --pv-accent-600: #4c56b8; --pv-accent-soft: #eef0fb; --pv-info: #5e6ad2; --pv-info-soft: #eef0fb; --pv-bg: #fafafa; --pv-surface: #ffffff; --pv-surface-2: #f7f7f8; --pv-border: #e6e6e8; --pv-text: #17171a; --pv-text-muted: #8a8f98; --pv-sidebar-bg: #fafafa; --pv-sidebar-fg: #4b5058; --pv-sidebar-active: rgba(94,106,210,.10); --pv-label-transform: none; --pv-label-tracking: 0; } /* ---- Base ---- */ [data-skin="linear"] body, [data-skin="linear"] .pv-content { font-family: var(--pv-ui-font); font-size: var(--pv-ui-size); letter-spacing: var(--pv-ui-tracking); } [data-skin="linear"] h1, [data-skin="linear"] h2, [data-skin="linear"] h3 { font-weight: var(--pv-heading-weight); letter-spacing: var(--pv-heading-tracking); } [data-skin="linear"] .pv-content h1 { font-size: 1.35rem; } /* ---- Cards: hairline, square-ish, flat ---- */ [data-skin="linear"] .pv-card, [data-skin="linear"] .pv-kpi, [data-skin="linear"] .pv-chart-card { border-radius: var(--pv-r-card); border: var(--pv-border-w) solid var(--pv-border); box-shadow: none; background: var(--pv-surface); } [data-skin="linear"] .pv-card-pad { padding: var(--pv-card-pad); } /* KPI tiles lose the gradient fills — Linear is monochrome + one accent */ [data-skin="linear"] .pv-kpi, [data-skin="linear"] .pv-kpi--grad, [data-skin="linear"] .pv-kpi--indigo, [data-skin="linear"] .pv-kpi--purple, [data-skin="linear"] .pv-kpi--green, [data-skin="linear"] .pv-kpi--amber, [data-skin="linear"] .pv-kpi--red, [data-skin="linear"] .pv-kpi--cyan { background: var(--pv-surface) !important; color: var(--pv-text) !important; } [data-skin="linear"] .pv-kpi-label { color: var(--pv-text-muted) !important; font-size: .72rem; } [data-skin="linear"] .pv-kpi-value { color: var(--pv-text) !important; font-weight: 600; letter-spacing: -.02em; } [data-skin="linear"] .pv-kpi i { color: var(--pv-accent) !important; background: transparent !important; } /* ── Atlas: one calm signal ────────────────────────────────────── The auto "rainbow by position" (nth-child) reads as decoration, not data. Collapse every non-semantic tile onto the single teal accent; explicit --green / --red / --amber modifiers still carry real meaning where used. Also drop the blurred corner-wash for a flatter, more precise surface. */ [data-skin="linear"] .pv-kpi:not([class*="pv-kpi--"]) { --kpi-c: var(--pv-accent) !important; } [data-skin="linear"] .pv-kpi::after { display: none !important; } [data-skin="linear"] .pv-kpi:hover { box-shadow: var(--pv-shadow-md); } /* Bespoke dashboard stat cards (.card.kpi) hard-code rainbow colors inline in the view — the left accent bar via style="background:#..", the sparkline via an inline + stroked path. Collapse them onto the single teal signal. !important is the one lever that beats inline styles / SVG presentation attributes; `stop-color` retints the gradient stops. */ [data-skin="linear"] .card.kpi > .accent { background: var(--pv-accent) !important; } [data-skin="linear"] .card.kpi .spark path { stroke: var(--pv-accent) !important; } [data-skin="linear"] .card.kpi .spark stop { stop-color: var(--pv-accent) !important; } /* ---- Controls ---- */ [data-skin="linear"] .pv-btn { border-radius: var(--pv-r-control); font-weight: 500; font-size: .8125rem; padding: .4rem .75rem; box-shadow: none; } [data-skin="linear"] .pv-btn-primary { background: var(--pv-accent); border-color: var(--pv-accent); } [data-skin="linear"] .pv-btn-primary:hover { background: var(--pv-accent-600); } [data-skin="linear"] .pv-input, [data-skin="linear"] .pv-input-group .pv-input { border-radius: var(--pv-r-control); font-size: .8125rem; padding-top: .4rem; padding-bottom: .4rem; } [data-skin="linear"] .pv-badge { border-radius: var(--pv-r-pill); font-weight: 500; font-size: .68rem; padding: .12rem .4rem; } /* ---- Tables: dense, hairline rows ---- */ [data-skin="linear"] .pv-table th, [data-skin="linear"] .pv-table td { padding: var(--pv-cell-y) var(--pv-cell-x); font-size: .8125rem; } [data-skin="linear"] .pv-table th { text-transform: var(--pv-label-transform); letter-spacing: var(--pv-label-tracking); font-weight: 500; color: var(--pv-text-muted); background: transparent; } [data-skin="linear"] .pv-table tr { border-color: var(--pv-border); } /* ---- Sidebar: compact flat list ---- */ [data-skin="linear"] .pv-sidebar { border-right: var(--pv-border-w) solid var(--pv-border); } [data-skin="linear"] .pv-nav-link { min-height: var(--pv-nav-h); font-size: .8125rem; font-weight: 500; border-radius: var(--pv-nav-active-radius); padding-left: 10px; gap: .55rem; } [data-skin="linear"] .pv-nav-link > i { font-size: .82rem; width: 18px; } [data-skin="linear"] .pv-nav-link:hover { background: rgba(0,0,0,.04); color: var(--pv-text); } [data-skin="linear"] .pv-nav-link:hover > i { color: var(--pv-text); } [data-skin="linear"] .pv-nav-link.active { background: var(--pv-sidebar-active); color: var(--pv-accent); font-weight: 500; } [data-skin="linear"] .pv-nav-link.active > i { color: var(--pv-accent); } [data-skin="linear"] .pv-nav-link.active::before { display: none; } [data-skin="linear"] .pv-nav-section { height: 28px; font-size: .68rem; font-weight: 500; text-transform: var(--pv-label-transform); letter-spacing: var(--pv-label-tracking); color: var(--pv-text-muted); } [data-skin="linear"] .pv-sec-ico { width: 20px; height: 20px; flex: 0 0 20px; background: transparent !important; border-radius: 4px; font-size: .72rem; } [data-skin="linear"] .pv-brand-mark { border-radius: 6px; width: 28px; height: 28px; flex: 0 0 28px; background: var(--pv-accent); box-shadow: none; font-size: .8rem; } [data-skin="linear"] .pv-brand-name { font-size: .9rem; font-weight: 600; } [data-skin="linear"] .pv-brand-sub { display: none; } [data-skin="linear"] .pv-env-badge { border-radius: 4px; } /* ---- Topbar ---- */ [data-skin="linear"] .pv-topbar { border-bottom: var(--pv-border-w) solid var(--pv-border); box-shadow: none; backdrop-filter: none; background: var(--pv-surface); } [data-skin="linear"] .pv-icon-btn { border-radius: var(--pv-r-control); } [data-skin="linear"] .pv-menu { border-radius: var(--pv-r-card); box-shadow: var(--pv-shadow-lg); } /* ---- Page-scoped modules ---- */ [data-skin="linear"] #cl .card, [data-skin="linear"] #ct .card, [data-skin="linear"] #dm .card, [data-skin="linear"] #dm .folder, [data-skin="linear"] #ex .card { border-radius: var(--pv-r-card); box-shadow: none; border-color: var(--pv-border); } [data-skin="linear"] #cl .card:hover, [data-skin="linear"] #dm .folder:hover { transform: none; box-shadow: none; border-color: var(--pv-accent); } [data-skin="linear"] #cl .search input, [data-skin="linear"] #ct .search input, [data-skin="linear"] #dm .search input, [data-skin="linear"] #cl .tbtn, [data-skin="linear"] #ct .tbtn, [data-skin="linear"] #dm .tbtn { border-radius: var(--pv-r-control); font-size: .8125rem; } [data-skin="linear"] #cl .met, [data-skin="linear"] #cl .pill, [data-skin="linear"] #ct .rl, [data-skin="linear"] #dm .badge { border-radius: var(--pv-r-pill); } [data-skin="linear"] #cl tbody td, [data-skin="linear"] #ct tbody td, [data-skin="linear"] #dm tbody td { padding: var(--pv-cell-y) var(--pv-cell-x); } [data-skin="linear"] #cl thead th, [data-skin="linear"] #ct thead th, [data-skin="linear"] #dm thead th { background: transparent; text-transform: var(--pv-label-transform); letter-spacing: var(--pv-label-tracking); font-weight: 500; } /* Overview hero: flat panel instead of gradient banner */ [data-skin="linear"] #ex .hero { background: var(--pv-surface); border: var(--pv-border-w) solid var(--pv-border); border-radius: var(--pv-r-card); color: var(--pv-text); box-shadow: none; } [data-skin="linear"] #ex .hero::after { display: none; } [data-skin="linear"] #ex .hero h1 { font-size: 1.4rem; } [data-skin="linear"] #ex .hero .date, [data-skin="linear"] #ex .hero p.sub, [data-skin="linear"] #ex .goal-of, [data-skin="linear"] #ex .goal-meta { color: var(--pv-text-muted); } [data-skin="linear"] #ex .goal-meta b { color: var(--pv-text); } [data-skin="linear"] #ex .goal-track { background: var(--pv-surface-2); } [data-skin="linear"] #ex .goal-bar { background: var(--pv-accent); } [data-skin="linear"] #ex .goal-pct { background: var(--pv-accent-soft); color: var(--pv-accent); } [data-skin="linear"] #ex .pill { background: var(--pv-surface-2); border-color: var(--pv-border); backdrop-filter: none; border-radius: var(--pv-r-control); } [data-skin="linear"] #ex .pill .l { color: var(--pv-text-muted); } [data-skin="linear"] #ex .pill .v { color: var(--pv-text); } /* Workspace board */ [data-skin="linear"] #ws-root .ws-pill, [data-skin="linear"] #ws-root .ws-tlbar { border-radius: var(--pv-r-pill); } [data-skin="linear"] #ws-root .ws-kcard { border-radius: var(--pv-r-control); box-shadow: none; border: 1px solid var(--pv-border); } /* ---- Linear + dark ---- */ [data-skin="linear"][data-theme="dark"] { --pv-bg: #0d0e10; --pv-surface: #131417; --pv-surface-2: #191a1d; --pv-border: #26272b; --pv-text: #e9e9ec; --pv-text-muted: #8a8f98; --pv-sidebar-bg: #0d0e10; --pv-accent: #7f8bf0; --pv-accent-soft: rgba(127,139,240,.14); --pv-sidebar-active: rgba(127,139,240,.14); } [data-skin="linear"][data-theme="dark"] .pv-nav-link:hover { background: rgba(255,255,255,.05); } @media (prefers-reduced-motion: reduce) { [data-skin] * { transition: none !important; } } /* ════════════════════════════════════════════════════════════════ TRANSFORMING SKINS — each block is a complete look: canvas, shell, surfaces, accent, geometry. Selected via the topbar palette menu; persisted in pv-skin (cookie + localStorage), rendered server-side on so there is no flash. Specificity note: [data-skin="…"] .selector (0,2,1) deliberately outranks the component and sidebar-embedded rules (≤0,1,1), so a skin wins regardless of stylesheet order — the lesson from the first dark-shell attempt, where embedded sidebar styles fought the theme and made labels unreadable. ════════════════════════════════════════════════════════════════ */ /* ── SPRUCE — expedition dark. PNW dusk navy, luminous indigo. ── */ html[data-skin="spruce"] { --pv-bg:#0B1220; --pv-surface:#121A2B; --pv-surface-2:#182338; --pv-text:#E7EDF6; --pv-text-muted:#93A1B8; --pv-border:rgba(255,255,255,.08); --pv-accent:#6E6EF7; --pv-accent-600:#5A5AE0; --pv-accent-soft:rgba(110,110,247,.16); --pv-brand-ink:#F7F9FC; --pv-sidebar-bg:#0F1B2D; --pv-sidebar-raise:#16283F; --pv-sidebar-fg:#A9B7CC; --pv-sidebar-active:rgba(110,110,247,.16); --pv-beacon:#2FD4B5; --pv-shadow-sm:0 1px 2px rgba(0,0,0,.5); --pv-shadow-md:0 6px 18px rgba(0,0,0,.5); --pv-shadow-lg:0 14px 40px rgba(0,0,0,.55); } html[data-skin="spruce"] .pv-sidebar { border-right-color:rgba(255,255,255,.06); } html[data-skin="spruce"] .pv-brand { color:#F7F9FC; border-bottom-color:rgba(255,255,255,.06); } html[data-skin="spruce"] .pv-nav-link { color:#A9B7CC; } html[data-skin="spruce"] .pv-nav-link:hover { background:#16283F; color:#E7EDF6; } html[data-skin="spruce"] .pv-nav-link.active { background:rgba(110,110,247,.16) !important; color:#FFFFFF !important; box-shadow: inset 2px 0 0 #6E6EF7, inset 12px 0 14px -12px #6E6EF7 !important; } html[data-skin="spruce"] .pv-nav-link.active i { color:#8f8ffb; } html[data-skin="spruce"] .pv-sec-label { color:rgba(169,183,204,.5); } html[data-skin="spruce"] .pv-soon-tag { color:rgba(169,183,204,.7); border-color:rgba(169,183,204,.3); } html[data-skin="spruce"] .pv-topbar { background:rgba(18,26,43,.8); } html[data-skin="spruce"] .pv-card, html[data-skin="spruce"] .pv-kpi, html[data-skin="spruce"] .pv-chart-card { background:var(--pv-surface); border-color:var(--pv-border); } html[data-skin="spruce"] .pv-input { background:var(--pv-surface-2); color:var(--pv-text); border-color:var(--pv-border); } html[data-skin="spruce"] .pv-table th { color:var(--pv-text-muted); } html[data-skin="spruce"] .pv-table td { border-color:var(--pv-border); } /* ── TERRA — paper & clay. Warm, editorial, unhurried. ── */ html[data-skin="terra"] { --pv-bg:#F6F1E8; --pv-surface:#FDFBF6; --pv-surface-2:#F1EAE0; --pv-text:#2A2620; --pv-text-muted:#7A7061; --pv-border:#E3DACB; --pv-accent:#B4552D; --pv-accent-600:#9A4523; --pv-accent-soft:rgba(180,85,45,.10); --pv-brand-ink:#2A2620; --pv-sidebar-bg:#FDFBF6; --pv-sidebar-raise:#F1EAE0; --pv-sidebar-fg:#5C5346; --pv-sidebar-active:rgba(180,85,45,.10); --pv-beacon:#7C8A4D; --pv-r-sm:8px; --pv-r-md:12px; --pv-r-lg:16px; --pv-r-xl:22px; --pv-shadow-sm:0 1px 2px rgba(90,70,40,.08); --pv-shadow-md:0 6px 16px rgba(90,70,40,.10); --pv-shadow-lg:0 14px 36px rgba(90,70,40,.14); } html[data-skin="terra"] .pv-nav-link.active { background:rgba(180,85,45,.10) !important; color:#B4552D !important; box-shadow: inset 2px 0 0 #B4552D, inset 12px 0 14px -12px #B4552D !important; } html[data-skin="terra"] .pv-topbar { background:rgba(253,251,246,.85); } html[data-skin="terra"] .pv-btn-primary { background:linear-gradient(135deg,#B4552D,#9A4523); } html[data-skin="terra"] .pv-page-title::after { background:#B4552D; } /* ── CARBON — near-black, neutral, precise. No gradients anywhere. ── */ html[data-skin="carbon"] { --pv-bg:#0E0E11; --pv-surface:#17171C; --pv-surface-2:#1E1E24; --pv-text:#EDEDF0; --pv-text-muted:#8D8D96; --pv-border:rgba(255,255,255,.09); --pv-accent:#7C8CF8; --pv-accent-600:#6675E6; --pv-accent-soft:rgba(124,140,248,.14); --pv-brand-ink:#EDEDF0; --pv-sidebar-bg:#121216; --pv-sidebar-raise:#1B1B21; --pv-sidebar-fg:#9A9AA3; --pv-sidebar-active:rgba(124,140,248,.14); --pv-beacon:#4ADE80; --pv-r-sm:5px; --pv-r-md:7px; --pv-r-lg:9px; --pv-r-xl:12px; --pv-shadow-sm:none; --pv-shadow-md:0 0 0 1px rgba(255,255,255,.06); --pv-shadow-lg:0 10px 30px rgba(0,0,0,.6); } html[data-skin="carbon"] .pv-sidebar { border-right-color:rgba(255,255,255,.07); } html[data-skin="carbon"] .pv-brand { color:#EDEDF0; border-bottom-color:rgba(255,255,255,.07); } html[data-skin="carbon"] .pv-nav-link { color:#9A9AA3; } html[data-skin="carbon"] .pv-nav-link:hover { background:#1B1B21; color:#EDEDF0; } html[data-skin="carbon"] .pv-nav-link.active { background:rgba(124,140,248,.14) !important; color:#EDEDF0 !important; box-shadow: inset 2px 0 0 #7C8CF8 !important; } html[data-skin="carbon"] .pv-sec-label { color:rgba(154,154,163,.5); } html[data-skin="carbon"] .pv-topbar { background:rgba(23,23,28,.82); } html[data-skin="carbon"] .pv-card, html[data-skin="carbon"] .pv-kpi, html[data-skin="carbon"] .pv-chart-card { background:var(--pv-surface); border-color:var(--pv-border); } html[data-skin="carbon"] .pv-input { background:var(--pv-surface-2); color:var(--pv-text); border-color:var(--pv-border); } html[data-skin="carbon"] .pv-btn-primary { background:#7C8CF8; } html[data-skin="carbon"] .pv-kpi::before { width:2px; } html[data-skin="carbon"] .pv-table td { border-color:var(--pv-border); } /* ════════════════════════════════════════════════════════════════ SKIN TRANSFORMATION LAYER — type, geometry, density, icon treatment. Colour alone is a tint; these make each skin a look. html[data-skin] outranks the runtime :root injection. ════════════════════════════════════════════════════════════════ */ /* ── SPRUCE: technical grotesk, instrument spacing ── */ html[data-skin="spruce"] { --pv-font-display:'Space Grotesk', 'Figtree', system-ui, sans-serif; } html[data-skin="spruce"] .pv-page-title { letter-spacing:-.015em; } html[data-skin="spruce"] .pv-kpi-value { font-family:'Space Grotesk', var(--pv-font-display); letter-spacing:-.01em; } html[data-skin="spruce"] .pv-nav-link { padding:.55rem .75rem; } html[data-skin="spruce"] .pv-nav-link.active i { text-shadow:0 0 10px rgba(110,110,247,.8); } html[data-skin="spruce"] .pv-sec-label { letter-spacing:.18em; } html[data-skin="spruce"] .pv-btn { letter-spacing:.01em; } /* ── TERRA: warm serif display, roomy geometry, pill everything ── */ html[data-skin="terra"] { --pv-font-display:'Fraunces', Georgia, 'Times New Roman', serif; } html[data-skin="terra"] .pv-page-title { font-weight:600; letter-spacing:0; } html[data-skin="terra"] .pv-brand { font-family:'Fraunces', serif; font-weight:600; } html[data-skin="terra"] .pv-kpi-value { font-family:'Fraunces', serif; font-weight:600; } html[data-skin="terra"] .pv-content { padding:2rem; } html[data-skin="terra"] .pv-nav-link { padding:.7rem .85rem; border-radius:999px; } html[data-skin="terra"] .pv-nav-link.active { border-radius:999px; box-shadow:none !important; /* meridian reads cold on paper */ } html[data-skin="terra"] .pv-nav-link i { /* icon chips: each icon sits in a soft round swatch */ width:26px; height:26px; display:grid; place-items:center; background:rgba(180,85,45,.08); border-radius:50%; font-size:.7rem; } html[data-skin="terra"] .pv-btn { border-radius:999px; } html[data-skin="terra"] .pv-badge { border:1px solid var(--pv-border); background:transparent; } html[data-skin="terra"] .pv-card, html[data-skin="terra"] .pv-kpi { border-radius:18px; } html[data-skin="terra"] .pv-page-title::after { width:44px; height:2px; } html[data-skin="terra"] .pv-table th { letter-spacing:.08em; font-size:11px; } /* ── CARBON: Plex, mono numerals, compact rows, squared controls ── */ html[data-skin="carbon"] { --pv-font-display:'IBM Plex Sans', system-ui, sans-serif; --pv-font-sans:'IBM Plex Sans', system-ui, sans-serif; --pv-font-mono:'IBM Plex Mono', ui-monospace, monospace; } html[data-skin="carbon"] body { font-family:var(--pv-font-sans); } html[data-skin="carbon"] .pv-kpi-value { font-family:var(--pv-font-mono); font-weight:600; font-size:2rem; letter-spacing:-.02em; } html[data-skin="carbon"] .pv-kpi-label, html[data-skin="carbon"] .pv-sec-label, html[data-skin="carbon"] .pv-table th { font-family:var(--pv-font-mono); font-weight:500; letter-spacing:.1em; } html[data-skin="carbon"] .pv-nav-link { padding:.42rem .6rem; font-size:13px; gap:.55rem; } html[data-skin="carbon"] .pv-nav-link i { font-size:.8rem; width:16px; } html[data-skin="carbon"] .pv-sec-label { padding-top:.7rem; } html[data-skin="carbon"] .pv-content { padding:1.1rem 1.25rem; } html[data-skin="carbon"] .pv-btn { border-radius:6px; font-size:13px; letter-spacing:.02em; } html[data-skin="carbon"] .pv-btn-primary { text-transform:uppercase; font-size:12px; letter-spacing:.08em; font-weight:700; } html[data-skin="carbon"] .pv-badge { border-radius:4px; font-family:var(--pv-font-mono); font-size:10px; } html[data-skin="carbon"] .pv-card, html[data-skin="carbon"] .pv-kpi { box-shadow:none; } html[data-skin="carbon"] .pv-page-title::after { display:none; } html[data-skin="carbon"] .pv-table td, html[data-skin="carbon"] .pv-table th { padding:.5rem .6rem; } /* ── TERRA as the house skin: finishing pass ── */ /* Dashboard hero: the indigo slab is the one loud survivor of the old look. On paper it turns to fired clay — same layout, Terra's voice. The selector outranks the view's own #ex .hero rule (0,1,1,1 > 0,1,1,0). */ html[data-skin="terra"] #ex .hero { background: linear-gradient(135deg, #A2542F 0%, #8E4526 55%, #6E3118 100%); box-shadow: 0 18px 40px rgba(110, 49, 24, .22); } html[data-skin="terra"] #ex .hero h1 { font-family:'Fraunces', serif; font-weight:600; letter-spacing:0; } html[data-skin="terra"] #ex .hero::after { opacity:.12; } /* Brand block: the wordmark was wrapping mid-word ("Pi…"). One line, ellipsis, serif name, quiet small-caps sub. */ html[data-skin="terra"] .pv-brand-text { min-width:0; display:flex; flex-direction:column; } html[data-skin="terra"] .pv-brand-name { font-family:'Fraunces', serif; font-weight:600; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-skin="terra"] .pv-brand-sub { font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--pv-text-muted); } /* Section headers: the coloured square chips fight the paper voice — soften them into clay-tinted rounds matching the nav chips. */ html[data-skin="terra"] .pv-sec-ico { background: rgba(180,85,45,.08) !important; color:#8E4526 !important; border-radius:50%; } /* Chart cards and section titles pick up the serif. */ html[data-skin="terra"] .pv-chart-card h3, html[data-skin="terra"] .pv-card > h3 { font-family:'Fraunces', serif; font-weight:600; } /* ════════════════════════════════════════════════════════════════ FINISHING PASS — ALL SKINS. Each skin gets the treatment Terra received: its own dashboard-hero voice, brand typography, and section-chip language. Selector strength as before. ════════════════════════════════════════════════════════════════ */ /* ── DEFAULT: the indigo hero stays but sheds the purple bloom for a cleaner two-stop ramp; brand stays Figtree. ── */ html[data-skin="default"] #ex .hero { background: linear-gradient(135deg, #5b5bd6 0%, #4338ca 100%); box-shadow: 0 14px 34px rgba(67,56,202,.22); } html[data-skin="default"] .pv-brand-name { font-weight:800; font-size:1rem; } /* ── LINEAR: density skin — the hero compresses; geometry tightens. Same indigo family, less ceremony. ── */ html[data-skin="linear"] #ex .hero { border-radius:12px; } html[data-skin="linear"] #ex .hero-in { padding:18px 22px; gap:18px; } html[data-skin="linear"] #ex .hero h1 { font-size:22px; } html[data-skin="linear"] .pv-brand-name { font-weight:700; font-size:.95rem; } html[data-skin="linear"] .pv-sec-ico { border-radius:6px; } /* ── SPRUCE: hero becomes the night ridge — deep navy with an indigo glow off one edge; Space Grotesk on the greeting. ── */ html[data-skin="spruce"] #ex .hero { background: radial-gradient(120% 140% at 85% 10%, rgba(110,110,247,.35) 0%, transparent 50%), linear-gradient(150deg, #16283F 0%, #0F1B2D 70%); box-shadow: 0 18px 40px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.07); } html[data-skin="spruce"] #ex .hero h1 { font-family:'Space Grotesk', sans-serif; letter-spacing:-.01em; } html[data-skin="spruce"] #ex .hero::after { opacity:.06; } html[data-skin="spruce"] .pv-brand-name { font-family:'Space Grotesk', sans-serif; font-weight:600; } html[data-skin="spruce"] .pv-brand-sub { color:#A9B7CC; opacity:.7; } html[data-skin="spruce"] .pv-sec-ico { background: rgba(110,110,247,.12) !important; color:#8f8ffb !important; border-radius:8px; } html[data-skin="spruce"] .pv-chart-card h3, html[data-skin="spruce"] .pv-card > h3 { font-family:'Space Grotesk', sans-serif; font-weight:600; } /* ── CARBON: gradients are banned here, the hero included — it becomes a flat panel with a hairline and the accent reserved for the number. ── */ html[data-skin="carbon"] #ex .hero { background:#17171C; color:#EDEDF0; border:1px solid rgba(255,255,255,.09); border-radius:10px; box-shadow:none; } html[data-skin="carbon"] #ex .hero::after { display:none; } html[data-skin="carbon"] #ex .hero h1 { font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:24px; } html[data-skin="carbon"] #ex .hero .date { font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8D8D96; } html[data-skin="carbon"] #ex .hero p.sub { color:#8D8D96; } html[data-skin="carbon"] .pv-brand-name { font-weight:600; font-size:.95rem; } html[data-skin="carbon"] .pv-brand-sub { font-family:'IBM Plex Mono', monospace; letter-spacing:.1em; } html[data-skin="carbon"] .pv-sec-ico { background:#1E1E24 !important; color:#7C8CF8 !important; border-radius:5px; } html[data-skin="carbon"] .pv-chart-card h3, html[data-skin="carbon"] .pv-card > h3 { font-family:'IBM Plex Sans', sans-serif; font-weight:600; } /* ── Portal hero voices, matching each skin's admin hero ── */ html[data-skin="terra"] .pv-portal-hero { background: linear-gradient(135deg, #A2542F 0%, #8E4526 55%, #6E3118 100%); box-shadow: 0 16px 36px rgba(110,49,24,.20); } html[data-skin="terra"] .pv-portal-hero h1, html[data-skin="terra"] .pv-portal-hero h2 { font-family:'Fraunces', serif; font-weight:600; } html[data-skin="terra"] .pv-portal-hero .pv-btn { color:#8E4526; border-radius:999px; } html[data-skin="terra"] .pv-portal-tile { border-radius:18px; } html[data-skin="spruce"] .pv-portal-hero { background: radial-gradient(120% 140% at 85% 10%, rgba(110,110,247,.35) 0%, transparent 50%), linear-gradient(150deg, #16283F 0%, #0F1B2D 70%); border:1px solid rgba(255,255,255,.07); } html[data-skin="spruce"] .pv-portal-hero h1, html[data-skin="spruce"] .pv-portal-hero h2 { font-family:'Space Grotesk', sans-serif; } html[data-skin="spruce"] .pv-portal-hero .pv-btn { color:#0F1B2D; } html[data-skin="carbon"] .pv-portal-hero { background:#17171C; border:1px solid rgba(255,255,255,.09); border-radius:10px; box-shadow:none; } html[data-skin="carbon"] .pv-portal-hero .pv-btn { background:#7C8CF8; color:#0E0E11; } /* ========================================================================== NOTIPULSE — alert-driven, card-based, material elevation Built for triage: severity colour does the scanning work, and elevation carries urgency. Red is reserved for alerts and never used as brand chrome, so a red edge on this skin always means "this needs attention". ========================================================================== */ [data-skin="notipulse"] { /* Type — Albert Sans headlines over Inter body, per the spec */ --pv-ui-font: 'Inter', system-ui, -apple-system, sans-serif; --pv-font-sans: 'Inter', system-ui, -apple-system, sans-serif; --pv-font-display: 'Albert Sans', 'Inter', system-ui, sans-serif; --pv-font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, monospace; --pv-ui-size: .875rem; /* 14px body */ --pv-ui-tracking: 0; --pv-heading-weight: 700; --pv-heading-tracking: -.01em; /* Density — 6px base unit: 12 / 18 / 24 */ --pv-nav-h: 44px; /* 44px minimum touch target */ --pv-cell-y: .75rem; /* 12px */ --pv-cell-x: 1.125rem; /* 18px */ --pv-card-pad: 1.125rem; /* 18px card padding */ /* Geometry */ --pv-r-sm: 6px; --pv-r-md: 12px; --pv-r-lg: 12px; --pv-r-xl: 20px; --pv-r-card: 12px; --pv-r-control: 12px; --pv-r-pill: 9999px; --pv-nav-active-radius: 9999px; /* pill nav, per the chip language */ /* Elevation — layered material shadows that lift on alert */ --pv-shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --pv-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --pv-shadow-md: 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --pv-shadow-lg: 0 12px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); /* Alert lift — the coloured elevation reserved for critical cards */ --np-alert-lift: 0 8px 20px rgba(239,68,68,.15); /* Palette — red is severity, blue is the interface */ --pv-accent: #3B82F6; /* interactive chrome stays blue */ --pv-accent-600: #2563EB; --pv-accent-soft: #EFF6FF; --pv-info: #3B82F6; --pv-info-soft: #EFF6FF; --pv-success: #22C55E; --pv-success-soft: #ECFDF3; --pv-warning: #F59E0B; --pv-warning-soft: #FFFAEB; --pv-danger: #EF4444; --pv-danger-soft: #FEF2F2; --pv-bg: #F9FAFB; --pv-surface: #FFFFFF; --pv-surface-2: #F3F4F6; --pv-border: #E5E7EB; --pv-text: #111827; --pv-text-muted: #6B7280; --pv-sidebar-bg: #FFFFFF; --pv-sidebar-fg: #374151; --pv-sidebar-active: rgba(59,130,246,.10); --pv-label-transform: uppercase; --pv-label-tracking: .06em; /* overline: 11px semibold */ } /* ---- Base ---- */ [data-skin="notipulse"] body, [data-skin="notipulse"] .pv-content { font-family: var(--pv-ui-font); font-size: var(--pv-ui-size); line-height: 1.57; /* 22px on 14px body */ background: var(--pv-bg); } [data-skin="notipulse"] h1, [data-skin="notipulse"] h2, [data-skin="notipulse"] h3 { font-family: var(--pv-font-display); font-weight: var(--pv-heading-weight); letter-spacing: var(--pv-heading-tracking); } [data-skin="notipulse"] .pv-content h1 { font-size: 1.5rem; line-height: 2rem; } /* ---- Cards: resting elevation, severity stripe on alert ---- */ [data-skin="notipulse"] .pv-card, [data-skin="notipulse"] .pv-kpi, [data-skin="notipulse"] .pv-chart-card { background: var(--pv-surface); border: 1px solid var(--pv-border); border-radius: var(--pv-r-card); box-shadow: var(--pv-shadow-xs); transition: box-shadow .3s ease-out, transform .3s ease-out; } [data-skin="notipulse"] .pv-card-pad { padding: var(--pv-card-pad); } /* Alert cards animate subtle -> large and take the severity stripe. */ [data-skin="notipulse"] .pv-alert, [data-skin="notipulse"] .pv-card.is-alerted { border-left: 4px solid var(--pv-info); border-radius: var(--pv-r-card); box-shadow: var(--pv-shadow-lg); animation: np-lift .3s ease-out; } [data-skin="notipulse"] .pv-alert-danger { border-left-color: var(--pv-danger); box-shadow: var(--np-alert-lift); } [data-skin="notipulse"] .pv-alert-warning { border-left-color: var(--pv-warning); } [data-skin="notipulse"] .pv-alert-success { border-left-color: var(--pv-success); } [data-skin="notipulse"] .pv-alert-info { border-left-color: var(--pv-info); } @keyframes np-lift { from { box-shadow: var(--pv-shadow-xs); } to { box-shadow: var(--pv-shadow-lg); } } /* Respect a reduced-motion preference: the stripe still communicates severity. */ @media (prefers-reduced-motion: reduce) { [data-skin="notipulse"] .pv-alert, [data-skin="notipulse"] .pv-card.is-alerted { animation: none; } } /* ---- Buttons: 44px touch target, red reserved for urgency ---- */ [data-skin="notipulse"] .pv-btn { border-radius: var(--pv-r-control); font-weight: 600; min-height: 44px; padding: 0 1rem; } [data-skin="notipulse"] .pv-btn-sm { min-height: 34px; padding: 0 .75rem; } [data-skin="notipulse"] .pv-btn-primary { background: var(--pv-accent); border-color: var(--pv-accent); color: #fff; } [data-skin="notipulse"] .pv-btn-primary:hover { background: var(--pv-accent-600); } [data-skin="notipulse"] .pv-btn-ghost { background: transparent; color: var(--pv-text-muted); border-color: transparent; } [data-skin="notipulse"] .pv-btn-ghost:hover { background: var(--pv-surface-2); } [data-skin="notipulse"] .pv-btn:disabled { opacity: .4; } /* ---- Inputs: 44px min, 3px focus ring ---- */ [data-skin="notipulse"] .pv-input { min-height: 44px; border-radius: var(--pv-r-control); border: 1px solid var(--pv-border); background: var(--pv-surface); } [data-skin="notipulse"] .pv-input:hover { border-color: #D1D5DB; } [data-skin="notipulse"] .pv-input:focus { border-color: var(--pv-accent); box-shadow: 0 0 0 3px rgba(59,130,246,.12); outline: none; } /* ---- Chips / badges: pill, semantic at 12% ---- */ [data-skin="notipulse"] .pv-badge { border-radius: 9999px; padding: .25rem .75rem; font-weight: 600; font-size: .6875rem; /* 11px overline */ letter-spacing: .04em; } [data-skin="notipulse"] .pv-badge-danger { background: rgba(239,68,68,.12); color: #B91C1C; } [data-skin="notipulse"] .pv-badge-warning { background: rgba(245,158,11,.12); color: #B45309; } [data-skin="notipulse"] .pv-badge-info { background: rgba(59,130,246,.12); color: #1D4ED8; } [data-skin="notipulse"] .pv-badge-success { background: rgba(34,197,94,.12); color: #15803D; } [data-skin="notipulse"] .pv-badge-muted { background: #F3F4F6; color: #374151; } /* ---- Tables read as notification rows: 64px, inset divider ---- */ [data-skin="notipulse"] .pv-table td { padding: var(--pv-cell-y) var(--pv-cell-x); border-bottom: 1px solid #F3F4F6; } [data-skin="notipulse"] .pv-table th { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pv-text-muted); } [data-skin="notipulse"] .pv-table tbody tr:hover { background: #F3F4F6; } /* ---- Sidebar: pill active state ---- */ [data-skin="notipulse"] .pv-nav-link { border-radius: var(--pv-nav-active-radius); } /* ========================================================================== AGENCY OS — the Pioneer Vision look -------------------------------------------------------------------------- Built to the supplied screenshots: dark navy rail, white workspace, purple primary, compact data tables, KPI cards with a soft icon tile. This is a SKIN, not a rewrite. It redefines the tokens and the shared component surfaces, so all 245 existing views inherit it without being touched. Anything a page does not override keeps working exactly as before. ========================================================================== */ [data-skin="agencyos"] { /* --- brand ---------------------------------------------------------- */ --pv-primary: #7c3aed; --pv-primary-600: #6d28d9; --pv-primary-700: #5b21b6; --pv-primary-soft: #f3efff; --pv-accent: #7c3aed; --pv-accent-600: #6d28d9; --pv-accent-soft: #f3efff; --pv-brand-ink: #171b2c; /* --- surfaces ------------------------------------------------------- */ --pv-bg: #f6f7fb; --pv-surface: #ffffff; --pv-surface-2: #f6f7fb; --pv-surface-3: #eef0f6; --pv-border: #e6e8f0; --pv-border-strong: #d7dae6; /* --- ink ------------------------------------------------------------ */ --pv-text: #111827; --pv-text-2: #374151; --pv-text-muted: #6b7280; --pv-text-faint: #9aa1ae; /* --- semantic ------------------------------------------------------- */ --pv-success: #10b981; --pv-success-soft: #d1fae5; --pv-warning: #f59e0b; --pv-warning-soft: #fef3c7; --pv-danger: #ef4444; --pv-danger-soft: #fee2e2; --pv-info: #3b82f6; --pv-info-soft: #dbeafe; /* --- rail ----------------------------------------------------------- */ --pv-sidebar-bg: #171b2c; --pv-sidebar-ink: #aeb4c6; --pv-sidebar-ink-2: #6f778d; --pv-sidebar-active: #7c3aed; --pv-sidebar-w: 232px; /* --- geometry ------------------------------------------------------- */ --pv-r-sm: 6px; --pv-r-md: 8px; --pv-r-lg: 12px; --pv-r-xl: 14px; --pv-card-pad: 1.25rem; /* --- shadow: soft, never heavy -------------------------------------- */ --pv-shadow-sm: 0 1px 2px rgba(16,24,40,.05); --pv-shadow: 0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04); --pv-shadow-lg: 0 8px 24px rgba(16,24,40,.08); /* --- type ----------------------------------------------------------- */ --pv-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --pv-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --pv-text-xs: .75rem; --pv-text-sm: .8125rem; --pv-text-md: .875rem; } /* ---------------------------------------------------------------- shell */ [data-skin="agencyos"] body, [data-skin="agencyos"] .pv-content { background: var(--pv-bg); } [data-skin="agencyos"] .pv-content { padding: 1.75rem 2rem 3rem; max-width: none; } /* Typography — strong titles, quiet subtitles, nothing oversized. */ [data-skin="agencyos"] .pv-content h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--pv-text); } [data-skin="agencyos"] .pv-content h2 { font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; } [data-skin="agencyos"] .pv-content h3 { font-size: .9375rem; font-weight: 650; letter-spacing: -.005em; } [data-skin="agencyos"] .pv-page-sub, [data-skin="agencyos"] .pv-muted { color: var(--pv-text-muted); } /* ---------------------------------------------------------------- rail */ [data-skin="agencyos"] .pv-sidebar { background: var(--pv-sidebar-bg); border-right: 0; width: var(--pv-sidebar-w); } [data-skin="agencyos"] .pv-sidebar .pv-brand, [data-skin="agencyos"] .pv-sidebar .pv-brand * { color: #fff; } [data-skin="agencyos"] .pv-sidebar .pv-brand { padding: 1.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); } [data-skin="agencyos"] .pv-nav-section, [data-skin="agencyos"] .pv-sec-label { color: var(--pv-sidebar-ink-2); font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } [data-skin="agencyos"] .pv-nav-section { padding: 1.1rem .95rem .35rem; background: none; border: 0; } /* The coloured section chip belongs to the old look. */ [data-skin="agencyos"] .pv-sec-ico { display: none; } [data-skin="agencyos"] .pv-sec-caret { color: var(--pv-sidebar-ink-2); font-size: .6rem; } [data-skin="agencyos"] .pv-nav-link { display: flex; align-items: center; gap: .7rem; margin: .0625rem .5rem; padding: .5rem .7rem; border-radius: var(--pv-r-md); color: var(--pv-sidebar-ink); font-size: .8125rem; font-weight: 500; border: 0; background: none; transition: background .12s ease, color .12s ease; } [data-skin="agencyos"] .pv-nav-link i { width: 1.05rem; font-size: .8125rem; opacity: .85; } [data-skin="agencyos"] .pv-nav-link:hover { background: rgba(255,255,255,.06); color: #fff; } [data-skin="agencyos"] .pv-nav-link.active { background: var(--pv-sidebar-active); color: #fff; font-weight: 600; } [data-skin="agencyos"] .pv-nav-link.active i { opacity: 1; } /* ---------------------------------------------------------------- header */ [data-skin="agencyos"] .pv-topbar { height: 60px; background: var(--pv-surface); border-bottom: 1px solid var(--pv-border); box-shadow: none; backdrop-filter: none; padding: 0 1.5rem; gap: .5rem; } [data-skin="agencyos"] .pv-topbar .pv-search { max-width: 420px; width: 100%; } [data-skin="agencyos"] .pv-topbar .pv-input { background: var(--pv-surface-2); border: 1px solid var(--pv-border); border-radius: var(--pv-r-md); height: 38px; font-size: .8125rem; } [data-skin="agencyos"] .pv-icon-btn { width: 36px; height: 36px; border-radius: var(--pv-r-md); color: var(--pv-text-muted); background: none; border: 0; } [data-skin="agencyos"] .pv-icon-btn:hover { background: var(--pv-surface-2); color: var(--pv-text); } /* ---------------------------------------------------------------- cards */ [data-skin="agencyos"] .pv-card, [data-skin="agencyos"] .pv-kpi, [data-skin="agencyos"] .pv-chart-card { background: var(--pv-surface); border: 1px solid var(--pv-border); border-radius: var(--pv-r-lg); box-shadow: var(--pv-shadow-sm); } [data-skin="agencyos"] .pv-card-pad { padding: var(--pv-card-pad); } [data-skin="agencyos"] .pv-card:hover { box-shadow: var(--pv-shadow-sm); } /* ---------------------------------------------------------------- KPI */ [data-skin="agencyos"] .pv-kpi { padding: 1.15rem 1.25rem; transition: box-shadow .15s ease, border-color .15s ease; } [data-skin="agencyos"] .pv-kpi:hover { transform: none; box-shadow: var(--pv-shadow); border-color: var(--pv-border-strong); } [data-skin="agencyos"] .pv-kpi-label { font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pv-text-muted); } [data-skin="agencyos"] .pv-kpi-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--pv-text); margin: .35rem 0 .3rem; line-height: 1.1; } [data-skin="agencyos"] .pv-kpi-foot { font-size: .75rem; gap: .4rem; } /* Soft square icon tile, as in the reference. */ [data-skin="agencyos"] .pv-stat-icon { width: 38px; height: 38px; border-radius: var(--pv-r-md); background: var(--pv-primary-soft); color: var(--pv-primary); display: grid; place-items: center; font-size: .9rem; } /* The old vibrant gradient tiles are not this look. */ [data-skin="agencyos"] .pv-kpi--grad { background: var(--pv-surface) !important; color: var(--pv-text) !important; border: 1px solid var(--pv-border) !important; } [data-skin="agencyos"] .pv-kpi--grad .pv-kpi-label { color: var(--pv-text-muted) !important; } [data-skin="agencyos"] .pv-kpi--grad .pv-kpi-value { color: var(--pv-text) !important; } [data-skin="agencyos"] .pv-kpi--grad .pv-stat-icon { background: var(--pv-primary-soft) !important; color: var(--pv-primary) !important; } [data-skin="agencyos"] .pv-trend { font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; } [data-skin="agencyos"] .pv-trend-up { color: var(--pv-success); } [data-skin="agencyos"] .pv-trend-down { color: var(--pv-danger); } /* ---------------------------------------------------------------- tables */ [data-skin="agencyos"] .pv-table { font-size: .8125rem; border-collapse: separate; border-spacing: 0; } [data-skin="agencyos"] .pv-table th { font-size: .75rem; font-weight: 600; color: var(--pv-text-muted); text-transform: none; letter-spacing: 0; padding: .7rem 1rem; background: var(--pv-surface); border-bottom: 1px solid var(--pv-border); position: sticky; top: 0; z-index: 1; } [data-skin="agencyos"] .pv-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--pv-border); color: var(--pv-text-2); vertical-align: middle; } [data-skin="agencyos"] .pv-table tbody tr:hover { background: var(--pv-surface-2); } [data-skin="agencyos"] .pv-table tbody tr:last-child td { border-bottom: 0; } /* ---------------------------------------------------------------- badges */ [data-skin="agencyos"] .pv-badge { font-size: .6875rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: .2rem .55rem; border-radius: 999px; border: 0; } [data-skin="agencyos"] .pv-badge-success { background: var(--pv-success-soft); color: #047857; } [data-skin="agencyos"] .pv-badge-warning { background: var(--pv-warning-soft); color: #b45309; } [data-skin="agencyos"] .pv-badge-danger { background: var(--pv-danger-soft); color: #b91c1c; } [data-skin="agencyos"] .pv-badge-info { background: var(--pv-info-soft); color: #1d4ed8; } [data-skin="agencyos"] .pv-badge-muted { background: var(--pv-surface-3); color: var(--pv-text-muted); } /* ---------------------------------------------------------------- buttons */ [data-skin="agencyos"] .pv-btn { border-radius: var(--pv-r-md); font-size: .8125rem; font-weight: 600; padding: .55rem .9rem; box-shadow: none; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease; } [data-skin="agencyos"] .pv-btn-primary { background: var(--pv-primary); color: #fff; border-color: var(--pv-primary); } [data-skin="agencyos"] .pv-btn-primary:hover { background: var(--pv-primary-600); border-color: var(--pv-primary-600); } [data-skin="agencyos"] .pv-btn-ghost { background: var(--pv-surface); color: var(--pv-text-2); border-color: var(--pv-border); } [data-skin="agencyos"] .pv-btn-ghost:hover { background: var(--pv-surface-2); border-color: var(--pv-border-strong); } [data-skin="agencyos"] .pv-btn-sm { padding: .4rem .7rem; font-size: .75rem; } /* ---------------------------------------------------------------- forms */ [data-skin="agencyos"] .pv-input, [data-skin="agencyos"] select.pv-input, [data-skin="agencyos"] textarea.pv-input { border-radius: var(--pv-r-md); border: 1px solid var(--pv-border); font-size: .8125rem; background: var(--pv-surface); color: var(--pv-text); } [data-skin="agencyos"] .pv-input:focus { border-color: var(--pv-primary); box-shadow: 0 0 0 3px rgba(124,58,237,.12); outline: none; } [data-skin="agencyos"] .pv-label { font-size: .75rem; font-weight: 600; color: var(--pv-text-2); margin-bottom: .3rem; display: block; } /* ---------------------------------------------------------------- tabs */ [data-skin="agencyos"] .pv-tab { font-size: .8125rem; padding: .6rem .85rem; } [data-skin="agencyos"] .pv-tab.active { color: var(--pv-primary); border-bottom-color: var(--pv-primary); } /* ---------------------------------------------------------------- dark */ [data-skin="agencyos"][data-theme="dark"] { --pv-bg: #0f1117; --pv-surface: #171a23; --pv-surface-2: #1e222d; --pv-surface-3: #262b38; --pv-border: #262b38; --pv-border-strong: #333949; --pv-text: #f3f4f6; --pv-text-2: #d1d5db; --pv-text-muted: #9aa1ae; --pv-sidebar-bg: #0c0e14; } [data-skin="agencyos"][data-theme="dark"] .pv-kpi--grad, [data-skin="agencyos"][data-theme="dark"] .pv-card { background: var(--pv-surface) !important; } /* ---------------------------------------------------------------- responsive */ @media (max-width: 1024px) { [data-skin="agencyos"] .pv-content { padding: 1.25rem 1rem 2.5rem; } [data-skin="agencyos"] .pv-content h1 { font-size: 1.4rem; } [data-skin="agencyos"] .pv-topbar { padding: 0 .85rem; } } /* --- the existing collapsible rail, restyled for this skin --------------- The mechanism (.pv-rail, pvRailToggle, localStorage) belongs to the sidebar partial. This only changes how it looks. */ [data-skin="agencyos"] .pv-sidebar.pv-rail { width: 64px !important; min-width: 64px !important; } [data-skin="agencyos"] .pv-sidebar.pv-rail .pv-nav-link { justify-content: center; padding-left: 0; padding-right: 0; } [data-skin="agencyos"] .pv-sidebar.pv-rail .pv-nav-link i { width: auto; } [data-skin="agencyos"] .pv-sidebar.pv-rail .pv-nav-section { padding: .8rem 0 .3rem; } [data-skin="agencyos"] .pv-rail-toggle { background: rgba(255,255,255,.06); color: var(--pv-sidebar-ink); } [data-skin="agencyos"] .pv-rail-toggle:hover { background: rgba(255,255,255,.12); color: #fff; } /* --- shared components, tuned to this skin ------------------------------ */ [data-skin="agencyos"] aside.pv-drawer { width: 410px; } [data-skin="agencyos"] .pv-drawer-title { font-size: 1.05rem; } [data-skin="agencyos"] .pv-filterbar { padding: .8rem .9rem; } [data-skin="agencyos"] .pv-filterbar .pv-input { background: var(--pv-surface); } /* ========================================================================== CODA — DESIGN.md skin (coda.io). Reuses the agencyos component layer; only the tokens change. ========================================================================== */ [data-skin="coda"] { /* Coda — peach workspace, near-black CTA, Korbit-palette voltage */ --pv-primary:#212121; --pv-primary-600:#000000; --pv-primary-700:#000000; --pv-primary-soft:#f4ede4; --pv-accent:#f8ad40; --pv-accent-600:#e4a709; --pv-accent-soft:#fdf3d8; --pv-brand-ink:#1c1c1c; --pv-bg:#fbf7f5; --pv-surface:#ffffff; --pv-surface-2:#f6f1ed; --pv-surface-3:#efe8e2; --pv-border:#e8e1da; --pv-border-strong:#d8cfc6; --pv-text:#212121; --pv-text-2:#444444; --pv-text-muted:#666666; --pv-text-faint:#8e8e8e; --pv-success:#187b34; --pv-success-soft:#e2f8e8; --pv-warning:#c88a00; --pv-warning-soft:#fdf3d8; --pv-danger:#a91e1e; --pv-danger-soft:#ffdcdc; --pv-info:#0f58bd; --pv-info-soft:#dbedfd; --pv-sidebar-bg:#1c1c1c; --pv-sidebar-ink:#a8a29b; --pv-sidebar-ink-2:#78726b; --pv-sidebar-active:#6e21ba; --pv-sidebar-w:232px; --pv-r-sm:4px; --pv-r-md:8px; --pv-r-lg:12px; --pv-r-xl:14px; --pv-card-pad:1.25rem; --pv-shadow-sm:0 1px 2px rgba(33,33,33,.05); --pv-shadow:0 1px 3px rgba(33,33,33,.07),0 1px 2px rgba(33,33,33,.04); --pv-shadow-lg:0 8px 24px rgba(33,33,33,.08); --pv-font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --pv-font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --pv-text-xs:.75rem; --pv-text-sm:.8125rem; --pv-text-md:.875rem; } /* ---------------------------------------------------------------- shell */ [data-skin="coda"] body, [data-skin="coda"] .pv-content { background: var(--pv-bg); } [data-skin="coda"] .pv-content { padding: 1.75rem 2rem 3rem; max-width: none; } /* Typography — strong titles, quiet subtitles, nothing oversized. */ [data-skin="coda"] .pv-content h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--pv-text); } [data-skin="coda"] .pv-content h2 { font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; } [data-skin="coda"] .pv-content h3 { font-size: .9375rem; font-weight: 650; letter-spacing: -.005em; } [data-skin="coda"] .pv-page-sub, [data-skin="coda"] .pv-muted { color: var(--pv-text-muted); } /* ---------------------------------------------------------------- rail */ [data-skin="coda"] .pv-sidebar { background: var(--pv-sidebar-bg); border-right: 0; width: var(--pv-sidebar-w); } [data-skin="coda"] .pv-sidebar .pv-brand, [data-skin="coda"] .pv-sidebar .pv-brand * { color: #fff; } [data-skin="coda"] .pv-sidebar .pv-brand { padding: 1.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); } [data-skin="coda"] .pv-nav-section, [data-skin="coda"] .pv-sec-label { color: var(--pv-sidebar-ink-2); font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } [data-skin="coda"] .pv-nav-section { padding: 1.1rem .95rem .35rem; background: none; border: 0; } /* The coloured section chip belongs to the old look. */ [data-skin="coda"] .pv-sec-ico { display: none; } [data-skin="coda"] .pv-sec-caret { color: var(--pv-sidebar-ink-2); font-size: .6rem; } [data-skin="coda"] .pv-nav-link { display: flex; align-items: center; gap: .7rem; margin: .0625rem .5rem; padding: .5rem .7rem; border-radius: var(--pv-r-md); color: var(--pv-sidebar-ink); font-size: .8125rem; font-weight: 500; border: 0; background: none; transition: background .12s ease, color .12s ease; } [data-skin="coda"] .pv-nav-link i { width: 1.05rem; font-size: .8125rem; opacity: .85; } [data-skin="coda"] .pv-nav-link:hover { background: rgba(255,255,255,.06); color: #fff; } [data-skin="coda"] .pv-nav-link.active { background: var(--pv-sidebar-active); color: #fff; font-weight: 600; } [data-skin="coda"] .pv-nav-link.active i { opacity: 1; } /* ---------------------------------------------------------------- header */ [data-skin="coda"] .pv-topbar { height: 60px; background: var(--pv-surface); border-bottom: 1px solid var(--pv-border); box-shadow: none; backdrop-filter: none; padding: 0 1.5rem; gap: .5rem; } [data-skin="coda"] .pv-topbar .pv-search { max-width: 420px; width: 100%; } [data-skin="coda"] .pv-topbar .pv-input { background: var(--pv-surface-2); border: 1px solid var(--pv-border); border-radius: var(--pv-r-md); height: 38px; font-size: .8125rem; } [data-skin="coda"] .pv-icon-btn { width: 36px; height: 36px; border-radius: var(--pv-r-md); color: var(--pv-text-muted); background: none; border: 0; } [data-skin="coda"] .pv-icon-btn:hover { background: var(--pv-surface-2); color: var(--pv-text); } /* ---------------------------------------------------------------- cards */ [data-skin="coda"] .pv-card, [data-skin="coda"] .pv-kpi, [data-skin="coda"] .pv-chart-card { background: var(--pv-surface); border: 1px solid var(--pv-border); border-radius: var(--pv-r-lg); box-shadow: var(--pv-shadow-sm); } [data-skin="coda"] .pv-card-pad { padding: var(--pv-card-pad); } [data-skin="coda"] .pv-card:hover { box-shadow: var(--pv-shadow-sm); } /* ---------------------------------------------------------------- KPI */ [data-skin="coda"] .pv-kpi { padding: 1.15rem 1.25rem; transition: box-shadow .15s ease, border-color .15s ease; } [data-skin="coda"] .pv-kpi:hover { transform: none; box-shadow: var(--pv-shadow); border-color: var(--pv-border-strong); } [data-skin="coda"] .pv-kpi-label { font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pv-text-muted); } [data-skin="coda"] .pv-kpi-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--pv-text); margin: .35rem 0 .3rem; line-height: 1.1; } [data-skin="coda"] .pv-kpi-foot { font-size: .75rem; gap: .4rem; } /* Soft square icon tile, as in the reference. */ [data-skin="coda"] .pv-stat-icon { width: 38px; height: 38px; border-radius: var(--pv-r-md); background: var(--pv-primary-soft); color: var(--pv-primary); display: grid; place-items: center; font-size: .9rem; } /* The old vibrant gradient tiles are not this look. */ [data-skin="coda"] .pv-kpi--grad { background: var(--pv-surface) !important; color: var(--pv-text) !important; border: 1px solid var(--pv-border) !important; } [data-skin="coda"] .pv-kpi--grad .pv-kpi-label { color: var(--pv-text-muted) !important; } [data-skin="coda"] .pv-kpi--grad .pv-kpi-value { color: var(--pv-text) !important; } [data-skin="coda"] .pv-kpi--grad .pv-stat-icon { background: var(--pv-primary-soft) !important; color: var(--pv-primary) !important; } [data-skin="coda"] .pv-trend { font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; } [data-skin="coda"] .pv-trend-up { color: var(--pv-success); } [data-skin="coda"] .pv-trend-down { color: var(--pv-danger); } /* ---------------------------------------------------------------- tables */ [data-skin="coda"] .pv-table { font-size: .8125rem; border-collapse: separate; border-spacing: 0; } [data-skin="coda"] .pv-table th { font-size: .75rem; font-weight: 600; color: var(--pv-text-muted); text-transform: none; letter-spacing: 0; padding: .7rem 1rem; background: var(--pv-surface); border-bottom: 1px solid var(--pv-border); position: sticky; top: 0; z-index: 1; } [data-skin="coda"] .pv-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--pv-border); color: var(--pv-text-2); vertical-align: middle; } [data-skin="coda"] .pv-table tbody tr:hover { background: var(--pv-surface-2); } [data-skin="coda"] .pv-table tbody tr:last-child td { border-bottom: 0; } /* ---------------------------------------------------------------- badges */ [data-skin="coda"] .pv-badge { font-size: .6875rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: .2rem .55rem; border-radius: 999px; border: 0; } [data-skin="coda"] .pv-badge-success { background: var(--pv-success-soft); color: #047857; } [data-skin="coda"] .pv-badge-warning { background: var(--pv-warning-soft); color: #b45309; } [data-skin="coda"] .pv-badge-danger { background: var(--pv-danger-soft); color: #b91c1c; } [data-skin="coda"] .pv-badge-info { background: var(--pv-info-soft); color: #1d4ed8; } [data-skin="coda"] .pv-badge-muted { background: var(--pv-surface-3); color: var(--pv-text-muted); } /* ---------------------------------------------------------------- buttons */ [data-skin="coda"] .pv-btn { border-radius: var(--pv-r-md); font-size: .8125rem; font-weight: 600; padding: .55rem .9rem; box-shadow: none; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease; } [data-skin="coda"] .pv-btn-primary { background: var(--pv-primary); color: #fff; border-color: var(--pv-primary); } [data-skin="coda"] .pv-btn-primary:hover { background: var(--pv-primary-600); border-color: var(--pv-primary-600); } [data-skin="coda"] .pv-btn-ghost { background: var(--pv-surface); color: var(--pv-text-2); border-color: var(--pv-border); } [data-skin="coda"] .pv-btn-ghost:hover { background: var(--pv-surface-2); border-color: var(--pv-border-strong); } [data-skin="coda"] .pv-btn-sm { padding: .4rem .7rem; font-size: .75rem; } /* ---------------------------------------------------------------- forms */ [data-skin="coda"] .pv-input, [data-skin="coda"] select.pv-input, [data-skin="coda"] textarea.pv-input { border-radius: var(--pv-r-md); border: 1px solid var(--pv-border); font-size: .8125rem; background: var(--pv-surface); color: var(--pv-text); } [data-skin="coda"] .pv-input:focus { border-color: var(--pv-primary); box-shadow: 0 0 0 3px rgba(124,58,237,.12); outline: none; } [data-skin="coda"] .pv-label { font-size: .75rem; font-weight: 600; color: var(--pv-text-2); margin-bottom: .3rem; display: block; } /* ---------------------------------------------------------------- tabs */ [data-skin="coda"] .pv-tab { font-size: .8125rem; padding: .6rem .85rem; } [data-skin="coda"] .pv-tab.active { color: var(--pv-primary); border-bottom-color: var(--pv-primary); } /* ---------------------------------------------------------------- dark */ [data-skin="coda"][data-theme="dark"] { --pv-bg: #0f1117; --pv-surface: #171a23; --pv-surface-2: #1e222d; --pv-surface-3: #262b38; --pv-border: #262b38; --pv-border-strong: #333949; --pv-text: #f3f4f6; --pv-text-2: #d1d5db; --pv-text-muted: #9aa1ae; --pv-sidebar-bg: #0c0e14; } [data-skin="coda"][data-theme="dark"] .pv-kpi--grad, [data-skin="coda"][data-theme="dark"] .pv-card { background: var(--pv-surface) !important; } /* ---------------------------------------------------------------- responsive */ @media (max-width: 1024px) { [data-skin="coda"] .pv-content { padding: 1.25rem 1rem 2.5rem; } [data-skin="coda"] .pv-content h1 { font-size: 1.4rem; } [data-skin="coda"] .pv-topbar { padding: 0 .85rem; } } /* --- the existing collapsible rail, restyled for this skin --------------- The mechanism (.pv-rail, pvRailToggle, localStorage) belongs to the sidebar partial. This only changes how it looks. */ [data-skin="coda"] .pv-sidebar.pv-rail { width: 64px !important; min-width: 64px !important; } [data-skin="coda"] .pv-sidebar.pv-rail .pv-nav-link { justify-content: center; padding-left: 0; padding-right: 0; } [data-skin="coda"] .pv-sidebar.pv-rail .pv-nav-link i { width: auto; } [data-skin="coda"] .pv-sidebar.pv-rail .pv-nav-section { padding: .8rem 0 .3rem; } [data-skin="coda"] .pv-rail-toggle { background: rgba(255,255,255,.06); color: var(--pv-sidebar-ink); } [data-skin="coda"] .pv-rail-toggle:hover { background: rgba(255,255,255,.12); color: #fff; } /* --- shared components, tuned to this skin ------------------------------ */ [data-skin="coda"] aside.pv-drawer { width: 410px; } [data-skin="coda"] .pv-drawer-title { font-size: 1.05rem; } [data-skin="coda"] .pv-filterbar { padding: .8rem .9rem; } [data-skin="coda"] .pv-filterbar .pv-input { background: var(--pv-surface); } /* ========================================================================== NOTION — DESIGN.md skin (notion.com). Reuses the agencyos component layer. ========================================================================== */ [data-skin="notion"] { /* Notion — navy hero rail, signature purple CTA, pastel neutrals */ --pv-primary:#5645d4; --pv-primary-600:#4534b3; --pv-primary-700:#3a2a99; --pv-primary-soft:#ece8fb; --pv-accent:#5645d4; --pv-accent-600:#4534b3; --pv-accent-soft:#ece8fb; --pv-brand-ink:#0a1530; --pv-bg:#f7f6f4; --pv-surface:#ffffff; --pv-surface-2:#f6f5f4; --pv-surface-3:#efedea; --pv-border:#e5e3df; --pv-border-strong:#c8c4be; --pv-text:#1a1a1a; --pv-text-2:#37352f; --pv-text-muted:#5d5b54; --pv-text-faint:#787671; --pv-success:#1aae39; --pv-success-soft:#d9f3e1; --pv-warning:#dd5b00; --pv-warning-soft:#ffe8d4; --pv-danger:#e03131; --pv-danger-soft:#fde0ec; --pv-info:#0075de; --pv-info-soft:#dcecfa; --pv-sidebar-bg:#0a1530; --pv-sidebar-ink:#aab2c8; --pv-sidebar-ink-2:#5b6480; --pv-sidebar-active:#5645d4; --pv-sidebar-w:232px; --pv-r-sm:4px; --pv-r-md:8px; --pv-r-lg:12px; --pv-r-xl:16px; --pv-card-pad:1.25rem; --pv-shadow-sm:0 1px 2px rgba(15,15,15,.05); --pv-shadow:0 1px 3px rgba(15,15,15,.08),0 1px 2px rgba(15,15,15,.04); --pv-shadow-lg:0 24px 48px -8px rgba(15,15,15,.14); --pv-font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --pv-font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --pv-text-xs:.75rem; --pv-text-sm:.8125rem; --pv-text-md:.875rem; } /* ---------------------------------------------------------------- shell */ [data-skin="notion"] body, [data-skin="notion"] .pv-content { background: var(--pv-bg); } [data-skin="notion"] .pv-content { padding: 1.75rem 2rem 3rem; max-width: none; } /* Typography — strong titles, quiet subtitles, nothing oversized. */ [data-skin="notion"] .pv-content h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--pv-text); } [data-skin="notion"] .pv-content h2 { font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; } [data-skin="notion"] .pv-content h3 { font-size: .9375rem; font-weight: 650; letter-spacing: -.005em; } [data-skin="notion"] .pv-page-sub, [data-skin="notion"] .pv-muted { color: var(--pv-text-muted); } /* ---------------------------------------------------------------- rail */ [data-skin="notion"] .pv-sidebar { background: var(--pv-sidebar-bg); border-right: 0; width: var(--pv-sidebar-w); } [data-skin="notion"] .pv-sidebar .pv-brand, [data-skin="notion"] .pv-sidebar .pv-brand * { color: #fff; } [data-skin="notion"] .pv-sidebar .pv-brand { padding: 1.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); } [data-skin="notion"] .pv-nav-section, [data-skin="notion"] .pv-sec-label { color: var(--pv-sidebar-ink-2); font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } [data-skin="notion"] .pv-nav-section { padding: 1.1rem .95rem .35rem; background: none; border: 0; } /* The coloured section chip belongs to the old look. */ [data-skin="notion"] .pv-sec-ico { display: none; } [data-skin="notion"] .pv-sec-caret { color: var(--pv-sidebar-ink-2); font-size: .6rem; } [data-skin="notion"] .pv-nav-link { display: flex; align-items: center; gap: .7rem; margin: .0625rem .5rem; padding: .5rem .7rem; border-radius: var(--pv-r-md); color: var(--pv-sidebar-ink); font-size: .8125rem; font-weight: 500; border: 0; background: none; transition: background .12s ease, color .12s ease; } [data-skin="notion"] .pv-nav-link i { width: 1.05rem; font-size: .8125rem; opacity: .85; } [data-skin="notion"] .pv-nav-link:hover { background: rgba(255,255,255,.06); color: #fff; } [data-skin="notion"] .pv-nav-link.active { background: var(--pv-sidebar-active); color: #fff; font-weight: 600; } [data-skin="notion"] .pv-nav-link.active i { opacity: 1; } /* ---------------------------------------------------------------- header */ [data-skin="notion"] .pv-topbar { height: 60px; background: var(--pv-surface); border-bottom: 1px solid var(--pv-border); box-shadow: none; backdrop-filter: none; padding: 0 1.5rem; gap: .5rem; } [data-skin="notion"] .pv-topbar .pv-search { max-width: 420px; width: 100%; } [data-skin="notion"] .pv-topbar .pv-input { background: var(--pv-surface-2); border: 1px solid var(--pv-border); border-radius: var(--pv-r-md); height: 38px; font-size: .8125rem; } [data-skin="notion"] .pv-icon-btn { width: 36px; height: 36px; border-radius: var(--pv-r-md); color: var(--pv-text-muted); background: none; border: 0; } [data-skin="notion"] .pv-icon-btn:hover { background: var(--pv-surface-2); color: var(--pv-text); } /* ---------------------------------------------------------------- cards */ [data-skin="notion"] .pv-card, [data-skin="notion"] .pv-kpi, [data-skin="notion"] .pv-chart-card { background: var(--pv-surface); border: 1px solid var(--pv-border); border-radius: var(--pv-r-lg); box-shadow: var(--pv-shadow-sm); } [data-skin="notion"] .pv-card-pad { padding: var(--pv-card-pad); } [data-skin="notion"] .pv-card:hover { box-shadow: var(--pv-shadow-sm); } /* ---------------------------------------------------------------- KPI */ [data-skin="notion"] .pv-kpi { padding: 1.15rem 1.25rem; transition: box-shadow .15s ease, border-color .15s ease; } [data-skin="notion"] .pv-kpi:hover { transform: none; box-shadow: var(--pv-shadow); border-color: var(--pv-border-strong); } [data-skin="notion"] .pv-kpi-label { font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pv-text-muted); } [data-skin="notion"] .pv-kpi-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--pv-text); margin: .35rem 0 .3rem; line-height: 1.1; } [data-skin="notion"] .pv-kpi-foot { font-size: .75rem; gap: .4rem; } /* Soft square icon tile, as in the reference. */ [data-skin="notion"] .pv-stat-icon { width: 38px; height: 38px; border-radius: var(--pv-r-md); background: var(--pv-primary-soft); color: var(--pv-primary); display: grid; place-items: center; font-size: .9rem; } /* The old vibrant gradient tiles are not this look. */ [data-skin="notion"] .pv-kpi--grad { background: var(--pv-surface) !important; color: var(--pv-text) !important; border: 1px solid var(--pv-border) !important; } [data-skin="notion"] .pv-kpi--grad .pv-kpi-label { color: var(--pv-text-muted) !important; } [data-skin="notion"] .pv-kpi--grad .pv-kpi-value { color: var(--pv-text) !important; } [data-skin="notion"] .pv-kpi--grad .pv-stat-icon { background: var(--pv-primary-soft) !important; color: var(--pv-primary) !important; } [data-skin="notion"] .pv-trend { font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; } [data-skin="notion"] .pv-trend-up { color: var(--pv-success); } [data-skin="notion"] .pv-trend-down { color: var(--pv-danger); } /* ---------------------------------------------------------------- tables */ [data-skin="notion"] .pv-table { font-size: .8125rem; border-collapse: separate; border-spacing: 0; } [data-skin="notion"] .pv-table th { font-size: .75rem; font-weight: 600; color: var(--pv-text-muted); text-transform: none; letter-spacing: 0; padding: .7rem 1rem; background: var(--pv-surface); border-bottom: 1px solid var(--pv-border); position: sticky; top: 0; z-index: 1; } [data-skin="notion"] .pv-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--pv-border); color: var(--pv-text-2); vertical-align: middle; } [data-skin="notion"] .pv-table tbody tr:hover { background: var(--pv-surface-2); } [data-skin="notion"] .pv-table tbody tr:last-child td { border-bottom: 0; } /* ---------------------------------------------------------------- badges */ [data-skin="notion"] .pv-badge { font-size: .6875rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: .2rem .55rem; border-radius: 999px; border: 0; } [data-skin="notion"] .pv-badge-success { background: var(--pv-success-soft); color: #047857; } [data-skin="notion"] .pv-badge-warning { background: var(--pv-warning-soft); color: #b45309; } [data-skin="notion"] .pv-badge-danger { background: var(--pv-danger-soft); color: #b91c1c; } [data-skin="notion"] .pv-badge-info { background: var(--pv-info-soft); color: #1d4ed8; } [data-skin="notion"] .pv-badge-muted { background: var(--pv-surface-3); color: var(--pv-text-muted); } /* ---------------------------------------------------------------- buttons */ [data-skin="notion"] .pv-btn { border-radius: var(--pv-r-md); font-size: .8125rem; font-weight: 600; padding: .55rem .9rem; box-shadow: none; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease; } [data-skin="notion"] .pv-btn-primary { background: var(--pv-primary); color: #fff; border-color: var(--pv-primary); } [data-skin="notion"] .pv-btn-primary:hover { background: var(--pv-primary-600); border-color: var(--pv-primary-600); } [data-skin="notion"] .pv-btn-ghost { background: var(--pv-surface); color: var(--pv-text-2); border-color: var(--pv-border); } [data-skin="notion"] .pv-btn-ghost:hover { background: var(--pv-surface-2); border-color: var(--pv-border-strong); } [data-skin="notion"] .pv-btn-sm { padding: .4rem .7rem; font-size: .75rem; } /* ---------------------------------------------------------------- forms */ [data-skin="notion"] .pv-input, [data-skin="notion"] select.pv-input, [data-skin="notion"] textarea.pv-input { border-radius: var(--pv-r-md); border: 1px solid var(--pv-border); font-size: .8125rem; background: var(--pv-surface); color: var(--pv-text); } [data-skin="notion"] .pv-input:focus { border-color: var(--pv-primary); box-shadow: 0 0 0 3px rgba(124,58,237,.12); outline: none; } [data-skin="notion"] .pv-label { font-size: .75rem; font-weight: 600; color: var(--pv-text-2); margin-bottom: .3rem; display: block; } /* ---------------------------------------------------------------- tabs */ [data-skin="notion"] .pv-tab { font-size: .8125rem; padding: .6rem .85rem; } [data-skin="notion"] .pv-tab.active { color: var(--pv-primary); border-bottom-color: var(--pv-primary); } /* ---------------------------------------------------------------- dark */ [data-skin="notion"][data-theme="dark"] { --pv-bg: #0f1117; --pv-surface: #171a23; --pv-surface-2: #1e222d; --pv-surface-3: #262b38; --pv-border: #262b38; --pv-border-strong: #333949; --pv-text: #f3f4f6; --pv-text-2: #d1d5db; --pv-text-muted: #9aa1ae; --pv-sidebar-bg: #0c0e14; } [data-skin="notion"][data-theme="dark"] .pv-kpi--grad, [data-skin="notion"][data-theme="dark"] .pv-card { background: var(--pv-surface) !important; } /* ---------------------------------------------------------------- responsive */ @media (max-width: 1024px) { [data-skin="notion"] .pv-content { padding: 1.25rem 1rem 2.5rem; } [data-skin="notion"] .pv-content h1 { font-size: 1.4rem; } [data-skin="notion"] .pv-topbar { padding: 0 .85rem; } } /* --- the existing collapsible rail, restyled for this skin --------------- The mechanism (.pv-rail, pvRailToggle, localStorage) belongs to the sidebar partial. This only changes how it looks. */ [data-skin="notion"] .pv-sidebar.pv-rail { width: 64px !important; min-width: 64px !important; } [data-skin="notion"] .pv-sidebar.pv-rail .pv-nav-link { justify-content: center; padding-left: 0; padding-right: 0; } [data-skin="notion"] .pv-sidebar.pv-rail .pv-nav-link i { width: auto; } [data-skin="notion"] .pv-sidebar.pv-rail .pv-nav-section { padding: .8rem 0 .3rem; } [data-skin="notion"] .pv-rail-toggle { background: rgba(255,255,255,.06); color: var(--pv-sidebar-ink); } [data-skin="notion"] .pv-rail-toggle:hover { background: rgba(255,255,255,.12); color: #fff; } /* --- shared components, tuned to this skin ------------------------------ */ [data-skin="notion"] aside.pv-drawer { width: 410px; } [data-skin="notion"] .pv-drawer-title { font-size: 1.05rem; } [data-skin="notion"] .pv-filterbar { padding: .8rem .9rem; } [data-skin="notion"] .pv-filterbar .pv-input { background: var(--pv-surface); }