/* ───────────────────────────────────────────────────────────────────────────── IcyCastle · Product Page — Editorial overlay (Option A) ---------------------------------------------------------------------------- Loaded AFTER product-page.css. Does not require touching the original CSS. Strategy: 1. No per-product theme. Page inherits the marketing-site neutral palette. 2. Accent reserved for: hero , sibling-bar active link, CTA button. Everything else (eyebrows, markers, stat numbers, badge borders, code keywords, pricing prices, refusal labels) reverts to neutral ink/muted. 3. Single nav band (sibling-bar merged visually with pp-nav). 4. Version chip hidden in chrome — keep in footer only. 5. Grid cells get single hairlines via a 1px-gap-on-darker-background trick. 6. Display headlines slightly lighter weight, more generous breathing. ──────────────────────────────────────────────────────────────────────────── */ /* ── (1) Force neutral palette regardless of theme-* class ───────────────── Even if the still carries `theme-yardsight`, we override every token back to the editorial system so this CSS is drop-in safe. */ html.pp-editorial { --bg: oklch(0.985 0.004 80); --bg-soft: oklch(0.965 0.005 80); --fg: oklch(0.18 0.01 60); --fg-soft: oklch(0.42 0.01 60); --fg-muted: oklch(0.62 0.008 60); --hairline: oklch(0.18 0.01 60 / 0.14); --hairline-strong: oklch(0.18 0.01 60 / 0.28); --hover-bg: oklch(0.18 0.01 60 / 0.04); --accent: oklch(0.42 0.13 250); --accent-soft: oklch(0.42 0.13 250 / 0.10); --pp-ink-on-accent: var(--bg); } /* Per-product accent hue — keep the shared editorial neutrals, only change the accent color. This is the "sibling-tinted" part of the system. */ html.pp-editorial.theme-hearth { --accent: oklch(0.55 0.13 65); --accent-soft: oklch(0.55 0.13 65 / 0.10); } html.pp-editorial.theme-curb { --accent: oklch(0.46 0.12 158); --accent-soft: oklch(0.46 0.12 158 / 0.10); } html.pp-editorial.theme-yardsight { --accent: oklch(0.42 0.13 250); --accent-soft: oklch(0.42 0.13 250 / 0.10); } html.pp-editorial.theme-platekit { --accent: oklch(0.30 0.03 80); --accent-soft: oklch(0.30 0.03 80 / 0.10); } html.pp-editorial.theme-eyrie { --accent: oklch(0.50 0.13 220); --accent-soft: oklch(0.50 0.13 220 / 0.10); } html.pp-editorial.theme-saaksha-rail { --accent: oklch(0.42 0.13 275); --accent-soft: oklch(0.42 0.13 275 / 0.10); } html.pp-editorial.theme-saaksha-line { --accent: oklch(0.48 0.11 175); --accent-soft: oklch(0.48 0.11 175 / 0.10); } html.pp-editorial.theme-saaksha-mandi { --accent: oklch(0.50 0.13 128); --accent-soft: oklch(0.50 0.13 128 / 0.10); } html.pp-editorial.theme-spire { --accent: oklch(0.45 0.15 300); --accent-soft: oklch(0.45 0.15 300 / 0.10); } html.pp-editorial.theme-paperkit { --accent: oklch(0.44 0.12 245); --accent-soft: oklch(0.44 0.12 245 / 0.10); } html.pp-editorial.theme-hazardkit { --accent: oklch(0.53 0.17 35); --accent-soft: oklch(0.53 0.17 35 / 0.10); } html.pp-editorial.theme-drivesight { --accent: oklch(0.56 0.14 70); --accent-soft: oklch(0.56 0.14 70 / 0.10); } html.pp-editorial.theme-medsight { --accent: oklch(0.50 0.11 195); --accent-soft: oklch(0.50 0.11 195 / 0.10); } html.pp-editorial.theme-sitetwin { --accent: oklch(0.47 0.14 320); --accent-soft: oklch(0.47 0.14 320 / 0.10); } html.pp-editorial.theme-platekit-india-pro { --accent: oklch(0.55 0.15 55); --accent-soft: oklch(0.55 0.15 55 / 0.10); } html.pp-editorial.dark { --bg: oklch(0.155 0.006 60); --bg-soft: oklch(0.195 0.006 60); --fg: oklch(0.96 0.005 80); --fg-soft: oklch(0.78 0.006 80); --fg-muted: oklch(0.58 0.008 80); --hairline: oklch(0.96 0.005 80 / 0.14); --hairline-strong: oklch(0.96 0.005 80 / 0.28); --hover-bg: oklch(0.96 0.005 80 / 0.05); --accent: oklch(0.72 0.13 250); --accent-soft: oklch(0.72 0.13 250 / 0.16); } /* ── (2) Cut accent usage by ~70% ───────────────────────────────────────── */ html.pp-editorial .pp-hero-eyebrow { color: var(--fg-muted); } html.pp-editorial .pp-hero-eyebrow .pp-eyebrow-rule { background: var(--fg-muted); } html.pp-editorial .pp-marker { color: var(--fg-muted); font-weight: 400; } html.pp-editorial .pp-marker::before { background: var(--fg-muted); width: 36px; } html.pp-editorial .pp-section-h em { color: var(--accent); /* keep — these are the moments */ } html.pp-editorial .pp-hero-h em { color: var(--accent); /* keep */ } /* Stat numbers — drop from accent to ink. Big and serif is already plenty. */ html.pp-editorial .pp-stat-num { color: var(--fg); } html.pp-editorial .pp-stat-num small { color: var(--fg-muted); } /* USP badges — neutral border, neutral mono. */ html.pp-editorial .pp-usp-badge { color: var(--fg-muted); border-color: var(--hairline-strong); } html.pp-editorial .pp-usp h3 em { color: var(--accent); } /* USP "impl" line — was using accent-soft fill + accent border. Soften. */ html.pp-editorial .pp-usp-impl { background: var(--bg-soft); border-left-color: var(--hairline-strong); color: var(--fg-soft); } /* Persona roles — these were tiny accent uppercase labels everywhere. */ html.pp-editorial .pp-persona-role { color: var(--fg-muted); } /* Refusal block — accent border was the loud bit; calm it. */ html.pp-editorial .pp-refusal { background: var(--bg); border-left: 1px solid var(--hairline-strong); } html.pp-editorial .pp-refusal .pp-x { color: var(--fg-muted); } /* Pricing — prices and notes were both in accent. */ html.pp-editorial .pp-tier .pp-tier-price { color: var(--fg); } html.pp-editorial .pp-tier .pp-tier-note { color: var(--fg-muted); } html.pp-editorial .pp-tier ul li::before { color: var(--fg-muted); } html.pp-editorial .pp-tier.featured { background: var(--bg-soft); } html.pp-editorial .pp-tier.featured::before { background: var(--fg); height: 2px; } /* Code block — accent keywords were busy. Use a single highlight color. */ html.pp-editorial .pp-code-pre .k { color: var(--fg); font-weight: 600; } html.pp-editorial .pp-code-pre .n { color: var(--fg); opacity: 1; } html.pp-editorial .pp-code-tabs button.on { color: var(--fg); } html.pp-editorial .pp-code-tabs button.on::after { content: ""; display: block; height: 1px; background: var(--fg); margin: 8px -18px -1px; } /* Pricing chip / pill stripe — quieter. */ html.pp-editorial .pp-pillchips .chip.on { color: var(--fg); border-color: var(--hairline-strong); background: var(--bg-soft); } /* CTA band: keep, but soften the eyebrow + cta-links. */ html.pp-editorial .pp-cta-h em { color: var(--accent); } html.pp-editorial .pp-cta-links a { color: var(--fg-muted); border-color: var(--hairline); text-transform: none; letter-spacing: 0; font-family: var(--font-text); } html.pp-editorial .pp-cta-links a:hover { color: var(--fg); border-color: var(--fg); } /* Sibling tiles in footer: keep, but neutral. */ html.pp-editorial .pp-sib-tile .pp-sib-link { color: var(--fg-muted); } html.pp-editorial .pp-sib-tile[data-sib="hearth"] .pp-sib-name, html.pp-editorial .pp-sib-tile[data-sib="curb"] .pp-sib-name, html.pp-editorial .pp-sib-tile[data-sib="yardsight"] .pp-sib-name, html.pp-editorial .pp-sib-tile[data-sib="platekit"] .pp-sib-name, html.pp-editorial .pp-sib-tile[data-sib="eyrie"] .pp-sib-name { color: var(--fg); } html.pp-editorial .pp-sib-tile .pp-sib-name::before { background: var(--fg-muted); } /* Footer parent-brand em — keep accent, this is the through-line. */ html.pp-editorial .pp-footer-brand em { color: var(--accent); } /* ── (3) Merge sibling-bar + pp-nav into one visual band ────────────────── */ html.pp-editorial .sibling-bar { background: var(--bg); border-bottom: 0; padding-top: 2px; } /* Use the actual IcyCastle mark as the parent-brand identity in the sibling bar. Replaces the synthetic accent dot from product-page.css. */ html.pp-editorial .sibling-bar .sib-flag::before { content: ""; width: 20px; height: 20px; background: url("./icycastle_logo.png") no-repeat center / contain; mask: none; -webkit-mask: none; display: inline-block; flex-shrink: 0; } html.pp-editorial .sibling-bar .sib-flag { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; color: var(--fg); text-transform: none; display: inline-flex; align-items: center; gap: 10px; } html.pp-editorial .sibling-bar .sib-tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted); letter-spacing: 0.06em; margin-left: 4px; } html.pp-editorial .sibling-bar nav a { letter-spacing: 0.04em; } html.pp-editorial .sibling-bar nav a.active { color: var(--accent); font-weight: 500; } html.pp-editorial .sibling-bar nav a.active::after { background: var(--accent); } /* Product nav: drop the version chip, lighten the brand. */ html.pp-editorial .pp-nav { background: color-mix(in oklab, var(--bg) 90%, transparent); } html.pp-editorial .pp-brand .pp-mark { display: none; } html.pp-editorial .pp-brand .pp-version { display: none; } html.pp-editorial .pp-brand { font-size: 22px; font-weight: 400; gap: 0; } html.pp-editorial .pp-nav-links .pp-cta { border-color: var(--hairline-strong); color: var(--fg); font-weight: 400; } html.pp-editorial .pp-nav-links .pp-cta:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } /* ── (4) Hero — calmer composition ──────────────────────────────────────── */ html.pp-editorial .pp-hero { padding-top: 96px; padding-bottom: 80px; border-bottom: 1px solid var(--hairline); } html.pp-editorial .pp-hero.has-scan::before { display: none; } html.pp-editorial .pp-hero-h { font-weight: 400; font-size: clamp(48px, 6.2vw, 96px); line-height: 1.02; } html.pp-editorial .pp-hero-lede { font-size: clamp(18px, 1.35vw, 21px); color: var(--fg-soft); max-width: 60ch; } html.pp-editorial .pp-hero-lede strong { color: var(--fg); font-weight: 500; } /* Hero figure: drop the accent text fills; use ink + muted. */ html.pp-editorial .pp-hero-fig svg text[fill="var(--accent)"] { fill: var(--fg); } /* Hero CTA — primary becomes ghost, secondary becomes link-style. */ html.pp-editorial .pp-btn { border: 1px solid var(--fg); background: var(--fg); color: var(--bg); height: 44px; padding: 0 20px; font-weight: 400; } html.pp-editorial .pp-btn:hover { background: transparent; color: var(--fg); border-color: var(--fg); } html.pp-editorial .pp-btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--hairline-strong); } html.pp-editorial .pp-btn-ghost:hover { background: transparent; color: var(--fg); border-color: var(--fg); } /* Stats strip below hero: tighter, less colorful. */ html.pp-editorial .pp-hero-stats { gap: 28px 56px; padding-top: 36px; border-top: 1px solid var(--hairline); } html.pp-editorial .pp-stat-num { font-size: clamp(32px, 2.8vw, 44px); font-weight: 400; } /* ── (5) Sections — wider gaps, lighter h2, single-line dividers ───────── */ html.pp-editorial .pp-bay { padding: 96px 0; } html.pp-editorial .pp-bay.tint { background: var(--bg); /* drop alternating tint */ } /* Optional gentle tint via every-other rule (preserves rhythm without color shock) */ html.pp-editorial .pp-bay:nth-of-type(2n) { background: var(--bg-soft); } html.pp-editorial .pp-section-h { font-weight: 400; font-size: clamp(36px, 3.8vw, 56px); line-height: 1.06; margin-bottom: 24px; } html.pp-editorial .pp-section-intro { color: var(--fg-soft); font-size: 17px; line-height: 1.65; max-width: 60ch; margin-bottom: 56px; } /* ── (6) Grid cells — single hairlines, no double-border cage ──────────── */ html.pp-editorial .pp-usp-grid, html.pp-editorial .pp-personas, html.pp-editorial .pp-refusals, html.pp-editorial .pp-pricing { gap: 0; background: transparent; border: 0; } html.pp-editorial .pp-usp, html.pp-editorial .pp-persona, html.pp-editorial .pp-refusal, html.pp-editorial .pp-tier { background: transparent; border: 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); margin: 0; padding: 28px 28px 32px; } /* Right + bottom border only on cells at the actual edge — handled by parent. */ html.pp-editorial .pp-usp-grid, html.pp-editorial .pp-personas, html.pp-editorial .pp-refusals, html.pp-editorial .pp-pricing { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } /* Matrix — reduce per-cell borders */ html.pp-editorial .pp-matrix th, html.pp-editorial .pp-matrix td { border-right: 0; } html.pp-editorial .pp-matrix .us { background: var(--bg-soft); } html.pp-editorial .pp-matrix .yes-us { color: var(--fg); font-weight: 600; } /* ── (7) Footer — calmer typography ─────────────────────────────────────── */ html.pp-editorial .pp-footer-brand { font-weight: 400; font-size: 24px; } html.pp-editorial .pp-footer-meta { letter-spacing: 0.02em; }