/* ============================================================================= Capability pages — bold per-client demo skins ----------------------------------------------------------------------------- Loaded ONLY on /capabilities/* routes. Rollback: remove this file's from those HTML files and delete the `cap-theme cap-theme--*` classes from . ============================================================================= */ /* ----------------------------------------------------------------------------- Theme tokens — Capabilities index (showroom: deep slate + cyan) ----------------------------------------------------------------------------- */ body.cap-theme.cap-theme--index { --cap-page-bg: #070b10; --cap-body-text: #c8d0da; --cap-hero-glow1: rgba(45, 212, 191, 0.35); --cap-hero-dot: rgba(255, 255, 255, 0.045); --cap-hero-heading: #f0faf8; --cap-hero-sub: #94b8b0; --cap-nav-bg: rgba(7, 11, 16, 0.94); --cap-nav-border: rgba(45, 212, 191, 0.12); --cap-logo-a: #f0faf8; --cap-logo-s: #2dd4bf; --cap-nav-link: #b8c5cc; --cap-nav-link-hover: #2dd4bf; --cap-nav-link-hover-bg: rgba(45, 212, 191, 0.1); --cap-nav-dropdown-bg: #0f1724; --cap-nav-dropdown-border: rgba(45, 212, 191, 0.15); --cap-dropdown-link: #e2e8f0; --cap-dropdown-link-hover-bg: rgba(45, 212, 191, 0.08); --cap-dropdown-link-hover: #5eead4; --cap-accent: #2dd4bf; --cap-accent-hover: #5eead4; --cap-btn-text-on-accent: #041016; --cap-nav-toggle-border: rgba(45, 212, 191, 0.25); --cap-nav-toggle-hover: #2dd4bf; --cap-nav-toggle-bar: #e2e8f0; --cap-drawer-overlay: rgba(4, 8, 12, 0.65); --cap-drawer-inner-bg: #0c1420; --cap-drawer-link: #e2e8f0; --cap-drawer-link-hover-bg: rgba(45, 212, 191, 0.08); --cap-band-bg: transparent; --cap-band-border: transparent; --cap-band-heading: #f0faf8; --cap-band-text: #94b8b0; --cap-panel-bg: linear-gradient(180deg, #0d1520 0%, #0a1018 100%); --cap-panel-heading: #f0faf8; --cap-panel-text: #94a3b8; --cap-panel-eyebrow: #2dd4bf; --cap-card-bg: #f0fdf9; --cap-card-border: rgba(45, 212, 191, 0.22); --cap-card-heading: #0f172a; --cap-card-muted: #475569; --cap-mockbar-bg: #e0f7f3; --cap-mockbar-title: #334155; --cap-shadow-mockup: 0 28px 70px rgba(0, 0, 0, 0.45); --cap-footer-bg: #05080c; --cap-footer-border: rgba(45, 212, 191, 0.1); --cap-footer-text: #94a3b8; --cap-footer-muted: #64748b; --cap-footer-link-hover: #5eead4; --cap-cta-bg: linear-gradient(165deg, #042f2e 0%, #0a1628 100%); --cap-cta-heading: #f0faf8; --cap-cta-text: #94b8b0; --cap-mock-dot: #2dd4bf; --cap-mock-dot-shadow: rgba(45, 212, 191, 0.35); --cap-mock-dot-secondary: #64748b; --cap-warn: #f87171; --cap-good: #34d399; --cap-mid: #fbbf24; --cap-matrix-feature: #2dd4bf; --cap-matrix-cut: #f87171; --cap-demo-strip-bg: linear-gradient(90deg, rgba(45, 212, 191, 0.12), rgba(45, 212, 191, 0.02)); --cap-demo-strip-border: rgba(45, 212, 191, 0.35); --chart-feature: #2dd4bf; --chart-promote: #94a3b8; --chart-reprice: #34d399; --chart-cut: #f87171; --chart-gridline: rgba(148, 163, 184, 0.45); } /* ----------------------------------------------------------------------------- Restaurant + live demo — burgundy bistro + brass ----------------------------------------------------------------------------- */ body.cap-theme.cap-theme--restaurant { --cap-page-bg: #10060a; --cap-body-text: #dccdc8; --cap-hero-glow1: rgba(201, 164, 74, 0.38); --cap-hero-dot: rgba(255, 245, 235, 0.04); --cap-hero-heading: #fff8f0; --cap-hero-sub: #c4b4a8; --cap-nav-bg: rgba(16, 6, 10, 0.94); --cap-nav-border: rgba(201, 164, 74, 0.15); --cap-logo-a: #fff8f0; --cap-logo-s: #d4af37; --cap-nav-link: #e8ddd4; --cap-nav-link-hover: #f0d78c; --cap-nav-link-hover-bg: rgba(201, 164, 74, 0.1); --cap-nav-dropdown-bg: #1c0e14; --cap-nav-dropdown-border: rgba(201, 164, 74, 0.2); --cap-dropdown-link: #f5ebe0; --cap-dropdown-link-hover-bg: rgba(201, 164, 74, 0.08); --cap-dropdown-link-hover: #f0d78c; --cap-accent: #c9a44a; --cap-accent-hover: #dfc069; --cap-btn-text-on-accent: #1a0a08; --cap-nav-toggle-border: rgba(201, 164, 74, 0.3); --cap-nav-toggle-hover: #d4af37; --cap-nav-toggle-bar: #f5ebe0; --cap-drawer-overlay: rgba(8, 2, 4, 0.7); --cap-drawer-inner-bg: #180a10; --cap-drawer-link: #f5ebe0; --cap-drawer-link-hover-bg: rgba(201, 164, 74, 0.08); --cap-band-bg: #160a0f; --cap-band-border: rgba(201, 164, 74, 0.08); --cap-band-heading: #fff8f0; --cap-band-text: #b8a99c; --cap-panel-bg: #160a0f; --cap-panel-heading: #fff8f0; --cap-panel-text: #b8a99c; --cap-panel-eyebrow: #d4af37; --cap-card-bg: #faf5eb; --cap-card-border: rgba(90, 50, 40, 0.12); --cap-card-heading: #2a1410; --cap-card-muted: #5c4a42; --cap-mockbar-bg: #f0e6d8; --cap-mockbar-title: #4a3528; --cap-shadow-mockup: 0 28px 70px rgba(0, 0, 0, 0.55); --cap-footer-bg: #0a0406; --cap-footer-border: rgba(201, 164, 74, 0.1); --cap-footer-text: #a8988c; --cap-footer-muted: #7d6d62; --cap-footer-link-hover: #f0d78c; --cap-cta-bg: linear-gradient(165deg, #2a1018 0%, #10060a 100%); --cap-cta-heading: #fff8f0; --cap-cta-text: #c4b4a8; --cap-mock-dot: #c9a44a; --cap-mock-dot-shadow: rgba(201, 164, 74, 0.45); --cap-mock-dot-secondary: #6b5a52; --cap-warn: #c94c4c; --cap-good: #4a9d6f; --cap-mid: #d4a020; --cap-matrix-feature: #d4af37; --cap-matrix-cut: #c94c4c; --cap-demo-strip-bg: linear-gradient(90deg, rgba(201, 164, 74, 0.14), rgba(201, 164, 74, 0.02)); --cap-demo-strip-border: rgba(201, 164, 74, 0.35); --chart-feature: #d4af37; --chart-promote: #8b7355; --chart-reprice: #5a9d72; --chart-cut: #b44a4a; --chart-gridline: rgba(184, 160, 140, 0.45); } /* ----------------------------------------------------------------------------- Field service — navy deck + safety amber ----------------------------------------------------------------------------- */ body.cap-theme.cap-theme--field { --cap-page-bg: #030a12; --cap-body-text: #b4c2d4; --cap-hero-glow1: rgba(245, 184, 0, 0.28); --cap-hero-dot: rgba(200, 220, 255, 0.035); --cap-hero-heading: #f0f6ff; --cap-hero-sub: #8fa4bc; --cap-nav-bg: rgba(3, 10, 18, 0.95); --cap-nav-border: rgba(245, 184, 0, 0.15); --cap-logo-a: #f0f6ff; --cap-logo-s: #f5b800; --cap-nav-link: #b4c2d4; --cap-nav-link-hover: #ffd54a; --cap-nav-link-hover-bg: rgba(245, 184, 0, 0.1); --cap-nav-dropdown-bg: #0a1628; --cap-nav-dropdown-border: rgba(245, 184, 0, 0.18); --cap-dropdown-link: #e8eef5; --cap-dropdown-link-hover-bg: rgba(245, 184, 0, 0.08); --cap-dropdown-link-hover: #ffd54a; --cap-accent: #f5b800; --cap-accent-hover: #ffd54a; --cap-btn-text-on-accent: #030a12; --cap-nav-toggle-border: rgba(245, 184, 0, 0.28); --cap-nav-toggle-hover: #f5b800; --cap-nav-toggle-bar: #e8eef5; --cap-drawer-overlay: rgba(2, 6, 12, 0.72); --cap-drawer-inner-bg: #061220; --cap-drawer-link: #e8eef5; --cap-drawer-link-hover-bg: rgba(245, 184, 0, 0.08); --cap-band-bg: #061422; --cap-band-border: rgba(245, 184, 0, 0.08); --cap-band-heading: #f0f6ff; --cap-band-text: #8fa4bc; --cap-panel-bg: #061422; --cap-panel-heading: #f0f6ff; --cap-panel-text: #8fa4bc; --cap-panel-eyebrow: #f5b800; --cap-card-bg: #e8f0fa; --cap-card-border: rgba(30, 64, 120, 0.14); --cap-card-heading: #0a1628; --cap-card-muted: #3d5a80; --cap-mockbar-bg: #d9e6f5; --cap-mockbar-title: #1e3a5f; --cap-shadow-mockup: 0 28px 70px rgba(0, 0, 0, 0.5); --cap-footer-bg: #02060c; --cap-footer-border: rgba(245, 184, 0, 0.1); --cap-footer-text: #8fa4bc; --cap-footer-muted: #5c7088; --cap-footer-link-hover: #ffd54a; --cap-cta-bg: linear-gradient(165deg, #0c1c32 0%, #030a12 100%); --cap-cta-heading: #f0f6ff; --cap-cta-text: #8fa4bc; --cap-mock-dot: #f5b800; --cap-mock-dot-shadow: rgba(245, 184, 0, 0.4); --cap-mock-dot-secondary: #5c7088; --cap-warn: #ef4444; --cap-good: #22c55e; --cap-mid: #f59e0b; --cap-matrix-feature: #f5b800; --cap-matrix-cut: #ef4444; --cap-demo-strip-bg: linear-gradient(90deg, rgba(245, 184, 0, 0.12), rgba(245, 184, 0, 0.02)); --cap-demo-strip-border: rgba(245, 184, 0, 0.35); --chart-feature: #f5b800; --chart-promote: #64748b; --chart-reprice: #22c55e; --chart-cut: #ef4444; --chart-gridline: rgba(100, 116, 139, 0.45); } /* ----------------------------------------------------------------------------- Auto dealer — carbon + racing red ----------------------------------------------------------------------------- */ body.cap-theme.cap-theme--auto { --cap-page-bg: #050607; --cap-body-text: #b8bcc4; --cap-hero-glow1: rgba(239, 68, 68, 0.32); --cap-hero-dot: rgba(255, 255, 255, 0.04); --cap-hero-heading: #f8fafc; --cap-hero-sub: #94a3b8; --cap-nav-bg: rgba(5, 6, 7, 0.95); --cap-nav-border: rgba(239, 68, 68, 0.12); --cap-logo-a: #f8fafc; --cap-logo-s: #ef4444; --cap-nav-link: #cbd5e1; --cap-nav-link-hover: #fca5a5; --cap-nav-link-hover-bg: rgba(239, 68, 68, 0.1); --cap-nav-dropdown-bg: #0f1114; --cap-nav-dropdown-border: rgba(239, 68, 68, 0.15); --cap-dropdown-link: #e2e8f0; --cap-dropdown-link-hover-bg: rgba(239, 68, 68, 0.08); --cap-dropdown-link-hover: #fca5a5; --cap-accent: #ef4444; --cap-accent-hover: #f87171; --cap-btn-text-on-accent: #ffffff; --cap-nav-toggle-border: rgba(239, 68, 68, 0.25); --cap-nav-toggle-hover: #ef4444; --cap-nav-toggle-bar: #e2e8f0; --cap-drawer-overlay: rgba(0, 0, 0, 0.75); --cap-drawer-inner-bg: #0a0c0e; --cap-drawer-link: #e2e8f0; --cap-drawer-link-hover-bg: rgba(239, 68, 68, 0.08); --cap-band-bg: #0a0c10; --cap-band-border: rgba(239, 68, 68, 0.08); --cap-band-heading: #f8fafc; --cap-band-text: #94a3b8; --cap-panel-bg: #0a0c10; --cap-panel-heading: #f8fafc; --cap-panel-text: #94a3b8; --cap-panel-eyebrow: #ef4444; --cap-card-bg: #f8fafc; --cap-card-border: rgba(30, 41, 59, 0.12); --cap-card-heading: #0f172a; --cap-card-muted: #475569; --cap-mockbar-bg: #e2e8f0; --cap-mockbar-title: #334155; --cap-shadow-mockup: 0 28px 70px rgba(0, 0, 0, 0.55); --cap-footer-bg: #020203; --cap-footer-border: rgba(239, 68, 68, 0.08); --cap-footer-text: #94a3b8; --cap-footer-muted: #64748b; --cap-footer-link-hover: #fca5a5; --cap-cta-bg: linear-gradient(165deg, #1c0a0a 0%, #050607 100%); --cap-cta-heading: #f8fafc; --cap-cta-text: #94a3b8; --cap-mock-dot: #94a3b8; --cap-mock-dot-shadow: rgba(148, 163, 184, 0.35); --cap-mock-dot-secondary: #64748b; --cap-warn: #dc2626; --cap-good: #22c55e; --cap-mid: #f59e0b; --cap-matrix-feature: #ef4444; --cap-matrix-cut: #dc2626; --cap-demo-strip-bg: linear-gradient(90deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.02)); --cap-demo-strip-border: rgba(239, 68, 68, 0.35); --chart-feature: #ef4444; --chart-promote: #94a3b8; --chart-reprice: #22c55e; --chart-cut: #dc2626; --chart-gridline: rgba(148, 163, 184, 0.45); } /* ----------------------------------------------------------------------------- Manufacturing — oxide floor + signal orange ----------------------------------------------------------------------------- */ body.cap-theme.cap-theme--mfg { --cap-page-bg: #140a06; --cap-body-text: #d4c4b8; --cap-hero-glow1: rgba(249, 115, 22, 0.35); --cap-hero-dot: rgba(255, 220, 200, 0.04); --cap-hero-heading: #fff7ed; --cap-hero-sub: #b8a090; --cap-nav-bg: rgba(20, 10, 6, 0.95); --cap-nav-border: rgba(249, 115, 22, 0.15); --cap-logo-a: #fff7ed; --cap-logo-s: #fb923c; --cap-nav-link: #e7d5c8; --cap-nav-link-hover: #fdba74; --cap-nav-link-hover-bg: rgba(249, 115, 22, 0.1); --cap-nav-dropdown-bg: #1c100a; --cap-nav-dropdown-border: rgba(249, 115, 22, 0.18); --cap-dropdown-link: #fff7ed; --cap-dropdown-link-hover-bg: rgba(249, 115, 22, 0.08); --cap-dropdown-link-hover: #fdba74; --cap-accent: #ea580c; --cap-accent-hover: #fb923c; --cap-btn-text-on-accent: #1a0a04; --cap-nav-toggle-border: rgba(249, 115, 22, 0.28); --cap-nav-toggle-hover: #fb923c; --cap-nav-toggle-bar: #fff7ed; --cap-drawer-overlay: rgba(8, 3, 0, 0.72); --cap-drawer-inner-bg: #1a0c08; --cap-drawer-link: #fff7ed; --cap-drawer-link-hover-bg: rgba(249, 115, 22, 0.08); --cap-band-bg: #1a0e08; --cap-band-border: rgba(249, 115, 22, 0.08); --cap-band-heading: #fff7ed; --cap-band-text: #b8a090; --cap-panel-bg: #1a0e08; --cap-panel-heading: #fff7ed; --cap-panel-text: #b8a090; --cap-panel-eyebrow: #fb923c; --cap-card-bg: #fffbeb; --cap-card-border: rgba(120, 53, 15, 0.15); --cap-card-heading: #431407; --cap-card-muted: #7c2d12; --cap-mockbar-bg: #ffedd5; --cap-mockbar-title: #7c2d12; --cap-shadow-mockup: 0 28px 70px rgba(0, 0, 0, 0.55); --cap-footer-bg: #0a0503; --cap-footer-border: rgba(249, 115, 22, 0.1); --cap-footer-text: #b8a090; --cap-footer-muted: #8a7a6c; --cap-footer-link-hover: #fdba74; --cap-cta-bg: linear-gradient(165deg, #3a1508 0%, #140a06 100%); --cap-cta-heading: #fff7ed; --cap-cta-text: #b8a090; --cap-mock-dot: #ea580c; --cap-mock-dot-shadow: rgba(234, 88, 12, 0.4); --cap-mock-dot-secondary: #8a7a6c; --cap-warn: #b91c1c; --cap-good: #15803d; --cap-mid: #ca8a04; --cap-matrix-feature: #ea580c; --cap-matrix-cut: #b91c1c; --cap-demo-strip-bg: linear-gradient(90deg, rgba(249, 115, 22, 0.12), rgba(249, 115, 22, 0.02)); --cap-demo-strip-border: rgba(249, 115, 22, 0.35); --chart-feature: #ea580c; --chart-promote: #78716c; --chart-reprice: #16a34a; --chart-cut: #b91c1c; --chart-gridline: rgba(168, 162, 158, 0.45); } /* ----------------------------------------------------------------------------- PE — midnight boardroom + fund gold ----------------------------------------------------------------------------- */ body.cap-theme.cap-theme--pe { --cap-page-bg: #05060a; --cap-body-text: #b4b8c8; --cap-hero-glow1: rgba(201, 168, 100, 0.32); --cap-hero-dot: rgba(220, 220, 255, 0.03); --cap-hero-heading: #faf8f3; --cap-hero-sub: #9ca0b0; --cap-nav-bg: rgba(5, 6, 10, 0.95); --cap-nav-border: rgba(201, 168, 100, 0.12); --cap-logo-a: #faf8f3; --cap-logo-s: #c9a86c; --cap-nav-link: #c8cad8; --cap-nav-link-hover: #e8d5a3; --cap-nav-link-hover-bg: rgba(201, 168, 100, 0.1); --cap-nav-dropdown-bg: #0c0e18; --cap-nav-dropdown-border: rgba(201, 168, 100, 0.15); --cap-dropdown-link: #e8e9f0; --cap-dropdown-link-hover-bg: rgba(201, 168, 100, 0.08); --cap-dropdown-link-hover: #e8d5a3; --cap-accent: #c9a86c; --cap-accent-hover: #dfc78a; --cap-btn-text-on-accent: #0a0c14; --cap-nav-toggle-border: rgba(201, 168, 100, 0.25); --cap-nav-toggle-hover: #dfc78a; --cap-nav-toggle-bar: #e8e9f0; --cap-drawer-overlay: rgba(0, 0, 0, 0.75); --cap-drawer-inner-bg: #080a12; --cap-drawer-link: #e8e9f0; --cap-drawer-link-hover-bg: rgba(201, 168, 100, 0.08); --cap-band-bg: #080a12; --cap-band-border: rgba(201, 168, 100, 0.08); --cap-band-heading: #faf8f3; --cap-band-text: #9ca0b0; --cap-panel-bg: #080a12; --cap-panel-heading: #faf8f3; --cap-panel-text: #9ca0b0; --cap-panel-eyebrow: #c9a86c; --cap-card-bg: #faf8f3; --cap-card-border: rgba(40, 44, 64, 0.12); --cap-card-heading: #0f1118; --cap-card-muted: #4b5068; --cap-mockbar-bg: #ece8df; --cap-mockbar-title: #2d3142; --cap-shadow-mockup: 0 28px 70px rgba(0, 0, 0, 0.55); --cap-footer-bg: #020204; --cap-footer-border: rgba(201, 168, 100, 0.08); --cap-footer-text: #9ca0b0; --cap-footer-muted: #6b7088; --cap-footer-link-hover: #e8d5a3; --cap-cta-bg: linear-gradient(165deg, #121420 0%, #05060a 100%); --cap-cta-heading: #faf8f3; --cap-cta-text: #9ca0b0; --cap-mock-dot: #c9a86c; --cap-mock-dot-shadow: rgba(201, 168, 100, 0.4); --cap-mock-dot-secondary: #6b7088; --cap-warn: #c2410c; --cap-good: #15803d; --cap-mid: #ca8a04; --cap-matrix-feature: #c9a86c; --cap-matrix-cut: #b45309; --cap-demo-strip-bg: linear-gradient(90deg, rgba(201, 168, 100, 0.12), rgba(201, 168, 100, 0.02)); --cap-demo-strip-border: rgba(201, 168, 100, 0.35); --chart-feature: #c9a86c; --chart-promote: #64748b; --chart-reprice: #16a34a; --chart-cut: #b45309; --chart-gridline: rgba(120, 124, 140, 0.45); } /* ============================================================================= Shared application (all cap-theme pages) ============================================================================= */ body.cap-theme .copper, body.cap-theme .cta-headline .copper { color: var(--cap-accent) !important; } /* Hero */ body.cap-theme .cap-hero { background: var(--cap-page-bg); color: var(--cap-hero-heading); } body.cap-theme .cap-hero .hero-bg { background-image: radial-gradient(ellipse 65% 55% at 50% 30%, var(--cap-hero-glow1), transparent 70%), radial-gradient(circle at 1px 1px, var(--cap-hero-dot) 1px, transparent 1.2px); background-size: auto, 28px 28px; mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 50%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 50%, transparent 100%); } body.cap-theme .cap-hero-eyebrow { color: var(--cap-accent); border-color: var(--cap-eyebrow-border, rgba(255, 255, 255, 0.2)); background: var(--cap-eyebrow-bg, rgba(255, 255, 255, 0.06)); } body.cap-theme .cap-hero h1 { color: var(--cap-hero-heading); } body.cap-theme .cap-hero h1 .copper { color: var(--cap-accent) !important; } body.cap-theme .cap-hero-sub { color: var(--cap-hero-sub); } body.cap-theme .cap-hero-decision { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: var(--cap-hero-sub); } body.cap-theme .cap-hero-decision::before { background: var(--cap-accent); box-shadow: 0 0 0 4px var(--cap-accent-glow, rgba(255, 255, 255, 0.12)); } /* Mockup shell */ body.cap-theme .cap-mockup { background: var(--cap-card-bg); border-color: var(--cap-card-border); box-shadow: var(--cap-shadow-mockup); } body.cap-theme .cap-mockup-bar { background: var(--cap-mockbar-bg); border-bottom-color: var(--cap-card-border); } body.cap-theme .cap-mockup-bar .title { color: var(--cap-mockbar-title); } body.cap-theme .cap-mockup-body { color: var(--cap-card-heading); } /* Mid band (detail pages) */ body.cap-theme main > section.s:not(.s-white):not(.s-cta) .s-eyebrow { color: var(--cap-accent); } /* Index: light panel section */ body.cap-theme .s.s-white .s-eyebrow { color: var(--cap-accent); } /* Three-column cards */ body.cap-theme .cap-three-card { background: var(--cap-card-bg); border-color: var(--cap-card-border); border-top-color: var(--cap-accent); } body.cap-theme .cap-three-label { color: var(--cap-accent); } body.cap-theme .cap-three-card h3 { color: var(--cap-card-heading); } body.cap-theme .cap-three-card li { color: var(--cap-card-muted); } body.cap-theme .cap-three-card li::before { background: var(--cap-accent); } body.cap-theme .cap-delivery { background: var(--cap-delivery-bg, var(--cap-mockbar-bg)); border-color: var(--cap-card-border); border-left-color: var(--cap-accent); color: var(--cap-card-heading); } body.cap-theme .cap-delivery strong { color: var(--cap-accent); } body.cap-theme .cap-delivery-icon { background: var(--cap-delivery-icon-bg, rgba(255, 255, 255, 0.08)); color: var(--cap-accent); } body.cap-theme .cap-demo-strip { background: var(--cap-demo-strip-bg); border-color: var(--cap-demo-strip-border); } body.cap-theme .cap-demo-strip-left { color: var(--cap-card-heading); } body.cap-theme .cap-demo-strip-left strong { color: var(--cap-accent); } body.cap-theme .cap-demo-strip-btn { background: var(--cap-accent); color: var(--cap-btn-text-on-accent); } body.cap-theme .cap-demo-strip-btn:hover { background: var(--cap-accent-hover); } /* Tiles */ body.cap-theme .cap-tile { background: var(--cap-card-bg); border-color: var(--cap-card-border); } body.cap-theme .cap-tile:hover { border-color: var(--cap-accent); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25); } body.cap-theme .cap-tile-tag { color: var(--cap-accent); } body.cap-theme .cap-tile h3 { color: var(--cap-card-heading); } body.cap-theme .cap-tile p { color: var(--cap-card-muted); } body.cap-theme .cap-tile-meta { border-top-color: var(--cap-card-border); } body.cap-theme .cap-tile-outcome { color: var(--cap-card-heading); } body.cap-theme .cap-tile-outcome strong { color: var(--cap-accent); } body.cap-theme .cap-tile-arrow { color: var(--cap-accent); } body.cap-theme .cap-tile-custom .cap-tile-cta { color: var(--cap-accent); } body.cap-theme .cap-tile-custom .cap-tile-cta:hover { color: var(--cap-accent-hover); } body.cap-theme .cap-tile-live { background: var(--cap-accent); color: var(--cap-btn-text-on-accent); } /* CTA */ body.cap-theme .s-cta { background: var(--cap-cta-bg); } body.cap-theme .s-cta .cta-headline { color: var(--cap-cta-heading); } body.cap-theme .s-cta .cta-p { color: var(--cap-cta-text); } body.cap-theme .s-cta .btn-primary { background: var(--cap-accent); color: var(--cap-btn-text-on-accent); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); } body.cap-theme .s-cta .btn-primary:hover { background: var(--cap-accent-hover); } body.cap-theme .mobile-nav-cta.btn-primary { background: var(--cap-accent); color: var(--cap-btn-text-on-accent); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } body.cap-theme .mobile-nav-cta.btn-primary:hover { background: var(--cap-accent-hover); } /* Mockups inside capability cards */ body.cap-theme .mock-matrix-yaxis, body.cap-theme .mock-matrix-xaxis { color: var(--cap-card-muted); } body.cap-theme .mock-matrix-plot { background: linear-gradient(rgba(43, 43, 43, 0.08), rgba(43, 43, 43, 0.08)) center / 1px 100% no-repeat, linear-gradient(rgba(43, 43, 43, 0.08), rgba(43, 43, 43, 0.08)) center / 100% 1px no-repeat, var(--cap-mockbar-bg); border-color: var(--cap-card-border); } body.cap-theme .mock-matrix-quad.star { color: var(--cap-matrix-feature); } body.cap-theme .mock-matrix-quad.dog { color: var(--cap-matrix-cut); } body.cap-theme .mock-matrix-dot { background: var(--cap-mock-dot); box-shadow: 0 0 0 3px var(--cap-mock-dot-shadow); } body.cap-theme .mock-matrix-dot.lg { box-shadow: 0 0 0 5px var(--cap-mock-dot-shadow); } body.cap-theme .mock-matrix-dot.sm { background: var(--cap-mock-dot-secondary); box-shadow: 0 0 0 3px rgba(100, 100, 100, 0.2); } body.cap-theme .mock-matrix-dot.warn { background: var(--cap-warn); box-shadow: 0 0 0 3px rgba(200, 60, 60, 0.22); } body.cap-theme .mock-list-head { color: var(--cap-card-muted); border-bottom-color: var(--cap-card-border); } body.cap-theme .mock-list-row { background: var(--cap-mockbar-bg); color: var(--cap-card-heading); } body.cap-theme .mock-list-row.warn { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.28); } body.cap-theme .mock-bar { background: rgba(0, 0, 0, 0.06); } body.cap-theme .mock-bar span { background: var(--cap-mock-dot); } body.cap-theme .mock-bar.low span { background: var(--cap-warn); } body.cap-theme .mock-bar.mid span { background: var(--cap-mid); } body.cap-theme .mock-list-val.warn { color: var(--cap-warn); } body.cap-theme .mock-tag { background: rgba(0, 0, 0, 0.05); color: var(--cap-accent); } body.cap-theme .mock-tag.warn { background: rgba(239, 68, 68, 0.1); color: var(--cap-warn); } body.cap-theme .mock-tag.good { background: rgba(34, 197, 94, 0.1); color: var(--cap-good); } body.cap-theme .mock-tag.neutral { background: rgba(0, 0, 0, 0.05); color: var(--cap-mock-dot-secondary); } body.cap-theme .mock-table th { color: var(--cap-card-muted); border-bottom-color: var(--cap-card-border); } body.cap-theme .mock-table td { color: var(--cap-card-heading); border-bottom-color: rgba(0, 0, 0, 0.06); } body.cap-theme .mock-stack-label { color: var(--cap-card-heading); } body.cap-theme .mock-stack-bars { background: rgba(0, 0, 0, 0.06); } body.cap-theme .mock-stack-bars .est { background: var(--cap-mock-dot-secondary); } body.cap-theme .mock-stack-bars .act { background: var(--cap-mock-dot); } body.cap-theme .mock-stack-bars .act.over { background: var(--cap-warn); } body.cap-theme .mock-stack-variance.over { color: var(--cap-warn); } body.cap-theme .mock-stack-variance.good { color: var(--cap-good); } body.cap-theme .mock-portfolio-card { background: var(--cap-mockbar-bg); border-color: var(--cap-card-border); } body.cap-theme .mock-portfolio-name { color: var(--cap-card-heading); } body.cap-theme .mock-portfolio-kpi { color: var(--cap-card-heading); } body.cap-theme .mock-portfolio-kpi-label { color: var(--cap-card-muted); } /* ----------------------------------------------------------------------------- Restaurant demo page (Tier 2) ----------------------------------------------------------------------------- */ body.cap-theme.demo-body { background: var(--cap-page-bg); } body.cap-theme .demo-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 75% 120% at 50% -20%, var(--cap-hero-glow1), transparent 55%), var(--cap-page-bg); color: var(--cap-hero-heading); } body.cap-theme .demo-hero .hero-bg { display: none; } body.cap-theme .demo-hero h1 { color: var(--cap-hero-heading); } body.cap-theme .demo-hero p { color: var(--cap-hero-sub); } body.cap-theme .demo-hero .back-link { color: var(--cap-hero-sub); } body.cap-theme .demo-hero .back-link:hover { color: var(--cap-accent); } body.cap-theme .demo-card { background: var(--cap-card-bg); border-color: var(--cap-card-border); box-shadow: var(--cap-shadow-mockup); } body.cap-theme .demo-card-head { background: var(--cap-mockbar-bg); border-bottom-color: var(--cap-card-border); } body.cap-theme .demo-card-title { color: var(--cap-card-heading); } body.cap-theme .demo-filter-btn { color: var(--cap-card-muted); background: var(--cap-card-bg); border-color: var(--cap-card-border); } body.cap-theme .demo-filter-btn:hover { border-color: var(--cap-accent); color: var(--cap-accent); } body.cap-theme .demo-filter-btn.active { background: var(--cap-accent); color: var(--cap-btn-text-on-accent); border-color: var(--cap-accent); } body.cap-theme .demo-chart { border-right-color: var(--cap-card-border); } body.cap-theme .demo-side { background: var(--cap-mockbar-bg); } body.cap-theme .demo-kpi { background: var(--cap-card-bg); border-color: var(--cap-card-border); } body.cap-theme .demo-kpi-label { color: var(--cap-card-muted); } body.cap-theme .demo-kpi-val { color: var(--cap-card-heading); } body.cap-theme .demo-kpi-val .copper { color: var(--cap-accent) !important; } body.cap-theme .demo-insight { background: var(--cap-card-bg); border-color: var(--cap-card-border); border-left-color: var(--cap-accent); } body.cap-theme .demo-insight-label { color: var(--cap-accent); } body.cap-theme .demo-insight h4 { color: var(--cap-card-heading); } body.cap-theme .demo-insight p { color: var(--cap-card-muted); } body.cap-theme .demo-table-wrap { background: var(--cap-card-bg); border-color: var(--cap-card-border); } body.cap-theme .demo-table th { background: var(--cap-mockbar-bg); color: var(--cap-card-muted); border-bottom-color: var(--cap-card-border); } body.cap-theme .demo-table td { color: var(--cap-card-heading); border-bottom-color: rgba(0, 0, 0, 0.06); } body.cap-theme .demo-table .q-star { color: var(--chart-feature); } body.cap-theme .demo-table .q-puzzle { color: var(--chart-promote); } body.cap-theme .demo-table .q-horse { color: var(--chart-reprice); } body.cap-theme .demo-table .q-dog { color: var(--chart-cut); } body.cap-theme .demo-footnote { background: var(--cap-mockbar-bg); border-top-color: var(--cap-card-border); color: var(--cap-card-muted); } @media (max-width: 860px) { body.cap-theme .demo-chart { border-bottom-color: var(--cap-card-border); } }