.elementor-kit-6{--e-global-color-primary:#FFC713;--e-global-color-secondary:#FAFAF8;--e-global-color-text:#333333;--e-global-color-accent:#BC2119;--e-global-color-background:#FDF6E8;--e-global-color-backgroundAccent:#FEF9EF;--e-global-color-transparent:#00000000;--e-global-color-019b36f:#D9A302;--e-global-color-2723023:#2D7C83;--e-global-color-d3890fe:#D9D9D9;--e-global-color-2e5773c:#333333;--e-global-typography-primary-font-family:"Cormorant SC";--e-global-typography-primary-font-size:24px;--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Cormorant";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-font-style:italic;--e-global-typography-text-font-family:"Lora";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Raleway";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.5em;--e-global-typography-heading_xl-font-family:"Cormorant SC";--e-global-typography-heading_xl-font-weight:500;--e-global-typography-heading_xl-line-height:1.2em;--e-global-typography-heading_l-font-family:"Cormorant SC";--e-global-typography-heading_l-font-weight:500;--e-global-typography-heading_l-line-height:1.2em;--e-global-typography-heading_m-font-family:"Cormorant SC";--e-global-typography-heading_m-font-weight:400;--e-global-typography-heading_m-line-height:1.2em;--e-global-typography-heading_s-font-family:"Raleway";--e-global-typography-heading_s-font-weight:700;--e-global-typography-heading_s-text-transform:uppercase;--e-global-typography-body_s-font-family:"Lora";--e-global-typography-body_s-font-weight:400;--e-global-typography-body_s-font-style:italic;--e-global-typography-body_s-line-height:1.5em;background-color:var( --e-global-color-background );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-primary-font-size:22px;--e-global-typography-secondary-font-size:18px;--e-global-typography-heading_xl-font-size:48px;--e-global-typography-heading_l-font-size:40px;--e-global-typography-heading_m-font-size:32px;--e-global-typography-heading_s-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-font-size:18px;--e-global-typography-secondary-font-size:16px;--e-global-typography-heading_xl-font-size:40px;--e-global-typography-heading_l-font-size:32px;--e-global-typography-heading_m-font-size:32px;--e-global-typography-heading_s-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//*
╔══════════════════════════════════════════════════════════════╗
║ REIGN LEADERSHIP & LEGACY COACHING™ ║
║ CSS Style Guide for Elementor Pro / WordPress ║
║ Version 1.4 — March 2026 ║
║ a ║
║ CHANGELOG ║
║ v1.0 Initial release — 15 sections ║
║ v1.1 Section 16 REIGN Days added. Parchment token added. ║
║ Ornament frame class added. Silver-Gray restored. ║
║ Global Colors list expanded. Developer refs removed. ║
║ v1.2 Antique White token + section class added. Gold ║
║ overlay opacity guidance added (15/35/60%). Crown ║
║ Anchor system added (.reign-section--crown-anchor). ║
║ Anchor system definition added to dark family block. ║
║ v1.3 Option C confirmed: Nav → Ivory #FAFAF8 (Crimson ║
║ logo). Footer → Charcoal #333333 (Gold logo). ║
║ Nav links: Gray Warm. Active: Gold Deep. Hover: ║
║ Charcoal. Footer script class added. Logo placement ║
║ notes added to both nav and footer sections. ║
║ v1.4 WordPress Menu widget horizontal layout fix added. ║
║ .reign-nav-wp-menu forces inline-flex horizontal ║
║ display for WordPress Menu widget in header. ║
║ Replaces vertical bullet-list rendering. ║
║ ║
║ HOW TO USE THIS FILE ║
║ Paste the full contents into: ║
║ Elementor > Site Settings > Custom CSS ║
║ — OR — ║
║ WordPress > Appearance > Additional CSS ║
║ ║
║ The Google Fonts import must be added separately via: ║
║ Elementor > Site Settings > Custom Fonts ║
║ — OR — add the @import line to your child theme style.css ║
╚══════════════════════════════════════════════════════════════╝
*/
/* ════════════════════════════════════════════════════════════
0. GOOGLE FONTS IMPORT
Add this to your child theme style.css — NOT in Elementor
Custom CSS (Elementor strips @import rules)
════════════════════════════════════════════════════════════
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant:ital,wght@0,400;0,500;1,300;1,400;1,500&family=Cormorant+SC:wght@300;400;500;600&family=Allura&family=Lora:ital,wght@0,400;0,600;1,400;1,600&family=Raleway:wght@300;400;500;600;700;800&display=swap');
*/
/* ════════════════════════════════════════════════════════════
1. DESIGN TOKENS — CSS CUSTOM PROPERTIES
Source: Reign Website Neutral Palette (Canva brand kit)
These variables are available throughout all Elementor
sections. Reference them as var(--token-name) in any
Elementor Custom CSS field.
════════════════════════════════════════════════════════════ */
:root {
/* ── GOLD FAMILY ──────────────────────────────────────────
Rule: #ffc713 on dark backgrounds only (hero, footer, CTA)
Rule: #d9a302 everywhere else — print-safe, light-bg safe
GOLD OVERLAY ON IMAGE SECTIONS (Elementor: Section > Style
> Background Overlay, color #FFC713):
15% opacity — barely-there warmth. Image reads fully.
Sacred glow behind photography.
35% opacity — SWEET SPOT. Image visible through gold warmth.
Luminous, sacred, sanctuary quality.
Headline: #FFFFFF · Label: #333333
60% opacity — Bold crown moment. Image fades, gold leads.
Reserved for peak celebration/kingdom sections.
Headline: #333333 · Label: #5a3e00 (deep gold-brown)
NOTE: text must shift to dark at this opacity —
white text loses contrast against bright gold. */
--reign-gold-brand: #ffc713; /* Crown moments — hero headline, primary CTA button */
--reign-gold-deep: #d9a302; /* Working accent — borders, rules, labels, icons */
--reign-gold-mid: #dfb03a; /* Secondary accent */
--reign-gold-muted: #cba33e; /* Card highlights */
--reign-gold-antique: #b8973a; /* Aged warmth — Sovereign Summary accents, ornament fills */
--reign-gold-pale: #ddd080; /* Khaki — very sparing */
/* ── CRIMSON FAMILY ───────────────────────────────────────
Rule: #bc2119 for structural accents (labels, borders, tags)
Rule: #8b1811 for the CTA section background — once per page */
--reign-crimson: #BC2119; /* Labels, eyebrows, card borders, transformation markers */
--reign-crimson-deep: #8B1811; /* CTA section background — decision moment, one use only */
/* ── WARM WHITES — STEPPED ────────────────────────────────
Each section gets its own unique value.
Never use pure white (#ffffff) as a section background.
Never use the same white twice in adjacent sections.
Ordered: lightest (w1) → warmest/darkest (w11) */
--reign-w1: #fdfdfc; /* Near-pure white — card hover state */
--reign-w2: #fffdf9; /* Card backgrounds on warm sections */
--reign-w3: #fafaf8; /* Breathe section — neutral exhale after hero */
--reign-w4: #faf7f2;
--reign-w5: #f9f7f4; /* Triple Crown section background */
--reign-w6: #f5f0e8; /* Counterfeit Queens section — heavier cream */
--reign-w7: #f4f0eb; /* Testimonials section / book card fill */
--reign-w8: #f3f2f0;
--reign-w9: #f1ebde; /* Council of Queens / Library section — ivory */
--reign-w10: #f7edd6; /* Triple Crown card fill — warmest cream */
--reign-w11: #e7e2da; /* Greige — dividers, subtle borders */
/* ── SACRED STONES — SITE-WIDE PALETTE ──────────────────
These map to the Sacred Stones palette used across all
product pages, funnels, and member pages.
Distinct from the stepped homepage whites above.
Canva palette retains #FFF4E6 Light Gold for future
graphic/print use. It is NOT used on site — too
yellow-tinted against ivory section backgrounds. */
--reign-ivory: #FAFAF8; /* Primary section BG — authority entry */
--reign-antique-white: #FBF8F3; /* Transitional warm — between Ivory and Vellum.
Breathe sections, spacer sections, gentle
section shifts. Warm enough to feel intentional,
cool enough to stay sanctuary. */
--reign-warm-cream: #FAF8F5; /* Compassionate sections, testimonials */
--reign-parchment: #FDF6E8; /* Replaces Light Gold #FFF4E6 site-wide.
Pricing, upgrade banners, value callouts.
Warm without reading as gold-tinted. */
--reign-vellum: #FEF9EF; /* Softest warm — optional, sparing use */
--reign-lt-gray-1: #F4F3F1; /* Light Warm Gray 1 */
--reign-lt-gray-2: #F3F2F0; /* Light Warm Gray 2 — table rows, dividers */
--reign-pure-white: #FFFFFF; /* Card fills ONLY — never a section bg */
/* ── DARK FAMILY ──────────────────────────────────────────
Rule: No navy. No blue. Pure warm charcoal only.
ANCHOR SYSTEM — Two anchor types, each max 1 per page:
DARK ANCHOR → Charcoal #333333 full section. Commands,
closes, creates authority gravity.
CROWN ANCHOR → Brand Gold #ffc713 OR Gold Deep #d9a302
full section (flat OR image overlay).
Crowns, celebrates, marks kingdom moments.
A page may have ONE dark anchor AND ONE crown anchor.
Never two of either type on the same page.
Exception pages (2 dark anchors permitted):
CTJ · Crown Assessment · REIGN Days */
--reign-ink: #333333; /* Hero, nav, footer, all dark panels */
--reign-charcoal: #353535; /* Cards/panels within dark sections */
--reign-dark: #333333; /* Body text anchor */
/* ── TEXT ON DARK ─────────────────────────────────────────
Use these — NEVER use --gray-warm on charcoal backgrounds */
--reign-on-dark-primary: #e8e0d4; /* Main readable text on charcoal */
--reign-on-dark-secondary: #b8a898; /* Labels, nav links, secondary on charcoal */
/* ── GRAYS ────────────────────────────────────────────────
Rule: --gray-warm is for LIGHT backgrounds only
Rule: --silver-gray is for TEAL backgrounds only */
--reign-gray-warm: #6b6570; /* Body/secondary text on light sections only */
--reign-gray-med: #a9a9a9; /* Author names, metadata */
--reign-gray-lt: #d9d9d3; /* Subtle borders, dividers on light sections */
--reign-silver-gray: #D9D9D9; /* Official Canva brand kit color — 5th brand primary.
Use for: secondary text on Teal sections, credential
bars, publication names, trust indicators on Teal BG.
Reads as cool and journalistic — not warm enough for
Charcoal sections (use #e8e0d4 there instead).
NEVER use on Ivory / Warm Cream / light sections —
too cool against the warm neutral palette. */
/* ── SECTION BACKGROUND MAP ──────────────────────────────
Use this sequence. Never repeat adjacent sections.
S1 Hero: #333333 (--reign-ink)
S2 Breathe: #fafaf8 (--reign-w3)
S3 Crown: #f9f7f4 (--reign-w5)
S4 Transform: #f5f0e8 (--reign-w6)
S5 Library: #f1ebde (--reign-w9)
S6 Social proof: #f4f0eb (--reign-w7)
S7 CTA: #8b1811 (--reign-crimson-deep)
Footer: #333333 (--reign-ink) */
}
/* ════════════════════════════════════════════════════════════
2. BASE / GLOBAL STYLES
Applied globally — overrides Elementor defaults
════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: 'Lora', serif;
font-size: 14px;
line-height: 1.75;
color: var(--reign-dark);
background-color: var(--reign-w3);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
}
a {
transition: color 0.2s ease, border-color 0.2s ease;
}
/* ════════════════════════════════════════════════════════════
3. TYPOGRAPHY SYSTEM
Five-font system — each font has one job.
In Elementor: set font via Typography panel, then use
these classes for fine-tuning in Custom CSS.
════════════════════════════════════════════════════════════ */
/* ── FONT REFERENCE ──────────────────────────────────────────
Cormorant SC → Titles, headings, display text, masthead
Cormorant → Italic accents, pull quotes, subheadings
Raleway → ALL labels, eyebrows, buttons, nav, captions
Lora → ALL body copy, descriptions, card text
Allura → "Reign" script only — one moment per page
Cinzel → Queen words only — Queen, Council of Queens, etc.
─────────────────────────────────────────────────────────── */
/* DISPLAY — Cormorant SC */
.reign-display,
.elementor-widget-heading .elementor-heading-title.reign-display {
font-family: 'Cormorant SC', serif;
font-weight: 500;
letter-spacing: 2px;
line-height: 1.15;
}
/* TITLE — Cormorant SC (hero/section level) */
h1, .reign-h1 {
font-family: 'Cormorant SC', serif;
font-weight: 500;
font-size: clamp(40px, 6vw, 62px);
letter-spacing: 2px;
line-height: 1.1;
color: var(--reign-dark);
}
/* H2 — Section titles */
h2, .reign-h2 {
font-family: 'Cormorant SC', serif;
font-weight: 500;
font-size: clamp(28px, 4vw, 44px);
letter-spacing: 2px;
line-height: 1.2;
color: var(--reign-ink);
margin-bottom: 12px;
}
/* H3 — Card titles, subsection headers */
h3, .reign-h3 {
font-family: 'Cormorant SC', serif;
font-weight: 500;
font-size: clamp(16px, 2vw, 20px);
letter-spacing: 2px;
line-height: 1.3;
color: var(--reign-ink);
margin-bottom: 8px;
}
/* H4 — Card sub-labels */
h4, .reign-h4 {
font-family: 'Cormorant SC', serif;
font-weight: 400;
font-size: 16px;
letter-spacing: 1px;
color: var(--reign-ink);
}
/* BODY COPY — Lora */
p,
.reign-body,
.elementor-widget-text-editor p {
font-family: 'Lora', serif;
font-size: 14px;
font-weight: 400;
line-height: 1.8;
color: var(--reign-dark);
}
/* LEAD PARAGRAPH — slightly larger Lora */
.reign-lead {
font-family: 'Lora', serif;
font-size: 15px;
line-height: 1.8;
color: var(--reign-dark);
}
/* SECONDARY BODY — smaller, muted */
.reign-body-sm {
font-family: 'Lora', serif;
font-size: 12px;
line-height: 1.7;
color: var(--reign-gray-warm);
}
/* ITALIC ACCENT — Cormorant Italic (pull quotes, subheadings) */
.reign-italic,
blockquote,
.reign-pull-quote {
font-family: 'Cormorant', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(18px, 2.5vw, 30px);
line-height: 1.55;
color: var(--reign-dark);
}
/* EYEBROW / LABEL — Raleway (above all headings) */
.reign-eyebrow,
.reign-label {
font-family: 'Raleway', sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 5px;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
}
/* CAPTION — Raleway small */
.reign-caption,
figcaption {
font-family: 'Raleway', sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--reign-gray-warm);
}
/* SCRIPT — Allura (Reign only — never all-caps) */
.reign-script {
font-family: 'Allura', cursive;
/* Always set as: Reign (capital R + lowercase eign)
NEVER as: REIGN (all caps — capital E is weak in Allura) */
}
/* CINZEL — Queen words only */
.reign-queen-word,
.q-word {
font-family: 'Cinzel', serif;
font-weight: 400;
/* Use at 400 or 500 weight only — never above 600
The Q loses its defining diagonal slash above 600 weight */
}
/* ════════════════════════════════════════════════════════════
4. EYEBROW COLOR VARIANTS
Apply the class then add a color modifier
════════════════════════════════════════════════════════════ */
.reign-eyebrow--gold { color: var(--reign-gold-deep); }
.reign-eyebrow--crimson { color: var(--reign-crimson); }
.reign-eyebrow--light { color: var(--reign-gray-warm); }
.reign-eyebrow--on-dark { color: var(--reign-on-dark-secondary); }
.reign-eyebrow--ghost { color: rgba(255, 255, 255, 0.45); }
/* ════════════════════════════════════════════════════════════
5. SECTION BACKGROUNDS
Apply these classes to Elementor Section > Advanced > CSS Classes
════════════════════════════════════════════════════════════ */
/* Dark sections — hero, footer, CTA */
.reign-section--dark {
background-color: var(--reign-ink) !important;
}
/* Stepped warm whites — use in sequence, never repeat adjacent */
.reign-section--w3 { background-color: var(--reign-w3) !important; } /* #fafaf8 Breathe */
.reign-section--w5 { background-color: var(--reign-w5) !important; } /* #f9f7f4 Crown */
.reign-section--w6 { background-color: var(--reign-w6) !important; } /* #f5f0e8 Transform */
.reign-section--w7 { background-color: var(--reign-w7) !important; } /* #f4f0eb Social */
.reign-section--w9 { background-color: var(--reign-w9) !important; } /* #f1ebde Library */
.reign-section--w10 { background-color: var(--reign-w10) !important; } /* #f7edd6 Cards */
/* Sacred Stones section backgrounds — product pages and funnels */
.reign-section--ivory { background-color: var(--reign-ivory) !important; } /* #FAFAF8 */
.reign-section--antique-white { background-color: var(--reign-antique-white) !important; } /* #FBF8F3
Transitional
between Ivory
and Vellum */
.reign-section--warm-cream { background-color: var(--reign-warm-cream) !important; } /* #FAF8F5 */
.reign-section--parchment { background-color: var(--reign-parchment) !important; } /* #FDF6E8
Use for: pricing,
upgrade banners,
value callouts,
offer boxes.
Replaces #FFF4E6
Light Gold. */
.reign-section--vellum { background-color: var(--reign-vellum) !important; } /* #FEF9EF sparing */
.reign-section--lt-gray { background-color: var(--reign-lt-gray-2) !important; } /* #F3F2F0 */
/* CTA section — deep crimson, one use per page */
.reign-section--cta {
background-color: var(--reign-crimson-deep) !important;
position: relative;
overflow: hidden;
}
/* ── CROWN ANCHOR — flat gold section ────────────────────────
Brand Gold or Gold Deep as a full section background.
Max ONE crown anchor per page (same discipline as dark anchor).
A page may have one dark anchor AND one crown anchor — never
two of either. Text must be Charcoal #333333 on both.
Use for: Kingdom crown moments, celebration sections,
milestone arrivals, peak value statements.
For image overlay: set in Elementor Section > Style >
Background Overlay. See gold token block for opacity guide. */
.reign-section--crown-anchor {
background-color: var(--reign-gold-brand) !important;
position: relative;
overflow: hidden;
}
.reign-section--crown-anchor-deep {
background-color: var(--reign-gold-deep) !important;
position: relative;
overflow: hidden;
}
/* Text on crown anchor sections must be Charcoal — not white */
.reign-section--crown-anchor > .elementor-container,
.reign-section--crown-anchor-deep > .elementor-container {
position: relative;
z-index: 1;
}
/* Subtle gold glow overlay for hero and CTA dark sections */
.reign-section--dark::before,
.reign-section--cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 60% 70% at 70% 50%,
rgba(255, 199, 19, 0.06) 0%,
transparent 60%
);
pointer-events: none;
z-index: 0;
}
/* Ensure content inside sits above overlay */
.reign-section--dark > .elementor-container,
.reign-section--cta > .elementor-container {
position: relative;
z-index: 1;
}
/* ════════════════════════════════════════════════════════════
6. TEXT COLOR UTILITIES
Apply to Elementor text widgets via CSS Classes field
════════════════════════════════════════════════════════════ */
/* On LIGHT backgrounds */
.reign-text--ink { color: var(--reign-ink) !important; }
.reign-text--dark { color: var(--reign-dark) !important; }
.reign-text--body { color: var(--reign-gray-warm) !important; }
.reign-text--gold { color: var(--reign-gold-deep) !important; }
.reign-text--gold-brand { color: var(--reign-gold-brand) !important; }
.reign-text--crimson { color: var(--reign-crimson) !important; }
/* On DARK/CHARCOAL backgrounds */
.reign-text--on-dark { color: var(--reign-on-dark-primary) !important; }
.reign-text--on-dark-sm { color: var(--reign-on-dark-secondary) !important; }
.reign-text--white { color: #ffffff !important; }
/* On TEAL backgrounds only — Silver-Gray for cool secondary text
Use for: credentials, publication names, trust bar text, metadata
on Teal sections. Do NOT use on Charcoal or light sections. */
.reign-text--silver { color: var(--reign-silver-gray) !important; }
/* ════════════════════════════════════════════════════════════
7. BUTTONS
Apply class to Elementor Button widget via CSS Classes
════════════════════════════════════════════════════════════ */
/* ── PRIMARY — Gold, dark text (hero, main CTA) */
.reign-btn-primary,
.elementor-button.reign-btn-primary {
font-family: 'Raleway', sans-serif !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
padding: 16px 32px !important;
background-color: var(--reign-gold-brand) !important;
color: var(--reign-ink) !important;
border: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
.reign-btn-primary:hover,
.elementor-button.reign-btn-primary:hover {
background-color: var(--reign-gold-deep) !important;
color: #ffffff !important;
}
/* ── DARK — Charcoal, gold text (library, secondary pages) */
.reign-btn-dark,
.elementor-button.reign-btn-dark {
font-family: 'Raleway', sans-serif !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
padding: 16px 32px !important;
background-color: var(--reign-ink) !important;
color: var(--reign-gold-deep) !important;
border: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
.reign-btn-dark:hover,
.elementor-button.reign-btn-dark:hover {
background-color: var(--reign-charcoal) !important;
color: var(--reign-gold-brand) !important;
}
/* ── GHOST — Transparent, gold border (on dark backgrounds) */
.reign-btn-ghost,
.elementor-button.reign-btn-ghost {
font-family: 'Raleway', sans-serif !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
padding: 16px 24px !important;
background-color: transparent !important;
color: var(--reign-on-dark-secondary) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
.reign-btn-ghost:hover,
.elementor-button.reign-btn-ghost:hover {
border-color: var(--reign-gold-deep) !important;
color: var(--reign-gold-deep) !important;
}
/* ── OUTLINE WHITE — On deep crimson CTA section */
.reign-btn-outline-white,
.elementor-button.reign-btn-outline-white {
font-family: 'Raleway', sans-serif !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
padding: 18px 32px !important;
background-color: transparent !important;
color: rgba(255, 255, 255, 0.8) !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
.reign-btn-outline-white:hover,
.elementor-button.reign-btn-outline-white:hover {
border-color: #ffffff !important;
color: #ffffff !important;
}
/* ── GOLD SOLID — On deep crimson CTA section */
.reign-btn-gold-solid,
.elementor-button.reign-btn-gold-solid {
font-family: 'Raleway', sans-serif !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
padding: 18px 40px !important;
background-color: var(--reign-gold-brand) !important;
color: var(--reign-ink) !important;
border: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
.reign-btn-gold-solid:hover,
.elementor-button.reign-btn-gold-solid:hover {
background-color: #ffffff !important;
color: var(--reign-ink) !important;
}
/* ── TEXT LINK ARROW — inline link with underline */
.reign-link-arrow {
font-family: 'Raleway', sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--reign-crimson);
text-decoration: none;
border-bottom: 1px solid var(--reign-crimson);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}
.reign-link-arrow:hover {
color: var(--reign-crimson-deep);
border-color: var(--reign-crimson-deep);
}
/* ════════════════════════════════════════════════════════════
8. BORDER & DIVIDER UTILITIES
════════════════════════════════════════════════════════════ */
/* Gold rule — section dividers, card tops */
.reign-rule-gold {
height: 2px;
background-color: var(--reign-gold-deep);
border: none;
width: 100%;
}
/* Thin neutral rule */
.reign-rule-neutral {
height: 1px;
background-color: var(--reign-w11);
border: none;
width: 100%;
}
/* Gold border-left — pull quotes, sidebar accents */
.reign-border-gold-left {
border-left: 3px solid var(--reign-gold-deep);
padding-left: 24px;
}
/* Crimson border-top — counterfeit cards, warning states */
.reign-border-crimson-top {
border-top: 3px solid var(--reign-crimson);
}
/* Gold top accent bar — crown cards */
.reign-crown-accent::before {
content: '';
display: block;
width: 32px;
height: 3px;
background-color: var(--reign-gold-deep);
margin: 0 auto 20px;
}
/* ── ORNAMENTAL BORDER FRAME ─────────────────────────────────
Reusable ceremonial frame treatment.
Apply to any Elementor container or widget.
Structure:
Outer border: 1px solid Gold Deep #d9a302
Corner L-shapes: ::before (top-left) + ::after (bottom-right)
as inset pseudo-element L-brackets in Gold Deep
Inner border: inset box-shadow at 6px offset, Gold Deep 20% opacity
Diamond ornament: centered top via a rotated ::before on a child
.reign-ornament-diamond element
Horizontal rule: centered .reign-ornament-rule child element
Usage in Elementor:
1. Add class reign-ornament-frame to the container
2. For diamond + rule, add a Text widget as first child:
Variants:
.reign-ornament-frame--light → on Ivory / Warm Cream sections
.reign-ornament-frame--dark → on Charcoal / Crimson sections
(switches to Gold Brand #ffc713) */
.reign-ornament-frame {
position: relative;
border: 1px solid var(--reign-gold-deep); /* outer Gold Deep border */
box-shadow: inset 0 0 0 6px rgba(217, 163, 2, 0.2); /* inner opacity border */
padding: 48px 40px;
}
/* Top-left corner L-bracket */
.reign-ornament-frame::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
width: 24px;
height: 24px;
border-top: 2px solid var(--reign-gold-deep);
border-left: 2px solid var(--reign-gold-deep);
border-radius: 0; /* no rounding on L-shapes */
}
/* Bottom-right corner L-bracket */
.reign-ornament-frame::after {
content: '';
position: absolute;
bottom: 6px;
right: 6px;
width: 24px;
height: 24px;
border-bottom: 2px solid var(--reign-gold-deep);
border-right: 2px solid var(--reign-gold-deep);
border-radius: 0;
}
/* Dark section variant — switches to Brand Gold #ffc713 */
.reign-ornament-frame--dark {
border-color: var(--reign-gold-brand);
box-shadow: inset 0 0 0 6px rgba(255, 199, 19, 0.2);
}
.reign-ornament-frame--dark::before,
.reign-ornament-frame--dark::after {
border-color: var(--reign-gold-brand);
}
/* Diamond ornament — centered top anchor point
Place
as the first child inside the frame container */
.reign-ornament-diamond {
display: block;
width: 10px;
height: 10px;
background-color: var(--reign-gold-deep);
transform: rotate(45deg);
margin: 0 auto 16px;
}
.reign-ornament-frame--dark .reign-ornament-diamond {
background-color: var(--reign-gold-brand);
}
/* Horizontal rule — flanks the diamond or runs independently
Place
adjacent to the diamond or as a standalone divider */
.reign-ornament-rule {
display: block;
width: 60px;
height: 1px;
background-color: var(--reign-gold-deep);
margin: 0 auto 24px;
opacity: 0.6;
}
.reign-ornament-frame--dark .reign-ornament-rule {
background-color: var(--reign-gold-brand);
}
/* ════════════════════════════════════════════════════════════
9. CARD STYLES
Apply classes to Elementor containers/widgets
════════════════════════════════════════════════════════════ */
/* ── CROWN CARD — Triple Crown framework cards */
.reign-crown-card {
background-color: var(--reign-w10);
border: 1px solid rgba(215, 160, 50, 0.14);
padding: 36px 28px;
text-align: center;
transition: all 0.25s ease;
position: relative;
}
.reign-crown-card:hover {
background-color: var(--reign-w2);
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(180, 140, 50, 0.09);
}
/* ── BOOK CARD — Library/Sovereign Summary cards */
.reign-book-card {
background-color: var(--reign-w7);
border: 1px solid var(--reign-w11);
border-bottom: 3px solid transparent;
padding: 24px 20px;
transition: all 0.25s ease;
}
.reign-book-card:hover {
border-bottom-color: var(--reign-gold-deep);
background-color: var(--reign-w3);
}
/* ── COUNTERFEIT CARD — Shadow dimension cards */
.reign-cf-card {
background-color: var(--reign-w2);
border-top: 3px solid var(--reign-crimson);
padding: 28px 22px;
transition: all 0.25s ease;
}
.reign-cf-card:hover {
background-color: var(--reign-w1);
transform: translateY(-2px);
}
/* ── TESTIMONIAL CARD */
.reign-testimonial-card {
background-color: var(--reign-w2);
border: 1px solid var(--reign-w11);
padding: 32px 28px;
}
/* ── STAT CARD — Hero/dark section stats */
.reign-stat-card {
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(215, 160, 50, 0.18);
padding: 24px 28px;
}
/* ── QUOTE CARD (DARK) — On charcoal/dark section backgrounds */
.reign-quote-card {
background-color: rgba(255, 255, 255, 0.03);
border-left: 3px solid var(--reign-gold-brand);
padding: 20px 24px;
}
.reign-quote-card p,
.reign-quote-card .reign-quote-text {
font-family: 'Cormorant', serif;
font-style: italic;
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.65;
margin-bottom: 10px;
}
.reign-quote-card .reign-quote-attr {
font-family: 'Allura', cursive;
font-size: 22px;
color: var(--reign-gold-deep);
line-height: 1.2;
}
/* ── QUOTE CARD (LIGHT) — On warm white/cream section backgrounds */
.reign-quote-card--light {
background-color: var(--reign-w10); /* #f7edd6 warmest cream */
border-left: 3px solid var(--reign-gold-deep); /* document gold — not brand gold */
padding: 28px 32px;
}
.reign-quote-card--light p,
.reign-quote-card--light .reign-quote-text {
font-family: 'Cormorant', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(18px, 2.5vw, 26px);
color: var(--reign-dark);
line-height: 1.6;
margin-bottom: 14px;
}
.reign-quote-card--light .reign-quote-text em {
font-style: normal;
color: var(--reign-gold-deep); /* emphasis words in document gold */
}
.reign-quote-card--light .reign-quote-attr {
font-family: 'Allura', cursive;
font-size: 24px;
color: var(--reign-gold-deep);
line-height: 1.2;
margin-bottom: 3px;
}
.reign-quote-card--light .reign-quote-role {
font-family: 'Raleway', sans-serif;
font-size: 7px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--reign-gray-warm);
}
/* ════════════════════════════════════════════════════════════
10. NAVIGATION
Elementor Nav Menu widget custom styles
Apply .reign-nav to the nav widget CSS class field
OPTION C — Ivory nav / Charcoal footer (confirmed March 2026)
Nav background: REIGN Ivory #FAFAF8
Logo version: Crimson PNG (png_whitebg_reign.png)
Nav links: Gray Warm #6b6570 — calm, sanctuary register
Active/CTA: Gold Deep #d9a302
Hover: Charcoal #333333
Border bottom: Gold Deep at 25% opacity — barely-there gold line
════════════════════════════════════════════════════════════ */
.reign-nav {
background-color: var(--reign-ivory) !important; /* #FAFAF8 — matches Crimson logo background */
border-bottom: 1px solid rgba(217, 163, 2, 0.25); /* Gold Deep at 25% — subtle sanctuary line */
}
/* Nav menu links — calm Gray Warm on ivory */
.reign-nav .elementor-nav-menu a,
.reign-nav .elementor-nav-menu--main .elementor-item {
font-family: 'Raleway', sans-serif !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--reign-gray-warm) !important; /* #6b6570 — recedes, does not compete with logo */
transition: color 0.2s !important;
}
/* Hover — shift to Charcoal for grounded response */
.reign-nav .elementor-nav-menu a:hover,
.reign-nav .elementor-nav-menu--main .elementor-item:hover {
color: var(--reign-ink) !important; /* #333333 — grounds on hover */
}
/* Active / CTA nav item — Gold Deep signals the action link */
.reign-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
.reign-nav .reign-nav-cta {
color: var(--reign-gold-deep) !important; /* #d9a302 — the one link that calls */
}
/* Logo placement note:
Use png_whitebg_reign.png (Crimson logo on white/ivory background).
In Elementor Header > Site Logo widget, upload this file.
The ivory nav background will blend seamlessly with the logo.
Do NOT use the black background or transparent version on this nav. */
/* Allura script wordmark — if used as text alternative to image logo */
.reign-nav-script {
font-family: 'Allura', cursive;
font-size: 32px;
color: var(--reign-crimson); /* #BC2119 — matches Crimson logo version */
line-height: 1;
}
/* ── WORDPRESS MENU WIDGET — HORIZONTAL LAYOUT FIX ──────────
The WordPress Menu widget (used in the REIGN Momentum Header)
renders as a vertical bullet list by default. These rules
force it into a horizontal inline row matching the Elementor
Nav Menu widget layout.
HOW TO APPLY IN ELEMENTOR:
1. Click the WordPress Menu widget in the header editor
2. Go to Advanced tab → CSS Classes
3. Type: reign-nav-wp-menu
4. Click Publish
Sub-menus appear on hover. No JS required. */
.reign-nav-wp-menu .menu,
.reign-nav-wp-menu ul {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
gap: 4px !important;
}
.reign-nav-wp-menu .menu li,
.reign-nav-wp-menu ul li {
display: inline-block !important;
position: relative !important;
list-style: none !important;
}
/* Top-level links */
.reign-nav-wp-menu .menu > li > a,
.reign-nav-wp-menu ul > li > a {
font-family: 'Raleway', sans-serif !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--reign-gray-warm) !important;
text-decoration: none !important;
padding: 8px 12px !important;
display: block !important;
white-space: nowrap !important;
transition: color 0.2s !important;
}
.reign-nav-wp-menu .menu > li > a:hover,
.reign-nav-wp-menu ul > li > a:hover {
color: var(--reign-ink) !important;
}
.reign-nav-wp-menu .menu > li.current-menu-item > a,
.reign-nav-wp-menu ul > li.current-menu-item > a {
color: var(--reign-gold-deep) !important;
}
/* Sub-menu dropdowns */
.reign-nav-wp-menu .sub-menu {
display: none !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
flex-direction: column !important;
background-color: var(--reign-ivory) !important;
border-top: 2px solid var(--reign-gold-deep) !important;
min-width: 200px !important;
z-index: 9999 !important;
padding: 8px 0 !important;
box-shadow: 0 8px 24px rgba(51, 51, 51, 0.08) !important;
}
.reign-nav-wp-menu li:hover > .sub-menu {
display: flex !important;
}
.reign-nav-wp-menu .sub-menu li a {
font-family: 'Raleway', sans-serif !important;
font-size: 8px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: var(--reign-gray-warm) !important;
padding: 10px 20px !important;
display: block !important;
white-space: nowrap !important;
text-decoration: none !important;
transition: color 0.2s, background-color 0.2s !important;
}
.reign-nav-wp-menu .sub-menu li a:hover {
color: var(--reign-ink) !important;
background-color: var(--reign-antique-white) !important;
}
/* ════════════════════════════════════════════════════════════
11. SPACING SYSTEM
Consistent padding for sections and inner containers
════════════════════════════════════════════════════════════ */
/* Standard section padding */
.reign-section-pad {
padding: 88px 64px;
}
.reign-section-pad--sm {
padding: 56px 40px;
}
/* Elementor section override — apply to Section > Advanced > CSS Classes */
.elementor-section.reign-section-pad > .elementor-container {
padding-top: 88px;
padding-bottom: 88px;
}
/* ════════════════════════════════════════════════════════════
12. FOOTER
OPTION C — Charcoal footer (confirmed March 2026)
Footer background: Charcoal #333333
Logo version: Gold (create from PSD — swap crimson to #FFC713)
Top border: Gold Deep #d9a302 — 3px rule, grounded close
Column titles: Gold Deep #d9a302
Body links: On-Dark Secondary #b8a898
Hover: Gold Deep #d9a302
Copyright: On-Dark Secondary at 60% opacity
════════════════════════════════════════════════════════════ */
.reign-footer {
background-color: var(--reign-ink) !important; /* #333333 — sovereign, grounded close */
border-top: 3px solid var(--reign-gold-deep); /* #d9a302 — Gold Deep rule, not Brand Gold */
}
/* Logo placement note:
The footer requires a Gold logo version — create in Photoshop
by swapping all #BC2119 Crimson elements to #FFC713 Brand Gold.
Keep queen chess piece white. Export as png_goldbg_footer.png
or with transparent background for placement on Charcoal.
Until gold version is ready, use transparent PNG — the
white queen piece and crimson elements will still read on dark,
though crimson on charcoal is less ideal than gold on charcoal. */
.reign-footer-col-title {
font-family: 'Raleway', sans-serif;
font-size: 8px;
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--reign-gold-deep); /* #d9a302 — working gold, not full voltage */
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.reign-footer a {
font-family: 'Lora', serif;
font-size: 12px;
color: var(--reign-on-dark-secondary); /* #b8a898 — warm, recedes correctly */
text-decoration: none;
transition: color 0.2s;
}
.reign-footer a:hover {
color: var(--reign-gold-deep);
}
.reign-footer-copy {
font-family: 'Raleway', sans-serif;
font-size: 7px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--reign-on-dark-secondary);
opacity: 0.6;
}
/* Allura script wordmark — if used as text alternative to image logo in footer */
.reign-footer-script {
font-family: 'Allura', cursive;
font-size: 28px;
color: var(--reign-gold-brand); /* #FFC713 — full Brand Gold voltage in footer */
line-height: 1;
}
/* ════════════════════════════════════════════════════════════
13. ELEMENTOR GLOBAL OVERRIDES
Resets that prevent Elementor defaults from
conflicting with REIGN styles
════════════════════════════════════════════════════════════ */
/* Remove Elementor default button border-radius */
.elementor-button {
border-radius: 0 !important;
}
/* Remove default link underlines */
.elementor-widget-text-editor a {
text-decoration: none;
}
/* Remove default Elementor widget spacing where not needed */
.elementor-widget:not(:last-child) {
margin-bottom: 0;
}
/* Ensure Elementor columns don't override section background */
.elementor-section > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap {
padding: 0;
}
/* ════════════════════════════════════════════════════════════
14. RESPONSIVE — MOBILE BREAKPOINTS
Elementor handles most responsiveness — these are
REIGN-specific overrides for mobile
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.reign-section-pad {
padding: 72px 48px;
}
}
@media (max-width: 767px) {
.reign-section-pad {
padding: 56px 24px;
}
h1, .reign-h1 {
font-size: 36px;
}
h2, .reign-h2 {
font-size: 28px;
}
.reign-btn-primary,
.reign-btn-dark,
.reign-btn-gold-solid,
.elementor-button.reign-btn-primary,
.elementor-button.reign-btn-dark,
.elementor-button.reign-btn-gold-solid {
padding: 14px 24px !important;
width: 100%;
text-align: center;
display: block !important;
}
.reign-script {
font-size: 36px;
}
}
/* ════════════════════════════════════════════════════════════
15. QUICK REFERENCE — ELEMENTOR WORKFLOW NOTES
════════════════════════════════════════════════════════════
FONTS
─────
Set fonts in Elementor > Site Settings > Typography first.
Map them as:
Primary Heading → Cormorant SC, 500
Secondary Heading → Cormorant Italic, 300
Body Text → Lora, 400
Accent Text → Raleway, 700
Then use the CSS classes in this file to fine-tune
individual elements.
COLORS
──────
Set Global Colors in Elementor > Site Settings > Global Colors.
This must be completed in Session 1 BEFORE any page is opened.
If hex values are applied manually per widget instead of from
the Global Color palette, colors will be inconsistent and any
future update will require a full page audit.
SYSTEM COLORS (4 required slots):
Primary → #d9a302 (Gold Deep)
Secondary → #bc2119 (REIGN Crimson)
Text → #333333 (Ink / Charcoal)
Accent → #ffc713 (Gold Brand)
JOURNEY ACCENT COLORS (add as Custom Global Colors):
These three must be registered before any REIGN Days or
journey-specific section is styled. Do not apply these
as manual hex entries per widget.
REIGN Teal → #2D7C83
Ruby Red → #BC2119 (same as Crimson — register separately
as "Ruby Red" for journey context clarity)
Gold Deep → #d9a302 (same as Primary — register separately
as "Gold Deep" for journey labeling)
Crimson Deep → #8B1811 (CTA section background)
Warm Cream → #FAF8F5
Ivory → #FAFAF8
Parchment → #FDF6E8
Silver-Gray → #D9D9D9 (5th official Canva brand color —
secondary text on Teal sections,
credentials, trust bars only)
SECTIONS
────────
In Elementor Section > Style > Background:
Set background color using hex values from the token list.
In Elementor Section > Advanced > CSS Classes:
Add reign-section--dark, reign-section--cta, etc.
for sections that need the overlay effect.
NEVER use pure white #ffffff as a section background.
NEVER use #ffc713 gold-brand as a text color on light bg.
NEVER use #6b6570 gray-warm as text on dark sections.
NEVER use #FFF4E6 Light Gold as a section background —
use --reign-parchment (#FDF6E8) instead.
════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
16. REIGN DAYS PAGE FAMILY
Scoped exclusively to /reign-days/ URL family.
These tokens and classes are NOT used on the main site.
Apply to Elementor sections via CSS Classes field.
════════════════════════════════════════════════════════════ */
/* ── REIGN DAYS EXTENSION TOKENS ─────────────────────────────
These five values extend the Sacred Stones palette for the
REIGN Days product pages only. Never use on homepage,
quiz funnel, utility pages, or any other page family. */
:root {
--rd-gold-dark: #d9a302; /* Primary CTA, heroes, Kingdom theme
NOTE: Canonical token — same as --reign-gold-deep.
Build package used #D4A017 — corrected to #d9a302
to align with Canva brand kit exact value. */
--rd-gold-hover: #e6b800; /* Button hover transitions only */
--rd-ruby-deep: #8B1A1A; /* Sovereign hero gradient dark end */
--rd-teal-deep: #1D5259; /* Covenant hero gradient dark end */
--rd-linkedin: #0077B5; /* Confirmation page social CTA — one use only */
--rd-linkedin-hover: #005F8D;
}
/* ── JOURNEY IDENTITY — SECTION BACKGROUNDS ──────────────────
Each journey hero uses a full-width colored background.
These are NOT dark anchors. Dark anchor = Charcoal only.
Rule: maximum one full-section colored BG per journey page */
/* Sovereign hero — Ruby Red gradient */
.rd-section--sovereign-hero {
background: linear-gradient(
135deg,
#BC2119 0%,
var(--rd-ruby-deep) 100%
) !important;
position: relative;
overflow: hidden;
}
/* Covenant hero — REIGN Teal gradient */
.rd-section--covenant-hero {
background: linear-gradient(
135deg,
#2D7C83 0%,
var(--rd-teal-deep) 100%
) !important;
position: relative;
overflow: hidden;
}
/* Kingdom hero — Dark Gold gradient */
.rd-section--kingdom-hero {
background: linear-gradient(
135deg,
var(--rd-gold-dark) 0%,
#B8890F 100%
) !important;
position: relative;
overflow: hidden;
}
/* Overview hero — Dark Gold gradient (same as Kingdom) */
.rd-section--overview-hero {
background: linear-gradient(
135deg,
var(--rd-gold-dark) 0%,
#C8940F 100%
) !important;
position: relative;
overflow: hidden;
}
/* RIA Bonus section — Teal BG, universal across all journeys */
.rd-section--ria {
background-color: #2D7C83 !important;
}
/* ── JOURNEY CARD ACCENTS ─────────────────────────────────────
Top-border colors on cards, map components, and section
accents — one class per journey. */
.rd-accent--sovereign {
border-top: 4px solid #BC2119 !important;
}
.rd-accent--sovereign-left {
border-left: 3px solid #BC2119 !important;
}
.rd-accent--covenant {
border-top: 4px solid #2D7C83 !important;
}
.rd-accent--covenant-left {
border-left: 3px solid #2D7C83 !important;
}
.rd-accent--kingdom {
border-top: 4px solid var(--rd-gold-dark) !important;
}
.rd-accent--kingdom-left {
border-left: 3px solid var(--rd-gold-dark) !important;
}
/* ── FROM / TO SYSTEM — UNIVERSAL, INVIOLABLE ────────────────
FROM label = Ruby Red. Arrow = REIGN Gold. TO label = Teal.
This system NEVER changes regardless of journey page. */
.rd-from-label {
color: #BC2119;
font-family: 'Raleway', sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
}
.rd-to-label {
color: #2D7C83;
font-family: 'Raleway', sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
}
.rd-arrow {
color: #FFC713;
font-size: 20px;
line-height: 1;
}
/* Three-phase story bar: Struggle → Breakthrough → Outcome */
.rd-phase--struggle { color: #BC2119; }
.rd-phase--breakthrough { color: #FFC713; }
.rd-phase--outcome { color: #2D7C83; }
/* ── REIGN DAYS BUTTONS ───────────────────────────────────────
Journey-specific CTA buttons. All use Raleway 700, no
border-radius, uppercase, 16px+ padding. */
/* Sovereign mid-page CTA — Ruby Red */
.rd-btn--sovereign,
.elementor-button.rd-btn--sovereign {
font-family: 'Raleway', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 16px 32px !important;
background-color: #BC2119 !important;
color: #ffffff !important;
border: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
.rd-btn--sovereign:hover,
.elementor-button.rd-btn--sovereign:hover {
background-color: var(--rd-gold-dark) !important;
color: #FAFAF8 !important;
}
/* Covenant mid-page CTA — REIGN Teal */
.rd-btn--covenant,
.elementor-button.rd-btn--covenant {
font-family: 'Raleway', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 16px 32px !important;
background-color: #2D7C83 !important;
color: #ffffff !important;
border: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
.rd-btn--covenant:hover,
.elementor-button.rd-btn--covenant:hover {
background-color: var(--rd-gold-dark) !important;
color: #FAFAF8 !important;
}
/* Kingdom mid-page CTA — Dark Gold */
.rd-btn--kingdom,
.elementor-button.rd-btn--kingdom {
font-family: 'Raleway', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 16px 32px !important;
background-color: var(--rd-gold-dark) !important;
color: #FAFAF8 !important;
border: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
.rd-btn--kingdom:hover,
.elementor-button.rd-btn--kingdom:hover {
background-color: #BC2119 !important;
color: #ffffff !important;
}
/* Primary "Apply" CTA — Dark Gold, used on Overview + journey pages */
.rd-btn--apply,
.elementor-button.rd-btn--apply {
font-family: 'Raleway', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 18px 40px !important;
background-color: var(--rd-gold-dark) !important;
color: #FAFAF8 !important;
border: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
min-width: 300px;
min-height: 60px;
}
.rd-btn--apply:hover,
.elementor-button.rd-btn--apply:hover {
background-color: #BC2119 !important;
color: #ffffff !important;
}
/* Reversed "Apply" on dark anchor Charcoal section — Gold fill + Charcoal text */
.rd-btn--apply-reversed,
.elementor-button.rd-btn--apply-reversed {
font-family: 'Raleway', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 18px 40px !important;
background-color: #FFC713 !important;
color: #333333 !important;
border: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
min-width: 300px;
min-height: 60px;
}
.rd-btn--apply-reversed:hover,
.elementor-button.rd-btn--apply-reversed:hover {
background-color: var(--rd-gold-dark) !important;
color: #FAFAF8 !important;
}
/* Reversed "Apply" on Gold hero — Ivory fill + Dark Gold text */
.rd-btn--apply-on-gold,
.elementor-button.rd-btn--apply-on-gold {
font-family: 'Raleway', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 18px 40px !important;
background-color: #FAFAF8 !important;
color: var(--rd-gold-dark) !important;
border: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
.rd-btn--apply-on-gold:hover,
.elementor-button.rd-btn--apply-on-gold:hover {
background-color: #BC2119 !important;
color: #ffffff !important;
}
/* RIA "Take Assessment" CTA — Ivory fill + Teal text */
.rd-btn--ria,
.elementor-button.rd-btn--ria {
font-family: 'Raleway', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 16px 32px !important;
background-color: #FAFAF8 !important;
color: #2D7C83 !important;
border: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
.rd-btn--ria:hover,
.elementor-button.rd-btn--ria:hover {
background-color: #2D7C83 !important;
color: #ffffff !important;
}
/* LinkedIn CTA — confirmation page only */
.rd-btn--linkedin,
.elementor-button.rd-btn--linkedin {
font-family: 'Raleway', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 14px 28px !important;
background-color: var(--rd-linkedin) !important;
color: #ffffff !important;
border: none !important;
border-radius: 0 !important;
transition: background-color 0.2s ease !important;
}
.rd-btn--linkedin:hover,
.elementor-button.rd-btn--linkedin:hover {
background-color: var(--rd-linkedin-hover) !important;
}
/* Sticky mobile CTA bar — fixed bottom, after 50% scroll */
.rd-sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background-color: var(--rd-gold-dark);
padding: 14px 24px;
text-align: center;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
display: none; /* shown via JS after scroll threshold */
}
.rd-sticky-cta a {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #FAFAF8;
text-decoration: none;
}
/* ── TYPOGRAPHY CORRECTIONS FOR REIGN DAYS ───────────────────
The REIGN Days Build Package v1.1 specifies Cinzel for all
H1–H3 headlines. Per finalized brand system, Cinzel is
reserved for Queen words only. All REIGN Days headlines
use Cormorant SC. Override applied here. */
.rd-headline,
.elementor-section[class*="reign-days"] h1,
.elementor-section[class*="reign-days"] h2,
.elementor-section[class*="reign-days"] h3 {
font-family: 'Cormorant SC', serif !important;
font-weight: 500 !important;
}
/* Cinzel stays for Queen / Crown / Royal Identity words */
.rd-queen-word {
font-family: 'Cinzel', serif;
font-weight: 400;
}
/* ── REIGN DAYS DARK ANCHOR RULE — REFERENCE ─────────────────
Maximum ONE dark anchor (#333333 background) per page.
Journey hero sections (Ruby Red, Teal, Gold) do NOT count.
RIA bonus sections (Teal) do NOT count.
Thank You / Confirmation pages: ZERO dark anchors.
Dark anchor pages and locations:
/reign-days → OV-9 (Final CTA)
/reign-days/sovereign → SV-10 (Final CTA)
/reign-days/covenant → CV-10 (Final CTA)
/reign-days/kingdom → KD-10 (Final CTA)
/reign-days/apply → 0 dark anchors
/reign-days/confirmation → 0 dark anchors
On all dark anchors, the Gold Button Reversal applies:
Button BG = #FFC713, Button Text = #333333 */
/* ── REIGN DAYS — CARD & TABLE COMPONENTS ───────────────────*/
/* Investment table header — varies by journey */
.rd-table-header--sovereign {
background-color: #BC2119 !important;
color: #ffffff !important;
}
.rd-table-header--covenant {
background-color: #2D7C83 !important;
color: #ffffff !important;
}
.rd-table-header--kingdom {
background-color: var(--rd-gold-dark) !important;
color: #333333 !important; /* Charcoal — WCAG AA compliance on Dark Gold */
}
.rd-table-header--overview {
background-color: var(--rd-gold-dark) !important;
color: #FAFAF8 !important;
}
/* Time/agenda badges */
.rd-badge--sovereign {
background-color: #BC2119;
color: #ffffff;
font-family: 'Raleway', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 4px 12px;
display: inline-block;
}
.rd-badge--covenant {
background-color: #2D7C83;
color: #ffffff;
font-family: 'Raleway', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 4px 12px;
display: inline-block;
}
.rd-badge--kingdom {
background-color: var(--rd-gold-dark);
color: #333333; /* Charcoal — WCAG AA compliance */
font-family: 'Raleway', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 4px 12px;
display: inline-block;
}
/* Progress bar — form pages */
.rd-progress-bar {
height: 6px;
background-color: #F3F2F0;
border-radius: 0;
overflow: hidden;
}
.rd-progress-bar__fill {
height: 100%;
background-color: #FFC713;
transition: width 0.3s ease;
}
/* ── REIGN DAYS MOBILE OVERRIDES ─────────────────────────────*/
@media (max-width: 767px) {
.rd-btn--apply,
.rd-btn--apply-reversed,
.rd-btn--apply-on-gold,
.elementor-button.rd-btn--apply,
.elementor-button.rd-btn--apply-reversed,
.elementor-button.rd-btn--apply-on-gold {
min-width: unset !important;
width: 100% !important;
display: block !important;
}
.rd-sticky-cta {
display: block;
}
}
/* ════════════════════════════════════════════════════════════
16. QUICK REFERENCE — REIGN DAYS CLASS MAP
JOURNEY HEROES (apply to Elementor section CSS class):
.rd-section--overview-hero → Gold gradient
.rd-section--sovereign-hero → Ruby Red gradient
.rd-section--covenant-hero → Teal gradient
.rd-section--kingdom-hero → Dark Gold gradient
.rd-section--ria → Teal solid (all journeys)
CARD ACCENTS (apply to column or widget):
.rd-accent--sovereign → Ruby Red top-border 4px
.rd-accent--sovereign-left → Ruby Red left-border 3px
.rd-accent--covenant → Teal top-border 4px
.rd-accent--covenant-left → Teal left-border 3px
.rd-accent--kingdom → Dark Gold top-border 4px
.rd-accent--kingdom-left → Dark Gold left-border 3px
FROM/TO LABELS (apply to text widget):
.rd-from-label → Ruby Red Raleway uppercase
.rd-to-label → Teal Raleway uppercase
.rd-arrow → Gold arrow
.rd-phase--struggle → Ruby Red
.rd-phase--breakthrough → Gold
.rd-phase--outcome → Teal
BUTTONS (apply to Elementor button CSS class):
.rd-btn--sovereign → Ruby Red, hover: Dark Gold
.rd-btn--covenant → Teal, hover: Dark Gold
.rd-btn--kingdom → Dark Gold, hover: Ruby Red
.rd-btn--apply → Dark Gold primary (light bg)
.rd-btn--apply-reversed → Gold + Charcoal (dark anchor)
.rd-btn--apply-on-gold → Ivory + Dark Gold (gold hero)
.rd-btn--ria → Ivory + Teal text
.rd-btn--linkedin → LinkedIn Blue (confirmation only)
TABLE HEADERS:
.rd-table-header--sovereign → Ruby Red bg, white text
.rd-table-header--covenant → Teal bg, white text
.rd-table-header--kingdom → Dark Gold bg, CHARCOAL text
.rd-table-header--overview → Dark Gold bg, ivory text
BADGES:
.rd-badge--sovereign → Ruby Red bg, white text
.rd-badge--covenant → Teal bg, white text
.rd-badge--kingdom → Dark Gold bg, CHARCOAL text
HEX CORRECTION NOTE:
Build Package uses #D4A017 for Dark Gold.
Corrected canonical value is #d9a302 (Canva brand kit).
All instances of #D4A017 in the build package should
be read as #d9a302 going forward.
════════════════════════════════════════════════════════════ */
/* REIGN Gold Frame — Double Border Card Treatment */
/* Canonical hex confirmed: #d9a302 Gold Deep */
.reign-gold-frame {
border: 5px double #d9a302;
padding: 20px;
}
/* ══ REIGN DAYS — Global Additions (paste below existing style guide) ═══════
These extend reign-elementor-style-guide.css for the REIGN Days funnel.
Do NOT replace the style guide — add below it.
════════════════════════════════════════════════════════════════════════════ */
/* ── DESIGN TOKENS ── */
:root {
--ivory: #FAFAF8;
--parchment: #FDF6E8;
--warm-cream: #FAF8F5;
--lt-warm-gray: #F3F2F0;
--white: #FFFFFF;
--charcoal: #333333;
--gold: #FFC713;
--gold-deep: #d9a302;
--ruby: #BC2119;
--crimson-deep: #8B1811;
--teal: #2D7C83;
--deep-teal: #1D5259;
--divider: #E8E6E3;
--greige: #e7e2da;
--on-dark-1: #e8e0d4;
--on-dark-2: #b8a898;
--mid-gray: #6b6570;
}
/* ── TEXTURE OVERLAYS (from CSS Catalog v3.0) ── */
/* Linen — light sections */
.tx-linen::before {
content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='none'/%3E%3Crect x='0' y='0' width='1' height='4' fill='rgba(180,160,130,0.18)'/%3E%3Crect x='0' y='0' width='4' height='1' fill='rgba(180,160,130,0.14)'/%3E%3C/svg%3E");
}
/* Luminous center — parchment + ivory sections */
.tx-lum-center::before {
content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
background: radial-gradient(ellipse 70% 70% at 50% 40%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
}
/* Luminous gold — gold hero sections */
.tx-lum-gold::before {
content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
background: radial-gradient(ellipse 65% 65% at 65% 35%, rgba(255,215,80,0.22) 0%, rgba(255,199,19,0.06) 45%, transparent 70%);
}
/* Pearl dark — charcoal dark anchor sections */
.tx-pearl-dark::before {
content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
background: repeating-linear-gradient(155deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 18px, rgba(255,255,255,0.035) 20px, rgba(255,255,255,0) 22px, rgba(255,255,255,0) 40px, rgba(255,199,19,0.04) 42px, rgba(255,255,255,0) 44px);
}
/* Combo A — linen + luminous center (warm sections) */
.tx-combo-a::before {
content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='none'/%3E%3Crect x='0' y='0' width='1' height='4' fill='rgba(180,160,130,0.16)'/%3E%3Crect x='0' y='0' width='4' height='1' fill='rgba(180,160,130,0.12)'/%3E%3C/svg%3E");
}
.tx-combo-a::after {
content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
background: radial-gradient(ellipse 70% 60% at 60% 30%, rgba(255,255,255,0.45) 0%, transparent 65%);
}
/* ── EYEBROW ── */
.rd-eyebrow {
font-family:'Raleway',sans-serif;
font-weight:800;
font-size:9px;
letter-spacing:5px;
text-transform:uppercase;
display:block;
margin-bottom:14px;
color:var(--gold-deep);
}
.rd-eyebrow--light { color:rgba(250,250,248,0.70); }
.rd-eyebrow--crimson{ color:var(--ruby); }
.rd-eyebrow--teal { color:var(--teal); }
/* ── HEADLINE SCALE ── */
.rd-h1 { font-family:'Cormorant SC',serif; font-weight:500; font-size:56px; line-height:1.1; letter-spacing:1px; }
.rd-h2 { font-family:'Cormorant SC',serif; font-weight:500; font-size:42px; line-height:1.15; letter-spacing:0.5px; }
.rd-h3 { font-family:'Cormorant SC',serif; font-weight:500; font-size:28px; line-height:1.2; letter-spacing:0.5px; }
.rd-h4 { font-family:'Lora',serif; font-weight:600; font-size:20px; line-height:1.35; }
.rd-kicker { font-family:'Cormorant',serif; font-style:italic; font-size:22px; line-height:1.6; }
.rd-body { font-family:'Lora',serif; font-weight:400; font-size:16px; line-height:1.75; }
.rd-small { font-family:'Lora',serif; font-weight:400; font-size:14px; line-height:1.65; }
.rd-legal { font-family:'Raleway',sans-serif; font-weight:400; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--mid-gray); }
/* ── BUTTONS — zero border-radius, 4px letter-spacing ── */
.rd-btn {
font-family:'Raleway',sans-serif;
font-weight:800;
font-size:9px;
letter-spacing:4px;
text-transform:uppercase;
text-decoration:none;
display:inline-block;
padding:20px 40px;
border:1px solid transparent;
border-radius:0;
cursor:pointer;
transition:background .18s ease, color .18s ease, border-color .18s ease;
line-height:1;
}
/* Gold reversal — dark anchors */
.rd-btn--gold-reversal {
background:var(--gold); color:var(--charcoal);
border-color:var(--gold); min-width:280px;
}
.rd-btn--gold-reversal:hover { background:var(--ivory); color:var(--charcoal); border-color:var(--ivory); }
/* Hero reversed — gold BG hero */
.rd-btn--hero-reversed { background:var(--ivory); color:var(--gold-deep); border-color:var(--ivory); }
.rd-btn--hero-reversed:hover { background:var(--ruby); color:#fff; border-color:var(--ruby); }
/* Gold primary — light section main CTA */
.rd-btn--gold-primary { background:var(--gold-deep); color:var(--ivory); border-color:var(--gold-deep); }
.rd-btn--gold-primary:hover { background:var(--ruby); color:#fff; border-color:var(--ruby); }
/* Teal reversed — teal BG section */
.rd-btn--teal-reversed { background:var(--ivory); color:var(--teal); border-color:var(--ivory); }
.rd-btn--teal-reversed:hover { background:var(--gold-deep); color:var(--ivory); border-color:var(--gold-deep); }
/* Outlined ivory — dark/colored BG secondary */
.rd-btn--ghost {
background:transparent; color:rgba(250,250,248,0.8);
border:1px solid rgba(255,255,255,0.35);
}
.rd-btn--ghost:hover { background:rgba(255,255,255,0.08); }
/* ── DIAMOND DIVIDER ── */
.rd-diamond { display:flex; align-items:center; justify-content:center; gap:18px; margin:0; }
.rd-diamond__rule { display:block; width:80px; height:1px; background:var(--gold-deep); opacity:.5; }
.rd-diamond__gem { display:block; width:9px; height:9px; background:var(--gold-deep); transform:rotate(45deg); }
.rd-diamond--dark .rd-diamond__rule { background:var(--gold); opacity:.6; }
.rd-diamond--dark .rd-diamond__gem { background:var(--gold); }
.rd-diamond--wide .rd-diamond__rule { width:120px; }
/* ── STEP MARKER (bordered square, not circle) ── */
.rd-step-marker {
display:flex; align-items:center; justify-content:center;
width:36px; height:36px;
border:1px solid var(--gold-deep);
font-family:'Cormorant SC',serif;
font-weight:500; font-size:18px;
color:var(--gold-deep);
flex-shrink:0;
}
.rd-step-marker--active { background:var(--gold-deep); color:var(--charcoal); border-color:var(--gold-deep); }
.rd-step-connector { display:block; width:1px; height:24px; background:var(--gold-deep); opacity:.35; margin-left:17px; }
/* ── DIAMOND BULLET CHECKLIST ── */
.rd-check-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.rd-check-list li { font-family:'Lora',serif; font-size:15px; line-height:1.65; color:var(--charcoal); padding-left:28px; position:relative; }
.rd-check-list li::before { content:''; position:absolute; left:0; top:7px; width:9px; height:9px; background:var(--gold-deep); transform:rotate(45deg); }
.rd-check-list--teal li::before { background:var(--teal); }
.rd-check-list--crimson li::before { background:var(--ruby); }
.rd-check-list--dark li { color:var(--on-dark-1); }
.rd-check-list--dark li::before { background:var(--gold); }
/* ── ORNAMENT FRAME ── */
.rd-ornament-frame {
position:relative;
border:1px solid var(--gold-deep);
box-shadow:inset 0 0 0 6px rgba(217,163,2,0.12);
padding:52px 48px;
}
.rd-ornament-frame::before {
content:''; position:absolute; top:8px; left:8px;
width:22px; height:22px;
border-top:2px solid var(--gold-deep); border-left:2px solid var(--gold-deep);
}
.rd-ornament-frame::after {
content:''; position:absolute; bottom:8px; right:8px;
width:22px; height:22px;
border-bottom:2px solid var(--gold-deep); border-right:2px solid var(--gold-deep);
}
/* ── GOLD RULES ── */
.rd-rule-gold { height:2px; background:var(--gold-deep); border:none; width:100%; opacity:.6; }
.rd-rule-neutral { height:1px; background:var(--greige); border:none; width:100%; }
/* ── FROM/TO SYSTEM — INVIOLABLE ── */
.rd-from-label { font-family:'Raleway',sans-serif; font-size:9px; font-weight:800; letter-spacing:4px; text-transform:uppercase; color:var(--ruby); }
.rd-to-label { font-family:'Raleway',sans-serif; font-size:9px; font-weight:800; letter-spacing:4px; text-transform:uppercase; color:var(--teal); }
.rd-from-state { font-family:'Lora',serif; font-weight:600; font-size:20px; color:var(--ruby); line-height:1.6; }
.rd-to-state { font-family:'Lora',serif; font-weight:600; font-size:20px; color:var(--teal); line-height:1.6; }
.rd-arrow { font-size:28px; color:var(--gold); font-weight:300; line-height:1; flex-shrink:0; }
/* ── TESTIMONIAL CARD ── */
.rd-testimonial {
background:#fffdf9;
border:1px solid var(--greige);
border-left:3px solid var(--gold-deep);
padding:36px 32px;
}
.rd-testimonial blockquote {
font-family:'Cormorant',serif;
font-style:italic;
font-size:19px;
line-height:1.75;
color:var(--charcoal);
margin:0 0 20px;
}
.rd-testimonial cite { font-family:'Cormorant SC',serif; font-size:16px; font-style:normal; color:var(--charcoal); display:block; }
.rd-testimonial .rd-attr { font-family:'Raleway',sans-serif; font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--teal); margin-top:5px; }
/* ── CROWN CARD (feature cards) ── */
.rd-crown-card {
background:var(--parchment);
border:1px solid rgba(215,160,50,0.14);
padding:40px 32px;
position:relative;
}
.rd-crown-card::before {
content:''; display:block;
width:28px; height:2px;
background:var(--gold-deep);
margin-bottom:20px;
}
/* ── SPEC BAR ── */
.rd-spec-bar {
display:flex; align-items:center; justify-content:center;
flex-wrap:wrap;
font-family:'Raleway',sans-serif; font-size:9px; font-weight:700;
letter-spacing:3px; text-transform:uppercase;
color:var(--charcoal); padding:18px 0;
border-top:1px solid var(--greige); border-bottom:1px solid var(--greige);
}
.rd-spec-bar span { padding:0 16px; }
.rd-spec-bar__pipe { color:var(--gold-deep); font-weight:400; padding:0 !important; }
/* ── PAIN ITEM ── */
.rd-pain-item {
border-left:3px solid var(--ruby);
padding:12px 0 12px 22px;
margin-bottom:10px;
font-family:'Lora',serif; font-size:16px; line-height:1.7; color:var(--charcoal);
}
/* ── MAP CARD ── */
.rd-map-card { background:var(--white); display:flex; align-items:flex-start; gap:20px; padding:24px 28px; }
.rd-map-card--sovereign { border-left:3px solid var(--ruby); }
.rd-map-card--covenant { border-left:3px solid var(--teal); }
.rd-map-card--kingdom { border-left:3px solid var(--gold-deep); }
/* ── VICTORY CARD ── */
.rd-victory-card { background:var(--white); padding:28px 28px 28px 24px; }
.rd-victory-card--sovereign { border-top:3px solid var(--ruby); }
.rd-victory-card--covenant { border-top:3px solid var(--teal); }
.rd-victory-card--kingdom { border-top:3px solid var(--gold-deep); }
/* ── JOURNEY OPTION CARD ── */
.rd-journey-card {
background:var(--white);
border:1px solid var(--greige);
display:flex; flex-direction:column;
padding:36px 32px 32px;
position:relative;
}
.rd-journey-card::before { content:''; display:block; height:3px; width:100%; position:absolute; top:0; left:0; }
.rd-journey-card--sovereign::before { background:var(--ruby); }
.rd-journey-card--covenant::before { background:var(--teal); }
.rd-journey-card--kingdom::before { background:var(--gold-deep); }
.rd-journey-card .rd-card-body { flex:1; }
.rd-journey-card .rd-card-cta { margin-top:28px; }
/* ── FAQ ── */
.rd-faq-item { border-bottom:1px solid var(--greige); }
.rd-faq-q {
font-family:'Lora',serif; font-weight:600; font-size:16px; color:var(--charcoal);
padding:22px 48px 22px 0; cursor:pointer; position:relative;
display:flex; align-items:center; min-height:56px;
}
.rd-faq-q::after {
content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%);
color:var(--gold-deep); font-size:20px; font-weight:300; line-height:1;
font-family:'Cormorant SC',serif;
}
.rd-faq-a { font-family:'Lora',serif; font-size:15px; line-height:1.75; color:var(--charcoal); padding:0 0 22px; }
/* ── INVESTMENT TABLE ── */
.rd-table { width:100%; border-collapse:collapse; }
.rd-table th {
font-family:'Raleway',sans-serif; font-size:8px; font-weight:800;
letter-spacing:4px; text-transform:uppercase;
padding:16px 18px; text-align:left; color:var(--ivory);
}
.rd-table td { padding:16px 18px; border-bottom:1px solid var(--greige); font-family:'Lora',serif; font-size:15px; vertical-align:top; }
.rd-table tr:nth-child(odd) td { background:var(--white); }
.rd-table tr:nth-child(even) td { background:var(--ivory); }
/* ── FORM — underline-only inputs (per catalog) ── */
.rd-form-label { font-family:'Raleway',sans-serif; font-size:8px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--mid-gray); display:block; margin-bottom:8px; }
.rd-form-req { color:var(--ruby); }
.rd-form-input {
font-family:'Lora',serif; font-size:15px; color:var(--charcoal);
background:var(--ivory); border:none;
border-bottom:1px solid var(--greige); border-radius:0;
padding:12px 0; width:100%; outline:none; display:block;
transition:border-color .15s;
}
.rd-form-input:focus { border-bottom:1px solid var(--gold-deep); border-bottom-width:2px; }
.rd-form-textarea { min-height:110px; resize:vertical; font-family:'Lora',serif; font-size:15px; color:var(--charcoal); background:var(--ivory); border:none; border-bottom:1px solid var(--greige); border-radius:0; padding:12px 0; width:100%; outline:none; transition:border-color .15s; }
.rd-form-textarea:focus { border-bottom:2px solid var(--gold-deep); }
/* ── SIMPLIFIED SALES FOOTER ── */
.rd-sales-footer {
background:var(--charcoal); padding:24px 40px; text-align:center;
font-family:'Raleway',sans-serif; font-size:8px; font-weight:700;
letter-spacing:3px; text-transform:uppercase; color:var(--on-dark-2);
}
.rd-sales-footer a { color:var(--gold-deep); text-decoration:none; }
.rd-sales-footer a:hover { color:var(--gold); }
/* ── LAYOUT ── */
.rd-inner { max-width:1140px; margin:0 auto; padding:100px 56px; position:relative; z-index:2; }
.rd-inner--sm { max-width:860px; margin:0 auto; padding:100px 56px; position:relative; z-index:2; }
.rd-inner--xs { max-width:720px; margin:0 auto; padding:100px 56px; position:relative; z-index:2; }
.rd-inner--wide{ max-width:1260px; margin:0 auto; padding:100px 56px; position:relative; z-index:2; }
.rd-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.rd-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }
.rd-grid-2--gap { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.rd-center { text-align:center; }
.rd-cta-row { display:flex; gap:20px; flex-wrap:wrap; margin-top:40px; }
.rd-cta-row--center { justify-content:center; }
.rd-section { position:relative; overflow:hidden; }
@media(max-width:900px){
.rd-h1{font-size:36px} .rd-h2{font-size:30px} .rd-h3{font-size:24px}
.rd-inner,.rd-inner--sm,.rd-inner--xs,.rd-inner--wide{padding:72px 28px}
.rd-grid-3,.rd-grid-2,.rd-grid-2--gap{grid-template-columns:1fr}
.rd-cta-row{flex-direction:column}
.rd-btn{width:100%;text-align:center;min-width:unset}
/* ============================================================
CROWN THYSELF BOOK FUNNEL — REIGN LLC
Build Reference Document — All 10 Pages · 54 Sections
Prefix: .ctb- | Brand Standards v2.4 | March 2026
============================================================ */
/* --- CSS TOKENS --- */
:root {
--ctb-gold: #FFC713;
--ctb-gold-deep: #d9a302;
--ctb-gold-mid: #dfb03a;
--ctb-crimson: #BC2119;
--ctb-crimson-deep: #8B1811;
--ctb-teal: #2D7C83;
--ctb-teal-deep: #1D5259;
--ctb-charcoal: #333333;
--ctb-ivory: #FAFAF8;
--ctb-antique-white: #FBF8F3;
--ctb-parchment: #FDF6E8;
--ctb-warm-cream: #FAF8F5;
--ctb-w7: #f4f0eb;
--ctb-w6: #f5f0e8;
--ctb-pure-white: #FFFFFF;
--ctb-on-dark-head: #FFFFFF;
--ctb-on-dark-body: #e8e0d4;
--ctb-on-dark-sub: #b8a898;
--ctb-gray-warm: #6b6570;
--ctb-divider: #E8E6E3;
}
/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: 'Lora', Georgia, serif; color: var(--ctb-charcoal); background: var(--ctb-ivory); line-height: 1.7; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
/* --- LAYOUT --- */
.ctb-page { min-height: 100vh; }
.ctb-inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.ctb-inner--narrow { max-width: 760px; margin: 0 auto; padding: 0 40px; }
.ctb-inner--wide { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
/* --- PAGE NAV (jump links for build reference) --- */
.ctb-page-nav { background: var(--ctb-charcoal); padding: 16px 40px; position: sticky; top: 0; z-index: 100; border-bottom: 2px solid var(--ctb-gold); }
.ctb-page-nav__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ctb-page-nav__brand { font-family: 'Allura', cursive; font-size: 28px; color: var(--ctb-gold); letter-spacing: 1px; }
.ctb-page-nav__links { display: flex; gap: 12px; flex-wrap: wrap; }
.ctb-page-nav__links a { font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ctb-on-dark-sub); padding: 4px 10px; border: 1px solid #555; border-radius: 2px; transition: all .2s; }
.ctb-page-nav__links a:hover { color: var(--ctb-gold); border-color: var(--ctb-gold); }
/* --- SECTION BACKGROUNDS --- */
.ctb-bg-charcoal { background: var(--ctb-charcoal); }
.ctb-bg-ivory { background: var(--ctb-ivory); }
.ctb-bg-antique-white { background: var(--ctb-antique-white); }
.ctb-bg-parchment { background: var(--ctb-parchment); }
.ctb-bg-warm-cream { background: var(--ctb-warm-cream); }
.ctb-bg-crimson-deep { background: var(--ctb-crimson-deep); }
.ctb-bg-teal { background: var(--ctb-teal); }
.ctb-bg-w7 { background: var(--ctb-w7); }
.ctb-bg-w6 { background: var(--ctb-w6); }
/* --- PAGE DIVIDERS (build reference) --- */
.ctb-page-divider { background: var(--ctb-charcoal); color: var(--ctb-gold); font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; text-align: center; padding: 14px 40px; border-top: 4px solid var(--ctb-gold); border-bottom: 4px solid var(--ctb-gold); }
/* --- SECTION LABELS (build reference) --- */
.ctb-section-label { font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ctb-gold-deep); opacity: 0.6; display: block; margin-bottom: 8px; }
.ctb-bg-charcoal .ctb-section-label,
.ctb-bg-crimson-deep .ctb-section-label,
.ctb-bg-teal .ctb-section-label { color: var(--ctb-on-dark-sub); }
/* --- TYPOGRAPHY --- */
.ctb-h1 { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: clamp(38px, 5vw, 56px); line-height: 1.1; letter-spacing: 1px; color: var(--ctb-charcoal); }
.ctb-h2 { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.2; color: var(--ctb-charcoal); }
.ctb-h3 { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; color: var(--ctb-charcoal); }
.ctb-h4 { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--ctb-charcoal); }
/* Dark bg overrides */
.ctb-bg-charcoal .ctb-h1,
.ctb-bg-charcoal .ctb-h2,
.ctb-bg-charcoal .ctb-h3,
.ctb-bg-charcoal .ctb-h4,
.ctb-bg-crimson-deep .ctb-h1,
.ctb-bg-crimson-deep .ctb-h2,
.ctb-bg-crimson-deep .ctb-h3 { color: var(--ctb-on-dark-head); }
.ctb-bg-teal .ctb-h1,
.ctb-bg-teal .ctb-h2,
.ctb-bg-teal .ctb-h3 { color: var(--ctb-on-dark-head); }
.ctb-eyebrow { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--ctb-gold-deep); display: block; margin-bottom: 12px; }
.ctb-bg-charcoal .ctb-eyebrow,
.ctb-bg-crimson-deep .ctb-eyebrow,
.ctb-bg-teal .ctb-eyebrow { color: var(--ctb-gold); }
.ctb-subhead { font-family: 'Cormorant', serif; font-style: italic; font-weight: 300; font-size: clamp(18px, 2vw, 24px); line-height: 1.5; color: var(--ctb-gray-warm); }
.ctb-bg-charcoal .ctb-subhead,
.ctb-bg-crimson-deep .ctb-subhead,
.ctb-bg-teal .ctb-subhead { color: var(--ctb-on-dark-body); }
.ctb-body { font-family: 'Lora', serif; font-weight: 400; font-size: 17px; line-height: 1.75; color: var(--ctb-charcoal); }
.ctb-body--sm { font-size: 15px; }
.ctb-bg-charcoal .ctb-body,
.ctb-bg-crimson-deep .ctb-body { color: var(--ctb-on-dark-body); }
.ctb-bg-teal .ctb-body { color: var(--ctb-on-dark-body); }
.ctb-queen { font-family: 'Cinzel', serif; font-weight: 500; }
.ctb-reign-script { font-family: 'Allura', cursive; font-size: 1.4em; }
/* --- GOLD RULE DIVIDER --- */
.ctb-rule { width: 60px; height: 2px; background: var(--ctb-gold-deep); margin: 20px 0; }
.ctb-rule--center { margin: 20px auto; }
.ctb-bg-charcoal .ctb-rule,
.ctb-bg-crimson-deep .ctb-rule,
.ctb-bg-teal .ctb-rule { background: var(--ctb-gold); }
/* --- BUTTONS --- */
.ctb-btn { display: inline-block; font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; padding: 16px 36px; border-radius: 2px; transition: all .25s; cursor: pointer; border: none; }
.ctb-btn--primary { background: var(--ctb-gold); color: var(--ctb-charcoal); }
.ctb-btn--primary:hover { background: var(--ctb-gold-deep); }
.ctb-btn--outline-gold { background: transparent; color: var(--ctb-gold); border: 2px solid var(--ctb-gold); }
.ctb-btn--outline-gold:hover { background: var(--ctb-gold); color: var(--ctb-charcoal); }
.ctb-btn--crimson { background: var(--ctb-crimson); color: var(--ctb-on-dark-head); }
.ctb-btn--crimson:hover { background: var(--ctb-crimson-deep); }
.ctb-btn--teal { background: var(--ctb-teal); color: var(--ctb-on-dark-head); }
.ctb-btn--teal:hover { background: var(--ctb-teal-deep); }
.ctb-btn--light { background: var(--ctb-ivory); color: var(--ctb-charcoal); }
.ctb-btn--light:hover { background: var(--ctb-parchment); }
/* --- SECTION PADDING --- */
.ctb-section { padding: 100px 0; }
.ctb-section--sm { padding: 60px 0; }
.ctb-section--lg { padding: 140px 0; }
.ctb-section--hero { padding: 120px 0 100px; }
/* --- HERO GRID (2 col) --- */
.ctb-hero__grid { display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: center; }
.ctb-hero__grid--reverse { grid-template-columns: 420px 1fr; }
/* --- BOOK MOCKUP --- */
.ctb-book-mockup { background: linear-gradient(145deg, var(--ctb-charcoal) 0%, #1a1a1a 100%); border-radius: 4px 12px 12px 4px; aspect-ratio: 3/4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 30px; text-align: center; box-shadow: -4px 0 0 #111, 8px 8px 30px rgba(0,0,0,0.5), 0 20px 60px rgba(0,0,0,0.3); border-left: 6px solid #111; position: relative; overflow: hidden; }
.ctb-book-mockup::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,199,19,0.08) 0%, transparent 60%); }
.ctb-book-mockup__title { font-family: 'Cinzel', serif; font-weight: 500; font-size: 22px; color: var(--ctb-gold); letter-spacing: 2px; line-height: 1.3; margin-bottom: 12px; position: relative; }
.ctb-book-mockup__sub { font-family: 'Cormorant', serif; font-style: italic; font-size: 13px; color: var(--ctb-on-dark-body); letter-spacing: 1px; position: relative; }
.ctb-book-mockup__rule { width: 40px; height: 1px; background: var(--ctb-gold); margin: 16px auto; position: relative; }
.ctb-book-mockup__author { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ctb-on-dark-sub); position: relative; }
.ctb-book-mockup__accent { font-family: 'Allura', cursive; font-size: 36px; color: var(--ctb-gold); opacity: 0.4; position: absolute; bottom: 20px; right: 24px; }
/* --- RETAILER BUTTONS --- */
.ctb-retailers { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.ctb-retailer-btn { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 12px 20px; border: 1px solid rgba(255,199,19,0.4); color: var(--ctb-gold); border-radius: 2px; transition: all .2s; }
.ctb-retailer-btn:hover { background: var(--ctb-gold); color: var(--ctb-charcoal); border-color: var(--ctb-gold); }
/* --- FROM / TO BLOCK --- */
.ctb-from-to { display: flex; gap: 0; align-items: stretch; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.ctb-from-block { background: var(--ctb-crimson); padding: 40px 36px; flex: 1; }
.ctb-to-block { background: var(--ctb-teal); padding: 40px 36px; flex: 1; }
.ctb-arrow-block { background: var(--ctb-charcoal); display: flex; align-items: center; justify-content: center; padding: 0 20px; min-width: 60px; }
.ctb-from-to__label { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 16px; display: block; }
.ctb-from-to__text { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 20px; color: #fff; line-height: 1.4; }
.ctb-arrow-icon { color: var(--ctb-gold); font-size: 28px; }
/* --- CARDS --- */
.ctb-card { background: var(--ctb-pure-white); border-radius: 4px; padding: 36px 32px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); border-top: 3px solid var(--ctb-gold-deep); }
.ctb-card--teal { border-top-color: var(--ctb-teal); }
.ctb-card--crimson { border-top-color: var(--ctb-crimson); }
.ctb-card--gold { border-top-color: var(--ctb-gold); border-top-width: 4px; }
/* --- GRIDS --- */
.ctb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ctb-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ctb-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
/* --- TESTIMONIAL CARD --- */
.ctb-testimonial { background: var(--ctb-pure-white); border-radius: 4px; padding: 36px 32px; box-shadow: 0 2px 16px rgba(0,0,0,0.05); border-left: 3px solid var(--ctb-gold-deep); }
.ctb-testimonial__quote { font-family: 'Cormorant', serif; font-style: italic; font-size: 18px; line-height: 1.7; color: var(--ctb-charcoal); margin-bottom: 20px; }
.ctb-testimonial__quote::before { content: '\201C'; font-size: 48px; color: var(--ctb-gold-deep); line-height: 0; vertical-align: -18px; margin-right: 4px; font-family: 'Cormorant', serif; }
.ctb-testimonial__name { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ctb-teal); }
.ctb-testimonial__title { font-family: 'Lora', serif; font-size: 13px; color: var(--ctb-gray-warm); margin-top: 4px; }
/* --- PRICING CARD --- */
.ctb-pricing-card { background: var(--ctb-pure-white); border-radius: 4px; padding: 48px 36px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,0.08); border: 1px solid var(--ctb-divider); position: relative; }
.ctb-pricing-card--featured { border: 2px solid var(--ctb-gold-deep); }
.ctb-pricing-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--ctb-gold); color: var(--ctb-charcoal); font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 6px 16px; border-radius: 2px; white-space: nowrap; }
.ctb-pricing-card__tier { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--ctb-gold-deep); margin-bottom: 8px; }
.ctb-pricing-card__name { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 28px; color: var(--ctb-charcoal); margin-bottom: 24px; }
.ctb-pricing-card__price { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 52px; color: var(--ctb-charcoal); line-height: 1; }
.ctb-pricing-card__price-note { font-family: 'Lora', serif; font-size: 14px; color: var(--ctb-gray-warm); margin-top: 6px; }
.ctb-pricing-card__features { list-style: none; margin: 28px 0; text-align: left; }
.ctb-pricing-card__features li { font-family: 'Lora', serif; font-size: 15px; color: var(--ctb-charcoal); padding: 8px 0; border-bottom: 1px solid var(--ctb-divider); display: flex; gap: 10px; }
.ctb-pricing-card__features li::before { content: '—'; color: var(--ctb-gold-deep); font-weight: 700; flex-shrink: 0; }
/* --- FORM ELEMENTS --- */
.ctb-form-card { background: var(--ctb-pure-white); border-radius: 4px; padding: 48px 44px; box-shadow: 0 4px 32px rgba(0,0,0,0.10); border-top: 4px solid var(--ctb-gold); }
.ctb-form-row { margin-bottom: 20px; }
.ctb-form-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ctb-label { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ctb-charcoal); display: block; margin-bottom: 8px; }
.ctb-input,
.ctb-select { width: 100%; font-family: 'Lora', serif; font-size: 16px; padding: 14px 18px; border: 1px solid var(--ctb-divider); border-radius: 2px; background: var(--ctb-ivory); color: var(--ctb-charcoal); outline: none; transition: border-color .2s; }
.ctb-input:focus,
.ctb-select:focus { border-color: var(--ctb-gold-deep); }
.ctb-textarea { width: 100%; font-family: 'Lora', serif; font-size: 16px; padding: 14px 18px; border: 1px solid var(--ctb-divider); border-radius: 2px; background: var(--ctb-ivory); color: var(--ctb-charcoal); outline: none; resize: vertical; min-height: 140px; transition: border-color .2s; }
.ctb-textarea:focus { border-color: var(--ctb-gold-deep); }
.ctb-upload-area { border: 2px dashed var(--ctb-gold-deep); border-radius: 4px; padding: 48px 32px; text-align: center; background: var(--ctb-parchment); cursor: pointer; transition: all .2s; }
.ctb-upload-area:hover { border-color: var(--ctb-gold); background: var(--ctb-antique-white); }
.ctb-upload-area__icon { font-size: 36px; margin-bottom: 12px; color: var(--ctb-gold-deep); }
.ctb-upload-area__text { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ctb-charcoal); margin-bottom: 8px; }
.ctb-upload-area__sub { font-family: 'Lora', serif; font-size: 13px; color: var(--ctb-gray-warm); }
.ctb-form-note { font-family: 'Lora', serif; font-size: 13px; color: var(--ctb-gray-warm); margin-top: 14px; text-align: center; }
.ctb-form-note a { color: var(--ctb-teal); text-decoration: underline; }
/* --- COUNTDOWN TIMER --- */
.ctb-countdown { background: var(--ctb-charcoal); padding: 28px 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 2px solid var(--ctb-gold); border-bottom: 2px solid var(--ctb-gold); }
.ctb-countdown__label { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ctb-gold); margin-right: 20px; }
.ctb-countdown__unit { text-align: center; }
.ctb-countdown__num { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 40px; color: var(--ctb-on-dark-head); line-height: 1; display: block; }
.ctb-countdown__unit-label { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ctb-on-dark-sub); display: block; margin-top: 4px; }
.ctb-countdown__sep { font-family: 'Cormorant SC', serif; font-size: 36px; color: var(--ctb-gold); align-self: flex-start; padding-top: 4px; }
/* --- GUARANTEE BLOCK --- */
.ctb-guarantee { display: flex; gap: 28px; align-items: flex-start; background: var(--ctb-parchment); border: 1px solid var(--ctb-gold-mid); border-radius: 4px; padding: 32px 36px; margin-top: 32px; }
.ctb-guarantee__icon { font-size: 48px; flex-shrink: 0; color: var(--ctb-gold-deep); }
.ctb-guarantee__title { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 22px; color: var(--ctb-charcoal); margin-bottom: 8px; }
.ctb-guarantee__body { font-family: 'Lora', serif; font-size: 15px; color: var(--ctb-gray-warm); line-height: 1.7; }
/* --- ASCENSION PATHS --- */
.ctb-paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ctb-path-card { background: var(--ctb-pure-white); border-radius: 4px; padding: 40px 32px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); text-align: center; border-bottom: 4px solid transparent; transition: transform .2s; }
.ctb-path-card:hover { transform: translateY(-4px); }
.ctb-path-card--gold { border-bottom-color: var(--ctb-gold-deep); }
.ctb-path-card--teal { border-bottom-color: var(--ctb-teal); }
.ctb-path-card--crimson { border-bottom-color: var(--ctb-crimson); }
.ctb-path-card__icon { font-size: 36px; margin-bottom: 16px; }
.ctb-path-card__tier { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; }
.ctb-path-card--gold .ctb-path-card__tier { color: var(--ctb-gold-deep); }
.ctb-path-card--teal .ctb-path-card__tier { color: var(--ctb-teal); }
.ctb-path-card--crimson .ctb-path-card__tier { color: var(--ctb-crimson); }
/* --- CURRICULUM ITEMS --- */
.ctb-curriculum { list-style: none; }
.ctb-curriculum-item { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--ctb-divider); align-items: flex-start; }
.ctb-curriculum-item__num { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 32px; color: var(--ctb-gold-deep); line-height: 1; min-width: 44px; }
.ctb-curriculum-item__title { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 20px; color: var(--ctb-charcoal); margin-bottom: 6px; }
.ctb-curriculum-item__desc { font-family: 'Lora', serif; font-size: 15px; color: var(--ctb-gray-warm); line-height: 1.65; }
/* --- DISCOVER GRID (What's Inside) --- */
.ctb-discover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ctb-discover-item { display: flex; gap: 16px; align-items: flex-start; }
.ctb-discover-item__icon { width: 44px; height: 44px; background: var(--ctb-parchment); border: 1px solid var(--ctb-gold-mid); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.ctb-discover-item__title { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 17px; color: var(--ctb-charcoal); margin-bottom: 4px; }
.ctb-discover-item__desc { font-family: 'Lora', serif; font-size: 14px; color: var(--ctb-gray-warm); line-height: 1.6; }
/* --- BONUS GRID --- */
.ctb-bonus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ctb-bonus-item { display: flex; gap: 16px; background: var(--ctb-pure-white); padding: 24px 20px; border-radius: 4px; border-left: 3px solid var(--ctb-gold-deep); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.ctb-bonus-item__num { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 28px; color: var(--ctb-gold-deep); line-height: 1; min-width: 32px; }
.ctb-bonus-item__title { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: 17px; color: var(--ctb-charcoal); margin-bottom: 4px; }
.ctb-bonus-item__desc { font-family: 'Lora', serif; font-size: 14px; color: var(--ctb-gray-warm); line-height: 1.6; }
/* --- ENDORSEMENTS --- */
.ctb-endorsements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ctb-endorsement { background: var(--ctb-pure-white); padding: 28px 24px; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); text-align: center; border-top: 2px solid var(--ctb-gold-deep); }
.ctb-endorsement__quote { font-family: 'Cormorant', serif; font-style: italic; font-size: 16px; line-height: 1.65; color: var(--ctb-charcoal); margin-bottom: 16px; }
.ctb-endorsement__name { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ctb-teal); }
.ctb-endorsement__cred { font-family: 'Lora', serif; font-size: 12px; color: var(--ctb-gray-warm); margin-top: 4px; }
/* --- RACHEL SECTION --- */
.ctb-rachel-grid { display: grid; grid-template-columns: 360px 1fr; gap: 72px; align-items: center; }
.ctb-rachel-photo { background: linear-gradient(145deg, var(--ctb-antique-white), var(--ctb-parchment)); border-radius: 4px; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ctb-divider); position: relative; overflow: hidden; }
.ctb-rachel-photo__placeholder { font-family: 'Raleway', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ctb-gray-warm); text-align: center; }
.ctb-rachel-photo__accent { font-family: 'Allura', cursive; font-size: 72px; color: var(--ctb-gold-deep); opacity: 0.3; position: absolute; bottom: 20px; right: 20px; }
.ctb-credential-list { list-style: none; margin-top: 20px; }
.ctb-credential-list li { font-family: 'Lora', serif; font-size: 15px; color: var(--ctb-gray-warm); padding: 6px 0; border-bottom: 1px solid var(--ctb-divider); display: flex; gap: 10px; }
.ctb-credential-list li::before { content: '—'; color: var(--ctb-gold-deep); font-weight: 700; }
/* --- EMBED PLACEHOLDER --- */
.ctb-embed-placeholder { background: var(--ctb-antique-white); border: 2px dashed var(--ctb-gold-mid); border-radius: 4px; padding: 60px 40px; text-align: center; }
.ctb-embed-placeholder__label { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ctb-gold-deep); margin-bottom: 8px; }
.ctb-embed-placeholder__desc { font-family: 'Lora', serif; font-size: 15px; color: var(--ctb-gray-warm); }
/* --- BUILD NOTES --- */
.ctb-build-note { background: #fffbe6; border-left: 4px solid #f0ad00; padding: 12px 18px; margin: 16px 0; border-radius: 0 4px 4px 0; font-family: 'Courier New', monospace; font-size: 13px; color: #5c4400; line-height: 1.5; }
.ctb-build-note strong { color: #3a2b00; }
/* --- SIMPLE FOOTER --- */
.ctb-footer { background: var(--ctb-charcoal); padding: 60px 0 40px; }
.ctb-footer__inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; text-align: center; }
.ctb-footer__brand { font-family: 'Allura', cursive; font-size: 42px; color: var(--ctb-gold); margin-bottom: 8px; }
.ctb-footer__tagline { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--ctb-on-dark-sub); margin-bottom: 28px; }
.ctb-footer__nav { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.ctb-footer__nav a { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--ctb-on-dark-sub); transition: color .2s; }
.ctb-footer__nav a:hover { color: var(--ctb-gold); }
.ctb-footer__legal { font-family: 'Lora', serif; font-size: 12px; color: var(--ctb-on-dark-sub); opacity: 0.6; }
/* --- TEXT ALIGN UTILITIES --- */
.ctb-text-center { text-align: center; }
.ctb-text-center .ctb-rule { margin-left: auto; margin-right: auto; }
.ctb-mt-8 { margin-top: 8px; }
.ctb-mt-16 { margin-top: 16px; }
.ctb-mt-24 { margin-top: 24px; }
.ctb-mt-32 { margin-top: 32px; }
.ctb-mt-48 { margin-top: 48px; }
.ctb-mt-64 { margin-top: 64px; }
.ctb-mb-8 { margin-bottom: 8px; }
.ctb-mb-16 { margin-bottom: 16px; }
.ctb-mb-32 { margin-bottom: 32px; }
.ctb-mb-48 { margin-bottom: 48px; }
/* --- RESPONSIVE --- */
@media (max-width: 960px) {
.ctb-hero__grid,
.ctb-hero__grid--reverse { grid-template-columns: 1fr; gap: 48px; }
.ctb-hero__grid--reverse .ctb-book-mockup-wrap { order: -1; }
.ctb-book-mockup { max-width: 280px; margin: 0 auto; }
.ctb-grid-3, .ctb-discover-grid, .ctb-endorsements-grid, .ctb-paths-grid { grid-template-columns: 1fr 1fr; }
.ctb-grid-4 { grid-template-columns: 1fr 1fr; }
.ctb-rachel-grid { grid-template-columns: 1fr; }
.ctb-rachel-photo { max-width: 280px; margin: 0 auto; aspect-ratio: 1; }
.ctb-from-to { flex-direction: column; }
.ctb-arrow-block { padding: 16px; min-width: auto; transform: rotate(90deg); align-self: center; }
}
@media (max-width: 620px) {
.ctb-inner, .ctb-inner--narrow, .ctb-inner--wide { padding: 0 20px; }
.ctb-section { padding: 72px 0; }
.ctb-section--hero { padding: 80px 0 60px; }
.ctb-grid-3, .ctb-discover-grid, .ctb-endorsements-grid, .ctb-paths-grid,
.ctb-grid-4, .ctb-grid-2, .ctb-bonus-grid { grid-template-columns: 1fr; }
.ctb-form-row--2col { grid-template-columns: 1fr; }
.ctb-form-card { padding: 32px 24px; }
.ctb-h1 { font-size: 32px; }
.ctb-h2 { font-size: 26px; }
.ctb-retailers { flex-direction: column; }
.ctb-countdown { flex-wrap: wrap; gap: 16px; }
}
/* ── REIGN QUIZ FUNNEL — EYEBROW STANDARDIZATION v5.2 ── */
.sqql-s1-eyebrow, .sqql-s2-eyebrow, .sqql-s3-cred-label,
.sqql-s4-eyebrow, .sqql-s5-eyebrow,
.sqr-s1-eyebrow, .sqr-s2-eyebrow, .sqr-s3-eyebrow,
.sqr-s4-eyebrow, .sqr-s5-eyebrow,
.cqql-s1-eyebrow, .cqql-s2-eyebrow, .cqql-s3-label,
.cqql-s4-eyebrow, .cqql-s5-eyebrow,
.cqr-s1-eyebrow, .cqr-s2-eyebrow, .cqr-s3-eyebrow,
.cqr-s4-eyebrow, .cqr-s5-eyebrow {
font-size: 16px !important;
letter-spacing: 0.18em !important;
font-weight: 800 !important;
}
/* ── REIGN SQ QUIZ — KIT FORM OVERRIDE ── */
.sqql-optin .formkit-form{background:transparent !important;box-shadow:none !important;border:none !important;padding:0 !important}
.sqql-optin .formkit-input{border:1px solid #d9a302 !important;border-radius:0 !important;font-family:'Lora',Georgia,serif !important;font-size:15px !important;color:#333333 !important;background:#FFFFFF !important;padding:14px 18px !important}
.sqql-optin .formkit-submit{background:#333333 !important;color:#FAFAF8 !important;font-family:'Raleway',sans-serif !important;font-weight:700 !important;font-size:12px !important;letter-spacing:.18em !important;text-transform:uppercase !important;border-radius:0 !important;padding:18px 48px !important;border:none !important}
.sqql-optin .formkit-submit:hover{background:#222222 !important}
.sqql-optin .formkit-field{margin-bottom:12px !important}/* End custom CSS */