/* Theme Name: GeneratePress Child - Burnout CEO Travel Theme URI: https://burnout.ceo Description: Child theme for Burnout CEO Travel. Holds brand colors, typography, and template overrides. Author: Jeff Gallagher Author URI: https://burnout.ceo Template: generatepress Version: 1.0.0 Text Domain: generatepress-child */ /* ===== Brand tokens ===== Source: Brand/Burnout-CEO-Travel-Brand-Kit-Setup-v2.md */ :root { --bct-orange: #D4622A; --bct-black: #1A1A1A; --bct-white: #FFFFFF; --bct-steel-blue: #89B4C9; --bct-espresso: #2B1F14; --bct-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --bct-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --bct-font-quote: "Cormorant Garamond", Georgia, serif; } /* ===== Override GeneratePress CSS variables with brand colors ===== GP 3.x sets --accent / --contrast / --base via inline styles in that load after this stylesheet, so we use !important to win the cascade. */ :root { --accent: #D4622A !important; /* GP accent → Burnout Orange */ --contrast: #1A1A1A !important; /* GP body text → Prestige Black */ --contrast-2: #555555 !important; /* GP secondary text */ --contrast-3: #aaaaaa !important; /* GP tertiary text */ --base: #FFFFFF !important; /* GP base bg → Clean White */ } /* ===== Typography defaults ===== Type scale per Brand-Kit-Setup-v2.md */ body, button, input, select, textarea { font-family: var(--bct-font-body); font-size: 16px; line-height: 1.5; color: var(--bct-black); } h1, h2, h3, h4, h5, h6, .entry-title, .site-title { font-family: var(--bct-font-display); font-weight: 700; line-height: 1.2; } h1, .entry-title { font-size: 62px; font-weight: 700; } h2 { font-size: 36px; font-weight: 600; } h3 { font-size: 32px; font-weight: 700; } h4 { font-size: 24px; font-weight: 500; } h5 { font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } h6 { font-size: 16px; font-weight: 600; } @media (max-width: 768px) { h1, .entry-title { font-size: 40px; } h2 { font-size: 28px; } h3 { font-size: 24px; } h4 { font-size: 20px; } } blockquote { font-family: var(--bct-font-quote); font-style: italic; font-size: 20px; line-height: 1.4; border-left: 3px solid var(--bct-orange); padding-left: 1.25em; } .caption, figcaption { font-size: 13px; color: #555; } a { color: var(--bct-orange); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--bct-espresso); } /* ===== Primary CTA button (Plan My Escape) ===== Apply via class .bct-cta on the wp-block-button wrapper. The link inside is what we actually style. */ .wp-block-button.bct-cta .wp-block-button__link, a.bct-cta { display: inline-block; background-color: var(--bct-orange) !important; color: var(--bct-white) !important; font-family: var(--bct-font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; padding: 14px 28px; border: 0; border-radius: 2px; text-decoration: none; transition: background-color 0.15s ease, transform 0.15s ease; cursor: pointer; } .wp-block-button.bct-cta .wp-block-button__link:hover, a.bct-cta:hover { background-color: #b8521f !important; color: var(--bct-white) !important; transform: translateY(-1px); } /* ===== Header logo size constraint ===== GP renders the logo via .header-image / .site-logo img. Constrain max height so brand mark doesn't dwarf the header. */ .site-logo img, .header-image, img.header-image { max-height: 56px !important; width: auto !important; } /* Tighten header padding so it doesn't feel oversized */ .site-header { padding-top: 0.75rem; padding-bottom: 0.75rem; } /* ===== Credentials row logos ===== EO renders as-is (full color on light bg). Archer logo file is white-on-transparent (designed for dark bg). On the light credentials section we invert via filter so it reads as dark gray. Both constrained to consistent height for visual balance. */ .bct-credential-logo img { max-height: 70px; width: auto; object-fit: contain; } .bct-credential-archer img { filter: brightness(0); opacity: 0.55; } /* ===== Brand utility classes for use in GenerateBlocks patterns ===== */ .bct-bg-black { background-color: var(--bct-black); color: var(--bct-white); } .bct-bg-espresso { background-color: var(--bct-espresso); color: var(--bct-white); } .bct-bg-orange { background-color: var(--bct-orange); color: var(--bct-white); } .bct-text-orange { color: var(--bct-orange); } .bct-text-steel { color: var(--bct-steel-blue); } .bct-bg-black a, .bct-bg-espresso a { color: var(--bct-steel-blue); } /* ===== Header bar — brand skin only ===== Structure lives in the GP Element "Header Bar" (wp-admin, owner-editable). This block only styles it to brand. Ticket BCT-71. */ .bct-header-extra { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; flex-wrap: nowrap; } .bct-header-extra .bct-header-phone { margin: 0; font-family: var(--bct-font-display); font-weight: 600; font-size: 15px; white-space: nowrap; } .bct-header-extra .bct-header-phone a { color: var(--bct-black); text-decoration: none; } .bct-header-extra .bct-header-phone a:hover { color: var(--bct-orange); } .bct-header-social.wp-block-social-links { margin: 0; gap: 0.6rem; } /* logos-only: no pill background, dark glyphs that read on the light header */ .bct-header-social .wp-social-link { background: none !important; padding: 0; } .bct-header-social .wp-social-link a { padding: 0; } .bct-header-social .wp-social-link svg { width: 22px; height: 22px; fill: var(--bct-black); transition: fill 0.15s ease; } .bct-header-social .wp-social-link:hover svg { fill: var(--bct-orange); } .bct-header-extra .wp-block-buttons { margin: 0; } .bct-header-extra .bct-cta .wp-block-button__link { padding: 9px 18px; font-size: 14px; white-space: nowrap; } @media (max-width: 1100px) { /* drop the phone number text first to protect the single line */ .bct-header-extra .bct-header-phone { display: none; } } @media (max-width: 900px) { .bct-header-social { display: none; } } /* ===== Footer bar cluster — brand skin only ===== Structure lives in the GP Element "Footer Bar" (wp-admin, owner-editable). Ticket BCT-71. */ .bct-footer-extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; margin: 0 auto 0.85rem; } .bct-footer-links { margin: 0; font-family: var(--bct-font-display); font-weight: 600; font-size: 14px; } .bct-footer-links a { text-decoration: none; } .bct-footer-social.wp-block-social-links { margin: 0; gap: 0.6rem; } .bct-footer-social .wp-social-link { background: none !important; padding: 0; } .bct-footer-social .wp-social-link a { padding: 0; } .bct-footer-social .wp-social-link svg { width: 20px; height: 20px; fill: currentColor; transition: fill 0.15s ease; } .bct-footer-social .wp-social-link:hover svg { fill: var(--bct-orange); } /* ===== BCT-71 refinements ===== */ /* Header: logo left, nav centered in the space, cluster pinned right. Desktop only so the GP mobile toggle is untouched. */ @media (min-width: 769px) { .site-header .inside-header { display: flex; align-items: center; } .inside-header .main-navigation { flex: 1; } .main-navigation .inside-navigation { display: flex; align-items: center; width: 100%; } .main-navigation .main-nav { flex: 1; } .main-navigation .main-nav > ul { display: flex; justify-content: center; } .bct-header-extra { margin-left: auto; } } /* Footer: dark brand bar so it anchors instead of blending out */ .site-info { background-color: var(--bct-espresso); color: var(--bct-white); padding-top: 1.75rem; padding-bottom: 1.75rem; } .site-info a { color: var(--bct-white); } .site-info a:hover { color: var(--bct-orange); } .bct-footer-extra { color: var(--bct-white); } .bct-footer-phone { margin: 0; font-family: var(--bct-font-display); font-weight: 700; font-size: 18px; } .bct-footer-phone a { text-decoration: none; } /* Uniform light icons on the dark footer. Core "logos only" paints each brand its own color (TikTok's is black, invisible here), so force one light fill across all of them with enough weight to beat core. */ .site-info .bct-footer-social .wp-social-link, .site-info .bct-footer-social .wp-social-link a, .site-info .bct-footer-social .wp-social-link svg { color: var(--bct-white) !important; fill: var(--bct-white) !important; } .site-info .bct-footer-social .wp-social-link:hover, .site-info .bct-footer-social .wp-social-link:hover a, .site-info .bct-footer-social .wp-social-link:hover svg { color: var(--bct-orange) !important; fill: var(--bct-orange) !important; } .site-info .bct-footer-legal a { color: var(--bct-steel-blue); } .site-info .bct-footer-legal a:hover { color: var(--bct-orange); }