/* ================================================================= CanvasCircle theme tokens — single source of truth for colors. Phase 1 (variable extraction): values mirrored the current light / beige / gold palette so introducing this file was a visual no-op. ★ Phase 2 (dark mode swap) — CURRENT STATE ★ The values below have been re-skinned to a dark theme built around the logo's locked palette: #0A1538 navy (page bg / brand outer ring) #FF6A1A orange (gradient stop 1) #E91E63 magenta(gradient stop 2) #8B1FC4 purple (gradient stop 3) #2D7FFF blue (gradient stop 4 / new --accent role replacing gold) Status colors moved from green/red/amber to BLUE/MAGENTA/ORANGE — per the Phase 0 decision that status badges use solid colors FROM the gradient (not the gradient itself). Same for Unique/Original and Limited Edition badges. Naming convention is *by role*, not by value: --text-muted (not --gray-7c) --surface-1 (not --card-navy) --status-success (not --blue) --accent-tint (not --transparent-blue) This is why Phase 2 was a values-only swap. The legacy aliases (--bg, --fg, --muted, --accent, --card-bg, --card-line, --shadow, --green, --red) at the bottom keep every existing var() reference in the eight pages working unchanged. ================================================================= */ :root { /* ---------- Surface & background ---------- --bg is the logo's outer-ring navy. --surface-1 is meaningfully lighter so cards lift cleanly off the page (post-feedback: previously too close to --bg, page felt flat). --surface-2 / --surface-3 step lighter in turn for nested depth. */ --bg: #0A1538; /* page background — logo navy (used by nested elements like hover states) */ --surface-1: #1A2459; /* card / panel face — ~50% more lift than original */ --surface-2: #243170; /* nested surface */ --surface-3: #2D3D85; /* alternating block bg / hover state */ /* The body's actual painted background is set further down with a subtle radial gradient (--bg-gradient-top → --bg). The solid --bg above stays for nested usage. */ --bg-gradient-top: #0E1B48; /* slightly brighter navy at the top of the page */ /* ---------- Text tiers ---------- Pure white on navy is harsh. --text is a slightly cool off-white that softens the contrast without sacrificing legibility (13.7:1 on --bg — well above WCAG AAA). cc-v212 contrast pass: the previous --text-soft (#A8B0C2) and --text-muted (#7C8499) tested as grey-on-navy and were hard to read for some collectors. Per Guy's feedback we collapsed all three tiers onto a single off-white (#E5E7EB) so every block of body copy, helper text, filter label, footer link, and modal spec line shares the same high-contrast color against the navy background. Visual hierarchy now leans on font weight, size, and spacing rather than on text-color desaturation. If a specific spot feels too loud after this change, dial back that one place with an inline rgba(229,231,235,0.75) rather than re-darkening the token globally. */ --text: #E5E7EB; /* primary body text */ --text-soft: #E5E7EB; /* legacy tier — now matches primary for legibility */ --text-muted: #E5E7EB; /* legacy tier — now matches primary for legibility */ --text-inverse: #FFFFFF; /* text drawn ON a filled colored background (buttons, status pills, hero overlays). STAYS white in both light AND dark modes — solid-color buttons want white text either way. */ /* ---------- Borders & dividers ---------- A touch lighter than the surface they bound, so the seam reads as a line rather than as a transition. Re-tuned alongside the surface bump so borders stay above their host surfaces. */ --border: #2D3D85; /* default card / panel border — matches surface-3 step */ --border-soft: #243170; /* subtler divider, same family as surface-2 */ --border-strong: #3D4DA5; /* more prominent separator */ /* ---------- Shadow ---------- On dark backgrounds, drop shadows need higher opacity to read. The classic light-mode "0,0,0,.04" is invisible against navy. */ --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3); --shadow-elevated: 0 4px 14px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35); --shadow-image-inset: inset 0 1px 3px rgba(0,0,0,0.4); /* off-black image container with subtle inset shadow, so white-bg artwork photos don't float as cutouts (memory decision). */ --focus-ring: 0 0 0 3px rgba(45,127,255,0.30); /* accent (blue) focus ring */ --focus-ring-success: 0 0 0 3px rgba(45,127,255,0.30); /* same — success is blue too in dark */ /* ---------- Brand (UNCHANGED — logo palette is constant) ---------- */ --brand-navy: #0A1538; --brand-orange: #FF6A1A; --brand-magenta: #E91E63; --brand-purple: #8B1FC4; --brand-blue: #2D7FFF; --brand-gradient: linear-gradient(135deg, #FF6A1A 0%, #E91E63 35%, #8B1FC4 65%, #2D7FFF 100%); /* ---------- Accent (gold RETIRED → BLUE) ---------- The previous gold accent was the "primary interactive" color: links, focus rings, primary CTA buttons. In dark mode, blue takes that role — it's calm, trustworthy, and part of the brand gradient. */ --accent: #2D7FFF; --accent-deep: #6FA8FF; /* lighter blue — text on dark accent surfaces */ --accent-deeper: #95BFFF; /* deepest legibility on translucent blue */ --accent-tint: rgba(45,127,255,0.12); --accent-soft: rgba(45,127,255,0.35); --accent-softer: rgba(45,127,255,0.06); /* ---------- Status: success — now BLUE (Available, Verified Ownership, Active) ---- Maps from green to gradient-stop blue. */ --status-success: #2D7FFF; --status-success-deep: #6FA8FF; --status-success-tint: rgba(45,127,255,0.15); --status-success-soft: rgba(45,127,255,0.40); --status-success-wash: rgba(45,127,255,0.08); /* ---------- Status: danger — now MAGENTA (SOLD, Error, Closed) ---- Maps from red to gradient-stop magenta. */ --status-danger: #E91E63; --status-danger-deep: #FF5285; --status-danger-tint: rgba(233,30,99,0.15); --status-danger-soft: rgba(233,30,99,0.40); --status-danger-strong: #FF3F73; /* ---------- Status: info — lighter BLUE (buying tips, notes) ---- Distinct from --accent so info banners don't get confused with primary CTAs. */ --status-info: #6FA8FF; --status-info-tint: rgba(111,168,255,0.15); --status-info-soft: rgba(111,168,255,0.40); /* ---------- Category & action badges — single-hue gradients ---------- Design hierarchy (post-feedback): - Full warm-to-cool brand gradient is reserved for the two highest trust signals only: Verified Ownership + Established Member. - Every other branded element (category badges, contact CTAs, mood pill) uses a single-hue gradient that runs from the saturated brand color to a whiter version of itself, paired with a solid border in the same hue. This keeps them visible on the navy bg without competing with the trust badges for attention. Hue assignments: Unique/Original → ORANGE (warm, "one-of-a-kind" energy) Limited Edition → MAGENTA (exclusive, small print run) ISO → BLUE (calm, "looking for") Mood → BLUE (subtle expressive accent) Message/Email → BLUE (action CTAs share the cool family) */ --badge-unique-bg: linear-gradient(135deg, #FF6A1A 0%, #FFA070 100%); --badge-unique-fg: #FFFFFF; --badge-unique-border: #FF6A1A; --badge-limited-bg: linear-gradient(135deg, #E91E63 0%, #F472A1 100%); --badge-limited-fg: #FFFFFF; --badge-limited-border: #E91E63; --badge-iso-bg: linear-gradient(135deg, #2D7FFF 0%, #79AEFF 100%); --badge-iso-fg: #FFFFFF; --badge-iso-border: #2D7FFF; --badge-mood-bg: linear-gradient(135deg, #2D7FFF 0%, #79AEFF 100%); --badge-mood-fg: #FFFFFF; --badge-mood-border: #2D7FFF; /* Action CTA gradient (Message on Facebook, Email Seller, primary contact on seller page). Reuses the blue-family gradient so contact CTAs feel unified. */ --action-bg: linear-gradient(135deg, #2D7FFF 0%, #79AEFF 100%); --action-border: #2D7FFF; --action-fg: #FFFFFF; /* ---------- ISO placeholder gradient (empty ISO hero) ---------- Subtle two-stop navy diagonal — lighter than the page, hinting at "image goes here" without competing for attention. */ --iso-placeholder-1: #1B2659; --iso-placeholder-2: #243170; /* ---------- Status: warn — now ORANGE (Pending verification, Unsaved changes) ---- Maps from amber to gradient-stop orange. */ --status-warn: #FF6A1A; --status-warn-deep: #FF8C4D; --status-warn-border: rgba(255,106,26,0.50); --status-warn-tint: rgba(255,106,26,0.15); /* ---------- Banner: info (translucent blue) ---------- */ --banner-info-bg: rgba(45,127,255,0.10); --banner-info-border: rgba(45,127,255,0.35); --banner-info-text: #6FA8FF; /* ---------- Banner: revoked / "ban hammer" (magenta family — alarming) ---------- Visually distinct from --status-danger so admin revocation reads as a separate severity from "this listing is sold". */ --banner-revoked-bg: rgba(233,30,99,0.10); --banner-revoked-border: rgba(233,30,99,0.35); --banner-revoked-text: #FF8AB0; --banner-revoked-strong: #E91E63; --banner-revoked-soft: rgba(233,30,99,0.20); --banner-revoked-tint: rgba(233,30,99,0.05); /* ---------- Neutral grays (delisted / inactive states) ---------- cc-v212: text tokens collapsed onto the primary off-white for the same legibility reason as the --text-* tier above. Backgrounds and borders kept at their original translucent-white values since those are surface treatments, not text. */ --neutral-bg: rgba(255,255,255,0.06); --neutral-text: #E5E7EB; --neutral-border: rgba(255,255,255,0.12); --neutral-warm: #E5E7EB; /* ---------- Hover-state offsets ---------- Slightly brighter variants — on dark surfaces, hovers feel right when they get LIGHTER not darker (opposite of light mode). */ --status-success-darker: #1A6AE5; --status-success-mid: #4A8FFF; --status-success-hover: #6FA8FF; --status-success-hover-bg: rgba(45,127,255,0.25); --status-success-wash-2: rgba(45,127,255,0.10); /* ---------- Chrome (floating UI dark accents) ---------- The save-all-bar etc. In dark mode it's already dark, so we go even deeper than the page bg to maintain "chrome > content" hierarchy. */ --chrome-dark: #050B22; /* ---------- Cream / warm surfaces — collapse to navy neutrals ---------- */ --surface-cream: #1B2659; --surface-warm: #18234D; --surface-cream-border: #2E3A75; /* ---------- Pure black (video letterboxing — color-agnostic by intent) ---------- */ --letterbox: #000000; /* ---------- Legacy aliases — preserve existing var(--bg) etc. references ---------- */ --fg: var(--text); --muted: var(--text-muted); --card-bg: var(--surface-1); --card-line: var(--border); --green: var(--status-success); --red: var(--status-danger); } /* ================================================================= Gradient utility classes — Phase 4 brand element touches The brand gradient is the strongest piece of visual identity. Used sparingly on a small set of high-signal surfaces: - Primary CTAs (Submit a Listing, Message on Facebook) - Verified Ownership badge / Established Member pill (trust signals) - Card hover/focus border (catalog grid) — uses conic version so the gradient sweeps around the card like the logo's arc Anything else stays solid color. Gradient on too many things = noise. ================================================================= */ /* Filled gradient background. White text included since most use cases are buttons/badges on the gradient. */ .cc-gradient-bg { background: var(--brand-gradient); color: var(--text-inverse); border-color: transparent; } .cc-gradient-bg:hover { /* Tiny brightness lift on hover. Keeps the gradient intact but signals interactivity. */ filter: brightness(1.08); } /* Gradient border via padding-box + border-box layering. The inner background paints over the padding-box only, leaving the outer conic-gradient visible exclusively in the 2px border slot. Used for card hover/focus. Default card state keeps a flat border; --cc-card-bg lets a card override the inner fill (e.g. an alternating surface tier) without rewriting the whole rule. */ .cc-conic-border { position: relative; border: 2px solid transparent; background: linear-gradient(var(--cc-card-bg, var(--surface-1)), var(--cc-card-bg, var(--surface-1))) padding-box, conic-gradient( from 180deg at 50% 50%, var(--brand-orange) 0deg, var(--brand-magenta) 90deg, var(--brand-purple) 180deg, var(--brand-blue) 270deg, var(--brand-orange) 360deg ) border-box; } /* ================================================================= Page background — subtle ambient gradient Soft radial from a slightly brighter navy at the top-center fading to the base --bg. Feels like overhead stage lighting. Fixed attachment so long scrolls don't run out of gradient. !important is intentional: theme.css is the source of truth for page chrome, and each page's inline