/* GPRO CSS: Design Tokens Description: Root custom properties — colors, typography, spacing, radius, shadows, transitions, z-index, layout. Fallback defaults; real color values are set in Divi. Classes: :root variables (--color-*, --gpro-*) Version: 1.0 Order: 0 */ :root { /* ------------------------------------------------------------------------- Colors — Fallback defaults for component classes. Real values are set in Divi (see Recommended Divi Color Palette). -------------------------------------------------------------------------- */ --color-bg: #FFFFFF; /* White — page background */ --color-bg-rgb: 255, 255, 255; /* companion for rgba() use */ --color-bg-light: #EEECEA; /* Light — soft backgrounds, cards */ --color-bg-mid: #E5E3DE; /* Mid — alternate sections, inputs */ --color-text: #1A1A18; /* Body Text — paragraphs, lists */ --color-text-muted: #5C5B57; /* Muted — captions, meta, dates */ --color-text-faint: #8C8B86; /* Faint — taglines, meta labels, icons */ --color-accent: #1A1A18; /* Primary — brand dominant color */ --color-link: #7A6A55; /* Link — default link color */ --color-link-hover: #2C2416; /* Link Hover — hover/active state */ --color-border: rgba(26, 26, 24, 0.12); /* default border */ --color-border-strong: rgba(26, 26, 24, 0.28); /* focused inputs */ --menu-fg: var(--color-text); /* scroll hint arrows */ /* ------------------------------------------------------------------------- Typography Base: 18px / Merriweather Sans. Scale ratio ≈ 1.31. -------------------------------------------------------------------------- */ --gpro-font-primary: 'Merriweather Sans', sans-serif; /* primary type family — override per site in the child theme */ --gpro-text-base: 1.125rem; /* 18px — body copy */ --gpro-text-sm: 0.875rem; /* 14px — captions, meta */ --gpro-text-xs: 0.75rem; /* 12px — labels, footnotes */ --gpro-text-h6: 1.125rem; /* 18px */ --gpro-text-h5: 1.3rem; /* ~21px */ --gpro-text-h4: 1.55rem; /* ~25px */ --gpro-text-h3: 1.9rem; /* ~30px */ --gpro-text-h2: 2.35rem; /* ~38px */ --gpro-text-h1: 3rem; /* ~48px */ --gpro-text-display: 3.75rem; /* ~60px — hero / landing */ --gpro-leading-tight: 1.15; /* headings */ --gpro-leading-snug: 1.4; /* subheadings, pull quotes */ --gpro-leading-body: 1.75; /* body copy */ --gpro-leading-loose: 2; /* code, spaced lists */ --gpro-tracking-tight: -0.02em; /* large display headings */ --gpro-tracking-normal: 0; /* body text */ --gpro-tracking-wide: 0.06em; /* small-caps labels, nav items */ --gpro-weight-light: 300; --gpro-weight-normal: 400; --gpro-weight-medium: 500; /* ------------------------------------------------------------------------- Spacing -------------------------------------------------------------------------- */ --gpro-space-1: 0.25rem; /* 4px */ --gpro-space-2: 0.5rem; /* 8px */ --gpro-space-3: 0.75rem; /* 12px */ --gpro-space-4: 1rem; /* 16px */ --gpro-space-5: 1.25rem; /* 20px */ --gpro-space-6: 1.5rem; /* 24px */ --gpro-space-8: 2rem; /* 32px */ --gpro-space-10: 2.5rem; /* 40px */ --gpro-space-12: 3rem; /* 48px */ --gpro-space-16: 4rem; /* 64px */ --gpro-space-20: 5rem; /* 80px */ --gpro-space-24: 6rem; /* 96px */ --gpro-section-padding-y: var(--gpro-space-20); /* 80px — vertical rhythm */ --gpro-section-padding-x: var(--gpro-space-6); /* 24px — horizontal (mobile base) */ /* ------------------------------------------------------------------------- Component: Cards -------------------------------------------------------------------------- */ --gpro-card-padding: var(--gpro-space-8); /* 32px — standard */ --gpro-card-padding-compact: var(--gpro-space-5); /* 20px — tight / mobile */ --gpro-card-padding-loose: var(--gpro-space-12); /* 48px — featured / hero */ /* ------------------------------------------------------------------------- Component: Buttons -------------------------------------------------------------------------- */ --gpro-btn-padding-y: 0.75rem; /* 12px */ --gpro-btn-padding-x: 1.75rem; /* 28px */ --gpro-btn-padding-y-sm: 0.5rem; /* 8px */ --gpro-btn-padding-x-sm: 1.25rem; /* 20px */ --gpro-btn-padding-y-lg: 1rem; /* 16px */ --gpro-btn-padding-x-lg: 2.25rem; /* 36px */ --gpro-btn-border-w: 2px; /* button border width */ /* ------------------------------------------------------------------------- Border radius -------------------------------------------------------------------------- */ --gpro-radius-sm: 4px; --gpro-radius-md: 8px; --gpro-radius-lg: 14px; --gpro-radius-xl: 22px; --gpro-radius-pill: 999px; /* ------------------------------------------------------------------------- Shadows — one system, three elevations -------------------------------------------------------------------------- */ --gpro-shadow-0: none; --gpro-shadow-1: 0 1px 6px rgba(26, 26, 24, 0.05), 0 1px 2px rgba(26, 26, 24, 0.04); /* resting card */ --gpro-shadow-2: 0 4px 16px rgba(26, 26, 24, 0.08), 0 1px 4px rgba(26, 26, 24, 0.05); /* hovered card, popover */ --gpro-shadow-3: 0 8px 32px rgba(26, 26, 24, 0.12), 0 2px 8px rgba(26, 26, 24, 0.06); /* modal, drawer */ /* ------------------------------------------------------------------------- Transitions -------------------------------------------------------------------------- */ --gpro-transition-fast: 0.15s ease; --gpro-transition-base: 0.25s ease; --gpro-transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1); --gpro-transition-reveal: 0.45s cubic-bezier(0.4, 0, 0.2, 1); /* gpro-badge */ /* ------------------------------------------------------------------------- Z-index scale -------------------------------------------------------------------------- */ --gpro-z-below: -1; --gpro-z-base: 0; --gpro-z-raised: 10; --gpro-z-dropdown: 100; --gpro-z-sticky: 200; --gpro-z-overlay: 300; --gpro-z-modal: 400; --gpro-z-toast: 500; /* ------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ --gpro-container-sm: 640px; --gpro-container-md: 768px; --gpro-container-lg: 1024px; --gpro-container-xl: 1280px; --gpro-container-max: 1440px; --gpro-content-width: 680px; /* optimal reading column */ }