/** Shopify CDN: Minification failed Line 970:886 Unexpected "}" **/ /* ========================================================================== GLOWBITE DESIGN SYSTEM — TOKENS glowbite-tokens.css Version 1.0 | Built April 2026 ========================================================================== */ /* -------------------------------------------------------------------------- IMPORT GOOGLE FONTS Cormorant Garamond (editorial headlines) + DM Sans (body / UI) -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); :root { /* ======================================================================== COLOR TOKENS — EMBER RAMP Workhorse palette from cream backgrounds to dark espresso hero sections ======================================================================== */ /* Cream — page backgrounds, lightest card fills */ --gb-color-cream: #FDF6EF; /* Blush — secondary card fills, soft section backgrounds */ --gb-color-blush: #F5E6D8; /* Sand — subtle borders, dividers, hover states */ --gb-color-sand: #E8D0B8; /* Amber — PRIMARY ACTION COLOR: buttons, accents, stat numbers, links */ --gb-color-amber: #C06B2A; --gb-color-amber-hover: #A85A20; --gb-color-amber-light: #D4854A; /* Espresso — dark mode hero, nav bar, high-contrast text sections */ --gb-color-espresso: #3D1F0D; /* Midnight — darkest dark, nav background, footers, true dark mode */ --gb-color-midnight: #1A0F09; /* ======================================================================== COLOR TOKENS — SOL RAMP Accent only: pricing badges, highlights, "save" indicators, stars ======================================================================== */ /* Honey — warm gold accent, pricing highlights */ --gb-color-honey: #E8A830; /* Gold — bright accent, savings badges, star ratings */ --gb-color-gold: #F2C042; /* Gold Light — subtle tints for badge backgrounds */ --gb-color-gold-light: #FBE9A8; /* ======================================================================== COLOR TOKENS — ASH RAMP All neutral text, borders, placeholders, disabled states ======================================================================== */ /* Ash 900 — primary body text on light backgrounds */ --gb-color-ash-900: #1C1917; /* Ash 700 — secondary text, subheadings on light bg */ --gb-color-ash-700: #44403C; /* Ash 500 — tertiary text, meta info, placeholders */ --gb-color-ash-500: #78716C; /* Ash 300 — borders, dividers, input outlines */ --gb-color-ash-300: #D6D3D1; /* Ash 100 — subtle backgrounds, table stripes */ --gb-color-ash-100: #F5F5F4; /* White */ --gb-color-white: #FFFFFF; /* ======================================================================== SEMANTIC COLOR ALIASES Map abstract tokens to functional roles for easy theming ======================================================================== */ /* Backgrounds */ --gb-bg-page: var(--gb-color-cream); --gb-bg-card: var(--gb-color-white); --gb-bg-card-alt: var(--gb-color-blush); --gb-bg-section-dark: var(--gb-color-midnight); --gb-bg-section-warm: var(--gb-color-espresso); --gb-bg-subtle: var(--gb-color-ash-100); /* Text */ --gb-text-primary: var(--gb-color-ash-900); --gb-text-secondary: var(--gb-color-ash-700); --gb-text-muted: var(--gb-color-ash-500); --gb-text-on-dark: var(--gb-color-cream); --gb-text-on-dark-muted: var(--gb-color-sand); --gb-text-accent: var(--gb-color-amber); /* Borders */ --gb-border-default: var(--gb-color-ash-300); --gb-border-warm: var(--gb-color-sand); --gb-border-focus: var(--gb-color-amber); /* Actions / Interactive */ --gb-action-primary: var(--gb-color-amber); --gb-action-primary-hover: var(--gb-color-amber-hover); --gb-action-primary-text: var(--gb-color-white); /* Badges / Highlights */ --gb-badge-bg: var(--gb-color-gold-light); --gb-badge-text: var(--gb-color-espresso); --gb-badge-bg-dark: var(--gb-color-honey); --gb-badge-text-dark: var(--gb-color-midnight); /* ======================================================================== TYPOGRAPHY TOKENS Cormorant Garamond = headlines | DM Sans = body & UI ======================================================================== */ /* Font Families */ --gb-font-display: 'Cormorant Garamond', Georgia, serif; --gb-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --gb-font-mono: 'SF Mono', 'Fira Code', Consolas, monospace; /* Font Weights */ --gb-weight-light: 300; --gb-weight-regular: 400; --gb-weight-medium: 500; --gb-weight-semibold: 600; --gb-weight-bold: 700; /* Font Sizes — Display (Cormorant Garamond) */ --gb-text-display-xl: clamp(52px, 6vw, 80px); /* Hero headline */ --gb-text-display-lg: clamp(40px, 4.5vw, 64px); /* Section headline */ --gb-text-display-md: clamp(32px, 3.5vw, 48px); /* Card headline */ --gb-text-display-sm: clamp(24px, 2.5vw, 36px); /* Sub-headline */ /* Font Sizes — Body (DM Sans) */ --gb-text-xl: 20px; /* Lead / intro paragraph */ --gb-text-lg: 18px; /* Large body */ --gb-text-md: 16px; /* Default body */ --gb-text-sm: 14px; /* Secondary text, labels */ --gb-text-xs: 12px; /* Captions, legal, meta */ /* Line Heights */ --gb-leading-tight: 1.1; /* Display headlines */ --gb-leading-snug: 1.3; /* Sub-headlines */ --gb-leading-normal: 1.6; /* Body copy */ --gb-leading-relaxed: 1.8; /* Long-form prose */ /* Letter Spacing */ --gb-tracking-tight: -0.02em; /* Large display text */ --gb-tracking-normal: 0; --gb-tracking-wide: 0.05em; /* All-caps labels, eyebrows */ --gb-tracking-wider: 0.1em; /* Pill badges */ /* ======================================================================== SPACING TOKENS — 8pt BASE GRID Every value is a multiple of 8px ======================================================================== */ --gb-space-1: 4px; /* 0.5x — micro gaps */ --gb-space-2: 8px; /* 1x — tight gaps, icon padding */ --gb-space-3: 12px; /* 1.5x — small inner padding */ --gb-space-4: 16px; /* 2x — component gaps (default) */ --gb-space-5: 20px; /* 2.5x */ --gb-space-6: 24px; /* 3x — card inner padding */ --gb-space-8: 32px; /* 4x — medium section gap */ --gb-space-10: 40px; /* 5x */ --gb-space-12: 48px; /* 6x — mobile section padding */ --gb-space-16: 64px; /* 8x — desktop component breathing room */ --gb-space-20: 80px; /* 10x */ --gb-space-24: 96px; /* 12x — desktop section padding */ --gb-space-32: 128px; /* 16x — hero vertical rhythm */ /* Layout Aliases */ --gb-section-padding-desktop: var(--gb-space-24); /* 96px */ --gb-section-padding-mobile: var(--gb-space-12); /* 48px */ --gb-card-padding: var(--gb-space-6); /* 24px */ --gb-component-gap: var(--gb-space-4); /* 16px */ --gb-content-max-width: 1280px; --gb-content-narrow-width: 760px; /* ======================================================================== BORDER RADIUS TOKENS Pill on CTAs, soft on cards ======================================================================== */ --gb-radius-none: 0; --gb-radius-sm: 4px; --gb-radius-md: 8px; --gb-radius-lg: 12px; --gb-radius-xl: 16px; --gb-radius-2xl: 24px; --gb-radius-pill: 9999px; /* Used on ALL CTA buttons */ /* ======================================================================== SHADOW TOKENS Warm-tinted shadows that stay on-brand ======================================================================== */ --gb-shadow-xs: 0 1px 2px rgba(26, 15, 9, 0.06); --gb-shadow-sm: 0 2px 8px rgba(26, 15, 9, 0.08); --gb-shadow-md: 0 4px 16px rgba(26, 15, 9, 0.10); --gb-shadow-lg: 0 8px 32px rgba(26, 15, 9, 0.12); --gb-shadow-xl: 0 16px 48px rgba(26, 15, 9, 0.14); /* Amber glow — for hover states on primary buttons */ --gb-shadow-glow: 0 4px 20px rgba(192, 107, 42, 0.35); /* ======================================================================== TRANSITION TOKENS Consistent motion across all interactive elements ======================================================================== */ --gb-transition-fast: 150ms ease; --gb-transition-base: 250ms ease; --gb-transition-slow: 400ms ease; --gb-transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ======================================================================== Z-INDEX TOKENS Predictable stacking order ======================================================================== */ --gb-z-base: 0; --gb-z-raised: 10; --gb-z-dropdown: 100; --gb-z-sticky: 200; --gb-z-overlay: 300; --gb-z-modal: 400; --gb-z-toast: 500; --gb-z-tooltip: 600; } /* ========================================================================== GLOBAL BASE STYLES Apply token system to the base document ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--gb-font-body); font-size: var(--gb-text-md); font-weight: var(--gb-weight-regular); line-height: var(--gb-leading-normal); color: var(--gb-text-primary); background-color: var(--gb-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== TYPOGRAPHY UTILITY CLASSES ========================================================================== */ /* Display / Headline styles — Cormorant Garamond */ .gb-display-xl { font-family: var(--gb-font-display); font-size: var(--gb-text-display-xl); font-weight: var(--gb-weight-semibold); line-height: var(--gb-leading-tight); letter-spacing: var(--gb-tracking-tight); color: var(--gb-text-primary); } .gb-display-lg { font-family: var(--gb-font-display); font-size: var(--gb-text-display-lg); font-weight: var(--gb-weight-semibold); line-height: var(--gb-leading-tight); letter-spacing: var(--gb-tracking-tight); } .gb-display-md { font-family: var(--gb-font-display); font-size: var(--gb-text-display-md); font-weight: var(--gb-weight-medium); line-height: var(--gb-leading-snug); } .gb-display-sm { font-family: var(--gb-font-display); font-size: var(--gb-text-display-sm); font-weight: var(--gb-weight-medium); line-height: var(--gb-leading-snug); } /* Italic display — editorial accent */ .gb-display-italic { font-style: italic; color: var(--gb-text-accent); } /* Eyebrow — small all-caps label above headlines */ .gb-eyebrow { font-family: var(--gb-font-body); font-size: var(--gb-text-xs); font-weight: var(--gb-weight-semibold); letter-spacing: var(--gb-tracking-wide); text-transform: uppercase; color: var(--gb-text-accent); } /* Body text utility classes */ .gb-text-xl { font-size: var(--gb-text-xl); line-height: var(--gb-leading-relaxed); } .gb-text-lg { font-size: var(--gb-text-lg); line-height: var(--gb-leading-normal); } .gb-text-md { font-size: var(--gb-text-md); line-height: var(--gb-leading-normal); } .gb-text-sm { font-size: var(--gb-text-sm); line-height: var(--gb-leading-normal); } .gb-text-xs { font-size: var(--gb-text-xs); line-height: var(--gb-leading-normal); } /* Color utilities */ .gb-text-primary { color: var(--gb-text-primary); } .gb-text-secondary { color: var(--gb-text-secondary); } .gb-text-muted { color: var(--gb-text-muted); } .gb-text-accent { color: var(--gb-text-accent); } .gb-text-on-dark { color: var(--gb-text-on-dark); } /* ========================================================================== COMPONENT TOKENS — BUTTONS All CTAs use pill border radius ========================================================================== */ .gb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gb-space-2); padding: var(--gb-space-3) var(--gb-space-8); border-radius: var(--gb-radius-pill); font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: var(--gb-weight-semibold); letter-spacing: var(--gb-tracking-wide); text-transform: uppercase; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: all var(--gb-transition-base); white-space: nowrap; } /* Primary — amber fill */ .gb-btn-primary { background-color: var(--gb-action-primary); color: var(--gb-action-primary-text); border-color: var(--gb-action-primary); } .gb-btn-primary:hover { background-color: var(--gb-action-primary-hover); border-color: var(--gb-action-primary-hover); box-shadow: var(--gb-shadow-glow); transform: translateY(-1px); } /* Secondary — outline style */ .gb-btn-secondary { background-color: transparent; color: var(--gb-action-primary); border-color: var(--gb-action-primary); } .gb-btn-secondary:hover { background-color: var(--gb-action-primary); color: var(--gb-action-primary-text); box-shadow: var(--gb-shadow-glow); transform: translateY(-1px); } /* Ghost — for dark section backgrounds */ .gb-btn-ghost { background-color: transparent; color: var(--gb-text-on-dark); border-color: var(--gb-text-on-dark); } .gb-btn-ghost:hover { background-color: var(--gb-color-white); color: var(--gb-color-midnight); } /* Button sizes */ .gb-btn-lg { padding: var(--gb-space-4) var(--gb-space-10); font-size: var(--gb-text-md); } .gb-btn-sm { padding: var(--gb-space-2) var(--gb-space-5); font-size: var(--gb-text-xs); } /* ========================================================================== COMPONENT TOKENS — CARDS ========================================================================== */ .gb-card { background-color: var(--gb-bg-card); border-radius: var(--gb-radius-xl); padding: var(--gb-card-padding); box-shadow: var(--gb-shadow-sm); transition: box-shadow var(--gb-transition-base), transform var(--gb-transition-base); } .gb-card:hover { box-shadow: var(--gb-shadow-md); transform: translateY(-2px); } .gb-card-warm { background-color: var(--gb-bg-card-alt); border: 1px solid var(--gb-border-warm); } .gb-card-dark { background-color: var(--gb-bg-section-warm); color: var(--gb-text-on-dark); } /* ========================================================================== COMPONENT TOKENS — BADGES & PILLS Sol ramp — pricing, savings, highlights ========================================================================== */ .gb-badge { display: inline-flex; align-items: center; padding: var(--gb-space-1) var(--gb-space-3); border-radius: var(--gb-radius-pill); font-family: var(--gb-font-body); font-size: var(--gb-text-xs); font-weight: var(--gb-weight-semibold); letter-spacing: var(--gb-tracking-wider); text-transform: uppercase; background-color: var(--gb-badge-bg); color: var(--gb-badge-text); } .gb-badge-gold { background-color: var(--gb-color-gold); color: var(--gb-color-midnight); } .gb-badge-amber { background-color: var(--gb-color-amber); color: var(--gb-color-white); } .gb-badge-dark { background-color: var(--gb-badge-bg-dark); color: var(--gb-badge-text-dark); } /* ========================================================================== COMPONENT TOKENS — FORM ELEMENTS ========================================================================== */ .gb-input { width: 100%; padding: var(--gb-space-3) var(--gb-space-4); border: 1px solid var(--gb-border-default); border-radius: var(--gb-radius-md); font-family: var(--gb-font-body); font-size: var(--gb-text-md); color: var(--gb-text-primary); background-color: var(--gb-color-white); transition: border-color var(--gb-transition-fast), box-shadow var(--gb-transition-fast); outline: none; } .gb-input:focus { border-color: var(--gb-border-focus); box-shadow: 0 0 0 3px rgba(192, 107, 42, 0.15); } .gb-input::placeholder { color: var(--gb-text-muted); } /* ========================================================================== LAYOUT UTILITY CLASSES ========================================================================== */ /* Content containers */ .gb-container { width: 100%; max-width: var(--gb-content-max-width); margin-left: auto; margin-right: auto; padding-left: var(--gb-space-6); padding-right: var(--gb-space-6); } .gb-container-narrow { max-width: var(--gb-content-narrow-width); margin-left: auto; margin-right: auto; padding-left: var(--gb-space-6); padding-right: var(--gb-space-6); } /* Section spacing */ .gb-section { padding-top: var(--gb-section-padding-desktop); padding-bottom: var(--gb-section-padding-desktop); } .gb-section-sm { padding-top: var(--gb-space-16); padding-bottom: var(--gb-space-16); } @media screen and (max-width: 768px) { .gb-section { padding-top: var(--gb-section-padding-mobile); padding-bottom: var(--gb-section-padding-mobile); } .gb-section-sm { padding-top: var(--gb-space-12); padding-bottom: var(--gb-space-12); } .gb-container, .gb-container-narrow { padding-left: var(--gb-space-4); padding-right: var(--gb-space-4); } } /* Background utilities */ .gb-bg-cream { background-color: var(--gb-bg-page); } .gb-bg-blush { background-color: var(--gb-color-blush); } .gb-bg-dark { background-color: var(--gb-bg-section-dark); } .gb-bg-espresso { background-color: var(--gb-bg-section-warm); } .gb-bg-white { background-color: var(--gb-color-white); } /* ========================================================================== DARK SECTION OVERRIDES When .gb-bg-dark or .gb-bg-espresso is applied to a section ========================================================================== */ .gb-bg-dark h1, .gb-bg-dark h2, .gb-bg-dark h3, .gb-bg-dark h4, .gb-bg-dark p, .gb-bg-espresso h1, .gb-bg-espresso h2, .gb-bg-espresso h3, .gb-bg-espresso h4, .gb-bg-espresso p { color: var(--gb-text-on-dark); } .gb-bg-dark .gb-eyebrow, .gb-bg-espresso .gb-eyebrow { color: var(--gb-color-honey); } /* ========================================================================== FOCUS / ACCESSIBILITY ========================================================================== */ :focus-visible { outline: 2px solid var(--gb-color-amber); outline-offset: 3px; } /* ========================================================================== END GLOWBITE TOKENS To reference in Liquid sections: {{ 'glowbite-tokens.css' | asset_url | stylesheet_tag }} ========================================================================== */ /* ========================================================================== IMPLEMENTATION LAYER — APPLY TOKENS TO EXISTING GLOWBITE SECTIONS This block retrofits the token system onto the live BEM class names already used by the hero, ingredients, results, testimonials, CTA and quiz sections. Loaded globally via theme.liquid. ========================================================================== */ /* -------------------------------------------------------------------------- GLOBAL SECTION BASE — every gb- prefixed section -------------------------------------------------------------------------- */ [class*="gb-hero"], [class*="gb-ing"], [class*="gb-res"], [class*="gb-test"], [class*="gb-cta"], [class*="gb-quiz"] { font-family: var(--gb-font-body) !important; } /* All editorial titles across sections should use Cormorant Garamond */ .gb-hero-v2__title, .gb-ing-v2__title, .gb-res-v2__title, .gb-test-v2__title, .gb-cta-v2__title, .gb-quiz-v2__title, [class$="__title"][class*="gb-"], [class$="__headline"][class*="gb-"], [class$="__heading"][class*="gb-"] { font-family: var(--gb-font-display) !important; font-weight: var(--gb-weight-semibold) !important; line-height: var(--gb-leading-tight) !important; letter-spacing: var(--gb-tracking-tight) !important; } /* Italic accent inside titles — editorial flourish */ .gb-hero-v2__title em, .gb-ing-v2__title em, .gb-res-v2__title em, .gb-test-v2__title em, .gb-cta-v2__title em, .gb-quiz-v2__title em, [class*="gb-"][class$="__title"] em { font-style: italic !important; color: var(--gb-color-amber) !important; font-weight: var(--gb-weight-medium) !important; } /* Subtitles and lead copy */ .gb-hero-v2__subtitle, .gb-ing-v2__subtitle, .gb-res-v2__subtitle, .gb-test-v2__subtitle, .gb-cta-v2__subtitle, .gb-quiz-v2__subtitle, [class*="gb-"][class$="__subtitle"], [class*="gb-"][class$="__lead"] { font-family: var(--gb-font-body) !important; line-height: var(--gb-leading-normal) !important; } /* Eyebrows / small all-caps labels */ .gb-hero-v2__eyebrow, .gb-ing-v2__eyebrow, .gb-res-v2__eyebrow, .gb-test-v2__eyebrow, .gb-cta-v2__eyebrow, .gb-quiz-v2__eyebrow, [class*="gb-"][class$="__eyebrow"] { font-family: var(--gb-font-body) !important; font-size: var(--gb-text-xs) !important; font-weight: var(--gb-weight-semibold) !important; letter-spacing: var(--gb-tracking-wide) !important; text-transform: uppercase !important; color: var(--gb-color-amber) !important; } /* -------------------------------------------------------------------------- SECTION PADDING — enforce 8pt grid rhythm (96px desktop / 48px mobile) -------------------------------------------------------------------------- */ .gb-hero-v2, .gb-ing-v2, .gb-res-v2, .gb-test-v2, .gb-cta-v2, .gb-quiz-v2 { padding-top: var(--gb-section-padding-desktop) !important; padding-bottom: var(--gb-section-padding-desktop) !important; } @media screen and (max-width: 768px) { .gb-hero-v2, .gb-ing-v2, .gb-res-v2, .gb-test-v2, .gb-cta-v2, .gb-quiz-v2 { padding-top: var(--gb-section-padding-mobile) !important; padding-bottom: var(--gb-section-padding-mobile) !important; } } /* -------------------------------------------------------------------------- SECTION BACKGROUNDS — map to Ember ramp -------------------------------------------------------------------------- */ /* Hero — dark espresso by default, supports cream variant */ .gb-hero-v2 { background-color: var(--gb-color-midnight) !important; color: var(--gb-text-on-dark) !important; } .gb-hero-v2--light { background-color: var(--gb-color-cream) !important; color: var(--gb-text-primary) !important; } /* Ingredients — cream page background */ .gb-ing-v2 { background-color: var(--gb-color-cream) !important; color: var(--gb-text-primary) !important; } /* Results — espresso warm dark */ .gb-res-v2 { background-color: var(--gb-color-espresso) !important; color: var(--gb-text-on-dark) !important; } /* Testimonials — blush soft background */ .gb-test-v2 { background-color: var(--gb-color-blush) !important; color: var(--gb-text-primary) !important; } /* CTA Banner — amber primary or midnight */ .gb-cta-v2 { background-color: var(--gb-color-midnight) !important; color: var(--gb-text-on-dark) !important; } /* Quiz — cream */ .gb-quiz-v2 { background-color: var(--gb-color-cream) !important; color: var(--gb-text-primary) !important; } /* -------------------------------------------------------------------------- TEXT COLOR OVERRIDES ON DARK SECTIONS -------------------------------------------------------------------------- */ .gb-hero-v2 .gb-hero-v2__title, .gb-res-v2 .gb-res-v2__title, .gb-cta-v2 .gb-cta-v2__title { color: var(--gb-text-on-dark) !important; } .gb-hero-v2 .gb-hero-v2__subtitle, .gb-res-v2 .gb-res-v2__subtitle, .gb-cta-v2 .gb-cta-v2__subtitle { color: var(--gb-text-on-dark-muted) !important; } .gb-res-v2 .gb-res-v2__eyebrow, .gb-cta-v2 .gb-cta-v2__eyebrow, .gb-hero-v2 .gb-hero-v2__eyebrow { color: var(--gb-color-honey) !important; } /* -------------------------------------------------------------------------- CARDS — unify border radius, shadows, padding across all sections -------------------------------------------------------------------------- */ .gb-ing-v2__card, .gb-res-v2__card, .gb-res-v2__stat, .gb-test-v2__card, .gb-quiz-v2__card, [class*="gb-"][class$="__card"] { border-radius: var(--gb-radius-xl) !important; padding: var(--gb-card-padding) !important; box-shadow: var(--gb-shadow-sm) !important; transition: box-shadow var(--gb-transition-base), transform var(--gb-transition-base) !important; } .gb-ing-v2__card:hover, .gb-res-v2__card:hover, .gb-test-v2__card:hover, [class*="gb-"][class$="__card"]:hover { box-shadow: var(--gb-shadow-md) !important; transform: translateY(-2px) !important; } /* Grid gaps — unify to 24px (--gb-space-6) */ .gb-ing-v2__grid, .gb-res-v2__grid, .gb-test-v2__grid, .gb-quiz-v2__grid, [class*="gb-"][class$="__grid"] { gap: var(--gb-space-6) !important; } /* -------------------------------------------------------------------------- BUTTONS / CTAs — pill radius on ALL section buttons -------------------------------------------------------------------------- */ .gb-hero-v2__btn, .gb-ing-v2__btn, .gb-res-v2__btn, .gb-test-v2__btn, .gb-cta-v2__btn, .gb-quiz-v2__btn, [class*="gb-"][class$="__btn"], [class*="gb-"][class$="__cta"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--gb-space-2) !important; padding: var(--gb-space-3) var(--gb-space-8) !important; border-radius: var(--gb-radius-pill) !important; font-family: var(--gb-font-body) !important; font-size: var(--gb-text-sm) !important; font-weight: var(--gb-weight-semibold) !important; letter-spacing: var(--gb-tracking-wide) !important; text-transform: uppercase !important; text-decoration: none !important; border: 2px solid transparent !important; cursor: pointer !important; transition: all var(--gb-transition-base) !important; background-color: var(--gb-color-amber) !important; color: var(--gb-color-white) !important; border-color: var(--gb-color-amber) !important; } .gb-hero-v2__btn:hover, .gb-ing-v2__btn:hover, .gb-res-v2__btn:hover, .gb-test-v2__btn:hover, .gb-cta-v2__btn:hover, .gb-quiz-v2__btn:hover, [class*="gb-"][class$="__btn"]:hover { background-color: var(--gb-color-amber-hover) !important; border-color: var(--gb-color-amber-hover) !important; box-shadow: var(--gb-shadow-glow) !important; transform: translateY(-1px) !important; } /* Secondary / outline buttons */ .gb-hero-v2__btn--outline, .gb-cta-v2__btn--outline, [class*="gb-"][class*="__btn--outline"], [class*="gb-"][class*="__btn--secondary"] { background-color: transparent !important; color: var(--gb-color-amber) !important; border-color: var(--gb-color-amber) !important; } /* Dark section buttons get ghost treatment */ .gb-hero-v2 .gb-hero-v2__btn--ghost, .gb-res-v2 .gb-res-v2__btn--ghost, .gb-cta-v2 .gb-cta-v2__btn--ghost { background-color: transparent !important; color: var(--gb-text-on-dark) !important; border-color: var(--gb-text-on-dark) !important; } .gb-hero-v2 .gb-hero-v2__btn--ghost:hover, .gb-res-v2 .gb-res-v2__btn--ghost:hover, .gb-cta-v2 .gb-cta-v2__btn--ghost:hover { background-color: var(--gb-color-white) !important; color: var(--gb-color-midnight) !important; } /* -------------------------------------------------------------------------- STATS / NUMBERS — Sol ramp highlight color -------------------------------------------------------------------------- */ .gb-res-v2__stat-number, .gb-res-v2__number, .gb-ing-v2__stat, [class*="gb-"][class$="__stat-number"], [class*="gb-"][class$="__number"] { font-family: var(--gb-font-display) !important; font-weight: var(--gb-weight-semibold) !important; color: var(--gb-color-amber) !important; line-height: var(--gb-leading-tight) !important; letter-spacing: var(--gb-tracking-tight) !important; } /* Stats on dark sections use honey/gold */ .gb-res-v2 .gb-res-v2__stat-number, .gb-res-v2 .gb-res-v2__number, .gb-cta-v2 .gb-cta-v2__stat-number { color: var(--gb-color-honey) !important; } /* -------------------------------------------------------------------------- BADGES / PILLS — pricing, savings, highlight indicators -------------------------------------------------------------------------- */ .gb-hero-v2__badge, .gb-ing-v2__badge, .gb-res-v2__badge, .gb-test-v2__badge, .gb-cta-v2__badge, [class*="gb-"][class$="__badge"], [class*="gb-"][class$="__pill"] { display: inline-flex !important; align-items: center !important; padding: var(--gb-space-1) var(--gb-space-3) !important; border-radius: var(--gb-radius-pill) !important; font-family: var(--gb-font-body) !important; font-size: var(--gb-text-xs) !important; font-weight: var(--gb-weight-semibold) !important; letter-spacing: var(--gb-tracking-wider) !important; text-transform: uppercase !important; background-color: var(--gb-color-gold-light) !important; color: var(--gb-color-espresso) !important; } /* -------------------------------------------------------------------------- TESTIMONIAL QUOTES — editorial italic treatment -------------------------------------------------------------------------- */ .gb-test-v2__quote, .gb-test-v2__text, [class*="gb-test"][class$="__quote"] { font-family: var(--gb-font-display) !important; font-style: italic !important; font-weight: var(--gb-weight-regular) !important; line-height: var(--gb-leading-snug) !important; color: var(--gb-text-primary) !important; } .gb-test-v2__author, .gb-test-v2__name, [class*="gb-test"][class$="__author"] { font-family: var(--gb-font-body) !important; font-size: var(--gb-text-sm) !important; font-weight: var(--gb-weight-semibold) !important; letter-spacing: var(--gb-tracking-wide) !important; text-transform: uppercase !important; color: var(--gb-text-muted) !important; } /* -------------------------------------------------------------------------- INNER CONTAINERS — enforce max-width + centered alignment -------------------------------------------------------------------------- */ .gb-hero-v2__inner, .gb-ing-v2__inner, .gb-res-v2__inner, .gb-test-v2__inner, .gb-cta-v2__inner, .gb-quiz-v2__inner, [class*="gb-"][class$="__inner"] { max-width: var(--gb-content-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--gb-space-6) !important; padding-right: var(--gb-space-6) !important; } @media screen and (max-width: 768px) { .gb-hero-v2__inner, .gb-ing-v2__inner, .gb-res-v2__inner, .gb-test-v2__inner, .gb-cta-v2__inner, .gb-quiz-v2__inner, [class*="gb-"][class$="__inner"] { padding-left: var(--gb-space-4) !important; padding-right: var(--gb-space-4) !important; } } /* -------------------------------------------------------------------------- LINKS — consistent amber hover color -------------------------------------------------------------------------- */ .gb-hero-v2 a, .gb-ing-v2 a, .gb-res-v2 a, .gb-test-v2 a, .gb-cta-v2 a, .g } } }