/* * 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.1.1 */ /* ============================================================================= GPRO.STUDIO — Design Tokens ============================================================================= */ :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-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-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 */ } /* ============================================================================= Selectors to hide content on devices ============================================================================= */ /* Hide on mobile (max 767px) */ .gpro-hide-mobile { @media (max-width: 767px) { display: none !important; } } /* Hide on tablet (768px - 980px) */ .gpro-hide-tablet { @media (min-width: 768px) and (max-width: 980px) { display: none !important; } } /* Hide on desktop (min 981px) */ .gpro-hide-desktop { @media (min-width: 981px) { display: none !important; } } /* ============================================================================= 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. ============================================================================= */ /* ============================================================================= Remove Overflow on mobile ============================================================================= */ @media all and (max-width: 980px) { html, body { overflow-x: hidden; } body { position: relative } } /* ******************************************************************** 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-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; } /* ******************************************************************* Highlight bar */ /**Usage:** Add `gpro-highlight` in the module's CSS Class field (Advanced → CSS ID & Classes). **Per-module tweaks** — two options depending on context: — inline in Divi's Main Element custom CSS (quick one-offs): --gpro-hl-w: 200px; --gpro-hl-y: -30%; */ .gpro-highlight { position: relative; } .gpro-highlight::before { content: ""; position: absolute; width: var(--gpro-hl-w, 140px); height: var(--gpro-hl-h, 12px); background: var(--gpro-hl-bg, var(--color-accent)); top: 50%; left: 50%; transform: translate(var(--gpro-hl-x, -70%), var(--gpro-hl-y, -20%)); z-index: -1; } /* ******************************************************************* DIVI BUTTON ARROW */ /* Remove Divi's default arrow icon on buttons */ .et_pb_button::after, .et_pb_more_button::after { display: none !important; } .et_pb_button, .et_pb_more_button { padding-right: var(--gpro-btn-padding-x) !important; } /* ******************************************************************* BUTTON STYLES (opt-in) */ /* Uncomment below to apply sitewide button styling. Uses design tokens for spacing, radius, transitions. Adjust colors per project — defaults use accent/inverse tokens. .et_pb_button, .et_pb_more_button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { display: inline-block; padding: var(--gpro-btn-padding-y) var(--gpro-btn-padding-x); font-size: var(--gpro-text-sm); font-weight: var(--gpro-weight-medium); letter-spacing: var(--gpro-tracking-wide); text-transform: uppercase; text-decoration: none; border: var(--gpro-btn-border-w, 2px) solid var(--color-accent); border-radius: var(--gpro-radius-sm); background-color: var(--color-accent); color: #FFF !important; cursor: pointer; box-shadow: var(--gpro-shadow-0); transition: background-color var(--gpro-transition-fast), border-color var(--gpro-transition-fast), color var(--gpro-transition-fast); } .et_pb_button:hover, .et_pb_more_button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background-color: transparent; color: var(--color-accent) !important; border-color: var(--color-accent); } */