/* * Theme Name: GPRO Divi 5 Child Theme * Description: Child theme for gpro.studio — Divi 5 * Author: gpro.studio * Author URI: https://gpro.studio * Template: Divi * Version: 1.0.7 */ /* ============================================================================= GPRO.STUDIO — Design Tokens Theme switching: add data-theme="dark" or data-theme="warm" to ============================================================================= */ :root { /* ------------------------------------------------------------------------- Colors — Light (default) Background is warm near-white. Text is near-black, never pure #000. -------------------------------------------------------------------------- */ --color-bg: #FFFFFF; /* page background — white */ --color-bg-rgb: 255, 255, 255; /* companion for rgba() use */ --color-bg-alt: #EEECEA; /* cards, raised surfaces */ --color-bg-subtle: #E5E3DE; /* inputs, code blocks, muted zones */ --color-text: #1A1A18; /* primary body text */ --color-text-muted: #5C5B57; /* captions, meta, secondary copy */ --color-text-faint: #9C9B96; /* placeholders, disabled, dividers */ --color-text-inverse: #FFFFFF; /* text on dark/accent backgrounds */ --color-text-hover: #000000; /* on-hover darken for links / interactive */ --color-accent: #1A1A18; /* primary accent — swap freely */ --color-accent-hover: #000000; /* accent on hover */ --color-accent-muted: #E5E3DE; /* accent surface (tags, badges, tints) */ --color-link: #7A6A55; /* warm mid-tone — visible, not loud */ --color-link-hover: #2C2416; /* darkens on hover */ --color-border: rgba(26, 26, 24, 0.12); /* default border */ --color-border-strong: rgba(26, 26, 24, 0.28); /* focused inputs, cards */ --menu-fg: var(--color-text); /* scroll hint arrows */ /* ------------------------------------------------------------------------- Typography Base: 18px / Merriweather Sans. Scale ratio ≈ 1.31. -------------------------------------------------------------------------- */ --gpro-font-primary: 'Merriweather Sans', sans-serif; --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 */ /* ------------------------------------------------------------------------- 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 */ } /* ============================================================================= Dark theme (add data-theme="dark" to ) ============================================================================= */ [data-theme="dark"] { --color-bg: #141412; --color-bg-rgb: 20, 20, 18; /* companion for rgba() use */ --color-bg-alt: #1E1D1A; --color-bg-subtle: #272521; --color-text: #F0EFE9; --color-text-muted: #9C9B96; --color-text-faint: #5C5B57; --color-text-inverse: #FFFFFF; --color-text-hover: #FFFFFF; --color-accent: #F0EFE9; --color-accent-hover: #FFFFFF; --color-accent-muted: #272521; --color-link: #A8947C; /* lightened warm tone on dark bg */ --color-link-hover: #F0EFE9; /* near-white on hover */ --color-border: rgba(240, 239, 233, 0.12); --color-border-strong: rgba(240, 239, 233, 0.28); --gpro-shadow-1: 0 1px 6px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.14); --gpro-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.26), 0 1px 4px rgba(0, 0, 0, 0.16); --gpro-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.36), 0 2px 8px rgba(0, 0, 0, 0.20); } /* ============================================================================= Warm theme (add data-theme="warm" to ) Aged-paper feel — slightly more saturated than light. ============================================================================= */ [data-theme="warm"] { --color-bg: #F3EEE4; --color-bg-rgb: 243, 238, 228; /* companion for rgba() use */ --color-bg-alt: #EAE3D6; --color-bg-subtle: #DFD7C8; --color-text: #2C2416; --color-text-muted: #6B5E4A; --color-text-faint: #A0917D; --color-text-inverse: #F3EEE4; --color-text-hover: #0D0900; --color-accent: #2C2416; --color-accent-hover: #0D0900; --color-accent-muted: #DFD7C8; --color-link: #6B5133; /* deeper warm brown on paper bg */ --color-link-hover: #0D0900; /* near-black on hover */ --color-border: rgba(44, 36, 22, 0.13); --color-border-strong: rgba(44, 36, 22, 0.28); } /* ============================================================================= Global baseline — Divi-aware selectors Divi's own styles outspecify bare element selectors, so we target Divi's module/section wrappers alongside the native elements. Background is best set in Divi → Theme Customizer → General Settings to #F7F6F2 so Divi's inline style and our token agree. ============================================================================= */ body { background-color: var(--color-bg); } /* ******************************************************************** Headings */ h1, h2, h3, h4, h5, h6, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6 { font-family: var(--gpro-font-primary); font-weight: var(--gpro-weight-medium); line-height: var(--gpro-leading-tight); letter-spacing: var(--gpro-tracking-tight); margin-top: 0; } h1, .et_pb_module h1 { font-size: var(--gpro-text-h1); } h2, .et_pb_module h2 { font-size: var(--gpro-text-h2); } h3, .et_pb_module h3 { font-size: var(--gpro-text-h3); } h4, .et_pb_module h4 { font-size: var(--gpro-text-h4); } h5, .et_pb_module h5 { font-size: var(--gpro-text-h5); } h6, .et_pb_module h6 { font-size: var(--gpro-text-h6); } /* ******************************************************************** Links */ a { color: var(--color-link); text-decoration: none; transition: color var(--gpro-transition-fast); } a:hover { color: var(--color-link-hover); } /* ******************************************************************* GPRO HEADER - CRYSTAL HEADER */ /* Divi sticky header blur (covers most structures) */ /* NORMAL state: put platinum on the header wrapper only */ .gpro-crystal-header.et-l--header { background-color: rgba(var(--color-bg-rgb), 1) !important; } /* Keep inner header building blocks transparent so they don't override */ .gpro-crystal-header.et-l--header .et_pb_section, .gpro-crystal-header.et-l--header .et_pb_row, .gpro-crystal-header.et-l--header .et_pb_column, .gpro-crystal-header.et-l--header .et_pb_module, .gpro-crystal-header.et-l--header .et_pb_section:before, .gpro-crystal-header.et-l--header .et_pb_section:after, .gpro-crystal-header.et-l--header .et_pb_row:before, .gpro-crystal-header.et-l--header .et_pb_row:after { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* STICKY state: glass */ .gpro-crystal-header.et-l--header .et_pb_section.et_pb_sticky, .gpro-crystal-header.et-l--header .et_pb_row.et_pb_sticky, .gpro-crystal-header.et-l--header .et_pb_sticky, .gpro-crystal-header.et-l--header.et_pb_sticky { background-color: rgba(var(--color-bg-rgb), 0.75) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* ******************************************************************* GPRO MENU - TREE MENU */ /* Force Divi menu to always be visible (no hamburger) and vertical */ /* ===== ALWAYS-OPEN TREE MENU: submenu UNDER parent ===== */ /* No hamburger, always show menu */ .gpro-tree-menu .mobile_nav { display: none !important; } .gpro-tree-menu .et_pb_menu__menu { display: block !important; } /* Top level: vertical list */ .gpro-tree-menu .et-menu { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px; } /* Each item is a normal block */ .gpro-tree-menu .et-menu > li, .gpro-tree-menu .sub-menu > li { display: block !important; margin: 0 !important; } /* IMPORTANT: make "has children" items a column so submenu drops BELOW */ .gpro-tree-menu .et-menu li.menu-item-has-children { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* Submenus: always visible, NOT positioned to the side */ .gpro-tree-menu .sub-menu { display: block !important; position: static !important; /* kills dropdown positioning */ left: auto !important; top: auto !important; float: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; margin: 4px 0 0 0 !important; padding: 0 !important; width: auto !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } /* ******************************************************************* GPRO MENU - HORIZONTAL SCROLLABLE MENU */ /* Display the desktop menu on all devices */ .gpro-horizontal-scroll-menu .et_pb_menu__menu { display: block !important; } /* Hide the mobile menu */ .gpro-horizontal-scroll-menu .et_mobile_nav_menu { display: none !important; } @media screen and (max-width: 980px) { .gpro-horizontal-scroll-menu .et_pb_menu__menu { width: 100%; } .gpro-horizontal-scroll-menu .et_pb_menu__wrap { overflow: auto; } .gpro-horizontal-scroll-menu .et_pb_menu__menu ul.et-menu { white-space: nowrap !important; flex-wrap: nowrap !important; margin: 0 auto; } } /* Hide scrollbar — Firefox, IE, Edge */ .gpro-horizontal-scroll-menu .et_pb_menu__wrap { -ms-overflow-style: none; scrollbar-width: none; } /* Hide scrollbar — Chrome, Safari, Opera */ .gpro-horizontal-scroll-menu .et_pb_menu__wrap::-webkit-scrollbar { display: none; } /* --- Horizontal scroll arrows --- */ .gpro-horizontal-scroll-menu { position: relative; } .gpro-horizontal-scroll-menu .et_pb_menu__wrap { overflow: auto; scroll-behavior: smooth; margin: 0; } /* Margin only when arrow is visible */ .gpro-horizontal-scroll-menu.can-scroll-left .et_pb_menu__wrap { margin-left: 35px; } .gpro-horizontal-scroll-menu.can-scroll-right .et_pb_menu__wrap { margin-right: 35px; } /* Arrows */ .gpro-horizontal-scroll-menu .scroll-hint { position: absolute; top: 0; bottom: 0; width: 48px; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; z-index: 5; transition: opacity .25s ease, visibility .25s ease; border: 0; background: none; cursor: pointer; color: var(--menu-fg, #222); transform: translateY(-1px); } .gpro-horizontal-scroll-menu .scroll-hint--left { left: 0; transform: translateY(-1px); } .gpro-horizontal-scroll-menu .scroll-hint--right { right: 0; transform: translateY(-1px); } /* Show arrows only when needed */ .gpro-horizontal-scroll-menu.can-scroll-left .scroll-hint--left, .gpro-horizontal-scroll-menu.can-scroll-right .scroll-hint--right { opacity: 1; visibility: visible; pointer-events: auto; } .gpro-horizontal-scroll-menu .scroll-hint .arrow { font-size: 28px; line-height: 1; user-select: none; } .gpro-horizontal-scroll-menu .et_pb_menu__wrap { touch-action: pan-x; } /* ******************************************************************* DIVI CONTACT FORM */ /* Push Divi contact message below the submit button */ .et_pb_contact_form_container { display: flex; flex-direction: column; } .et-pb-contact-message { order: 99; margin-top: 20px; color: inherit; /* keep success message normal */ } /* Make ONLY validation/error text red (success stays default) */ .et-pb-contact-message .et_pb_contact_error_text, .et-pb-contact-message .et_pb_contact_error_message, .et-pb-contact-message ul li { color: #c62828; }