/** * BOOM Interactive — Design Tokens * Version 2.0 · Built-World Rebrand * * HOW TO USE: * 1. Drop this file into your child theme folder: * /wp-content/themes/boom-child/tokens.css * * 2. Enqueue it in functions.php BEFORE your style.css: * wp_enqueue_style('boom-tokens', get_stylesheet_directory_uri() . '/tokens.css', [], '2.0'); * * 3. In Claude Code sessions: "All colours and spacing must use * the CSS variables defined in tokens.css — never hardcode values." * * RULE: Never hardcode a hex value, px size, or font name anywhere * in the theme. If it's not a token, add it here first. */ /* ============================================================ GOOGLE FONTS — load all three families ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ ROOT TOKENS — light mode (default) ============================================================ */ :root { /* ---------------------------------------------------------- COLOUR — Primary palette ---------------------------------------------------------- */ /* Gold — brand anchor, CTAs, highlights, logo on dark */ --color-gold: #9E763C; --color-gold-light: #C49A58; --color-gold-dark: #7A5A2A; --color-gold-subtle: #EDE3D4; /* Charcoal — text, headings, footer background */ --color-charcoal: #211E1A; --color-charcoal-mid: #333030; --color-charcoal-light: #4A4540; /* Warm White — page background */ --color-warm-white: #E2DEDA; /* parchment */ /* Cream — card backgrounds, section alternates */ --color-cream: #D6CFC6; /* linen */ --color-cream-dark: #C8C1B8; /* linen dark */ /* Slate — secondary text, borders, placeholders */ --color-slate: #7A7570; --color-slate-light: #A8A39E; --color-slate-border: #C8C1B8; /* ---------------------------------------------------------- COLOUR — Semantic palette ---------------------------------------------------------- */ /* Success */ --color-success: #4A7C59; --color-success-bg: #EAF3EE; --color-success-border: #A8D4B8; /* Info / links */ --color-info: #4A6FA5; --color-info-bg: #EBF0F8; --color-info-border: #A8C0DC; /* Caution */ --color-caution: #9A6B2E; --color-caution-bg: #F5EBDA; --color-caution-border: #D4A870; /* Danger */ --color-danger: #8B3A3A; --color-danger-bg: #F5EAEA; --color-danger-border: #D49090; /* ---------------------------------------------------------- COLOUR — Dark mode surfaces (app UI / CoreSpec 3D) ---------------------------------------------------------- */ --color-dark-bg: #161310; --color-dark-surface: #211E1A; --color-dark-card: #2C2825; --color-dark-border: #3D3935; --color-dark-text: #E2DEDA; --color-dark-muted: #9A9088; /* ---------------------------------------------------------- COLOUR — Semantic aliases (use these in components so intent is clear) ---------------------------------------------------------- */ --color-bg-page: var(--color-warm-white); /* parchment #E2DEDA */ --color-bg-surface: var(--color-cream); --color-bg-inset: var(--color-cream-dark); --color-bg-dark: var(--color-charcoal); --color-bg-footer: var(--color-charcoal); --color-text-primary: var(--color-charcoal); --color-text-secondary: var(--color-charcoal-light); --color-text-muted: var(--color-slate); --color-text-placeholder: var(--color-slate-light); --color-text-on-dark: #EDE8E0; --color-text-on-gold: var(--color-charcoal); --color-border-default: var(--color-slate-border); --color-border-subtle: var(--color-cream-dark); --color-border-strong: var(--color-slate); --color-border-gold: var(--color-gold); --color-cta-bg: var(--color-gold); --color-cta-bg-hover: var(--color-gold-dark); --color-cta-text: var(--color-charcoal); --color-link: var(--color-gold-dark); --color-link-hover: var(--color-charcoal); --color-focus-ring: var(--color-gold); /* ---------------------------------------------------------- TYPOGRAPHY — Font families ---------------------------------------------------------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace; /* ---------------------------------------------------------- TYPOGRAPHY — Type scale (fluid where appropriate) ---------------------------------------------------------- */ /* Display — hero headlines, section openers (Fraunces) */ --text-display-xl: clamp(3rem, 6vw, 5rem); /* 48 → 80px */ --text-display-lg: clamp(2.25rem, 4vw, 3.5rem); /* 36 → 56px */ --text-display-md: clamp(1.75rem, 3vw, 2.5rem); /* 28 → 40px */ --text-display-sm: clamp(1.375rem, 2vw, 1.875rem); /* 22 → 30px */ /* Heading — section headings, card titles (Plus Jakarta Sans) */ --text-heading-lg: clamp(1.25rem, 2vw, 1.625rem); /* 20 → 26px */ --text-heading-md: 1.25rem; /* 20px */ --text-heading-sm: 1.0625rem; /* 17px */ /* Body */ --text-body-lg: 1.125rem; /* 18px — lead paragraphs */ --text-body-md: 1rem; /* 16px — standard body */ --text-body-sm: 0.9375rem; /* 15px — secondary copy */ /* UI */ --text-label: 0.875rem; /* 14px — buttons, labels */ --text-caption: 0.8125rem; /* 13px — captions, footnotes */ --text-overline: 0.75rem; /* 12px — eyebrows, tags */ /* ---------------------------------------------------------- TYPOGRAPHY — Weight scale ---------------------------------------------------------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* ---------------------------------------------------------- TYPOGRAPHY — Line height ---------------------------------------------------------- */ --leading-display: 1.1; --leading-heading: 1.25; --leading-tight: 1.4; --leading-body: 1.7; --leading-loose: 1.9; /* ---------------------------------------------------------- TYPOGRAPHY — Letter spacing ---------------------------------------------------------- */ --tracking-display: -0.02em; --tracking-heading: -0.01em; --tracking-body: 0em; --tracking-label: 0.01em; --tracking-overline: 0.08em; /* always paired with uppercase */ /* ---------------------------------------------------------- SPACING — Base scale (4px grid) ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 192px; /* ---------------------------------------------------------- SPACING — Semantic aliases ---------------------------------------------------------- */ /* Section vertical padding */ --section-padding-sm: var(--space-8); /* 64px — tight sections */ --section-padding-md: var(--space-9); /* 96px — standard */ --section-padding-lg: var(--space-10); /* 128px — hero, landmark */ /* Component internal padding */ --padding-card-sm: var(--space-4) var(--space-5); /* 16px 24px */ --padding-card-md: var(--space-5) var(--space-6); /* 24px 32px */ --padding-card-lg: var(--space-6) var(--space-7); /* 32px 48px */ /* Button padding */ --padding-btn-sm: 10px 20px; --padding-btn-md: 13px 26px; --padding-btn-lg: 16px 32px; /* Input padding */ --padding-input: 12px 16px; /* ---------------------------------------------------------- LAYOUT — Container widths ---------------------------------------------------------- */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; /* default max content width */ --container-2xl: 1440px; /* wide/full layouts */ /* Container horizontal padding (gutter) */ --container-gutter-sm: var(--space-4); /* 16px — mobile */ --container-gutter-md: var(--space-6); /* 32px — tablet */ --container-gutter-lg: var(--space-7); /* 48px — desktop */ /* ---------------------------------------------------------- LAYOUT — Grid ---------------------------------------------------------- */ --grid-gap-sm: var(--space-4); /* 16px */ --grid-gap-md: var(--space-5); /* 24px */ --grid-gap-lg: var(--space-6); /* 32px */ --grid-gap-xl: var(--space-7); /* 48px */ /* Column ratios (for asymmetric layouts) */ --grid-ratio-5-7: 5fr 7fr; --grid-ratio-4-8: 4fr 8fr; --grid-ratio-6-6: 1fr 1fr; --grid-ratio-7-5: 7fr 5fr; /* ---------------------------------------------------------- BORDER — Radius ---------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-2xl: 32px; --radius-pill: 9999px; /* ---------------------------------------------------------- BORDER — Width ---------------------------------------------------------- */ --border-thin: 1px; --border-default: 1px; --border-medium: 1.5px; --border-thick: 2px; --border-accent: 3px; /* gold left-border accent on cards */ /* ---------------------------------------------------------- SHADOW — Elevation scale ---------------------------------------------------------- */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(42, 36, 32, 0.04); --shadow-sm: 0 1px 3px rgba(42, 36, 32, 0.06), 0 1px 2px rgba(42, 36, 32, 0.04); --shadow-md: 0 4px 12px rgba(42, 36, 32, 0.08), 0 2px 4px rgba(42, 36, 32, 0.04); --shadow-lg: 0 8px 24px rgba(42, 36, 32, 0.10), 0 3px 8px rgba(42, 36, 32, 0.06); --shadow-xl: 0 16px 48px rgba(42, 36, 32, 0.12), 0 6px 16px rgba(42, 36, 32, 0.06); /* Focus ring — gold, not blue */ --shadow-focus: 0 0 0 3px rgba(158, 118, 60, 0.35); /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --transition-fast: 0.12s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; --transition-spring: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------------------------- Z-INDEX — Layering scale ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ---------------------------------------------------------- BREAKPOINTS — Reference values (CSS can't use these in media queries — use the raw values below) mobile: < 640px (--container-sm) tablet: 640–1024px desktop: > 1024px (--container-lg) wide: > 1280px (--container-xl) ---------------------------------------------------------- */ } /* end :root */ /* ============================================================ RESPONSIVE OVERRIDES Token values that change at breakpoints ============================================================ */ /* Tablet and up */ @media (min-width: 640px) { :root { --container-gutter-sm: var(--space-6); /* 32px */ --section-padding-sm: var(--space-8); /* 64px */ } } /* Desktop and up */ @media (min-width: 1024px) { :root { --container-gutter-sm: var(--space-7); /* 48px */ } } /* ============================================================ DARK MODE — for app UI and CoreSpec 3D product sections Apply .dark-mode to a
or
wrapper ============================================================ */ .dark-mode, [data-theme="dark"] { --color-bg-page: var(--color-dark-bg); --color-bg-surface: var(--color-dark-surface); --color-bg-inset: var(--color-dark-card); --color-text-primary: var(--color-dark-text); --color-text-secondary: #C8C0B8; --color-text-muted: var(--color-dark-muted); --color-border-default: var(--color-dark-border); --color-border-subtle: #3A342E; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); } /* ============================================================ BASE RESETS — minimal, token-driven ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-body-md); font-weight: var(--weight-regular); line-height: var(--leading-body); color: var(--color-text-primary); background-color: var(--color-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Never use pure black or white — charcoal and warm-white only */ img, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-base); } a:hover { color: var(--color-link-hover); } :focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; } /* ============================================================ TYPOGRAPHY — Base element styles ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-light); /* Fraunces shines at 300 */ line-height: var(--leading-heading); letter-spacing: var(--tracking-display); color: var(--color-text-primary); } h1 { font-size: var(--text-display-xl); line-height: var(--leading-display); } h2 { font-size: var(--text-display-lg); } h3 { font-size: var(--text-display-md); } h4 { font-size: var(--text-display-sm); font-family: var(--font-body); font-weight: var(--weight-medium); } h5 { font-size: var(--text-heading-md); font-family: var(--font-body); font-weight: var(--weight-medium); } h6 { font-size: var(--text-heading-sm); font-family: var(--font-body); font-weight: var(--weight-medium); } p { font-size: var(--text-body-md); line-height: var(--leading-body); color: var(--color-text-primary); } p.lead { font-size: var(--text-body-lg); color: var(--color-text-secondary); line-height: var(--leading-tight); } small, .text-caption { font-size: var(--text-caption); color: var(--color-text-muted); } /* Eyebrow / overline label — gold, uppercase, tracked */ .eyebrow { font-family: var(--font-body); font-size: var(--text-overline); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-gold-dark); display: block; margin-bottom: var(--space-3); } code, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; } /* ============================================================ LAYOUT — Container utility ============================================================ */ .container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--container-gutter-sm); } .container--sm { max-width: var(--container-sm); } .container--md { max-width: var(--container-md); } .container--lg { max-width: var(--container-lg); } .container--2xl { max-width: var(--container-2xl); } /* Full-bleed section with contained inner */ .section { padding-top: var(--section-padding-md); padding-bottom: var(--section-padding-md); } .section--sm { padding-top: var(--section-padding-sm); padding-bottom: var(--section-padding-sm); } .section--lg { padding-top: var(--section-padding-lg); padding-bottom: var(--section-padding-lg); } /* Background alternates */ .section--cream { background-color: var(--color-cream); } .section--subtle { background-color: var(--color-gold-subtle); } .section--dark { background-color: var(--color-bg-dark); } /* ============================================================ COMPONENTS — Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); padding: var(--padding-btn-md); border-radius: var(--radius-md); border: var(--border-medium) solid transparent; cursor: pointer; text-decoration: none; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); white-space: nowrap; } .btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; } /* Primary — gold fill */ .btn--primary { background: var(--color-cta-bg); color: var(--color-cta-text); border-color: var(--color-cta-bg); } .btn--primary:hover { background: var(--color-cta-bg-hover); border-color: var(--color-cta-bg-hover); color: var(--color-charcoal); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn--primary:active { transform: translateY(0); box-shadow: none; } /* Secondary — outline charcoal */ .btn--secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-charcoal); } .btn--secondary:hover { background: var(--color-cream); color: var(--color-charcoal); } /* Ghost — text only, gold */ .btn--ghost { background: transparent; color: var(--color-gold-dark); border-color: transparent; padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 3px; } .btn--ghost:hover { color: var(--color-charcoal); } /* On dark background — white outline */ .btn--outline-light { background: transparent; color: var(--color-dark-text); border-color: rgba(237, 232, 224, 0.4); } .btn--outline-light:hover { background: rgba(237, 232, 224, 0.1); border-color: rgba(237, 232, 224, 0.7); } /* Size variants */ .btn--sm { padding: var(--padding-btn-sm); font-size: var(--text-caption); } .btn--lg { padding: var(--padding-btn-lg); font-size: var(--text-body-sm); } /* ============================================================ COMPONENTS — Cards ============================================================ */ .card { background: var(--color-bg-page); border: var(--border-default) solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--padding-card-md); } .card--elevated { background: var(--color-bg-page); border: var(--border-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); padding: var(--padding-card-lg); box-shadow: var(--shadow-md); } /* Gold left-border accent */ .card--accent { border-left: var(--border-accent) solid var(--color-gold); padding-left: calc(var(--space-5) - var(--border-accent)); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .card--cream { background: var(--color-cream); border-color: var(--color-cream-dark); } .card--dark { background: var(--color-dark-surface); border-color: var(--color-dark-border); color: var(--color-dark-text); } /* ============================================================ COMPONENTS — Navigation ============================================================ */ .site-nav { background: var(--color-bg-page); border-bottom: var(--border-default) solid var(--color-border-subtle); padding: var(--space-4) 0; position: sticky; top: 0; z-index: var(--z-sticky); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .site-nav__logo { flex-shrink: 0; text-decoration: none; } /* Logo clear space — handled via padding on the */ .site-nav__logo img { height: 36px; width: auto; } .site-nav__links { display: flex; align-items: center; gap: var(--space-5); list-style: none; } .nav-link { font-family: var(--font-body); font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--color-text-muted); text-decoration: none; letter-spacing: var(--tracking-label); transition: color var(--transition-base); } .nav-link:hover, .nav-link[aria-current="page"] { color: var(--color-text-primary); } /* ============================================================ COMPONENTS — Form elements ============================================================ */ label { font-family: var(--font-body); font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--color-text-primary); display: block; margin-bottom: var(--space-2); } input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select { font-family: var(--font-body); font-size: var(--text-body-sm); color: var(--color-text-primary); background: var(--color-bg-page); border: var(--border-default) solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--padding-input); width: 100%; transition: border-color var(--transition-base), box-shadow var(--transition-base); } input::placeholder, textarea::placeholder { color: var(--color-text-placeholder); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-gold); box-shadow: var(--shadow-focus); } /* ============================================================ COMPONENTS — Section eyebrow + heading pattern ============================================================ */ .section-header { margin-bottom: var(--space-7); } .section-header--center { text-align: center; max-width: var(--container-md); margin: 0 auto var(--space-7); } .section-header .eyebrow { margin-bottom: var(--space-3); } .section-header h2 { margin-bottom: var(--space-4); } .section-header .lead { max-width: 52ch; } .section-header--center .lead { margin: 0 auto; } /* ============================================================ UTILITIES — Spacing helpers ============================================================ */ .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mt-8 { margin-top: var(--space-8); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-7 { margin-bottom: var(--space-7); } .mb-8 { margin-bottom: var(--space-8); } /* ============================================================ UTILITIES — Text ============================================================ */ .text-gold { color: var(--color-gold); } .text-muted { color: var(--color-text-muted); } .text-on-dark { color: var(--color-dark-text); } .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-mono { font-family: var(--font-mono); } /* Sentence case is the default — these are escape hatches only */ .uppercase { text-transform: uppercase; letter-spacing: var(--tracking-overline); } .no-transform { text-transform: none; } /* ============================================================ UTILITIES — Visibility ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ ELEMENTOR OVERRIDES Force Elementor to respect brand tokens ============================================================ */ /* Override Elementor default link blue */ .elementor a { color: var(--color-link); } .elementor a:hover { color: var(--color-link-hover); } /* Override Elementor heading defaults */ .elementor h1, .elementor h2, .elementor h3 { font-family: var(--font-display); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); } .elementor h4, .elementor h5, .elementor h6 { font-family: var(--font-body); font-weight: var(--weight-medium); } /* Override Elementor button defaults */ .elementor .elementor-button { font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); border-radius: var(--radius-md); transition: background var(--transition-base), transform var(--transition-base); } .elementor .elementor-button--primary, .elementor .elementor-button-link.elementor-size-md { background: var(--color-cta-bg); color: var(--color-cta-text); border-color: var(--color-cta-bg); } /* Force warm background — never pure white */ body, .elementor-section, .e-con { background-color: var(--color-bg-page); } /* ============================================================ END OF TOKENS boom-child/tokens.css · BOOM Interactive v2.6 ============================================================ */