/* * Website themes (full "look and feel" skins). * * Companion to `themes.css`, which is BATTLECARD-only. This file themes * the WEBSITE chrome — sidebar, topbar, dashboard, library, settings, * editor frame, and the theme dial widget itself. * * Architecture * ------------ * The app shell (`app.css`) reads only `--co-*` semantic tokens. To * register a new website theme: * 1. Add a `[data-web-theme=""]` block here that re-points the * `--co-*` tokens (and any per-component overrides the theme needs). * 2. Append `{ key, label, swatch }` to the `WEB_THEMES` array in * `web-theme-switcher.js`. * That's it — no template edits, no per-page wiring. * * The selector lives on `` (set by an inline * script in `base.html` before paint, to avoid FOUC). It is * intentionally distinct from `data-theme="…"` (the battlecard preview's * own attribute), so the two systems coexist without conflict. * * Adding a theme * -------------- * Copy the `[data-web-theme="lime-dark"]` block, override the tokens you * want, and (optionally) add a small set of component-level rules for * anything that isn't a clean token swap (e.g. bento color rotation). */ /* ========================================================================= * default — current Cohere-style website chrome * * Intentionally empty. The `:root` block in `app.css` already defines * every `--co-*` token the chrome reads, so the default theme is just * "no overrides." This block exists for symmetry — the registry treats * every theme uniformly, including the default. * ========================================================================= */ [data-web-theme="default"] { /* no-op — :root in app.css is the canonical default */ } /* ========================================================================= * lime — bold near-black canvas + bento accents * * Translation of `forntend/design/lime.md`: * - dark canvas (#0E0E0E) with surface (#1A1A1A) + divider (#262626) * - color blocks (yellow / red / olive / lavender) replace borders * and shadows on every chrome card * - "soft brick" 24px radius is the signature shape; buttons are full * pills (999px) * - oversized hero numerals (display-stat 600w / -1px tracking) * - no shadows on chrome (reserved for transient floating UI) * - hover: brightness(1.05); active: scale(0.98) for ~120ms * ========================================================================= */ [data-web-theme="lime-dark"] { /* primitives — lime palette */ --lime-bg: #0E0E0E; --lime-surface: #1A1A1A; --lime-yellow: #F2E020; --lime-yellow-deep: #E8D200; --lime-red: #EE3B1C; --lime-red-deep: #D43317; --lime-olive: #7A6E0E; --lime-olive-deep: #5E5408; --lime-lavender: #B0A5CC; --lime-lavender-deep: #9A8FBE; --lime-text: #FAFAFA; --lime-text-on-light: #0E0E0E; --lime-muted: #B8B8B8; --lime-muted-light: #3A3A3A; --lime-divider: #262626; /* re-pointed --co-* tokens — chrome inherits these automatically. Most chrome surfaces use --co-canvas (now dark) + --co-ink (now light); the per-component overrides below patch the rest. */ --co-canvas: var(--lime-bg); --co-stone: var(--lime-surface); --co-card-border: var(--lime-divider); --co-ink: var(--lime-text); --co-near-black: var(--lime-text); --co-slate: var(--lime-muted); --co-muted-slate: var(--lime-muted); --co-hairline: var(--lime-divider); --co-border-light: var(--lime-divider); --co-coral: var(--lime-red); --co-soft-coral: var(--lime-yellow); --co-action-blue: var(--lime-lavender); --co-deep-green: var(--lime-olive); --co-pale-blue: var(--lime-surface); --co-pale-green: var(--lime-surface); --co-pale-purple: var(--lime-surface); --co-pale-coral: #2A1814; --co-purple-deep: var(--lime-lavender); --co-brand-purple: var(--lime-yellow); --co-brand-green: var(--lime-lavender); /* lime radius scale — soft bricks everywhere */ --co-radius-xs: 8px; --co-radius-sm: 12px; --co-radius-md: 16px; --co-radius-lg: 24px; --co-radius-xl: 32px; --co-radius-pill: 999px; color-scheme: dark; } /* Body base — lime canvas inherits, but make ::selection legible. */ [data-web-theme="lime-dark"] body { background: var(--lime-bg); color: var(--lime-text); } [data-web-theme="lime-dark"] ::selection { background: var(--lime-yellow); color: var(--lime-text-on-light); } /* --- Sidebar ----------------------------------------------------------- */ [data-web-theme="lime-dark"] .co-sidebar { background: var(--lime-surface); border-right-color: var(--lime-divider); } [data-web-theme="lime-dark"] .co-sidebar-brand, [data-web-theme="lime-dark"] .co-sidebar-foot { border-color: var(--lime-divider); color: var(--lime-text); } [data-web-theme="lime-dark"] .co-sidebar-brand-mark { background: var(--lime-yellow); color: var(--lime-text-on-light); border-radius: 12px; } [data-web-theme="lime-dark"] .co-sidebar-brand-name, [data-web-theme="lime-dark"] .co-sidebar-foot-name { color: var(--lime-text); } [data-web-theme="lime-dark"] .co-sidebar-heading, [data-web-theme="lime-dark"] .co-sidebar-foot-meta { color: var(--lime-muted); } [data-web-theme="lime-dark"] .co-sidebar-item { color: var(--lime-text); border-radius: 12px; } [data-web-theme="lime-dark"] .co-sidebar-item:hover { background: var(--lime-divider); } [data-web-theme="lime-dark"] .co-sidebar-item.is-active { background: var(--lime-lavender); color: var(--lime-text-on-light); } /* --- Topbar ------------------------------------------------------------ */ [data-web-theme="lime-dark"] .co-topbar { background: var(--lime-bg); border-bottom-color: var(--lime-divider); } [data-web-theme="lime-dark"] .co-topbar-crumbs, [data-web-theme="lime-dark"] .co-topbar-crumbs a { color: var(--lime-muted); } [data-web-theme="lime-dark"] .co-topbar-crumbs a:hover { color: var(--lime-text); } [data-web-theme="lime-dark"] .co-topbar-crumbs-sep::before { color: var(--lime-divider); } /* --- Display typography — packed, tight, hero numerals --------------- */ [data-web-theme="lime-dark"] .co-display-hero, [data-web-theme="lime-dark"] .co-display-product, [data-web-theme="lime-dark"] .co-display-section, [data-web-theme="lime-dark"] .co-h-section, [data-web-theme="lime-dark"] .co-h-card, [data-web-theme="lime-dark"] .co-h-feature { font-weight: 600; letter-spacing: -0.025em; color: var(--lime-text); } [data-web-theme="lime-dark"] .co-mono-label { color: var(--lime-muted); } /* --- Buttons — pills, no border, hover shifts to -deep --------------- */ [data-web-theme="lime-dark"] .co-btn-primary { background: var(--lime-text); color: var(--lime-text-on-light); border: none; border-radius: var(--co-radius-pill); transition: all 180ms ease-out; } [data-web-theme="lime-dark"] .co-btn-primary:hover { background: var(--lime-yellow); color: var(--lime-text-on-light); } [data-web-theme="lime-dark"] .co-btn-primary:active { transform: scale(0.98); } [data-web-theme="lime-dark"] .co-btn-pill-outline { border: 1px solid var(--lime-text); color: var(--lime-text); background: transparent; border-radius: var(--co-radius-pill); transition: all 180ms ease-out; } [data-web-theme="lime-dark"] .co-btn-pill-outline:hover { background: var(--lime-text); color: var(--lime-text-on-light); } [data-web-theme="lime-dark"] .co-btn-pill-outline:active { transform: scale(0.98); } [data-web-theme="lime-dark"] .co-btn-secondary { color: var(--lime-text); } [data-web-theme="lime-dark"] .co-btn-secondary:hover { color: var(--lime-yellow); } /* --- Search pill ----------------------------------------------------- */ [data-web-theme="lime-dark"] .co-search { background: var(--lime-surface); border-color: transparent; } [data-web-theme="lime-dark"] .co-search:focus-within { background: var(--lime-bg); border-color: var(--lime-lavender); } [data-web-theme="lime-dark"] .co-search input { color: var(--lime-text); } [data-web-theme="lime-dark"] .co-search input::placeholder { color: var(--lime-muted); } [data-web-theme="lime-dark"] .co-search-icon { color: var(--lime-muted); } /* --- KPI bento grid — color rotation, soft bricks -------------------- */ [data-web-theme="lime-dark"] .co-kpi { border: none; border-radius: var(--co-radius-lg); box-shadow: none; padding: 24px; transition: filter 180ms ease-out, transform 120ms ease-out; } [data-web-theme="lime-dark"] .co-kpi:hover { filter: brightness(1.05); } [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(1) { background: var(--lime-yellow); border: none; } [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(1) .co-kpi-label, [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(1) .co-kpi-value, [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(1) .co-kpi-delta { color: var(--lime-text-on-light); } [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(2) { background: var(--lime-red); border: none; } [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(2) .co-kpi-label, [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(2) .co-kpi-value, [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(2) .co-kpi-delta { color: var(--lime-text); } [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(3) { background: var(--lime-olive); border: none; } [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-label, [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-value, [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-delta { color: var(--lime-text); } [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(4) { background: var(--lime-lavender); border: none; } [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-label, [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-value, [data-web-theme="lime-dark"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-delta { color: var(--lime-text-on-light); } [data-web-theme="lime-dark"] .co-kpi-value { font-weight: 600; letter-spacing: -0.025em; font-size: 44px; line-height: 1.05; } /* --- Quick-actions bento grid — same color rotation ------------------ */ [data-web-theme="lime-dark"] .co-quick { border: none; border-radius: var(--co-radius-lg); box-shadow: none; background: var(--lime-surface); color: var(--lime-text); transition: filter 180ms ease-out, transform 120ms ease-out; } [data-web-theme="lime-dark"] .co-quick:hover { filter: brightness(1.05); border-color: transparent; } [data-web-theme="lime-dark"] .co-quick:active { transform: scale(0.98); } [data-web-theme="lime-dark"] .co-quick-grid > .co-quick:nth-child(1) { background: var(--lime-yellow); color: var(--lime-text-on-light); } [data-web-theme="lime-dark"] .co-quick-grid > .co-quick:nth-child(1) .co-quick-icon { background: var(--lime-text-on-light); color: var(--lime-yellow); } [data-web-theme="lime-dark"] .co-quick-grid > .co-quick:nth-child(2) { background: var(--lime-red); color: var(--lime-text); } [data-web-theme="lime-dark"] .co-quick-grid > .co-quick:nth-child(2) .co-quick-icon { background: var(--lime-text); color: var(--lime-red); } [data-web-theme="lime-dark"] .co-quick-grid > .co-quick:nth-child(3) { background: var(--lime-olive); color: var(--lime-text); } [data-web-theme="lime-dark"] .co-quick-grid > .co-quick:nth-child(3) .co-quick-icon { background: var(--lime-text); color: var(--lime-olive); } [data-web-theme="lime-dark"] .co-quick-grid > .co-quick:nth-child(4) { background: var(--lime-lavender); color: var(--lime-text-on-light); } [data-web-theme="lime-dark"] .co-quick-grid > .co-quick:nth-child(4) .co-quick-icon { background: var(--lime-text-on-light); color: var(--lime-lavender); } [data-web-theme="lime-dark"] .co-quick-icon { border-radius: 999px; } /* --- Cards (library, settings, generic .co-card-*) ------------------- */ [data-web-theme="lime-dark"] .co-card-stone, [data-web-theme="lime-dark"] .co-card-light, [data-web-theme="lime-dark"] .co-card-media { background: var(--lime-surface); border-color: var(--lime-divider); border-radius: var(--co-radius-lg); box-shadow: none; color: var(--lime-text); } [data-web-theme="lime-dark"] .co-card-stone:hover { border-color: var(--lime-lavender); } [data-web-theme="lime-dark"] .co-card-stone.is-spirited { background: var(--lime-olive); color: var(--lime-text); border-color: transparent; } [data-web-theme="lime-dark"] .co-card-stone.is-spirited:hover { border-color: var(--lime-yellow); } /* Numbered tile grid (`/create`) — rotate the mono-label colour by position with lime accents. */ [data-web-theme="lime-dark"] .co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+1) .co-mono-label { color: var(--lime-yellow); } [data-web-theme="lime-dark"] .co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+2) .co-mono-label { color: var(--lime-red); } [data-web-theme="lime-dark"] .co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+3) .co-mono-label { color: var(--lime-olive); } [data-web-theme="lime-dark"] .co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+4) .co-mono-label { color: var(--lime-lavender); } [data-web-theme="lime-dark"] .co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+5) .co-mono-label { color: var(--lime-yellow); } /* Status pills — keep them legible on the dark canvas */ [data-web-theme="lime-dark"] .co-status.is-live { color: var(--lime-text-on-light); background: var(--lime-olive); border-color: transparent; } [data-web-theme="lime-dark"] .co-status.is-beta { color: var(--lime-text-on-light); background: var(--lime-lavender); border-color: transparent; } [data-web-theme="lime-dark"] .co-status.is-soon { color: var(--lime-text-on-light); background: var(--lime-yellow); border-color: transparent; } /* Empty-state hint inside search */ [data-web-theme="lime-dark"] .co-search-empty { background: var(--lime-surface); border-color: var(--lime-divider); color: var(--lime-muted); } /* Forms / inputs */ [data-web-theme="lime-dark"] input[type="text"], [data-web-theme="lime-dark"] input[type="search"], [data-web-theme="lime-dark"] input[type="email"], [data-web-theme="lime-dark"] textarea, [data-web-theme="lime-dark"] select { background: var(--lime-surface); color: var(--lime-text); border-color: var(--lime-divider); } /* Kill chrome shadows under lime — depth comes from color, not elevation. Scoped to chrome containers; doesn't touch transient floating UI like dropdowns or tooltips that genuinely need elevation. */ [data-web-theme="lime-dark"] .co-sidebar, [data-web-theme="lime-dark"] .co-topbar, [data-web-theme="lime-dark"] .co-page, [data-web-theme="lime-dark"] .co-card-stone, [data-web-theme="lime-dark"] .co-card-light, [data-web-theme="lime-dark"] .co-quick, [data-web-theme="lime-dark"] .co-kpi { box-shadow: none; } /* ========================================================================= * Theme dial — the scroll-to-cycle widget itself. * * Lives in the topbar across all pages. Hover + wheel = cycle next/prev * theme; click = next; ↑/↓/←/→/Enter/Space also cycle. Compact pill so * it doesn't crowd the topbar action area. * ========================================================================= */ .co-web-theme-dial { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; border: 1px solid var(--co-hairline); background: var(--co-canvas); font-family: var(--co-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--co-slate); cursor: ns-resize; transition: border-color 180ms ease-out, color 180ms ease-out, background 180ms ease-out; user-select: none; } .co-web-theme-dial:hover { border-color: var(--co-near-black); color: var(--co-near-black); } .co-web-theme-dial:focus-visible { outline: 2px solid var(--co-focus-blue); outline-offset: 2px; } .co-web-theme-dial-swatches { display: inline-flex; align-items: center; } .co-web-theme-dial-swatch { width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--co-hairline); display: inline-block; } .co-web-theme-dial-swatch + .co-web-theme-dial-swatch { margin-left: -8px; } .co-web-theme-dial-label { padding-right: 2px; } /* Lime dial — match the dark surface */ [data-web-theme="lime-dark"] .co-web-theme-dial { background: var(--lime-surface); border-color: var(--lime-divider); color: var(--lime-muted); } [data-web-theme="lime-dark"] .co-web-theme-dial:hover { border-color: var(--lime-lavender); color: var(--lime-text); } [data-web-theme="lime-dark"] .co-web-theme-dial-swatch { border-color: var(--lime-divider); } /* ========================================================================= * Mode-toggle button * * Sits to the right of the brand dial in the topbar. Pill-shaped to match * the dial's grammar. Shows ☾ when in bright mode (click → dark) and * ☀ when in dark mode (click → bright). Disabled (greyed) when the * current brand has no bright/dark counterpart available — including * brand=default. * ========================================================================= */ .co-web-theme-mode { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 8px; padding: 0; border-radius: 999px; border: 1px solid var(--co-hairline); background: var(--co-canvas); color: var(--co-slate); font-size: 14px; line-height: 1; cursor: pointer; transition: border-color 180ms ease-out, color 180ms ease-out, background 180ms ease-out; user-select: none; } .co-web-theme-mode:hover:not(:disabled) { border-color: var(--co-near-black); color: var(--co-near-black); } .co-web-theme-mode:focus-visible { outline: 2px solid var(--co-focus-blue); outline-offset: 2px; } .co-web-theme-mode:disabled, .co-web-theme-mode[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; } .co-web-theme-mode-icon { display: inline-block; pointer-events: none; } /* ========================================================================= * apple-bright — Apple's homepage chrome on a light canvas * * Translation of forntend/design/apple.md. Uses every documented Apple * color: Pure White, Parchment, Pearl Button, Translucent Chip Gray, * Hairline, Divider Soft, Near-Black Ink, Ink Muted 80, Ink Muted 48, * and the three brand blues (Action Blue, Focus Blue, Sky Link Blue). * Three Near-Black Tile shades drive the rare dark accent panels. * * Single-accent rule preserved: all interactivity reads as Action Blue. * Status pills don't invent secondary colors — they use Action Blue * solid / outlined / hairline-on-grey for live / beta / soon hierarchy. * ========================================================================= */ [data-web-theme="apple-bright"] { /* Apple primitives */ --apple-white: #ffffff; --apple-parchment: #f5f5f7; --apple-pearl: #fafafc; --apple-tile-1: #272729; --apple-tile-2: #2a2a2c; --apple-tile-3: #252527; --apple-black: #000000; --apple-chip-gray: #d2d2d7; --apple-ink: #1d1d1f; --apple-on-dark: #ffffff; --apple-body-muted: #cccccc; --apple-ink-80: #333333; --apple-ink-48: #7a7a7a; --apple-divider: #f0f0f0; --apple-hairline: #e0e0e0; --apple-action: #0066cc; --apple-focus: #0071e3; --apple-link-on-dark: #2997ff; /* Re-pointed --co-* tokens */ --co-canvas: var(--apple-white); --co-stone: var(--apple-parchment); --co-card-border: var(--apple-hairline); --co-ink: var(--apple-ink); --co-near-black: var(--apple-ink); --co-slate: var(--apple-ink-48); --co-muted-slate: var(--apple-ink-48); --co-hairline: var(--apple-hairline); --co-border-light: var(--apple-divider); --co-coral: var(--apple-action); --co-soft-coral: var(--apple-chip-gray); --co-action-blue: var(--apple-action); --co-deep-green: var(--apple-tile-1); --co-pale-blue: var(--apple-parchment); --co-pale-green: var(--apple-parchment); --co-pale-purple: var(--apple-parchment); --co-pale-coral: var(--apple-pearl); --co-purple-deep: var(--apple-action); --co-brand-purple: var(--apple-action); --co-brand-green: var(--apple-tile-1); --co-focus-blue: var(--apple-focus); color-scheme: light; } [data-web-theme="apple-bright"] body { background: var(--apple-white); color: var(--apple-ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; } [data-web-theme="apple-bright"] ::selection { background: var(--apple-action); color: var(--apple-white); } /* --- Sidebar — parchment surface, action-blue active, black brand mark - */ [data-web-theme="apple-bright"] .co-sidebar { background: var(--apple-parchment); border-right-color: var(--apple-hairline); } [data-web-theme="apple-bright"] .co-sidebar-brand, [data-web-theme="apple-bright"] .co-sidebar-foot { border-color: var(--apple-divider); color: var(--apple-ink); } [data-web-theme="apple-bright"] .co-sidebar-brand-mark { background: var(--apple-black); color: var(--apple-white); } [data-web-theme="apple-bright"] .co-sidebar-heading, [data-web-theme="apple-bright"] .co-sidebar-foot-meta { color: var(--apple-ink-48); } [data-web-theme="apple-bright"] .co-sidebar-item { color: var(--apple-ink); } [data-web-theme="apple-bright"] .co-sidebar-item:hover { background: var(--apple-pearl); } [data-web-theme="apple-bright"] .co-sidebar-item.is-active { background: var(--apple-action); color: var(--apple-white); } /* --- Topbar -------------------------------------------------------------- */ [data-web-theme="apple-bright"] .co-topbar { background: var(--apple-white); border-bottom-color: var(--apple-hairline); } [data-web-theme="apple-bright"] .co-topbar-crumbs, [data-web-theme="apple-bright"] .co-topbar-crumbs a { color: var(--apple-ink-48); } [data-web-theme="apple-bright"] .co-topbar-crumbs a:hover { color: var(--apple-action); } /* --- Buttons — Action Blue full-pill primary, Pearl Button capsule second */ [data-web-theme="apple-bright"] .co-btn-primary { background: var(--apple-action); color: var(--apple-white); border: none; border-radius: 9999px; transition: transform 120ms ease-out, background 180ms ease-out; } [data-web-theme="apple-bright"] .co-btn-primary:hover { background: var(--apple-focus); } [data-web-theme="apple-bright"] .co-btn-primary:active { transform: scale(0.95); } [data-web-theme="apple-bright"] .co-btn-pill-outline { background: transparent; color: var(--apple-action); border: 1px solid var(--apple-action); border-radius: 9999px; } [data-web-theme="apple-bright"] .co-btn-pill-outline:hover { background: var(--apple-action); color: var(--apple-white); } [data-web-theme="apple-bright"] .co-btn-secondary { background: var(--apple-pearl); color: var(--apple-ink-80); border: 3px solid var(--apple-divider); border-radius: 11px; } [data-web-theme="apple-bright"] .co-btn-secondary:hover { color: var(--apple-action); } /* --- Search pill — pearl button surface, Action-Blue focus border ------ */ [data-web-theme="apple-bright"] .co-search { background: var(--apple-pearl); border-color: var(--apple-divider); } [data-web-theme="apple-bright"] .co-search:focus-within { background: var(--apple-white); border-color: var(--apple-action); } [data-web-theme="apple-bright"] .co-search input { color: var(--apple-ink); } [data-web-theme="apple-bright"] .co-search input::placeholder { color: var(--apple-ink-48); } [data-web-theme="apple-bright"] .co-search-icon { color: var(--apple-ink-48); } /* --- KPI bento — alternating white/parchment, dark Tile-1 spirited card */ [data-web-theme="apple-bright"] .co-kpi { background: var(--apple-white); border: 1px solid var(--apple-hairline); border-radius: 18px; box-shadow: none; color: var(--apple-ink); } [data-web-theme="apple-bright"] .co-kpi-grid > .co-kpi:nth-child(2n) { background: var(--apple-parchment); } [data-web-theme="apple-bright"] .co-kpi-grid > .co-kpi:nth-child(4) { background: var(--apple-tile-1); color: var(--apple-on-dark); border-color: transparent; } [data-web-theme="apple-bright"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-label, [data-web-theme="apple-bright"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-value, [data-web-theme="apple-bright"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-delta { color: var(--apple-on-dark); } [data-web-theme="apple-bright"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-value { color: var(--apple-link-on-dark); } [data-web-theme="apple-bright"] .co-kpi-value { color: var(--apple-action); } [data-web-theme="apple-bright"] .co-kpi-delta { color: var(--apple-action); } /* --- Quick-actions bento ------------------------------------------------ */ [data-web-theme="apple-bright"] .co-quick { background: var(--apple-white); border: 1px solid var(--apple-hairline); border-radius: 18px; box-shadow: none; color: var(--apple-ink); transition: transform 120ms ease-out; } [data-web-theme="apple-bright"] .co-quick:active { transform: scale(0.95); } [data-web-theme="apple-bright"] .co-quick-grid > .co-quick:nth-child(2) { background: var(--apple-parchment); } [data-web-theme="apple-bright"] .co-quick-grid > .co-quick:nth-child(3) { background: var(--apple-pearl); } [data-web-theme="apple-bright"] .co-quick-grid > .co-quick:nth-child(4) { background: var(--apple-tile-2); color: var(--apple-on-dark); border-color: transparent; } [data-web-theme="apple-bright"] .co-quick-icon { background: var(--apple-action); color: var(--apple-white); } [data-web-theme="apple-bright"] .co-quick-grid > .co-quick:nth-child(4) .co-quick-icon { background: var(--apple-link-on-dark); color: var(--apple-tile-1); } /* --- Cards ---------------------------------------------------------------- */ [data-web-theme="apple-bright"] .co-card-stone, [data-web-theme="apple-bright"] .co-card-light, [data-web-theme="apple-bright"] .co-card-media { background: var(--apple-white); border: 1px solid var(--apple-hairline); border-radius: 18px; box-shadow: none; color: var(--apple-ink); } [data-web-theme="apple-bright"] .co-card-stone:hover { border-color: var(--apple-action); } [data-web-theme="apple-bright"] .co-card-stone.is-spirited { background: var(--apple-tile-3); color: var(--apple-on-dark); border-color: transparent; } /* --- Status pills — single-accent rule: Action Blue + neutrals --------- */ [data-web-theme="apple-bright"] .co-status.is-live { background: var(--apple-action); color: var(--apple-white); border-color: transparent; } [data-web-theme="apple-bright"] .co-status.is-beta { background: transparent; color: var(--apple-action); border: 1px solid var(--apple-action); } [data-web-theme="apple-bright"] .co-status.is-soon { background: var(--apple-chip-gray); color: var(--apple-ink-80); border-color: transparent; } /* --- Forms ------------------------------------------------------------- */ [data-web-theme="apple-bright"] input[type="text"], [data-web-theme="apple-bright"] input[type="search"], [data-web-theme="apple-bright"] input[type="email"], [data-web-theme="apple-bright"] textarea, [data-web-theme="apple-bright"] select { background: var(--apple-white); color: var(--apple-ink); border-color: var(--apple-hairline); } [data-web-theme="apple-bright"] input:focus, [data-web-theme="apple-bright"] textarea:focus, [data-web-theme="apple-bright"] select:focus { outline: 2px solid var(--apple-focus); outline-offset: 1px; border-color: var(--apple-focus); } /* --- Dial + mode toggle ------------------------------------------------- */ [data-web-theme="apple-bright"] .co-web-theme-dial { background: var(--apple-white); border-color: var(--apple-hairline); color: var(--apple-ink-48); } [data-web-theme="apple-bright"] .co-web-theme-dial:hover { border-color: var(--apple-action); color: var(--apple-action); } [data-web-theme="apple-bright"] .co-web-theme-mode { background: var(--apple-white); border-color: var(--apple-hairline); color: var(--apple-ink-48); } [data-web-theme="apple-bright"] .co-web-theme-mode:hover:not(:disabled) { border-color: var(--apple-action); color: var(--apple-action); } /* ========================================================================= * apple-dark — Apple's homepage chrome on a near-black canvas * * Companion to apple-bright. Canvas drops to Near-Black Tile 1; Tile 2 * and Tile 3 drive the three-tone micro-step on KPI/quick-actions cards. * Sky Link Blue replaces Action Blue (Apple's documented dark-tile rule). * Pure Black reserved for the deepest KPI accent (the global-nav role * Apple uses pure black for; here it lives on the most-emphasized card). * ========================================================================= */ [data-web-theme="apple-dark"] { --apple-white: #ffffff; --apple-parchment: #f5f5f7; --apple-pearl: #fafafc; --apple-tile-1: #272729; --apple-tile-2: #2a2a2c; --apple-tile-3: #252527; --apple-black: #000000; --apple-chip-gray: #d2d2d7; --apple-ink: #1d1d1f; --apple-on-dark: #ffffff; --apple-body-muted: #cccccc; --apple-ink-80: #333333; --apple-ink-48: #7a7a7a; --apple-divider: #3a3a3c; --apple-hairline: #3a3a3c; --apple-action: #0066cc; --apple-focus: #0071e3; --apple-link-on-dark: #2997ff; --co-canvas: var(--apple-tile-1); --co-stone: var(--apple-tile-2); --co-card-border: var(--apple-hairline); --co-ink: var(--apple-on-dark); --co-near-black: var(--apple-on-dark); --co-slate: var(--apple-body-muted); --co-muted-slate: var(--apple-body-muted); --co-hairline: var(--apple-hairline); --co-border-light: var(--apple-hairline); --co-coral: var(--apple-link-on-dark); --co-soft-coral: var(--apple-tile-2); --co-action-blue: var(--apple-link-on-dark); --co-deep-green: var(--apple-tile-3); --co-pale-blue: var(--apple-tile-2); --co-pale-green: var(--apple-tile-2); --co-pale-purple: var(--apple-tile-2); --co-pale-coral: var(--apple-tile-3); --co-purple-deep: var(--apple-link-on-dark); --co-brand-purple: var(--apple-link-on-dark); --co-brand-green: var(--apple-link-on-dark); --co-focus-blue: var(--apple-link-on-dark); color-scheme: dark; } [data-web-theme="apple-dark"] body { background: var(--apple-tile-1); color: var(--apple-on-dark); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; } [data-web-theme="apple-dark"] ::selection { background: var(--apple-link-on-dark); color: var(--apple-white); } [data-web-theme="apple-dark"] .co-sidebar { background: var(--apple-tile-2); border-right-color: var(--apple-hairline); } [data-web-theme="apple-dark"] .co-sidebar-brand, [data-web-theme="apple-dark"] .co-sidebar-foot { border-color: var(--apple-hairline); color: var(--apple-on-dark); } [data-web-theme="apple-dark"] .co-sidebar-brand-mark { background: var(--apple-link-on-dark); color: var(--apple-white); } [data-web-theme="apple-dark"] .co-sidebar-heading, [data-web-theme="apple-dark"] .co-sidebar-foot-meta { color: var(--apple-body-muted); } [data-web-theme="apple-dark"] .co-sidebar-item { color: var(--apple-on-dark); } [data-web-theme="apple-dark"] .co-sidebar-item:hover { background: var(--apple-tile-3); } [data-web-theme="apple-dark"] .co-sidebar-item.is-active { background: var(--apple-link-on-dark); color: var(--apple-white); } [data-web-theme="apple-dark"] .co-topbar { background: var(--apple-tile-1); border-bottom-color: var(--apple-hairline); } [data-web-theme="apple-dark"] .co-topbar-crumbs, [data-web-theme="apple-dark"] .co-topbar-crumbs a { color: var(--apple-body-muted); } [data-web-theme="apple-dark"] .co-topbar-crumbs a:hover { color: var(--apple-link-on-dark); } [data-web-theme="apple-dark"] .co-btn-primary { background: var(--apple-link-on-dark); color: var(--apple-white); border: none; border-radius: 9999px; transition: transform 120ms ease-out; } [data-web-theme="apple-dark"] .co-btn-primary:hover { background: var(--apple-action); } [data-web-theme="apple-dark"] .co-btn-primary:active { transform: scale(0.95); } [data-web-theme="apple-dark"] .co-btn-pill-outline { background: transparent; color: var(--apple-link-on-dark); border: 1px solid var(--apple-link-on-dark); border-radius: 9999px; } [data-web-theme="apple-dark"] .co-btn-pill-outline:hover { background: var(--apple-link-on-dark); color: var(--apple-white); } [data-web-theme="apple-dark"] .co-btn-secondary { background: var(--apple-tile-2); color: var(--apple-body-muted); border: 3px solid var(--apple-tile-3); border-radius: 11px; } [data-web-theme="apple-dark"] .co-btn-secondary:hover { color: var(--apple-link-on-dark); } [data-web-theme="apple-dark"] .co-search { background: var(--apple-tile-2); border-color: transparent; } [data-web-theme="apple-dark"] .co-search:focus-within { background: var(--apple-tile-1); border-color: var(--apple-link-on-dark); } [data-web-theme="apple-dark"] .co-search input { color: var(--apple-on-dark); } [data-web-theme="apple-dark"] .co-search input::placeholder { color: var(--apple-body-muted); } [data-web-theme="apple-dark"] .co-search-icon { color: var(--apple-body-muted); } /* KPI bento — three-tone micro-step + pure-black emphasis card */ [data-web-theme="apple-dark"] .co-kpi { background: var(--apple-tile-2); border: none; border-radius: 18px; box-shadow: none; color: var(--apple-on-dark); } [data-web-theme="apple-dark"] .co-kpi-grid > .co-kpi:nth-child(2) { background: var(--apple-tile-3); } [data-web-theme="apple-dark"] .co-kpi-grid > .co-kpi:nth-child(3) { background: var(--apple-tile-2); } [data-web-theme="apple-dark"] .co-kpi-grid > .co-kpi:nth-child(4) { background: var(--apple-black); } [data-web-theme="apple-dark"] .co-kpi-value { color: var(--apple-link-on-dark); } [data-web-theme="apple-dark"] .co-kpi-delta { color: var(--apple-link-on-dark); } [data-web-theme="apple-dark"] .co-quick { background: var(--apple-tile-2); border: none; border-radius: 18px; box-shadow: none; color: var(--apple-on-dark); transition: transform 120ms ease-out; } [data-web-theme="apple-dark"] .co-quick:active { transform: scale(0.95); } [data-web-theme="apple-dark"] .co-quick-grid > .co-quick:nth-child(2) { background: var(--apple-tile-3); } [data-web-theme="apple-dark"] .co-quick-grid > .co-quick:nth-child(3) { background: var(--apple-tile-2); } [data-web-theme="apple-dark"] .co-quick-grid > .co-quick:nth-child(4) { background: var(--apple-black); } [data-web-theme="apple-dark"] .co-quick-icon { background: var(--apple-link-on-dark); color: var(--apple-tile-1); } [data-web-theme="apple-dark"] .co-card-stone, [data-web-theme="apple-dark"] .co-card-light, [data-web-theme="apple-dark"] .co-card-media { background: var(--apple-tile-2); border: 1px solid var(--apple-hairline); border-radius: 18px; box-shadow: none; color: var(--apple-on-dark); } [data-web-theme="apple-dark"] .co-card-stone:hover { border-color: var(--apple-link-on-dark); } [data-web-theme="apple-dark"] .co-card-stone.is-spirited { background: var(--apple-link-on-dark); color: var(--apple-white); border-color: transparent; } [data-web-theme="apple-dark"] .co-status.is-live { background: var(--apple-link-on-dark); color: var(--apple-white); border-color: transparent; } [data-web-theme="apple-dark"] .co-status.is-beta { background: transparent; color: var(--apple-link-on-dark); border: 1px solid var(--apple-link-on-dark); } [data-web-theme="apple-dark"] .co-status.is-soon { background: var(--apple-tile-3); color: var(--apple-body-muted); border-color: transparent; } [data-web-theme="apple-dark"] input[type="text"], [data-web-theme="apple-dark"] input[type="search"], [data-web-theme="apple-dark"] input[type="email"], [data-web-theme="apple-dark"] textarea, [data-web-theme="apple-dark"] select { background: var(--apple-tile-2); color: var(--apple-on-dark); border-color: var(--apple-hairline); } [data-web-theme="apple-dark"] .co-web-theme-dial { background: var(--apple-tile-2); border-color: var(--apple-hairline); color: var(--apple-body-muted); } [data-web-theme="apple-dark"] .co-web-theme-dial:hover { border-color: var(--apple-link-on-dark); color: var(--apple-link-on-dark); } [data-web-theme="apple-dark"] .co-web-theme-mode { background: var(--apple-tile-2); border-color: var(--apple-hairline); color: var(--apple-body-muted); } [data-web-theme="apple-dark"] .co-web-theme-mode:hover:not(:disabled) { border-color: var(--apple-link-on-dark); color: var(--apple-link-on-dark); } /* ========================================================================= * cohere-bright — Cohere editorial chrome on a light canvas * * Translation of forntend/design/Cohere.md. Uses every documented Cohere * color: Canvas White, Soft Stone, Pale Green Wash, Pale Blue Wash, Card * Border, Border Light, Hairline, Ink, Muted Slate, Slate, Cohere Black, * Near-Black Primary, Deep Enterprise Green, Dark Navy, Action Blue, * Coral, Soft Coral, Focus Blue, Form Focus Violet, Error Red. * * KPI bento alternates Pale Green Wash + Pale Blue Wash + Deep Green + * Dark Navy so all four "color field" tones land on the dashboard. * ========================================================================= */ [data-web-theme="cohere-bright"] { /* Cohere primitives */ --coh-black: #000000; --coh-near-black: #17171c; --coh-deep-green: #003c33; --coh-dark-navy: #071829; --coh-action-blue: #1863dc; --coh-coral: #ff7759; --coh-soft-coral: #ffad9b; --coh-canvas: #ffffff; --coh-soft-stone: #eeece7; --coh-pale-green: #edfce9; --coh-pale-blue: #f1f5ff; --coh-card-border: #f2f2f2; --coh-border-light: #e5e7eb; --coh-hairline: #d9d9dd; --coh-ink: #212121; --coh-muted-slate: #93939f; --coh-slate: #75758a; --coh-focus-blue: #4c6ee6; --coh-focus-violet: #9b60aa; --coh-error-red: #b30000; /* Re-pointed --co-* tokens */ --co-canvas: var(--coh-canvas); --co-stone: var(--coh-soft-stone); --co-card-border: var(--coh-card-border); --co-ink: var(--coh-ink); --co-near-black: var(--coh-near-black); --co-slate: var(--coh-slate); --co-muted-slate: var(--coh-muted-slate); --co-hairline: var(--coh-hairline); --co-border-light: var(--coh-border-light); --co-coral: var(--coh-coral); --co-soft-coral: var(--coh-soft-coral); --co-action-blue: var(--coh-action-blue); --co-deep-green: var(--coh-deep-green); --co-pale-blue: var(--coh-pale-blue); --co-pale-green: var(--coh-pale-green); --co-pale-purple: var(--coh-pale-blue); --co-pale-coral: #fff0eb; --co-purple-deep: var(--coh-action-blue); --co-brand-purple: var(--coh-coral); --co-brand-green: var(--coh-deep-green); --co-focus-blue: var(--coh-focus-blue); --co-error-red: var(--coh-error-red); color-scheme: light; } [data-web-theme="cohere-bright"] body { background: var(--coh-canvas); color: var(--coh-ink); } [data-web-theme="cohere-bright"] ::selection { background: var(--coh-coral); color: var(--coh-near-black); } [data-web-theme="cohere-bright"] .co-sidebar { background: var(--coh-soft-stone); border-right-color: var(--coh-hairline); } [data-web-theme="cohere-bright"] .co-sidebar-brand, [data-web-theme="cohere-bright"] .co-sidebar-foot { border-color: var(--coh-hairline); color: var(--coh-ink); } [data-web-theme="cohere-bright"] .co-sidebar-brand-mark { background: var(--coh-near-black); color: var(--coh-canvas); } [data-web-theme="cohere-bright"] .co-sidebar-heading, [data-web-theme="cohere-bright"] .co-sidebar-foot-meta { color: var(--coh-slate); } [data-web-theme="cohere-bright"] .co-sidebar-item { color: var(--coh-ink); } [data-web-theme="cohere-bright"] .co-sidebar-item:hover { background: var(--coh-canvas); } [data-web-theme="cohere-bright"] .co-sidebar-item.is-active { background: var(--coh-near-black); color: var(--coh-canvas); } /* Active-item icon uses the cohere coral instead of inheriting the label's white. Cheap visual cue that the orange is the brand's accent: it appears only on the one selected nav item, against the near-black pill background, with the label staying white for contrast. Both modes get the same treatment because coral is the brand identity, not a mode-specific colour. */ [data-web-theme="cohere-bright"] .co-sidebar-item.is-active .co-sidebar-item-icon { color: var(--coh-coral); } [data-web-theme="cohere-bright"] .co-topbar { background: var(--coh-canvas); border-bottom-color: var(--coh-hairline); } [data-web-theme="cohere-bright"] .co-topbar-crumbs, [data-web-theme="cohere-bright"] .co-topbar-crumbs a { color: var(--coh-slate); } [data-web-theme="cohere-bright"] .co-topbar-crumbs a:hover { color: var(--coh-action-blue); } [data-web-theme="cohere-bright"] .co-btn-primary { background: var(--coh-near-black); color: var(--coh-canvas); border: none; border-radius: 32px; transition: transform 120ms ease-out, background 180ms ease-out; } [data-web-theme="cohere-bright"] .co-btn-primary:hover { background: var(--coh-black); } [data-web-theme="cohere-bright"] .co-btn-primary:active { transform: scale(0.98); } [data-web-theme="cohere-bright"] .co-btn-pill-outline { background: transparent; color: var(--coh-coral); border: 1px solid var(--coh-coral); border-radius: 30px; } [data-web-theme="cohere-bright"] .co-btn-pill-outline:hover { background: var(--coh-coral); color: var(--coh-canvas); } [data-web-theme="cohere-bright"] .co-btn-secondary { color: var(--coh-action-blue); text-decoration: underline; } [data-web-theme="cohere-bright"] .co-btn-secondary:hover { color: var(--coh-near-black); } [data-web-theme="cohere-bright"] .co-search { background: var(--coh-card-border); border-color: var(--coh-border-light); } [data-web-theme="cohere-bright"] .co-search:focus-within { background: var(--coh-canvas); border-color: var(--coh-focus-blue); } [data-web-theme="cohere-bright"] .co-search input::placeholder { color: var(--coh-muted-slate); } /* KPI bento — Pale Green / Pale Blue / Deep Green / Dark Navy rotation */ [data-web-theme="cohere-bright"] .co-kpi { background: var(--coh-canvas); border: 1px solid var(--coh-card-border); border-radius: 22px; box-shadow: none; color: var(--coh-ink); } [data-web-theme="cohere-bright"] .co-kpi-grid > .co-kpi:nth-child(1) { background: var(--coh-pale-green); border-color: transparent; } [data-web-theme="cohere-bright"] .co-kpi-grid > .co-kpi:nth-child(2) { background: var(--coh-pale-blue); border-color: transparent; } [data-web-theme="cohere-bright"] .co-kpi-grid > .co-kpi:nth-child(3) { background: var(--coh-deep-green); color: var(--coh-canvas); border-color: transparent; } [data-web-theme="cohere-bright"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-label, [data-web-theme="cohere-bright"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-value, [data-web-theme="cohere-bright"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-delta { color: var(--coh-canvas); } [data-web-theme="cohere-bright"] .co-kpi-grid > .co-kpi:nth-child(4) { background: var(--coh-dark-navy); color: var(--coh-canvas); border-color: transparent; } [data-web-theme="cohere-bright"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-label, [data-web-theme="cohere-bright"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-value, [data-web-theme="cohere-bright"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-delta { color: var(--coh-canvas); } [data-web-theme="cohere-bright"] .co-kpi-value { color: var(--coh-action-blue); } [data-web-theme="cohere-bright"] .co-kpi-delta { color: var(--coh-deep-green); } /* Quick-actions bento — coral / action-blue / deep-green / near-black icons */ [data-web-theme="cohere-bright"] .co-quick { background: var(--coh-canvas); border: 1px solid var(--coh-card-border); border-radius: 22px; box-shadow: none; color: var(--coh-ink); transition: transform 120ms ease-out; } [data-web-theme="cohere-bright"] .co-quick:active { transform: scale(0.98); } [data-web-theme="cohere-bright"] .co-quick-grid > .co-quick:nth-child(1) .co-quick-icon { background: var(--coh-coral); color: var(--coh-canvas); } [data-web-theme="cohere-bright"] .co-quick-grid > .co-quick:nth-child(2) .co-quick-icon { background: var(--coh-action-blue); color: var(--coh-canvas); } [data-web-theme="cohere-bright"] .co-quick-grid > .co-quick:nth-child(3) .co-quick-icon { background: var(--coh-deep-green); color: var(--coh-canvas); } [data-web-theme="cohere-bright"] .co-quick-grid > .co-quick:nth-child(4) .co-quick-icon { background: var(--coh-near-black); color: var(--coh-canvas); } [data-web-theme="cohere-bright"] .co-card-stone, [data-web-theme="cohere-bright"] .co-card-light, [data-web-theme="cohere-bright"] .co-card-media { background: var(--coh-soft-stone); border: 1px solid var(--coh-hairline); border-radius: 22px; box-shadow: none; color: var(--coh-ink); } [data-web-theme="cohere-bright"] .co-card-stone:hover { border-color: var(--coh-coral); } [data-web-theme="cohere-bright"] .co-card-stone.is-spirited { background: var(--coh-deep-green); color: var(--coh-canvas); border-color: transparent; } [data-web-theme="cohere-bright"] .co-status.is-live { background: var(--coh-deep-green); color: var(--coh-canvas); border-color: transparent; } [data-web-theme="cohere-bright"] .co-status.is-beta { background: var(--coh-action-blue); color: var(--coh-canvas); border-color: transparent; } [data-web-theme="cohere-bright"] .co-status.is-soon { background: var(--coh-coral); color: var(--coh-canvas); border-color: transparent; } [data-web-theme="cohere-bright"] .co-status.is-archived { background: var(--coh-soft-coral); color: var(--coh-near-black); border-color: transparent; } /* Forms — Form Focus Violet on input focus, Error Red for invalid */ [data-web-theme="cohere-bright"] input[type="text"], [data-web-theme="cohere-bright"] input[type="search"], [data-web-theme="cohere-bright"] input[type="email"], [data-web-theme="cohere-bright"] textarea, [data-web-theme="cohere-bright"] select { background: var(--coh-canvas); color: var(--coh-ink); border-color: var(--coh-hairline); } [data-web-theme="cohere-bright"] input:focus, [data-web-theme="cohere-bright"] textarea:focus, [data-web-theme="cohere-bright"] select:focus { outline: 2px solid var(--coh-focus-violet); outline-offset: 1px; border-color: var(--coh-focus-violet); } [data-web-theme="cohere-bright"] input[aria-invalid="true"], [data-web-theme="cohere-bright"] textarea[aria-invalid="true"] { border-color: var(--coh-error-red); } [data-web-theme="cohere-bright"] .co-web-theme-dial { background: var(--coh-canvas); border-color: var(--coh-hairline); color: var(--coh-slate); } [data-web-theme="cohere-bright"] .co-web-theme-dial:hover { border-color: var(--coh-coral); color: var(--coh-coral); } [data-web-theme="cohere-bright"] .co-web-theme-mode { background: var(--coh-canvas); border-color: var(--coh-hairline); color: var(--coh-slate); } [data-web-theme="cohere-bright"] .co-web-theme-mode:hover:not(:disabled) { border-color: var(--coh-coral); color: var(--coh-coral); } /* ========================================================================= * cohere-dark — Cohere editorial chrome on a tinted dark-navy canvas * * Companion to cohere-bright. Canvas is Dark Navy #071829 (TINTED, the * documented dark from financial/security solution pages — not pure * near-black). Deep Enterprise Green serves as the accent surface band. * Coral, Soft Coral, Action Blue all carry over; pure-white pill primary. * Same 17-color palette inventory; only the rotation/role mapping flips. * ========================================================================= */ [data-web-theme="cohere-dark"] { --coh-black: #000000; --coh-near-black: #17171c; --coh-deep-green: #003c33; --coh-dark-navy: #071829; --coh-action-blue: #1863dc; --coh-action-bright: #6b8eea; /* derived: lighter Action Blue for dark canvas */ --coh-coral: #ff7759; --coh-soft-coral: #ffad9b; --coh-canvas: #ffffff; --coh-soft-stone: #eeece7; --coh-pale-green: #edfce9; --coh-pale-blue: #f1f5ff; --coh-card-border: #1a3450; /* derived dark hairline */ --coh-border-light: #1a3450; --coh-hairline: #1a3450; --coh-ink: #212121; --coh-muted-slate: #93939f; --coh-slate: #75758a; --coh-focus-blue: #4c6ee6; --coh-focus-violet: #9b60aa; --coh-error-red: #b30000; --co-canvas: var(--coh-dark-navy); --co-stone: var(--coh-deep-green); --co-card-border: var(--coh-card-border); --co-ink: var(--coh-canvas); --co-near-black: var(--coh-canvas); --co-slate: var(--coh-muted-slate); --co-muted-slate: var(--coh-muted-slate); --co-hairline: var(--coh-hairline); --co-border-light: var(--coh-border-light); --co-coral: var(--coh-coral); --co-soft-coral: var(--coh-soft-coral); --co-action-blue: var(--coh-action-bright); --co-deep-green: var(--coh-deep-green); --co-pale-blue: #0d2438; --co-pale-green: #0d2438; --co-pale-purple: #0d2438; --co-pale-coral: #2a1814; --co-purple-deep: var(--coh-action-bright); --co-brand-purple: var(--coh-coral); --co-brand-green: var(--coh-deep-green); --co-focus-blue: var(--coh-action-bright); --co-error-red: var(--coh-error-red); color-scheme: dark; } [data-web-theme="cohere-dark"] body { background: var(--coh-dark-navy); color: var(--coh-canvas); } [data-web-theme="cohere-dark"] ::selection { background: var(--coh-coral); color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-sidebar { background: #0d2438; border-right-color: var(--coh-hairline); } [data-web-theme="cohere-dark"] .co-sidebar-brand, [data-web-theme="cohere-dark"] .co-sidebar-foot { border-color: var(--coh-hairline); color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-sidebar-brand-mark { background: var(--coh-coral); color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-sidebar-heading, [data-web-theme="cohere-dark"] .co-sidebar-foot-meta { color: var(--coh-muted-slate); } [data-web-theme="cohere-dark"] .co-sidebar-item { color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-sidebar-item:hover { background: var(--coh-hairline); } [data-web-theme="cohere-dark"] .co-sidebar-item.is-active { background: var(--coh-canvas); color: var(--coh-dark-navy); } /* Active-item icon coral on dark too — mirrors cohere-bright; the coral pops against either the dark-navy label colour (here) or the white (in bright mode). */ [data-web-theme="cohere-dark"] .co-sidebar-item.is-active .co-sidebar-item-icon { color: var(--coh-coral); } [data-web-theme="cohere-dark"] .co-topbar { background: var(--coh-dark-navy); border-bottom-color: var(--coh-hairline); } [data-web-theme="cohere-dark"] .co-topbar-crumbs, [data-web-theme="cohere-dark"] .co-topbar-crumbs a { color: var(--coh-muted-slate); } [data-web-theme="cohere-dark"] .co-topbar-crumbs a:hover { color: var(--coh-coral); } [data-web-theme="cohere-dark"] .co-btn-primary { background: var(--coh-canvas); color: var(--coh-dark-navy); border: none; border-radius: 32px; transition: transform 120ms ease-out, background 180ms ease-out; } [data-web-theme="cohere-dark"] .co-btn-primary:hover { background: var(--coh-soft-coral); } [data-web-theme="cohere-dark"] .co-btn-primary:active { transform: scale(0.98); } [data-web-theme="cohere-dark"] .co-btn-pill-outline { background: transparent; color: var(--coh-coral); border: 1px solid var(--coh-coral); border-radius: 30px; } [data-web-theme="cohere-dark"] .co-btn-pill-outline:hover { background: var(--coh-coral); color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-btn-secondary { color: var(--coh-action-bright); text-decoration: underline; } [data-web-theme="cohere-dark"] .co-btn-secondary:hover { color: var(--coh-coral); } [data-web-theme="cohere-dark"] .co-search { background: #0d2438; border-color: var(--coh-hairline); } [data-web-theme="cohere-dark"] .co-search:focus-within { background: var(--coh-dark-navy); border-color: var(--coh-action-bright); } [data-web-theme="cohere-dark"] .co-search input { color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-search input::placeholder { color: var(--coh-muted-slate); } [data-web-theme="cohere-dark"] .co-search-icon { color: var(--coh-muted-slate); } /* KPI bento — deep-green / pale-green / coral-tint / dark-navy rotation */ [data-web-theme="cohere-dark"] .co-kpi { background: #0d2438; border: none; border-radius: 22px; box-shadow: none; color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-kpi-grid > .co-kpi:nth-child(1) { background: var(--coh-deep-green); } [data-web-theme="cohere-dark"] .co-kpi-grid > .co-kpi:nth-child(2) { background: #1a3450; } [data-web-theme="cohere-dark"] .co-kpi-grid > .co-kpi:nth-child(3) { background: var(--coh-pale-green); color: var(--coh-deep-green); } [data-web-theme="cohere-dark"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-label, [data-web-theme="cohere-dark"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-value, [data-web-theme="cohere-dark"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-delta { color: var(--coh-deep-green); } [data-web-theme="cohere-dark"] .co-kpi-grid > .co-kpi:nth-child(4) { background: var(--coh-coral); } [data-web-theme="cohere-dark"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-label, [data-web-theme="cohere-dark"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-value, [data-web-theme="cohere-dark"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-delta { color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-kpi-value { color: var(--coh-coral); } [data-web-theme="cohere-dark"] .co-kpi-delta { color: var(--coh-action-bright); } [data-web-theme="cohere-dark"] .co-quick { background: #0d2438; border: none; border-radius: 22px; box-shadow: none; color: var(--coh-canvas); transition: transform 120ms ease-out; } [data-web-theme="cohere-dark"] .co-quick:active { transform: scale(0.98); } [data-web-theme="cohere-dark"] .co-quick-grid > .co-quick:nth-child(1) .co-quick-icon { background: var(--coh-coral); color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-quick-grid > .co-quick:nth-child(2) .co-quick-icon { background: var(--coh-action-bright); color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-quick-grid > .co-quick:nth-child(3) .co-quick-icon { background: var(--coh-deep-green); color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-quick-grid > .co-quick:nth-child(4) .co-quick-icon { background: var(--coh-canvas); color: var(--coh-dark-navy); } [data-web-theme="cohere-dark"] .co-card-stone, [data-web-theme="cohere-dark"] .co-card-light, [data-web-theme="cohere-dark"] .co-card-media { background: #0d2438; border: 1px solid var(--coh-hairline); border-radius: 22px; box-shadow: none; color: var(--coh-canvas); } [data-web-theme="cohere-dark"] .co-card-stone:hover { border-color: var(--coh-coral); } [data-web-theme="cohere-dark"] .co-card-stone.is-spirited { background: var(--coh-deep-green); color: var(--coh-canvas); border-color: transparent; } [data-web-theme="cohere-dark"] .co-status.is-live { background: var(--coh-pale-green); color: var(--coh-deep-green); border-color: transparent; } [data-web-theme="cohere-dark"] .co-status.is-beta { background: var(--coh-action-bright); color: var(--coh-canvas); border-color: transparent; } [data-web-theme="cohere-dark"] .co-status.is-soon { background: var(--coh-coral); color: var(--coh-canvas); border-color: transparent; } [data-web-theme="cohere-dark"] .co-status.is-archived { background: var(--coh-soft-coral); color: var(--coh-near-black); border-color: transparent; } [data-web-theme="cohere-dark"] input[type="text"], [data-web-theme="cohere-dark"] input[type="search"], [data-web-theme="cohere-dark"] input[type="email"], [data-web-theme="cohere-dark"] textarea, [data-web-theme="cohere-dark"] select { background: #0d2438; color: var(--coh-canvas); border-color: var(--coh-hairline); } [data-web-theme="cohere-dark"] input:focus, [data-web-theme="cohere-dark"] textarea:focus, [data-web-theme="cohere-dark"] select:focus { outline: 2px solid var(--coh-focus-violet); outline-offset: 1px; border-color: var(--coh-focus-violet); } [data-web-theme="cohere-dark"] input[aria-invalid="true"], [data-web-theme="cohere-dark"] textarea[aria-invalid="true"] { border-color: var(--coh-error-red); } [data-web-theme="cohere-dark"] .co-web-theme-dial { background: #0d2438; border-color: var(--coh-hairline); color: var(--coh-muted-slate); } [data-web-theme="cohere-dark"] .co-web-theme-dial:hover { border-color: var(--coh-coral); color: var(--coh-coral); } [data-web-theme="cohere-dark"] .co-web-theme-mode { background: #0d2438; border-color: var(--coh-hairline); color: var(--coh-muted-slate); } [data-web-theme="cohere-dark"] .co-web-theme-mode:hover:not(:disabled) { border-color: var(--coh-coral); color: var(--coh-coral); } /* ========================================================================= * lime-bright — Lime fintech aesthetic on a warm cream canvas * * Companion to lime-dark (the original lime theme, renamed in Task 2). * Translation of forntend/design/lime.md adjusted for a light register. * Uses every documented lime color: yellow / yellow-deep, red / red-deep, * olive / olive-deep, lavender / lavender-deep, text-on-dark / text-on-light, * text-muted-dark / text-muted-light, divider, accent-pop, surface-dark. * * Derived light surfaces (lime.md documents only dark surfaces; cream * canvas is a light derivation of the yellow family that preserves the * fintech personality): * --lime-canvas-light #F8F4DA (cream, ~yellow-08% lightness) * --lime-divider-light #E0D8B8 (derived hairline) * ========================================================================= */ [data-web-theme="lime-bright"] { /* Lime palette — documented */ --lime-bg: #0E0E0E; --lime-surface-dark: #1A1A1A; --lime-yellow: #F2E020; --lime-yellow-deep: #E8D200; --lime-red: #EE3B1C; --lime-red-deep: #D43317; --lime-olive: #7A6E0E; --lime-olive-deep: #5E5408; --lime-lavender: #B0A5CC; --lime-lavender-deep: #9A8FBE; --lime-text-on-dark: #FAFAFA; --lime-text-on-light: #0E0E0E; --lime-muted-dark: #7A7A7A; --lime-muted-light: #3A3A3A; --lime-divider: #262626; --lime-accent-pop: #EE3B1C; /* Derived light surfaces (lime.md is dark-canvas-only; cream is the yellow family at very high lightness — keeps the fintech voice) */ --lime-canvas-light: #F8F4DA; --lime-divider-light: #E0D8B8; /* Re-pointed --co-* tokens */ --co-canvas: var(--lime-canvas-light); --co-stone: #ffffff; --co-card-border: var(--lime-divider-light); --co-ink: var(--lime-text-on-light); --co-near-black: var(--lime-text-on-light); --co-slate: var(--lime-muted-light); --co-muted-slate: var(--lime-muted-light); --co-hairline: var(--lime-divider-light); --co-border-light: var(--lime-divider-light); --co-coral: var(--lime-red); --co-soft-coral: var(--lime-yellow); --co-action-blue: var(--lime-lavender); --co-deep-green: var(--lime-olive); --co-pale-blue: #ffffff; --co-pale-green: #ffffff; --co-pale-purple: #ffffff; --co-pale-coral: #fff5f0; --co-purple-deep: var(--lime-lavender-deep); --co-brand-purple: var(--lime-yellow); --co-brand-green: var(--lime-lavender); --co-radius-xs: 8px; --co-radius-sm: 12px; --co-radius-md: 16px; --co-radius-lg: 24px; --co-radius-xl: 32px; --co-radius-pill: 999px; color-scheme: light; } [data-web-theme="lime-bright"] body { background: var(--lime-canvas-light); color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] ::selection { background: var(--lime-yellow); color: var(--lime-text-on-light); } /* --- Sidebar — white surface with lavender active --------------------- */ [data-web-theme="lime-bright"] .co-sidebar { background: #ffffff; border-right-color: var(--lime-divider-light); } [data-web-theme="lime-bright"] .co-sidebar-brand, [data-web-theme="lime-bright"] .co-sidebar-foot { border-color: var(--lime-divider-light); color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] .co-sidebar-brand-mark { background: var(--lime-yellow); color: var(--lime-text-on-light); border-radius: 12px; } [data-web-theme="lime-bright"] .co-sidebar-heading, [data-web-theme="lime-bright"] .co-sidebar-foot-meta { color: var(--lime-muted-light); } [data-web-theme="lime-bright"] .co-sidebar-item { color: var(--lime-text-on-light); border-radius: 12px; } [data-web-theme="lime-bright"] .co-sidebar-item:hover { background: var(--lime-canvas-light); } [data-web-theme="lime-bright"] .co-sidebar-item.is-active { background: var(--lime-lavender); color: var(--lime-text-on-light); } /* --- Topbar ---------------------------------------------------------- */ [data-web-theme="lime-bright"] .co-topbar { background: var(--lime-canvas-light); border-bottom-color: var(--lime-divider-light); } [data-web-theme="lime-bright"] .co-topbar-crumbs, [data-web-theme="lime-bright"] .co-topbar-crumbs a { color: var(--lime-muted-light); } [data-web-theme="lime-bright"] .co-topbar-crumbs a:hover { color: var(--lime-text-on-light); } /* Display typography — packed, tight, hero numerals */ [data-web-theme="lime-bright"] .co-display-hero, [data-web-theme="lime-bright"] .co-display-product, [data-web-theme="lime-bright"] .co-display-section, [data-web-theme="lime-bright"] .co-h-section, [data-web-theme="lime-bright"] .co-h-card, [data-web-theme="lime-bright"] .co-h-feature { font-weight: 600; letter-spacing: -0.025em; color: var(--lime-text-on-light); } /* --- Buttons --- pill primary, hover uses -deep variants -------------- */ [data-web-theme="lime-bright"] .co-btn-primary { background: var(--lime-text-on-light); color: var(--lime-text-on-dark); border: none; border-radius: 999px; transition: all 180ms ease-out; } [data-web-theme="lime-bright"] .co-btn-primary:hover { background: var(--lime-yellow); color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] .co-btn-primary:active { transform: scale(0.98); } [data-web-theme="lime-bright"] .co-btn-pill-outline { background: transparent; color: var(--lime-text-on-light); border: 1px solid var(--lime-text-on-light); border-radius: 999px; transition: all 180ms ease-out; } [data-web-theme="lime-bright"] .co-btn-pill-outline:hover { background: var(--lime-text-on-light); color: var(--lime-canvas-light); } [data-web-theme="lime-bright"] .co-btn-secondary { color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] .co-btn-secondary:hover { color: var(--lime-red); } /* Search pill */ [data-web-theme="lime-bright"] .co-search { background: #ffffff; border-color: var(--lime-divider-light); } [data-web-theme="lime-bright"] .co-search:focus-within { background: var(--lime-canvas-light); border-color: var(--lime-lavender); } [data-web-theme="lime-bright"] .co-search input::placeholder { color: var(--lime-muted-light); } /* --- KPI bento — full color rotation, hover→-deep variant ----------- */ [data-web-theme="lime-bright"] .co-kpi { border: none; border-radius: 24px; box-shadow: none; padding: 24px; transition: background 180ms ease-out, transform 120ms ease-out; } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(1) { background: var(--lime-yellow); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(1):hover { background: var(--lime-yellow-deep); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(1) .co-kpi-label, [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(1) .co-kpi-value, [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(1) .co-kpi-delta { color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(2) { background: var(--lime-red); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(2):hover { background: var(--lime-red-deep); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(2) .co-kpi-label, [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(2) .co-kpi-value, [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(2) .co-kpi-delta { color: var(--lime-text-on-dark); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(3) { background: var(--lime-olive); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(3):hover { background: var(--lime-olive-deep); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-label, [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-value, [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-delta { color: var(--lime-text-on-dark); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(4) { background: var(--lime-lavender); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(4):hover { background: var(--lime-lavender-deep); } [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-label, [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-value, [data-web-theme="lime-bright"] .co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-delta { color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] .co-kpi-value { font-weight: 600; letter-spacing: -0.025em; font-size: 44px; line-height: 1.05; } /* --- Quick-actions bento — same color rotation + hover→-deep --------- */ [data-web-theme="lime-bright"] .co-quick { border: none; border-radius: 24px; box-shadow: none; transition: background 180ms ease-out, transform 120ms ease-out; } [data-web-theme="lime-bright"] .co-quick:active { transform: scale(0.98); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(1) { background: var(--lime-yellow); color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(1):hover { background: var(--lime-yellow-deep); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(1) .co-quick-icon { background: var(--lime-text-on-light); color: var(--lime-yellow); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(2) { background: var(--lime-red); color: var(--lime-text-on-dark); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(2):hover { background: var(--lime-red-deep); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(2) .co-quick-icon { background: var(--lime-text-on-dark); color: var(--lime-red); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(3) { background: var(--lime-olive); color: var(--lime-text-on-dark); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(3):hover { background: var(--lime-olive-deep); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(3) .co-quick-icon { background: var(--lime-text-on-dark); color: var(--lime-olive); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(4) { background: var(--lime-lavender); color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(4):hover { background: var(--lime-lavender-deep); } [data-web-theme="lime-bright"] .co-quick-grid > .co-quick:nth-child(4) .co-quick-icon { background: var(--lime-text-on-light); color: var(--lime-lavender); } [data-web-theme="lime-bright"] .co-quick-icon { border-radius: 999px; } /* Cards */ [data-web-theme="lime-bright"] .co-card-stone, [data-web-theme="lime-bright"] .co-card-light, [data-web-theme="lime-bright"] .co-card-media { background: #ffffff; border: 1px solid var(--lime-divider-light); border-radius: 24px; box-shadow: none; color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] .co-card-stone:hover { border-color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] .co-card-stone.is-spirited { background: var(--lime-olive); color: var(--lime-text-on-dark); border-color: transparent; } /* Tile-grid mono-label rotation — full bento color sequence */ [data-web-theme="lime-bright"] .co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+1) .co-mono-label { color: var(--lime-yellow-deep); } [data-web-theme="lime-bright"] .co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+2) .co-mono-label { color: var(--lime-red); } [data-web-theme="lime-bright"] .co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+3) .co-mono-label { color: var(--lime-olive); } [data-web-theme="lime-bright"] .co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+4) .co-mono-label { color: var(--lime-lavender-deep); } [data-web-theme="lime-bright"] .co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+5) .co-mono-label { color: var(--lime-yellow-deep); } /* Status pills — all four bento colors carry one each + accent-pop */ [data-web-theme="lime-bright"] .co-status.is-live { background: var(--lime-olive); color: var(--lime-text-on-dark); border-color: transparent; } [data-web-theme="lime-bright"] .co-status.is-beta { background: var(--lime-lavender); color: var(--lime-text-on-light); border-color: transparent; } [data-web-theme="lime-bright"] .co-status.is-soon { background: var(--lime-yellow); color: var(--lime-text-on-light); border-color: transparent; } [data-web-theme="lime-bright"] .co-status.is-archived { background: var(--lime-accent-pop); color: var(--lime-text-on-dark); border-color: transparent; } /* Forms */ [data-web-theme="lime-bright"] input[type="text"], [data-web-theme="lime-bright"] input[type="search"], [data-web-theme="lime-bright"] input[type="email"], [data-web-theme="lime-bright"] textarea, [data-web-theme="lime-bright"] select { background: #ffffff; color: var(--lime-text-on-light); border-color: var(--lime-divider-light); } [data-web-theme="lime-bright"] input:focus, [data-web-theme="lime-bright"] textarea:focus, [data-web-theme="lime-bright"] select:focus { outline: 2px solid var(--lime-lavender); outline-offset: 1px; border-color: var(--lime-lavender); } /* Kill chrome shadows */ [data-web-theme="lime-bright"] .co-sidebar, [data-web-theme="lime-bright"] .co-topbar, [data-web-theme="lime-bright"] .co-page, [data-web-theme="lime-bright"] .co-card-stone, [data-web-theme="lime-bright"] .co-card-light, [data-web-theme="lime-bright"] .co-quick, [data-web-theme="lime-bright"] .co-kpi { box-shadow: none; } /* Dial + mode toggle */ [data-web-theme="lime-bright"] .co-web-theme-dial { background: #ffffff; border-color: var(--lime-divider-light); color: var(--lime-muted-light); } [data-web-theme="lime-bright"] .co-web-theme-dial:hover { border-color: var(--lime-lavender); color: var(--lime-text-on-light); } [data-web-theme="lime-bright"] .co-web-theme-mode { background: #ffffff; border-color: var(--lime-divider-light); color: var(--lime-muted-light); } [data-web-theme="lime-bright"] .co-web-theme-mode:hover:not(:disabled) { border-color: var(--lime-lavender); color: var(--lime-text-on-light); } /* ============================================================= AURORA v2 — vivid 8-hue palette, frosted-glass chrome, ambient multi-color mesh, dark-hot-spot + bright-corner-highlight tiles, dormant breathing animation. v2 supersedes v1's soft-pastel design. v1 lives in git history (commits cb286ad..8032e93 on feat/aurora-glass-dashboard). Source-of-truth design: forntend/design/aurora.md. Reference: design-system/project/styles.css and v2-hero.jsx. ============================================================= */ /* shell — body carries the canvas, ink, and ambient mesh ::before */ [data-web-theme^="aurora-"] body { background: var(--co-canvas); color: var(--co-ink); letter-spacing: -0.01em; } [data-web-theme^="aurora-"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--aurora-mesh); } [data-web-theme^="aurora-"] .co-app, [data-web-theme^="aurora-"] .co-main, [data-web-theme^="aurora-"] .co-page { position: relative; z-index: 1; } /* shared hue selection — cascades across both modes */ [data-web-theme^="aurora-"] [data-glow="rose"] { --glow-c:#FF4E8A; --glow-e:#8A1A4A; } [data-web-theme^="aurora-"] [data-glow="sage"] { --glow-c:#2EC79E; --glow-e:#0E4B3A; } [data-web-theme^="aurora-"] [data-glow="magenta"] { --glow-c:#E040C0; --glow-e:#5C1448; } [data-web-theme^="aurora-"] [data-glow="indigo"] { --glow-c:#3552F2; --glow-e:#0E1A55; } [data-web-theme^="aurora-"] [data-glow="amber"] { --glow-c:#FF8A2E; --glow-e:#6A2A0A; } [data-web-theme^="aurora-"] [data-glow="violet"] { --glow-c:#8A4DFF; --glow-e:#2E1466; } [data-web-theme^="aurora-"] [data-glow="teal"] { --glow-c:#14B8C4; --glow-e:#0C3940; } [data-web-theme^="aurora-"] [data-glow="citrine"] { --glow-c:#E8C53A; --glow-e:#5A4810; } /* tile recipe — applies under both modes */ [data-web-theme^="aurora-"] .co-kpi[data-glow], [data-web-theme^="aurora-"] .co-quick[data-glow] { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: 24px; border: 1px solid rgba(255,255,255,0.18); background: radial-gradient(ellipse at var(--gx, 50%) var(--gy, 50%), var(--glow-c) 0%, var(--glow-e) 88%); box-shadow: var(--aurora-tile-shadow); color: #FFFFFF; transition: transform 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms cubic-bezier(.4,0,.2,1); will-change: transform; } /* dark hot-spot — bright mode only (dark canvas already provides depth) */ [data-web-theme="aurora-bright"] .co-kpi[data-glow]::before, [data-web-theme="aurora-bright"] .co-quick[data-glow]::before { content: ""; position: absolute; width: 60%; height: 60%; top: 18%; left: 22%; background: radial-gradient(circle, rgba(0,0,0,0.55) 0%, transparent 60%); filter: blur(28px); pointer-events: none; z-index: -1; } /* bright corner highlight — both modes */ [data-web-theme^="aurora-"] .co-kpi[data-glow]::after, [data-web-theme^="aurora-"] .co-quick[data-glow]::after { content: ""; position: absolute; width: 50%; height: 50%; bottom: 12%; right: 14%; background: radial-gradient(circle, var(--aurora-highlight-color) 0%, transparent 60%); filter: blur(28px); pointer-events: none; z-index: -1; } /* hover halo */ [data-web-theme^="aurora-"] .co-kpi[data-glow]:hover, [data-web-theme^="aurora-"] .co-quick[data-glow]:hover { transform: translateY(-2px); box-shadow: var(--aurora-tile-shadow-hover); } /* subdued action tile holdover from v1 — quieter corner highlight */ [data-web-theme^="aurora-"] [data-glow][data-glow-subdued]::after { background: radial-gradient(circle, var(--aurora-highlight-color-subdued, var(--aurora-highlight-color)) 0%, transparent 60%); } /* tile typography */ [data-web-theme^="aurora-"] .co-kpi[data-glow] .co-kpi-value { font-weight: 300; font-size: 48px; letter-spacing: -1.5px; line-height: 1; color: #FFFFFF; text-shadow: 0 2px 12px rgba(0,0,0,0.25); } [data-web-theme^="aurora-"] .co-kpi[data-glow] .co-kpi-label { color: rgba(255,255,255,0.95); } [data-web-theme^="aurora-"] .co-kpi[data-glow] .co-kpi-delta { color: rgba(255,255,255,0.78); } [data-web-theme^="aurora-"] .co-quick[data-glow] .co-quick-title, [data-web-theme^="aurora-"] .co-quick[data-glow] .co-quick-sub { color: rgba(255,255,255,0.95); } [data-web-theme^="aurora-"] .co-quick[data-glow] .co-quick-sub { opacity: 0.78; } [data-web-theme^="aurora-"] .co-quick[data-glow] .co-quick-icon { background: rgba(255,255,255,0.18); color: #FFFFFF; } /* Dashboard pastel-wash variant. The base aurora tile recipe paints a saturated radial gradient with white ink (great for marquee hero pages, too heavy for the everyday dashboard). Inside the dashboard's `--hero` quick-actions grid and `--slim` KPI strip we replace the recipe with a soft pastel of the tile's accent color over the page canvas, and flip ink back to dark so the cards read like polished paper instead of saturated tiles. Each tile is `color-mix(in srgb, 14%, )` — enough color to make the rose / sage / magenta / indigo identity visible at a glance, but light enough that text contrast stays high. */ [data-web-theme^="aurora-"] .co-quick-grid--hero .co-quick[data-glow], [data-web-theme^="aurora-"] .co-kpi-grid--slim .co-kpi[data-glow] { background: color-mix(in srgb, var(--glow-c) 22%, var(--co-canvas)); border: 1px solid color-mix(in srgb, var(--glow-c) 32%, transparent); box-shadow: 0 1px 2px rgba(23, 23, 28, 0.04); color: var(--co-near-black); } /* Aurora's base recipe paints a dark hot-spot (::before) and a bright corner highlight (::after) — both look wrong on pastel cards. Wipe them inside the dashboard variants. */ [data-web-theme^="aurora-"] .co-quick-grid--hero .co-quick[data-glow]::before, [data-web-theme^="aurora-"] .co-quick-grid--hero .co-quick[data-glow]::after, [data-web-theme^="aurora-"] .co-kpi-grid--slim .co-kpi[data-glow]::before, [data-web-theme^="aurora-"] .co-kpi-grid--slim .co-kpi[data-glow]::after { display: none; } /* Hover on the action tiles: nudge the wash a touch deeper. */ [data-web-theme^="aurora-"] .co-quick-grid--hero .co-quick[data-glow]:hover { background: color-mix(in srgb, var(--glow-c) 30%, var(--co-canvas)); border-color: color-mix(in srgb, var(--glow-c) 42%, transparent); transform: translateY(-1px); } /* Quick-action tile contents */ [data-web-theme^="aurora-"] .co-quick-grid--hero .co-quick[data-glow] { padding: 22px 24px 24px; } [data-web-theme^="aurora-"] .co-quick-grid--hero .co-quick[data-glow] .co-quick-icon { background: color-mix(in srgb, var(--glow-e) 16%, var(--co-canvas)); color: var(--glow-e); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glow-e) 30%, transparent); opacity: 1; } [data-web-theme^="aurora-"] .co-quick-grid--hero .co-quick[data-glow] .co-quick-sub { color: var(--glow-e); opacity: 1; font-weight: 500; } [data-web-theme^="aurora-"] .co-quick-grid--hero .co-quick[data-glow] .co-quick-title { color: var(--co-near-black); font-weight: 500; text-shadow: none; } [data-web-theme^="aurora-"] .co-quick-grid--hero .co-quick[data-glow] .co-quick-arrow { color: var(--glow-e); opacity: 0.55; } [data-web-theme^="aurora-"] .co-quick-grid--hero .co-quick[data-glow]:hover .co-quick-arrow { opacity: 1; } /* KPI strip contents */ [data-web-theme^="aurora-"] .co-kpi-grid--slim .co-kpi[data-glow] { padding: 14px 18px 16px; border-radius: 22px; } [data-web-theme^="aurora-"] .co-kpi-grid--slim .co-kpi[data-glow] .co-kpi-label { color: var(--glow-e); opacity: 1; } [data-web-theme^="aurora-"] .co-kpi-grid--slim .co-kpi[data-glow] .co-kpi-delta { color: var(--co-near-black); opacity: 0.75; } [data-web-theme^="aurora-"] .co-kpi-grid--slim .co-kpi[data-glow] .co-kpi-value { color: var(--glow-e); font-size: 34px; letter-spacing: -0.5px; text-shadow: none; } /* neutralize app.css nth-child paints under aurora. Scoped to grids WITHOUT the dashboard pastel modifiers — the `--slim` and `--hero` variants paint their own (lighter) recipe above and would otherwise be overridden here by source order. */ [data-web-theme^="aurora-"] .co-kpi-grid:not(.co-kpi-grid--slim) > .co-kpi[data-glow] { background: radial-gradient(ellipse at var(--gx, 50%) var(--gy, 50%), var(--glow-c) 0%, var(--glow-e) 88%); border-color: rgba(255,255,255,0.18); } [data-web-theme^="aurora-"] .co-kpi-grid:not(.co-kpi-grid--slim) > .co-kpi[data-glow] .co-kpi-value { color: #FFFFFF; } [data-web-theme^="aurora-"] .co-quick-grid:not(.co-quick-grid--hero) > .co-quick[data-glow] .co-quick-icon { background: rgba(255,255,255,0.18); color: #FFFFFF; } /* frosted-glass sidebar */ [data-web-theme^="aurora-"] .co-sidebar { background: var(--aurora-glass-fill); backdrop-filter: blur(28px) saturate(var(--aurora-glass-saturate)); -webkit-backdrop-filter: blur(28px) saturate(var(--aurora-glass-saturate)); border-right: 1px solid var(--co-hairline); box-shadow: inset -1px 0 0 var(--co-hairline); /* Keep app.css's `position: sticky; top: 0; height: 100vh` from being overridden here — that's what makes the sidebar stay in view while the document scrolls. z-index lifts it above body::before's ambient aurora mesh. */ z-index: 2; } [data-web-theme^="aurora-"] .co-sidebar-item { color: var(--co-ink-muted); transition: all 200ms ease; } [data-web-theme^="aurora-"] .co-sidebar-item:hover { background: var(--aurora-hover-wash); color: var(--co-ink); } [data-web-theme^="aurora-"] .co-sidebar-item.is-active { background: var(--co-ink); color: var(--co-canvas); box-shadow: 0 8px 20px -8px rgba(14,14,18,0.55); } [data-web-theme^="aurora-"] .co-sidebar-brand-name, [data-web-theme^="aurora-"] .co-sidebar-foot-name { color: var(--co-ink); } [data-web-theme^="aurora-"] .co-sidebar-heading, [data-web-theme^="aurora-"] .co-sidebar-foot-meta { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--co-ink-dim); } /* topbar + search */ [data-web-theme^="aurora-"] .co-topbar { /* Static frosted-glass fill: opaque enough that scrolling library content reads as a soft fog (not as legible smudges), transparent enough that the hero bloom directly underneath visibly tints the bar at the top of the page. Strong blur+saturate hides any remaining detail from scrolled content while keeping the bloom's color saturated. Static — no scroll-driven animation, so the effect looks the same on every page. */ background: var(--aurora-topbar-fill); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); border-bottom: 0; box-shadow: 0 1px 0 var(--co-hairline); } [data-web-theme^="aurora-"] .co-topbar-crumbs, [data-web-theme^="aurora-"] .co-topbar-crumbs a { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--co-ink-muted); } [data-web-theme^="aurora-"] .co-topbar-crumbs a:hover { color: var(--co-ink); } [data-web-theme^="aurora-"] .co-search { background: var(--aurora-glass-fill); border: 1px solid var(--co-hairline); border-radius: 999px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* buttons */ [data-web-theme^="aurora-"] .co-btn-primary { background: var(--co-ink); color: var(--co-canvas); border-radius: 999px; padding: 12px 22px; font-weight: 500; border: 1px solid transparent; box-shadow: 0 10px 24px -6px rgba(14,14,18,0.35), inset 0 1px 0 rgba(255,255,255,0.15); transition: all 200ms ease; } [data-web-theme^="aurora-"] .co-btn-primary:hover { transform: translateY(-1px); } [data-web-theme^="aurora-"] .co-btn-pill-outline { background: var(--aurora-glass-fill); border: 1px solid var(--co-hairline); color: var(--co-ink); border-radius: 999px; padding: 12px 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } [data-web-theme^="aurora-"] .co-btn-pill-outline:hover { background: var(--aurora-hover-wash); } /* new selector — ships dormant until a future hero card consumes it */ [data-web-theme^="aurora-"] .co-btn-glow { background: linear-gradient(135deg, #E040C0, #8A4DFF); color: #FFFFFF; border-radius: 999px; padding: 12px 22px; font-weight: 500; border: 1px solid transparent; box-shadow: 0 10px 28px -6px rgba(224,64,192,0.5), inset 0 1px 0 rgba(255,255,255,0.45); } /* citrine consumer — keeps citrine from being orphaned */ [data-web-theme^="aurora-"] .co-btn-glow:hover { background: linear-gradient(135deg, #E040C0, #E8C53A); } /* display typography under aurora */ [data-web-theme^="aurora-"] .co-display-product { font-weight: 300; letter-spacing: -1.5px; } [data-web-theme^="aurora-"] .co-h-feature { font-weight: 500; letter-spacing: -0.5px; } [data-web-theme^="aurora-"] .co-mono-label { font-family: 'Share Tech Mono', monospace; letter-spacing: 2px; } /* breathing animation — declarations ship dormant */ @property --gx { syntax: ''; initial-value: 50%; inherits: false; } @property --gy { syntax: ''; initial-value: 50%; inherits: false; } @keyframes aurora-breathe { 0%, 100% { --gx: 50%; --gy: 50%; } 50% { --gx: 58%; --gy: 44%; } } [data-web-theme^="aurora-"] .co-kpi[data-glow].is-breathing, [data-web-theme^="aurora-"] .co-quick[data-glow].is-breathing { animation: aurora-breathe 14s ease-in-out infinite; } /* -------- aurora-bright -------- */ [data-web-theme="aurora-bright"] { --co-canvas: #F5F1E8; --co-surface: #FFFFFF; --co-ink: #0E0E12; --co-ink-muted: #5C5C66; --co-ink-dim: #93939E; --co-hairline: rgba(14,14,18,0.08); --aurora-glass-fill: rgba(255,255,255,0.55); /* Topbar fill: medium frosted glass — bloom tints through, scrolling library content reads as fog. */ --aurora-topbar-fill: rgba(245,241,232,0.65); --aurora-glass-saturate: 180%; --aurora-hover-wash: rgba(14,14,18,0.04); --aurora-highlight-color: rgba(255,255,255,0.22); --aurora-highlight-color-subdued: rgba(255,255,255,0.12); --aurora-tile-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 1px rgba(255,255,255,0.08), 0 2px 4px rgba(14,14,18,0.06), 0 16px 40px -14px rgba(14,14,18,0.22); --aurora-tile-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.12), 0 8px 22px rgba(14,14,18,0.10), 0 0 80px -10px var(--glow-c); --aurora-mesh: radial-gradient(45% 40% at 8% 12%, rgba(255,78,138,0.28), transparent 65%), radial-gradient(42% 38% at 95% 6%, rgba(53,82,242,0.22), transparent 65%), radial-gradient(55% 50% at 80% 100%,rgba(138,77,255,0.22), transparent 65%), radial-gradient(40% 38% at 2% 95%, rgba(20,184,196,0.22), transparent 65%), radial-gradient(38% 32% at 55% 50%, rgba(255,138,46,0.12), transparent 65%); } /* -------- aurora-dark -------- */ [data-web-theme="aurora-dark"] { --co-canvas: #0E0E12; --co-surface: #15151A; --co-ink: #F5F5F7; --co-ink-muted: #B8B8C0; --co-ink-dim: #5C5C66; --co-hairline: rgba(255,255,255,0.08); --aurora-glass-fill: rgba(20,20,30,0.55); --aurora-topbar-fill: rgba(14,14,18,0.65); --aurora-glass-saturate: 160%; --aurora-hover-wash: rgba(255,255,255,0.04); --aurora-highlight-color: rgba(255,255,255,0.35); --aurora-highlight-color-subdued: rgba(255,255,255,0.18); --aurora-tile-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 1px rgba(255,255,255,0.05), 0 2px 4px rgba(0,0,0,0.30), 0 16px 40px -14px rgba(0,0,0,0.55); --aurora-tile-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px rgba(0,0,0,0.45), 0 0 80px -10px var(--glow-c); --aurora-mesh: radial-gradient(45% 40% at 8% 12%, rgba(255,78,138,0.40), transparent 65%), radial-gradient(42% 38% at 95% 6%, rgba(53,82,242,0.40), transparent 65%), radial-gradient(55% 50% at 80% 100%,rgba(138,77,255,0.40), transparent 65%), radial-gradient(40% 38% at 2% 95%, rgba(20,184,196,0.40), transparent 65%), radial-gradient(38% 32% at 55% 50%, rgba(255,138,46,0.20), transparent 65%); } /* ────────────────────────────────────────────────────────── AURORA V2 — HERO BLOOM layout Reference: design-system/project/v2-hero.jsx (canonical source) and the Klypup Aurora standalone HTML. The "Hero Bloom" page chrome wraps a page hero in a single oversized violet→magenta radial bloom (~420px tall), with three frosted-glass stat tiles stacked on the right column, and a restrained library list below. Two layers below: 1. Brand-agnostic baseline — applied under every theme so the hub-page markup (kicker, big title, lede, CTAs, stat tiles, library rows) reads cleanly under apple / cohere / lime / default. Each brand's own --co-* tokens light up correctly. 2. Aurora-scoped overrides — paint the violet→magenta bloom, stack frosted-glass stat tiles inside it, and tuck the hero under the topbar so the glass-chrome blurs the bloom through. ────────────────────────────────────────────────────────── */ /* ── 1. Brand-agnostic baseline (every theme) ─────────────── */ .aurora-hero { position: relative; isolation: isolate; border-radius: 36px; padding: 56px 48px 48px; min-height: 360px; margin-top: 8px; overflow: hidden; background: var(--co-surface, var(--co-canvas, #ffffff)); color: var(--co-ink, var(--co-near-black, #111)); border: 1px solid var(--co-hairline, rgba(0,0,0,0.08)); } .aurora-hero-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; } .aurora-hero-body { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } .aurora-hero-kicker { display: flex; align-items: center; gap: 14px; font-family: var(--co-font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--co-muted-slate, var(--co-slate, #666)); } .aurora-hero-kicker .aurora-live-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(31,157,108,0.14); border: 1px solid rgba(31,157,108,0.30); color: #1F9D6C; font-family: var(--co-font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; } .aurora-hero-title { margin: 0; font-size: clamp(48px, 7vw, 88px); font-weight: 200; line-height: 0.95; letter-spacing: -3px; color: inherit; } .aurora-hero-lede { margin: 24px 0 0; max-width: 520px; font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--co-slate, #555); } .aurora-hero-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .aurora-hero .aurora-btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: var(--co-near-black, #111); color: var(--co-canvas, #fff); font-size: 15px; font-weight: 500; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform 200ms ease, background 200ms ease; } .aurora-hero .aurora-btn-primary:hover { transform: translateY(-1px); } .aurora-hero .aurora-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: transparent; border: 1px solid var(--co-hairline, rgba(0,0,0,0.18)); color: var(--co-ink, var(--co-near-black, #111)); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 200ms ease; } .aurora-hero .aurora-btn-ghost:hover { background: var(--co-hover-wash, rgba(0,0,0,0.04)); } .aurora-hero-stats { display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; } .aurora-stat { /* Transparent so the hero's own background paints through — keeps stat text readable under both light and dark canvases without per-brand tuning. Aurora overrides this with frosted-glass fill. */ background: transparent; border: 1px solid var(--co-hairline, rgba(0,0,0,0.08)); border-radius: 22px; padding: 16px 18px; } .aurora-stat-label { font-family: var(--co-font-mono, ui-monospace, monospace); font-size: 10px; color: var(--co-muted-slate, var(--co-slate, #777)); letter-spacing: 2px; text-transform: uppercase; } .aurora-stat-value { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; } .aurora-stat-value .num { font-size: 38px; font-weight: 300; color: var(--co-ink, var(--co-near-black, #111)); letter-spacing: -1px; line-height: 1; } .aurora-stat-value .unit { font-size: 13px; color: var(--co-slate, #777); } .aurora-stat-value .delta-up { font-size: 13px; color: #1F9D6C; } .aurora-stat-prog { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #F2C94C 0%, #FF8A2E 60%, #D2371F 100%); position: relative; margin-top: 10px; } .aurora-stat-prog .marker { position: absolute; top: -4px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--co-surface, #fff); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.20)); } .aurora-stat-row { display: flex; align-items: center; gap: 14px; } .aurora-stat-ring { width: 54px; height: 54px; border-radius: 999px; border: 1.5px solid var(--co-hairline, rgba(0,0,0,0.30)); display: grid; place-items: center; position: relative; flex-shrink: 0; font-family: var(--co-font-mono, ui-monospace, monospace); font-size: 15px; color: var(--co-ink, var(--co-near-black, #111)); letter-spacing: 2px; } .aurora-stat-row-meta { display: flex; flex-direction: column; gap: 2px; } .aurora-stat-row-meta .meta-label { font-family: var(--co-font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--co-muted-slate, var(--co-slate, #777)); } .aurora-stat-row-meta .meta-value { font-size: 13px; color: var(--co-ink, var(--co-near-black, #111)); } .aurora-library { margin-top: 28px; } .aurora-library-head { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; margin-bottom: 16px; gap: 24px; flex-wrap: wrap; } .aurora-library-head-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .aurora-library-kicker { font-family: var(--co-font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--co-muted-slate, var(--co-slate, #888)); } .aurora-library-title { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.5px; color: var(--co-ink, var(--co-near-black, #111)); } .aurora-library-count { font-size: 13px; color: var(--co-muted-slate, var(--co-slate, #777)); } .aurora-library-list { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; } .aurora-library-row { display: grid; grid-template-columns: 1fr 160px 120px 100px; align-items: center; gap: 24px; padding: 18px 22px; /* Transparent so rows inherit the page canvas in every brand. Aurora overrides this with a glass fill against the cream canvas. */ background: transparent; border: 1px solid var(--co-hairline, rgba(0,0,0,0.08)); border-radius: 28px; color: var(--co-ink, var(--co-near-black, #111)); text-decoration: none; transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease; } .aurora-library-row:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -22px rgba(0,0,0,0.20); } .aurora-library-meta { min-width: 0; } .aurora-library-tag { font-family: var(--co-font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 2px; color: var(--co-muted-slate, var(--co-slate, #888)); text-transform: uppercase; margin-bottom: 6px; } .aurora-library-name { font-size: 18px; font-weight: 400; color: var(--co-ink, var(--co-near-black, #111)); letter-spacing: -0.3px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aurora-library-updated { font-size: 13px; color: var(--co-muted-slate, var(--co-slate, #777)); } .aurora-library-stats .readout { font-family: var(--co-font-mono, ui-monospace, monospace); font-size: 16px; color: var(--co-ink, var(--co-near-black, #111)); letter-spacing: 1px; } .aurora-library-stats .read { font-size: 11px; color: var(--co-muted-slate, var(--co-slate, #777)); margin-top: 2px; } .aurora-library-status { text-align: right; } .aurora-pill-live, .aurora-pill-draft { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--co-font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; } .aurora-pill-live { background: rgba(31,157,108,0.14); border: 1px solid rgba(31,157,108,0.30); color: #1F9D6C; } .aurora-pill-draft { background: var(--co-hover-wash, rgba(0,0,0,0.04)); border: 1px solid var(--co-hairline, rgba(0,0,0,0.10)); color: var(--co-muted-slate, var(--co-slate, #777)); } /* ── 2. Aurora-scoped overrides ───────────────────────────── */ [data-web-theme^="aurora-"] .aurora-hero { position: relative; isolation: isolate; border-radius: 36px; padding: 56px 56px 48px; min-height: 420px; /* Tuck the hero under the topbar so the topbar's backdrop-filter blurs the bloom through — the topbar is sticky at z-index 20, so it stays visually above the bloom while sampling it. */ margin-top: -40px; padding-top: 80px; overflow: hidden; color: #ffffff; border: 0; background: radial-gradient(ellipse 90% 110% at 18% 60%, #8E55E8 0%, #4A1FA0 32%, #2A0D5C 60%, #0F0726 90%), radial-gradient(ellipse at 80% 30%, #E364B5 0%, transparent 50%); background-blend-mode: screen; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 30px 80px -20px rgba(142,85,232,0.40), 0 0 1px rgba(255,255,255,0.10); } [data-web-theme^="aurora-"] .aurora-hero::before { content: ""; position: absolute; top: -20%; right: -10%; width: 60%; height: 90%; background: radial-gradient(circle, rgba(255,160,220,0.40) 0%, transparent 60%); filter: blur(40px); z-index: -1; pointer-events: none; } [data-web-theme^="aurora-"] .aurora-hero::after { content: ""; position: absolute; bottom: -30%; left: 30%; width: 50%; height: 70%; background: radial-gradient(circle, rgba(120,170,255,0.30) 0%, transparent 60%); filter: blur(40px); z-index: -1; pointer-events: none; } [data-web-theme^="aurora-"] .aurora-hero-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; height: 100%; min-height: 316px; } [data-web-theme^="aurora-"] .aurora-hero-body { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } [data-web-theme^="aurora-"] .aurora-hero-kicker { display: flex; align-items: center; gap: 14px; font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.70); } [data-web-theme^="aurora-"] .aurora-hero-kicker .aurora-live-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(125,211,166,0.22); color: #6FE0B0; font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; } [data-web-theme^="aurora-"] .aurora-hero-title { margin: 0; /* Cap at 88px (was 128px) — long page names like "Sales one-pagers." used to break into 3 stacked lines and fill the entire hero box. Floor of 48px keeps it readable at narrow viewports. */ font-size: clamp(48px, 7vw, 88px); font-weight: 200; line-height: 0.95; letter-spacing: -3px; color: #ffffff; } [data-web-theme^="aurora-"] .aurora-hero-lede { margin: 24px 0 0; max-width: 520px; font-size: 18px; font-weight: 300; line-height: 1.45; color: rgba(255,255,255,0.82); } [data-web-theme^="aurora-"] .aurora-hero-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } [data-web-theme^="aurora-"] .aurora-hero .aurora-btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: #0E0E12; color: #ffffff; font-size: 15px; font-weight: 500; border: 1px solid transparent; box-shadow: 0 10px 24px -6px rgba(14,14,18,0.55), inset 0 1px 0 rgba(255,255,255,0.15); transition: transform 200ms ease, background 200ms ease; cursor: pointer; text-decoration: none; } [data-web-theme^="aurora-"] .aurora-hero .aurora-btn-primary:hover { background: #000000; transform: translateY(-1px); } [data-web-theme^="aurora-"] .aurora-hero .aurora-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #ffffff; font-size: 15px; font-weight: 500; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 200ms ease; cursor: pointer; text-decoration: none; } [data-web-theme^="aurora-"] .aurora-hero .aurora-btn-ghost:hover { background: rgba(255,255,255,0.18); } /* Right-column stacked stat tiles */ [data-web-theme^="aurora-"] .aurora-hero-stats { display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; } [data-web-theme^="aurora-"] .aurora-stat { background: rgba(255,255,255,0.10); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; padding: 16px 18px; } [data-web-theme^="aurora-"] .aurora-stat-label { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 10px; color: rgba(255,255,255,0.65); letter-spacing: 2px; text-transform: uppercase; } [data-web-theme^="aurora-"] .aurora-stat-value { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; } [data-web-theme^="aurora-"] .aurora-stat-value .num { font-size: 38px; font-weight: 300; color: #ffffff; letter-spacing: -1px; line-height: 1; } [data-web-theme^="aurora-"] .aurora-stat-value .unit { font-size: 13px; color: rgba(255,255,255,0.70); } [data-web-theme^="aurora-"] .aurora-stat-value .delta-up { font-size: 13px; color: #6FE0B0; } [data-web-theme^="aurora-"] .aurora-stat-prog { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #F2C94C 0%, #FF8A2E 60%, #D2371F 100%); position: relative; margin-top: 10px; } [data-web-theme^="aurora-"] .aurora-stat-prog .marker { position: absolute; top: -4px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #ffffff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.40)); } [data-web-theme^="aurora-"] .aurora-stat-row { display: flex; align-items: center; gap: 14px; } [data-web-theme^="aurora-"] .aurora-stat-ring { width: 54px; height: 54px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.55); display: grid; place-items: center; position: relative; flex-shrink: 0; font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 15px; color: #ffffff; letter-spacing: 2px; } [data-web-theme^="aurora-"] .aurora-stat-ring::after { content: ""; position: absolute; inset: -2px; border-radius: 999px; border: 1.5px solid transparent; border-top-color: #FFD25E; transform: rotate(35deg); clip-path: polygon(50% 0, 100% 0, 100% 30%, 50% 0); } [data-web-theme^="aurora-"] .aurora-stat-row-meta { display: flex; flex-direction: column; gap: 2px; } [data-web-theme^="aurora-"] .aurora-stat-row-meta .meta-label { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.65); } [data-web-theme^="aurora-"] .aurora-stat-row-meta .meta-value { font-size: 13px; color: #ffffff; } /* ── Library list below the hero — restrained, type-led ── */ [data-web-theme^="aurora-"] .aurora-library { margin-top: 28px; } [data-web-theme^="aurora-"] .aurora-library-head { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; margin-bottom: 16px; gap: 24px; flex-wrap: wrap; } [data-web-theme^="aurora-"] .aurora-library-head-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } [data-web-theme^="aurora-"] .aurora-library-kicker { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--co-ink-dim); } [data-web-theme^="aurora-"] .aurora-library-title { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.5px; color: var(--co-ink); } [data-web-theme^="aurora-"] .aurora-library-count { font-size: 13px; color: var(--co-ink-muted); } [data-web-theme^="aurora-"] .aurora-library-list { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; } [data-web-theme^="aurora-"] .aurora-library-row { display: grid; grid-template-columns: 1fr 160px 120px 100px; align-items: center; gap: 24px; padding: 18px 22px; background: var(--aurora-glass-fill); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border: 1px solid var(--co-hairline); border-radius: 28px; color: var(--co-ink); text-decoration: none; transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease; } [data-web-theme^="aurora-"] .aurora-library-row:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -22px rgba(14,14,18,0.20); } [data-web-theme^="aurora-"] .aurora-library-meta { min-width: 0; } [data-web-theme^="aurora-"] .aurora-library-tag { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; color: var(--co-ink-muted); text-transform: uppercase; margin-bottom: 6px; } [data-web-theme^="aurora-"] .aurora-library-name { font-size: 18px; font-weight: 400; color: var(--co-ink); letter-spacing: -0.3px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-web-theme^="aurora-"] .aurora-library-updated { font-size: 13px; color: var(--co-ink-muted); } [data-web-theme^="aurora-"] .aurora-library-stats .readout { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 16px; color: var(--co-ink); letter-spacing: 1px; } [data-web-theme^="aurora-"] .aurora-library-stats .read { font-size: 11px; color: var(--co-ink-muted); margin-top: 2px; } [data-web-theme^="aurora-"] .aurora-library-status { text-align: right; } [data-web-theme^="aurora-"] .aurora-pill-live, [data-web-theme^="aurora-"] .aurora-pill-draft { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; } [data-web-theme^="aurora-"] .aurora-pill-live { background: rgba(125,211,166,0.14); border: 1px solid rgba(125,211,166,0.30); color: var(--ok, #1F9D6C); } [data-web-theme^="aurora-"] .aurora-pill-draft { background: rgba(14,14,18,0.04); border: 1px solid var(--co-hairline); color: var(--co-ink-muted); } /* Dark-mode tweaks for library rows */ [data-web-theme="aurora-dark"] .aurora-library-row { background: rgba(255,255,255,0.04); } [data-web-theme="aurora-dark"] .aurora-pill-draft { background: rgba(255,255,255,0.05); color: var(--co-ink-muted); } /* Hide the global page-head top padding on Hero-Bloom pages so the hero sits flush under the topbar (matches the reference). */ [data-web-theme^="aurora-"] .co-page:has(> .aurora-hero) { padding-top: 0; } /* ────────────────────────────────────────────────────────── AURORA · Colorful chrome on non-hub pages Hub pages (blog-posts, email-campaigns, newsletters, battle-cards) carry their own Hero-Bloom identity. The non-hub pages (dashboard, /create, /library, /settings) were flat by comparison. This block adds per-element color identity using the documented 8-hue palette, so the same color vocabulary that defines Aurora reads across the whole app — not only on the hub heros. Scope: under [data-web-theme^="aurora-"] only; other brands keep their existing treatment. ────────────────────────────────────────────────────────── */ /* Kind→hue mapping for content-type rows. blog → indigo · email → teal · newsletter → amber · battlecard → sage · default → rose. */ [data-web-theme^="aurora-"] .co-row[data-kind] { position: relative; padding-left: 30px; } [data-web-theme^="aurora-"] .co-row[data-kind]::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: 60%; border-radius: 999px; background: linear-gradient(180deg, var(--row-glow-c, var(--co-ink-muted)) 0%, var(--row-glow-e, var(--co-ink-muted)) 100%); box-shadow: 0 0 14px -2px var(--row-glow-c, transparent), inset 0 1px 0 rgba(255,255,255,0.2); } [data-web-theme^="aurora-"] .co-row[data-kind="blog"] { --row-glow-c:#3552F2; --row-glow-e:#0E1A55; } [data-web-theme^="aurora-"] .co-row[data-kind="email"] { --row-glow-c:#14B8C4; --row-glow-e:#0C3940; } [data-web-theme^="aurora-"] .co-row[data-kind="newsletter"] { --row-glow-c:#FF8A2E; --row-glow-e:#6A2A0A; } [data-web-theme^="aurora-"] .co-row[data-kind="battlecard"] { --row-glow-c:#2EC79E; --row-glow-e:#0E4B3A; } [data-web-theme^="aurora-"] .co-row[data-kind="card"] { --row-glow-c:#2EC79E; --row-glow-e:#0E4B3A; } /* /create All-tools tile icons — paint each tile's icon as a colored radial-gradient chip in the tool's hue. */ [data-web-theme^="aurora-"] .co-tile[data-glow] .co-tile-icon { background: radial-gradient(circle at 30% 30%, var(--tile-glow-c, var(--co-ink-muted)), var(--tile-glow-e, var(--co-ink-muted)) 80%); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 6px 14px -4px var(--tile-glow-c, transparent); border-radius: 10px; width: 32px; height: 32px; display: grid; place-items: center; } [data-web-theme^="aurora-"] .co-tile[data-glow] .co-tile-icon svg { width: 16px; height: 16px; stroke: #ffffff; } [data-web-theme^="aurora-"] .co-tile[data-glow="rose"] { --tile-glow-c:#FF4E8A; --tile-glow-e:#8A1A4A; } [data-web-theme^="aurora-"] .co-tile[data-glow="sage"] { --tile-glow-c:#2EC79E; --tile-glow-e:#0E4B3A; } [data-web-theme^="aurora-"] .co-tile[data-glow="magenta"] { --tile-glow-c:#E040C0; --tile-glow-e:#5C1448; } [data-web-theme^="aurora-"] .co-tile[data-glow="indigo"] { --tile-glow-c:#3552F2; --tile-glow-e:#0E1A55; } [data-web-theme^="aurora-"] .co-tile[data-glow="amber"] { --tile-glow-c:#FF8A2E; --tile-glow-e:#6A2A0A; } [data-web-theme^="aurora-"] .co-tile[data-glow="violet"] { --tile-glow-c:#8A4DFF; --tile-glow-e:#2E1466; } [data-web-theme^="aurora-"] .co-tile[data-glow="teal"] { --tile-glow-c:#14B8C4; --tile-glow-e:#0C3940; } [data-web-theme^="aurora-"] .co-tile[data-glow="citrine"] { --tile-glow-c:#E8C53A; --tile-glow-e:#5A4810; } /* Page-head mono labels (e.g. "01 · Dashboard", "All content.") get a small color dot prefix matching the section's identity. */ [data-web-theme^="aurora-"] .co-page-head .co-mono-label[data-glow]::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 10px; vertical-align: middle; background: radial-gradient(circle at 30% 30%, var(--label-glow-c, var(--co-ink-muted)), var(--label-glow-e, var(--co-ink-muted)) 80%); box-shadow: 0 0 12px -2px var(--label-glow-c, transparent); } [data-web-theme^="aurora-"] .co-page-head .co-mono-label[data-glow="rose"] { --label-glow-c:#FF4E8A; --label-glow-e:#8A1A4A; } [data-web-theme^="aurora-"] .co-page-head .co-mono-label[data-glow="sage"] { --label-glow-c:#2EC79E; --label-glow-e:#0E4B3A; } [data-web-theme^="aurora-"] .co-page-head .co-mono-label[data-glow="magenta"] { --label-glow-c:#E040C0; --label-glow-e:#5C1448; } [data-web-theme^="aurora-"] .co-page-head .co-mono-label[data-glow="indigo"] { --label-glow-c:#3552F2; --label-glow-e:#0E1A55; } [data-web-theme^="aurora-"] .co-page-head .co-mono-label[data-glow="violet"] { --label-glow-c:#8A4DFF; --label-glow-e:#2E1466; } /* Settings rail-number labels ("01", "02", "03") get a colored tile background under Aurora, so the form sections read as chapters in a colorful publication. */ [data-web-theme^="aurora-"] .co-section-eyebrow[data-glow] { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: radial-gradient(circle at 30% 30%, var(--sec-glow-c, var(--co-ink-muted)), var(--sec-glow-e, var(--co-ink-muted)) 80%); color: #ffffff; font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 1.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 6px 14px -4px var(--sec-glow-c, transparent); } [data-web-theme^="aurora-"] .co-section-eyebrow[data-glow="rose"] { --sec-glow-c:#FF4E8A; --sec-glow-e:#8A1A4A; } [data-web-theme^="aurora-"] .co-section-eyebrow[data-glow="sage"] { --sec-glow-c:#2EC79E; --sec-glow-e:#0E4B3A; } [data-web-theme^="aurora-"] .co-section-eyebrow[data-glow="magenta"] { --sec-glow-c:#E040C0; --sec-glow-e:#5C1448; } [data-web-theme^="aurora-"] .co-section-eyebrow[data-glow="indigo"] { --sec-glow-c:#3552F2; --sec-glow-e:#0E1A55; } [data-web-theme^="aurora-"] .co-section-eyebrow[data-glow="amber"] { --sec-glow-c:#FF8A2E; --sec-glow-e:#6A2A0A; } [data-web-theme^="aurora-"] .co-section-eyebrow[data-glow="violet"] { --sec-glow-c:#8A4DFF; --sec-glow-e:#2E1466; } [data-web-theme^="aurora-"] .co-section-eyebrow[data-glow="teal"] { --sec-glow-c:#14B8C4; --sec-glow-e:#0C3940; } [data-web-theme^="aurora-"] .co-section-eyebrow[data-glow="citrine"] { --sec-glow-c:#E8C53A; --sec-glow-e:#5A4810; }