/* ============================================================================ WestPorch theme · v1.0 Extracted from SiteIQ's design system (src/lib/constants.js + ThemeContext). The look: dark slate canvas, antique-gold primary accent, deep-teal secondary, ivory text ramp, Inter + JetBrains Mono, soft cards. USAGE Dark is the default. For light mode, put EITHER on the element: or Consume tokens anywhere as CSS variables: background: var(--surface); color: var(--ivory); border: 1px solid var(--border); Works in any framework (React, Vue, Svelte, vanilla) — they're just CSS vars. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap'); /* ── Dark (default) ──────────────────────────────────────────────────────── */ :root { /* Surfaces — bg is the page canvas; surface→surf3 step up off it */ --bg: #111214; /* slate page canvas */ --surface: #17191d; /* primary card / panel */ --surf2: #1d2025; /* nested surface */ --surf3: #25282e; /* highest surface (popovers) */ /* Borders */ --border: #2a2e35; /* hairline divider */ --border2: #3a3f47; /* clear card edge / hover */ /* Text ramp */ --ivory: #f0f2f5; /* primary text */ --ivory2: #c2c5cc; /* muted / secondary */ --ivory3: #868a93; /* faint / captions */ /* WestPorch antique gold — PRIMARY accent (theme-aware) */ --gold: #C09A5A; /* primary accent */ --gold2: #D4B274; /* lighter — hovers / glints */ --gold-dim: #8C6E3B; /* deep — borders / subtle */ /* Deep-teal — SECONDARY accent (theme-aware) */ --teal: #4E9CA0; --sky: #6FB4B8; /* lightest teal — soft accent */ /* Status (theme-stable across light/dark) */ --green: #46c993; --green-dim: #0D3D26; --amber: #E8941A; --amber-dim: #3D2800; --red: #fb2c36; --red-dim: #3D0F0F; /* Status / accent tints — pills, tags, banners */ --gold-bg: rgba(192,154,90,0.14); /* primary-accent pill tint */ --green-bg: rgba(70,201,147,0.12); --amber-bg: rgba(217,119,6,0.13); --red-bg: rgba(251,44,54,0.10); /* Radii */ --radius-card: 14px; /* cards, modals */ --radius-control: 10px; /* buttons, inputs */ --radius-pill: 99px; /* pills, chips */ /* Shadows */ --shadow-card: 0 1px 2px rgba(17,18,20,.04), 0 8px 24px rgba(17,18,20,.06); --shadow-lift: 0 4px 14px rgba(192,154,90,0.30); /* gold lift — primary CTAs / active nav */ /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; color-scheme: dark; } /* ── Light — override the theme-aware tokens only ────────────────────────── */ .theme-light, :root[data-theme="light"] { --bg: #f4f5f7; /* cloud */ --surface: #FFFFFF; --surf2: #EAECF0; --surf3: #DDE0E6; --border: #D4D7DC; --border2: #B6BCC5; --ivory: #0F0F0E; --ivory2: #2E2C28; --ivory3: #5A5852; /* gold shifts deeper (bronze) so it stays legible on the near-white bg */ --gold: #8C6E3B; --gold2: #C09A5A; --gold-dim: #6E5530; --teal: #357A7E; --sky: #4E9CA0; color-scheme: light; } /* ── Base element styling (optional but recommended) ─────────────────────── */ body { margin: 0; background: var(--bg); color: var(--ivory); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: var(--surface); } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; } ::selection { background: var(--gold-bg); } /* ── Signature scanline texture — opt in: add class="wp-scanlines" to body ── */ .wp-scanlines { position: relative; } .wp-scanlines::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px); } .theme-light .wp-scanlines::before, :root[data-theme="light"] .wp-scanlines::before { opacity: 0.35; } /* ── Motion — the SiteIQ animation set + ready-to-use utility classes ────── */ @keyframes wp-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes wp-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } } @keyframes wp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes wp-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .wp-fade-up { animation: wp-fade-up 0.45s ease both; } .wp-fade-up-1 { animation-delay: 0.05s; } .wp-fade-up-2 { animation-delay: 0.12s; } .wp-fade-up-3 { animation-delay: 0.20s; } .wp-pulse { animation: wp-pulse 2s ease-in-out infinite; } .wp-spin { animation: wp-spin 0.8s linear infinite; } /* ── A few composed helpers so the look is one class away ────────────────── */ .wp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .wp-btn { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border: none; border-radius: var(--radius-control); padding: 9px 20px; background: var(--gold); color: #080A0C; box-shadow: var(--shadow-lift); transition: filter .15s ease; } .wp-btn:hover { filter: brightness(1.06); } .wp-btn-ghost { background: transparent; color: var(--ivory2); border: 1px solid var(--border2); box-shadow: none; } .wp-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--gold-bg); color: var(--gold); } .wp-mono { font-family: var(--font-mono); }