/* ───────────────────────────────────────────────────────────────────────────── IcyCastle · Product Page Kit Shared components for sibling product landing pages. Sits on top of the IcyCastle base (icycastle-base.css). Each product page sets a `theme-*` class on alongside the base direction/accent/density/mode classes. ──────────────────────────────────────────────────────────────────────────── */ :root { --pp-maxw: 1320px; --pp-section: 112px; --pp-rail: 11px; /* monospace baseline for product / section markers */ --pp-accent: var(--accent); --pp-accent-soft: var(--accent-soft); --pp-rule: var(--hairline); --pp-rule-strong: var(--hairline-strong); /* Decorative "warm-cool" pair for product personality — overridden by theme. */ --pp-tint: oklch(0.985 0.004 80); --pp-tint-2: oklch(0.965 0.005 80); --pp-ink-on-accent: var(--bg); --pp-flag: 'IcyCastle'; } html.den-roomy { --pp-section: 144px; } html.den-compact { --pp-section: 80px; } /* ── Product chrome ──────────────────────────────────────────────────────── */ .pp-shell { background: var(--bg); color: var(--fg); } /* Sibling-product bar above the nav — establishes the IcyCastle umbrella */ .sibling-bar { border-bottom: 1px solid var(--hairline); background: var(--bg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-muted); } .sibling-bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 36px; } .sibling-bar .sib-left { display: flex; align-items: center; gap: 18px; } .sibling-bar .sib-flag { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-soft); } .sibling-bar .sib-flag::before { content: ""; width: 14px; height: 14px; background: var(--accent); mask: radial-gradient(circle at 50% 50%, #000 32%, transparent 34%); -webkit-mask: radial-gradient(circle at 50% 50%, #000 32%, transparent 34%); } .sibling-bar nav { display: flex; gap: 22px; } .sibling-bar nav a { color: var(--fg-muted); transition: color .12s ease; position: relative; padding: 4px 0; } .sibling-bar nav a:hover { color: var(--fg); } .sibling-bar nav a.active { color: var(--accent); } .sibling-bar nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); } @media (max-width: 720px) { .sibling-bar .sib-left .sib-tag { display: none; } .sibling-bar nav { gap: 14px; } } /* Product nav (sits below the umbrella bar) */ .pp-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: color-mix(in oklab, var(--bg) 82%, transparent); border-bottom: 1px solid var(--hairline); } .pp-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; font-family: var(--font-text); font-size: 14px; } .pp-brand { display: inline-flex; align-items: baseline; gap: 14px; font-family: var(--font-display); font-size: 26px; letter-spacing: -0.012em; color: var(--fg); line-height: 1; } .pp-brand .pp-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; align-self: center; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); } .pp-brand .pp-version { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fg-muted); text-transform: uppercase; align-self: center; border: 1px solid var(--hairline); padding: 3px 7px; } .pp-nav-links { display: flex; align-items: center; gap: 28px; color: var(--fg-soft); } .pp-nav-links a { transition: color .12s ease; font-size: 13px; } .pp-nav-links a:hover { color: var(--fg); } .pp-nav-links .pp-cta { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--fg); color: var(--fg); background: transparent; transition: all .14s ease; } .pp-nav-links .pp-cta:hover { background: var(--accent); color: var(--pp-ink-on-accent); border-color: var(--accent); } @media (max-width: 720px) { .pp-nav-links a:not(.pp-cta) { display: none; } } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .pp-hero { padding: 80px 0 var(--pp-section); border-bottom: 1px solid var(--hairline); position: relative; overflow: hidden; } .pp-hero-eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 28px; } .pp-hero-eyebrow .pp-eyebrow-rule { height: 1px; width: 36px; background: var(--accent); } .pp-hero-h { font-family: var(--font-display); font-size: clamp(52px, 7.2vw, 112px); line-height: 0.98; letter-spacing: -0.022em; margin: 0 0 28px; max-width: 18ch; text-wrap: balance; } .pp-hero-h em { font-style: italic; color: var(--accent); } html.dir-brutalist .pp-hero-h em { font-style: normal; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 8px; } .pp-hero-lede { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; color: var(--fg-soft); max-width: 56ch; text-wrap: pretty; margin: 0 0 40px; } .pp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 64px; } /* Stats strip under the hero */ .pp-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 32px 56px; border-top: 1px solid var(--hairline); padding-top: 32px; } .pp-stat-num { font-family: var(--font-display); font-size: clamp(36px, 3.4vw, 56px); line-height: 1; letter-spacing: -0.02em; color: var(--accent); margin: 0 0 8px; } html.dir-brutalist .pp-stat-num { font-family: var(--font-mono); font-weight: 500; } .pp-stat-num small { font-family: var(--font-mono); font-size: 0.4em; color: var(--fg-muted); letter-spacing: 0.04em; margin-left: 6px; } .pp-stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } .pp-stat-sub { color: var(--fg-soft); font-size: 14px; margin-top: 4px; } /* Split hero variant — text + a "monitor" placeholder figure */ .pp-hero-split .pp-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: end; margin-bottom: 56px; } @media (max-width: 980px) { .pp-hero-split .pp-hero-grid { grid-template-columns: 1fr; gap: 48px; } } .pp-hero-fig { position: relative; aspect-ratio: 6 / 4; background: var(--bg-soft); border: 1px solid var(--hairline); overflow: hidden; } .pp-hero-fig::before, .pp-hero-fig::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 96px); opacity: 0.65; } .pp-hero-fig::after { background-image: repeating-linear-gradient(0deg, var(--hairline) 0 1px, transparent 1px 96px); } .pp-hero-fig svg { position: relative; z-index: 1; width: 100%; height: 100%; } .pp-hero-fig-cap { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-muted); } /* Hero "scan-line" — subtle product motif at top edge */ .pp-hero.has-scan::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 40%, var(--accent) 60%, transparent); opacity: 0.6; } /* ── Buttons (extend IcyCastle base) ─────────────────────────────────────── */ .pp-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; font-family: var(--font-text); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; border: 1px solid var(--accent); background: var(--accent); color: var(--pp-ink-on-accent); cursor: pointer; border-radius: 0; transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease; } .pp-btn:hover { background: transparent; color: var(--accent); } .pp-btn .arrow { transition: transform .15s ease; } .pp-btn:hover .arrow { transform: translateX(3px); } .pp-btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--hairline-strong); } .pp-btn-ghost:hover { color: var(--accent); border-color: var(--accent); background: transparent; } .pp-btn-code { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--hairline); font-family: var(--font-mono); padding: 0 18px; } .pp-btn-code:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-soft); } /* ── Section primitives ──────────────────────────────────────────────────── */ .pp-bay { padding: var(--pp-section) 0; border-bottom: 1px solid var(--hairline); } .pp-bay.tint { background: var(--bg-soft); } .pp-marker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; font-weight: 500; } .pp-marker::before { content: ""; width: 28px; height: 1px; background: var(--accent); } .pp-section-h { font-family: var(--font-display); font-size: clamp(38px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 20px; max-width: 26ch; text-wrap: balance; } .pp-section-h em { font-style: italic; color: var(--accent); } html.dir-brutalist .pp-section-h em { font-style: normal; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); } .pp-section-intro { font-size: 17px; line-height: 1.6; max-width: 44rem; color: var(--fg-soft); margin: 0 0 56px; text-wrap: pretty; } /* ── USP grid — head-to-head against competitors ─────────────────────────── */ .pp-usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border: 1px solid var(--hairline); } .pp-usp { padding: 28px 28px 30px; background: var(--bg); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-right: -1px; margin-bottom: -1px; display: flex; flex-direction: column; position: relative; } .pp-bay.tint .pp-usp { background: var(--bg); } .pp-usp-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; border: 1px solid var(--accent); padding: 4px 9px; align-self: flex-start; border-radius: 0; } .pp-usp-vs { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; margin: 0 0 10px; text-transform: uppercase; } .pp-usp-vs strong { color: var(--fg-soft); font-weight: 600; } .pp-usp h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 12px; font-weight: 500; } .pp-usp h3 em { font-style: italic; color: var(--accent); } .pp-usp p { font-size: 14.5px; color: var(--fg-soft); line-height: 1.55; margin: 0 0 16px; } .pp-usp .pp-usp-impl { margin-top: auto; padding: 8px 11px; border-left: 2px solid var(--accent); background: var(--accent-soft); font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); letter-spacing: 0.02em; } /* ── Personas (Curb / Hearth audience cards) ─────────────────────────────── */ .pp-personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border: 1px solid var(--hairline); } .pp-persona { padding: 32px 28px; background: var(--bg); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-right: -1px; margin-bottom: -1px; } .pp-persona-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } .pp-persona h4 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin: 0 0 10px; letter-spacing: -0.01em; line-height: 1.2; } .pp-persona p { font-size: 14px; color: var(--fg-soft); margin: 0; line-height: 1.55; } /* ── Refusals / Principles block ──────────────────────────────────────────── */ .pp-refusals { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); } .pp-refusal { padding: 26px 28px; background: var(--bg-soft); border-left: 3px solid var(--accent); } .pp-refusal .pp-x { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 12px; font-weight: 500; } .pp-refusal h4 { font-family: var(--font-display); font-weight: 500; font-size: 19px; margin: 0 0 8px; line-height: 1.2; letter-spacing: -0.005em; } .pp-refusal p { font-size: 14px; color: var(--fg-soft); line-height: 1.55; margin: 0; } /* ── Capability matrix ────────────────────────────────────────────────────── */ .pp-matrix-wrap { overflow-x: auto; border: 1px solid var(--hairline); background: var(--bg); } .pp-matrix { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--font-text); } .pp-matrix th, .pp-matrix td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); text-align: center; white-space: nowrap; color: var(--fg-soft); } .pp-matrix th { background: var(--bg-soft); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); font-weight: 500; } .pp-matrix td:first-child, .pp-matrix th:first-child { text-align: left; font-family: var(--font-text); font-size: 14px; color: var(--fg); min-width: 16rem; text-transform: none; letter-spacing: 0; font-weight: 500; position: sticky; left: 0; background: var(--bg); } .pp-matrix th:first-child { background: var(--bg-soft); } .pp-matrix .us { background: var(--accent-soft); } .pp-matrix .yes-us { color: var(--accent); font-weight: 600; } .pp-matrix .yes { color: var(--fg); } .pp-matrix .partial { color: var(--fg-muted); font-size: 11px; font-family: var(--font-mono); } .pp-matrix .no { color: var(--fg-muted); } .pp-matrix tbody tr:last-child td { border-bottom: 0; } .pp-matrix tbody tr:hover { background: color-mix(in oklab, var(--bg-soft) 50%, transparent); } .pp-matrix tbody tr:hover .us { background: var(--accent-soft); } /* ── Code block ──────────────────────────────────────────────────────────── */ .pp-code-block { border: 1px solid var(--hairline); background: var(--bg); position: relative; } .pp-code-tabs { display: flex; border-bottom: 1px solid var(--hairline); background: var(--bg-soft); } .pp-code-tabs button { appearance: none; background: transparent; border: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; padding: 12px 18px; color: var(--fg-muted); cursor: pointer; border-right: 1px solid var(--hairline); transition: color .12s ease, background .12s ease; } .pp-code-tabs button.on { color: var(--accent); background: var(--bg); } .pp-code-tabs button:hover { color: var(--fg); } .pp-code-pre { margin: 0; padding: 24px 28px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; overflow-x: auto; color: var(--fg); } .pp-code-pre .k { color: var(--accent); } .pp-code-pre .s { color: var(--fg-soft); } .pp-code-pre .c { color: var(--fg-muted); font-style: italic; } .pp-code-pre .n { color: var(--accent); opacity: 0.75; } .pp-code-pre .f { color: var(--fg); } .pp-code-caption { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; } /* ── Pricing tiers ───────────────────────────────────────────────────────── */ .pp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 0; border: 1px solid var(--hairline); } .pp-tier { padding: 28px 24px 32px; background: var(--bg); border-right: 1px solid var(--hairline); margin-right: -1px; display: flex; flex-direction: column; position: relative; } .pp-tier.featured { background: var(--accent-soft); position: relative; } .pp-tier.featured::before { content: "Most popular"; position: absolute; top: -1px; left: 0; right: 0; height: 4px; background: var(--accent); } .pp-tier h4 { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin: 0 0 4px; letter-spacing: -0.01em; } .pp-tier .pp-tier-sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 18px; } .pp-tier .pp-tier-price { font-family: var(--font-display); font-weight: 500; font-size: 38px; line-height: 1; color: var(--accent); margin: 0 0 6px; letter-spacing: -0.01em; } .pp-tier .pp-tier-price small { font-family: var(--font-text); font-size: 13px; color: var(--fg-soft); font-weight: 400; margin-left: 4px; } .pp-tier .pp-tier-note { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin: 0 0 22px; letter-spacing: 0.02em; } .pp-tier ul { list-style: none; padding: 18px 0 0; margin: 0; border-top: 1px solid var(--hairline); flex: 1; display: flex; flex-direction: column; gap: 8px; } .pp-tier ul li { font-size: 13.5px; color: var(--fg-soft); padding-left: 18px; position: relative; line-height: 1.45; } .pp-tier ul li::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--accent); font-family: var(--font-mono); font-weight: 600; } /* ── CTA band ────────────────────────────────────────────────────────────── */ .pp-cta { padding: var(--pp-section) 0; text-align: center; background: var(--bg-soft); border-bottom: 1px solid var(--hairline); position: relative; overflow: hidden; } .pp-cta .pp-cta-h { font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -0.02em; max-width: 24ch; margin: 0 auto 22px; text-wrap: balance; } .pp-cta .pp-cta-h em { font-style: italic; color: var(--accent); } html.dir-brutalist .pp-cta .pp-cta-h em { font-style: normal; } .pp-cta-lede { max-width: 38rem; margin: 0 auto 36px; color: var(--fg-soft); font-size: 17px; } .pp-cta-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .pp-cta-links a { padding: 6px 14px; border: 1px solid var(--hairline-strong); color: var(--fg-soft); transition: color .12s, border-color .12s; } .pp-cta-links a:hover { color: var(--accent); border-color: var(--accent); } /* ── Footer ──────────────────────────────────────────────────────────────── */ .pp-footer { padding: 56px 0 36px; } .pp-footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; } @media (max-width: 880px) { .pp-footer .wrap { grid-template-columns: 1fr 1fr; } } .pp-footer h5 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 16px; } .pp-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .pp-footer ul a { color: var(--fg-soft); transition: color .1s ease; } .pp-footer ul a:hover { color: var(--accent); } .pp-footer-brand { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.012em; line-height: 1.15; } .pp-footer-brand em { color: var(--accent); font-style: italic; } html.dir-brutalist .pp-footer-brand em { font-style: normal; } .pp-footer-meta { max-width: var(--maxw); margin: 56px auto 0; padding: 24px 32px 0; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; } /* ───────────────────────────────────────────────────────────────────────────── PRODUCT THEME OVERLAYS Each theme tunes a small set of tokens. The shape stays identical. ──────────────────────────────────────────────────────────────────────────── */ /* Eyrie — court-grade · cool · forensic */ html.theme-eyrie { --bg: oklch(0.17 0.018 250); --bg-soft: oklch(0.21 0.022 250); --fg: oklch(0.96 0.008 250); --fg-soft: oklch(0.78 0.012 250); --fg-muted: oklch(0.58 0.012 250); --hairline: oklch(0.96 0.008 250 / 0.16); --hairline-strong: oklch(0.96 0.008 250 / 0.30); --accent: oklch(0.78 0.13 220); --accent-soft: oklch(0.78 0.13 220 / 0.14); --pp-ink-on-accent: oklch(0.17 0.018 250); } /* Hearth — privacy-first · warm · hearthside */ html.theme-hearth { --bg: oklch(0.18 0.018 60); --bg-soft: oklch(0.22 0.022 60); --fg: oklch(0.94 0.025 75); --fg-soft: oklch(0.78 0.030 75); --fg-muted: oklch(0.58 0.020 75); --hairline: oklch(0.94 0.025 75 / 0.16); --hairline-strong: oklch(0.94 0.025 75 / 0.32); --accent: oklch(0.80 0.14 65); /* candle amber */ --accent-soft: oklch(0.80 0.14 65 / 0.12); --pp-ink-on-accent: oklch(0.18 0.018 60); } /* Curb — Stripe-friendly · light · forest */ html.theme-curb { --bg: oklch(0.985 0.005 160); --bg-soft: oklch(0.965 0.008 160); --fg: oklch(0.20 0.020 160); --fg-soft: oklch(0.42 0.014 160); --fg-muted: oklch(0.60 0.010 160); --hairline: oklch(0.20 0.020 160 / 0.12); --hairline-strong: oklch(0.20 0.020 160 / 0.26); --accent: oklch(0.46 0.12 158); --accent-soft: oklch(0.46 0.12 158 / 0.10); --pp-ink-on-accent: oklch(0.985 0.005 160); } /* YardSight — industrial · cool · navy + steel */ html.theme-yardsight { --bg: oklch(0.985 0.005 240); --bg-soft: oklch(0.955 0.008 240); --fg: oklch(0.18 0.015 240); --fg-soft: oklch(0.40 0.012 240); --fg-muted: oklch(0.58 0.010 240); --hairline: oklch(0.18 0.015 240 / 0.14); --hairline-strong: oklch(0.18 0.015 240 / 0.32); --accent: oklch(0.40 0.14 250); --accent-soft: oklch(0.40 0.14 250 / 0.08); --pp-ink-on-accent: oklch(0.985 0.005 240); } /* PlateKit — mono · terminal · library docs */ html.theme-platekit { --bg: oklch(0.985 0.003 80); --bg-soft: oklch(0.96 0.005 80); --fg: oklch(0.16 0.01 80); --fg-soft: oklch(0.40 0.008 80); --fg-muted: oklch(0.58 0.006 80); --hairline: oklch(0.16 0.01 80 / 0.14); --hairline-strong: oklch(0.16 0.01 80 / 0.30); --accent: oklch(0.18 0.01 60); /* near-ink */ --accent-soft: oklch(0.18 0.01 60 / 0.06); --pp-ink-on-accent: oklch(0.985 0.003 80); } /* SAAKSHA Rail — Indian rail-freight CTMS · steel indigo */ html.theme-saaksha-rail { --bg: oklch(0.985 0.005 275); --bg-soft: oklch(0.962 0.008 275); --fg: oklch(0.19 0.018 275); --fg-soft: oklch(0.41 0.013 275); --fg-muted: oklch(0.59 0.010 275); --hairline: oklch(0.19 0.018 275 / 0.13); --hairline-strong: oklch(0.19 0.018 275 / 0.28); --accent: oklch(0.42 0.13 275); --accent-soft: oklch(0.42 0.13 275 / 0.10); --pp-ink-on-accent: oklch(0.985 0.005 275); } /* SAAKSHA Line — line-side QA + DPP · manufacturing teal */ html.theme-saaksha-line { --bg: oklch(0.985 0.005 175); --bg-soft: oklch(0.962 0.008 175); --fg: oklch(0.19 0.018 175); --fg-soft: oklch(0.41 0.013 175); --fg-muted: oklch(0.59 0.010 175); --hairline: oklch(0.19 0.018 175 / 0.13); --hairline-strong: oklch(0.19 0.018 175 / 0.28); --accent: oklch(0.48 0.11 175); --accent-soft: oklch(0.48 0.11 175 / 0.10); --pp-ink-on-accent: oklch(0.985 0.005 175); } /* SAAKSHA Mandi — MSP procurement CV · harvest green */ html.theme-saaksha-mandi { --bg: oklch(0.985 0.006 128); --bg-soft: oklch(0.962 0.010 128); --fg: oklch(0.19 0.020 128); --fg-soft: oklch(0.41 0.015 128); --fg-muted: oklch(0.59 0.012 128); --hairline: oklch(0.19 0.020 128 / 0.13); --hairline-strong: oklch(0.19 0.020 128 / 0.28); --accent: oklch(0.50 0.13 128); --accent-soft: oklch(0.50 0.13 128 / 0.10); --pp-ink-on-accent: oklch(0.985 0.006 128); } /* Spire — tamper-evident LLM substrate · violet */ html.theme-spire { --bg: oklch(0.985 0.005 300); --bg-soft: oklch(0.962 0.009 300); --fg: oklch(0.19 0.020 300); --fg-soft: oklch(0.41 0.015 300); --fg-muted: oklch(0.59 0.012 300); --hairline: oklch(0.19 0.020 300 / 0.13); --hairline-strong: oklch(0.19 0.020 300 / 0.28); --accent: oklch(0.45 0.15 300); --accent-soft: oklch(0.45 0.15 300 / 0.10); --pp-ink-on-accent: oklch(0.985 0.005 300); } /* PaperKit — India KYC + document AI · slate blue */ html.theme-paperkit { --bg: oklch(0.985 0.004 245); --bg-soft: oklch(0.962 0.007 245); --fg: oklch(0.18 0.016 245); --fg-soft: oklch(0.40 0.012 245); --fg-muted: oklch(0.58 0.010 245); --hairline: oklch(0.18 0.016 245 / 0.13); --hairline-strong: oklch(0.18 0.016 245 / 0.28); --accent: oklch(0.44 0.12 245); --accent-soft: oklch(0.44 0.12 245 / 0.10); --pp-ink-on-accent: oklch(0.985 0.004 245); } /* HazardKit — real-time hazard detection · alert orange */ html.theme-hazardkit { --bg: oklch(0.985 0.006 40); --bg-soft: oklch(0.962 0.011 40); --fg: oklch(0.19 0.022 40); --fg-soft: oklch(0.41 0.016 40); --fg-muted: oklch(0.59 0.012 40); --hairline: oklch(0.19 0.022 40 / 0.13); --hairline-strong: oklch(0.19 0.022 40 / 0.28); --accent: oklch(0.53 0.17 35); --accent-soft: oklch(0.53 0.17 35 / 0.10); --pp-ink-on-accent: oklch(0.985 0.006 40); } /* DriveSight — in-cabin driver monitoring · amber */ html.theme-drivesight { --bg: oklch(0.985 0.005 75); --bg-soft: oklch(0.962 0.009 75); --fg: oklch(0.19 0.020 75); --fg-soft: oklch(0.41 0.015 75); --fg-muted: oklch(0.59 0.012 75); --hairline: oklch(0.19 0.020 75 / 0.13); --hairline-strong: oklch(0.19 0.020 75 / 0.28); --accent: oklch(0.56 0.14 70); --accent-soft: oklch(0.56 0.14 70 / 0.10); --pp-ink-on-accent: oklch(0.19 0.020 75); } /* MedSight — AI radiology triage · clinical teal */ html.theme-medsight { --bg: oklch(0.985 0.005 195); --bg-soft: oklch(0.962 0.008 195); --fg: oklch(0.18 0.016 195); --fg-soft: oklch(0.40 0.012 195); --fg-muted: oklch(0.58 0.010 195); --hairline: oklch(0.18 0.016 195 / 0.13); --hairline-strong: oklch(0.18 0.016 195 / 0.28); --accent: oklch(0.50 0.11 195); --accent-soft: oklch(0.50 0.11 195 / 0.10); --pp-ink-on-accent: oklch(0.985 0.005 195); } /* SiteTwin — 3D forensic reconstruction · forensic violet */ html.theme-sitetwin { --bg: oklch(0.985 0.005 320); --bg-soft: oklch(0.962 0.009 320); --fg: oklch(0.19 0.020 320); --fg-soft: oklch(0.41 0.015 320); --fg-muted: oklch(0.59 0.012 320); --hairline: oklch(0.19 0.020 320 / 0.13); --hairline-strong: oklch(0.19 0.020 320 / 0.28); --accent: oklch(0.47 0.14 320); --accent-soft: oklch(0.47 0.14 320 / 0.10); --pp-ink-on-accent: oklch(0.985 0.005 320); } /* PlateKit India Pro — India commercial bundle · saffron */ html.theme-platekit-india-pro { --bg: oklch(0.985 0.006 60); --bg-soft: oklch(0.962 0.011 60); --fg: oklch(0.19 0.022 60); --fg-soft: oklch(0.41 0.016 60); --fg-muted: oklch(0.59 0.012 60); --hairline: oklch(0.19 0.022 60 / 0.13); --hairline-strong: oklch(0.19 0.022 60 / 0.28); --accent: oklch(0.55 0.15 55); --accent-soft: oklch(0.55 0.15 55 / 0.10); --pp-ink-on-accent: oklch(0.19 0.022 60); } /* ── Cross-product navigation tiles (used on each product footer) ────────── */ .pp-sib-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--hairline); margin-top: 48px; } @media (max-width: 880px) { .pp-sib-grid { grid-template-columns: 1fr 1fr; } } .pp-sib-tile { padding: 24px 22px; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; color: var(--fg); transition: background .12s ease; } .pp-sib-tile:last-child { border-right: 0; } .pp-sib-tile:hover { background: var(--bg-soft); } .pp-sib-tile .pp-sib-name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; line-height: 1; display: flex; align-items: center; gap: 10px; } .pp-sib-tile .pp-sib-name::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.7; } .pp-sib-tile .pp-sib-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); } .pp-sib-tile .pp-sib-body { font-size: 13.5px; color: var(--fg-soft); line-height: 1.5; margin: 0; } .pp-sib-tile .pp-sib-link { margin-top: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; } .pp-sib-tile.is-current { background: var(--accent-soft); } .pp-sib-tile.is-current .pp-sib-link { color: var(--fg-muted); } /* small dot-color per sibling, used in shells */ .pp-sib-tile[data-sib="hearth"] .pp-sib-name { color: oklch(0.62 0.16 60); } .pp-sib-tile[data-sib="curb"] .pp-sib-name { color: oklch(0.50 0.13 158); } .pp-sib-tile[data-sib="yardsight"] .pp-sib-name { color: oklch(0.42 0.14 250); } .pp-sib-tile[data-sib="platekit"] .pp-sib-name { color: oklch(0.22 0.01 80); } .pp-sib-tile[data-sib="eyrie"] .pp-sib-name { color: oklch(0.62 0.13 220); } /* ── Small helpers ──────────────────────────────────────────────────────── */ .pp-row { display: grid; grid-template-columns: 200px 1fr; gap: 56px; } @media (max-width: 880px) { .pp-row { grid-template-columns: 1fr; gap: 16px; } } .pp-pillchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 22px; } .pp-pillchips .chip { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--hairline); padding: 3px 9px; color: var(--fg-soft); letter-spacing: 0.04em; } .pp-pillchips .chip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .pp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 48px; padding: 40px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }