/* * Theme Name: GeekStuff * Description: GeekStuff child theme — IT Support + Audio Repair dual-brand * Template: hello-elementor * Version: 1.0.0 * Author: GeekStuff */ /* ─── DESIGN TOKENS ───────────────────────────────────────────────────────── All colour, typography, and spacing decisions live here as custom properties. Page templates add .section-it or .section-audio to to switch palettes. The intake form and any custom HTML simply reference these vars. ──────────────────────────────────────────────────────────────────────────── */ :root { /* Shared structural tokens — never change per section */ --gs-header-bg: #ffffff; --gs-header-border: #e8e8e8; --gs-footer-bg: #1a1a1a; --gs-footer-text: #c8c8c8; --gs-footer-link: #e0e0e0; --gs-max-width: 1200px; --gs-content-width: 800px; --gs-radius: 6px; --gs-radius-lg: 12px; --gs-shadow: 0 2px 8px rgba(0,0,0,.08); --gs-shadow-lg: 0 4px 24px rgba(0,0,0,.12); --gs-transition: 0.18s ease; /* ── IT Support palette (default) ── */ --gs-primary: #1a4f8a; --gs-primary-dark: #0f3060; --gs-accent: #2d8cf0; --gs-accent-hover: #1a6fd4; --gs-page-bg: #f4f7fb; --gs-surface: #ffffff; --gs-surface-alt: #edf2f8; --gs-border: #dce6f0; --gs-text: #1a1a2e; --gs-text-muted: #4a5568; --gs-text-inverse: #ffffff; --gs-heading-color: #1a4f8a; --gs-link: #2d8cf0; --gs-link-hover: #1a4f8a; --gs-btn-bg: #2d8cf0; --gs-btn-text: #ffffff; --gs-btn-hover-bg: #1a4f8a; --gs-btn-secondary-bg: #ffffff; --gs-btn-secondary-text: #1a4f8a; --gs-btn-secondary-border: #1a4f8a; --gs-stripe: #1a4f8a; /* decorative accent strip / pill */ --gs-font-heading: 'Inter', system-ui, -apple-system, sans-serif; --gs-font-body: 'Inter', system-ui, -apple-system, sans-serif; --gs-font-weight-heading: 700; } /* ── Audio & Vintage Repair palette ── */ body.section-audio { --gs-primary: #3d2b1f; --gs-primary-dark: #261a10; --gs-accent: #c47c2b; --gs-accent-hover: #a36320; --gs-page-bg: #fdf6ee; --gs-surface: #fff9f2; --gs-surface-alt: #f5e8d4; --gs-border: #e8d5b8; --gs-text: #2c1a0e; --gs-text-muted: #7a5c42; --gs-text-inverse: #fdf6ee; --gs-heading-color: #3d2b1f; --gs-link: #c47c2b; --gs-link-hover: #3d2b1f; --gs-btn-bg: #c47c2b; --gs-btn-text: #fdf6ee; --gs-btn-hover-bg: #3d2b1f; --gs-btn-secondary-bg: transparent; --gs-btn-secondary-text: #3d2b1f; --gs-btn-secondary-border: #3d2b1f; --gs-stripe: #c47c2b; --gs-font-heading: 'Lora', Georgia, 'Times New Roman', serif; --gs-font-body: 'Inter', system-ui, -apple-system, sans-serif; --gs-font-weight-heading: 600; } /* ── IT Support palette (explicit — mirrors :root defaults) ── */ body.section-it { --gs-primary: #1a4f8a; --gs-primary-dark: #0f3060; --gs-accent: #2d8cf0; --gs-accent-hover: #1a6fd4; --gs-page-bg: #f4f7fb; --gs-surface: #ffffff; --gs-surface-alt: #edf2f8; --gs-border: #dce6f0; --gs-text: #1a1a2e; --gs-text-muted: #4a5568; --gs-text-inverse: #ffffff; --gs-heading-color: #1a4f8a; --gs-link: #2d8cf0; --gs-link-hover: #1a4f8a; --gs-btn-bg: #2d8cf0; --gs-btn-text: #ffffff; --gs-btn-hover-bg: #1a4f8a; --gs-btn-secondary-bg: #ffffff; --gs-btn-secondary-text: #1a4f8a; --gs-btn-secondary-border: #1a4f8a; --gs-stripe: #1a4f8a; --gs-font-heading: 'Inter', system-ui, -apple-system, sans-serif; --gs-font-body: 'Inter', system-ui, -apple-system, sans-serif; --gs-font-weight-heading: 700; } /* ── Homepage — neutral, shows both palettes side-by-side ── */ body.section-home { --gs-page-bg: #f8f8f8; --gs-surface: #ffffff; --gs-text: #1a1a2e; --gs-text-muted: #555; --gs-border: #e0e0e0; } /* ─── BASE ───────────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { background-color: var(--gs-page-bg); color: var(--gs-text); font-family: var(--gs-font-body); line-height: 1.65; transition: background-color var(--gs-transition), color var(--gs-transition); } h1, h2, h3, h4, h5, h6 { font-family: var(--gs-font-heading); font-weight: var(--gs-font-weight-heading); color: var(--gs-heading-color); line-height: 1.25; } a { color: var(--gs-link); text-decoration: none; transition: color var(--gs-transition); } a:hover { color: var(--gs-link-hover); text-decoration: underline; } p { margin: 0 0 1em; } /* ─── HEADER ─────────────────────────────────────────────────────────────── */ .site-header { background-color: var(--gs-header-bg); border-bottom: 1px solid var(--gs-header-border); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,.06); } /* Nav link colours — always on white header so use a neutral dark */ .site-header .main-navigation a, .site-header nav a { color: #1a1a2e; font-weight: 500; font-size: 15px; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color var(--gs-transition), border-color var(--gs-transition); } .site-header .main-navigation a:hover, .site-header nav a:hover { color: var(--gs-accent); border-bottom-color: var(--gs-accent); text-decoration: none; } /* Highlight current section in nav with the section accent */ body.section-audio .site-header .menu-item-has-children > a[href*="audio"], body.section-audio .site-header .current-menu-item > a, body.section-audio .site-header .current-menu-ancestor > a { color: #c47c2b; border-bottom-color: #c47c2b; } body.section-it .site-header .current-menu-item > a, body.section-it .site-header .current-menu-ancestor > a { color: #2d8cf0; border-bottom-color: #2d8cf0; } /* ─── FOOTER ─────────────────────────────────────────────────────────────── */ .site-footer { background-color: var(--gs-footer-bg); color: var(--gs-footer-text); font-size: 14px; } .site-footer a { color: var(--gs-footer-link); } .site-footer a:hover { color: #ffffff; } /* ─── BUTTONS ────────────────────────────────────────────────────────────── */ .gs-btn, .wp-block-button__link, .gsi-submit-btn { display: inline-block; padding: 12px 28px; background-color: var(--gs-btn-bg); color: var(--gs-btn-text) !important; border: 2px solid transparent; border-radius: var(--gs-radius); font-family: var(--gs-font-body); font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer; text-decoration: none !important; transition: background-color var(--gs-transition), transform var(--gs-transition), box-shadow var(--gs-transition); } .gs-btn:hover, .wp-block-button__link:hover, .gsi-submit-btn:hover { background-color: var(--gs-btn-hover-bg); box-shadow: var(--gs-shadow); transform: translateY(-1px); } .gs-btn:active, .wp-block-button__link:active, .gsi-submit-btn:active { transform: translateY(0); } .gs-btn-outline { background-color: var(--gs-btn-secondary-bg); color: var(--gs-btn-secondary-text) !important; border-color: var(--gs-btn-secondary-border); } .gs-btn-outline:hover { background-color: var(--gs-btn-secondary-border); color: var(--gs-text-inverse) !important; } .gsi-submit-btn:disabled { background: #aaa; cursor: not-allowed; transform: none; box-shadow: none; } /* ─── CARDS / SURFACES ───────────────────────────────────────────────────── */ .gs-card { background-color: var(--gs-surface); border: 1px solid var(--gs-border); border-radius: var(--gs-radius-lg); padding: 28px 32px; box-shadow: var(--gs-shadow); } .gs-card-alt { background-color: var(--gs-surface-alt); } /* ─── HOMEPAGE SPLIT TILES ───────────────────────────────────────────────── */ .gs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 520px; } .gs-split-tile { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 64px 56px; position: relative; overflow: hidden; } .gs-split-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background-color: var(--tile-stripe, #ccc); } .gs-split-tile--it { --tile-stripe: #2d8cf0; background-color: #f4f7fb; color: #1a1a2e; } .gs-split-tile--it h2 { color: #1a4f8a; font-family: 'Inter', system-ui, sans-serif; } .gs-split-tile--it p { color: #4a5568; } .gs-split-tile--it .gs-btn { background-color: #2d8cf0; color: #fff !important; } .gs-split-tile--it .gs-btn:hover { background-color: #1a4f8a; } .gs-split-tile--audio { --tile-stripe: #c47c2b; background-color: #fdf6ee; color: #2c1a0e; } .gs-split-tile--audio h2 { color: #3d2b1f; font-family: 'Lora', Georgia, serif; } .gs-split-tile--audio p { color: #7a5c42; } .gs-split-tile--audio .gs-btn { background-color: #c47c2b; color: #fdf6ee !important; } .gs-split-tile--audio .gs-btn:hover { background-color: #3d2b1f; } .gs-split-tile h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin: 0 0 16px; } .gs-split-tile p { font-size: 16px; margin: 0 0 28px; max-width: 380px; } @media (max-width: 768px) { .gs-split { grid-template-columns: 1fr; } .gs-split-tile { padding: 48px 32px; min-height: 300px; } } /* ─── SECTION STRIPE ─────────────────────────────────────────────────────── */ /* A coloured top-border on hero/page-header areas to signal which section */ .gs-section-stripe { border-top: 4px solid var(--gs-stripe); } /* ─── TYPOGRAPHY HELPERS ──────────────────────────────────────────────────── */ .gs-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-accent); margin-bottom: 10px; } .gs-lead { font-size: 18px; line-height: 1.7; color: var(--gs-text-muted); } /* ─── WP BLOCK EDITOR CONTENT ────────────────────────────────────────────── */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--gs-font-heading); color: var(--gs-heading-color); } .entry-content a { color: var(--gs-link); } .entry-content a:hover { color: var(--gs-link-hover); } .wp-block-separator { border-color: var(--gs-border); } .wp-block-quote { border-left: 4px solid var(--gs-accent); padding-left: 20px; color: var(--gs-text-muted); font-style: italic; } /* ═══════════════════════════════════════════════════════════════════════════ LAYOUT & COMPONENT OVERRIDES Fixes to Hello Elementor defaults: header, page titles, content widths, nav dropdown, footer. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── STICKY FOOTER ──────────────────────────────────────────────────────── */ /* Push footer to bottom of viewport on short pages */ html { height: 100%; } body { min-height: 100vh; display: flex; flex-direction: column; } #content { flex: 1 0 auto; } #site-footer { flex-shrink: 0; } /* ─── HEADER ─────────────────────────────────────────────────────────────── */ /* Constrain header to site max-width and add horizontal padding. !important needed: Elementor kit CSS loads after us and sets padding-inline to 0px. */ .site-header:not(.dynamic-header) { max-width: 100% !important; padding: 0 32px !important; background-color: var(--gs-header-bg); border-bottom: 1px solid var(--gs-header-border); box-shadow: 0 1px 6px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 100; } /* Inner flex row: logo left, nav right. !important needed: Elementor kit sets flex-direction:column on .site-header .site-branding. */ .site-header .site-branding { flex-direction: row !important; align-items: center !important; gap: 0; } /* Logo sizing — native image is 875×250; cap to 48px tall */ .site-header .custom-logo { max-height: 48px; width: auto; display: block; } /* Nav links */ .site-navigation ul.menu li a { font-size: 15px; font-weight: 500; color: #1a1a2e; padding: 8px 14px; transition: color var(--gs-transition); } .site-navigation ul.menu li a:hover { color: var(--gs-accent, #2d8cf0); } /* Current page highlight via section */ body.section-it .site-navigation .current-menu-item > a, body.section-it .site-navigation .current-menu-ancestor > a { color: #2d8cf0; } body.section-audio .site-navigation .current-menu-item > a, body.section-audio .site-navigation .current-menu-ancestor > a { color: #c47c2b; } /* Dropdown submenu */ .site-navigation ul.menu li ul { border: 1px solid var(--gs-border, #e0e0e0); border-radius: var(--gs-radius, 6px); box-shadow: var(--gs-shadow-lg, 0 4px 24px rgba(0,0,0,.12)); overflow: hidden; min-width: 180px; } .site-navigation ul.menu li ul li { border-color: var(--gs-border, #eee); } .site-navigation ul.menu li ul li a { color: var(--gs-text, #1a1a2e); padding: 10px 16px; } .site-navigation ul.menu li ul li a:hover { background-color: var(--gs-surface-alt, #f4f7fb); color: var(--gs-accent, #2d8cf0); } /* ─── HIDE DUPLICATE PAGE TITLES ─────────────────────────────────────────── */ /* All our content pages have their own H1 inside the content blocks. The .page-header that Hello Elementor outputs would duplicate it. */ .page-header { display: none !important; } /* ─── HOMEPAGE — FULL-WIDTH SPLIT ────────────────────────────────────────── */ /* Remove Hello Elementor's max-width container on the homepage so the split tiles bleed edge to edge. */ body.section-home .site-main { max-width: 100% !important; padding-inline: 0 !important; margin: 0 !important; } body.section-home .page-content { padding: 0 !important; max-width: 100% !important; } /* Tiles themselves handle internal padding (defined in .gs-split-tile above) */ /* ─── HUB & CONTENT PAGES ────────────────────────────────────────────────── */ /* Comfortable vertical padding for non-homepage page content */ body:not(.section-home) .page-content { padding-top: 48px; padding-bottom: 64px; } /* Widen content to 1140px max (Hello Elementor defaults to 800px at desktop) */ body:not(.section-home):not([class*=elementor-page-]) .site-main { max-width: 1140px !important; } /* Intake form page — narrower, centred feel */ body.section-audio .page-id-185 .page-content { max-width: 800px; margin-inline: auto; } /* ─── FOOTER ─────────────────────────────────────────────────────────────── */ .site-footer { background-color: var(--gs-footer-bg, #1a1a1a); color: var(--gs-footer-text, #c8c8c8); padding: 0; } .gs-footer-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; max-width: 1140px; margin: 0 auto; padding: 56px 32px 40px; } .gs-footer-brand {} .gs-footer-logo-link img { max-height: 40px; width: auto; /* Invert logo to white on dark footer */ filter: brightness(0) invert(1); opacity: .85; } .gs-footer-logo-link:hover img { opacity: 1; } .gs-footer-site-name { font-size: 20px; font-weight: 700; color: #ffffff; text-decoration: none; } .gs-footer-tagline { margin: 10px 0 0; font-size: 13px; color: #888; line-height: 1.5; } .gs-footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .gs-footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffffff; margin: 0 0 14px; font-family: var(--gs-font-body, system-ui, sans-serif); } .gs-footer-col ul { list-style: none; margin: 0; padding: 0; } .gs-footer-col ul li { margin-bottom: 8px; } .gs-footer-col ul li a { color: var(--gs-footer-text, #c8c8c8); font-size: 14px; text-decoration: none; transition: color var(--gs-transition, 0.18s ease); } .gs-footer-col ul li a:hover { color: #ffffff; text-decoration: none; } .gs-footer-bar { border-top: 1px solid #2e2e2e; max-width: 1140px; margin: 0 auto; padding: 18px 32px; } .gs-footer-bar p { margin: 0; font-size: 13px; color: #666; } /* Footer responsive */ @media (max-width: 768px) { .gs-footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px 32px; } .gs-footer-links { grid-template-columns: 1fr 1fr; } .gs-footer-bar { padding: 16px 24px; } } @media (max-width: 480px) { .gs-footer-links { grid-template-columns: 1fr; } } /* ─── BLOCKS & CONTENT ───────────────────────────────────────────────────── */ /* Columns block — sensible spacing */ .wp-block-columns { gap: 32px; margin-bottom: 32px; } .wp-block-column { min-width: 0; } .wp-block-column h3 { font-size: 1.1rem; margin-bottom: 8px; } /* Ordered list steps */ .wp-block-list.is-style-ordered, .entry-content ol { padding-left: 1.5em; } .entry-content ol li { margin-bottom: 12px; } /* Separators */ .wp-block-separator { border-color: var(--gs-border, #e0e0e0) !important; margin: 32px 0; } /* Underlined links inside content only (Hello Elementor adds this broadly) */ .page-content a { text-decoration: none; } .page-content a:hover { text-decoration: underline; } /* ─── MOBILE ─────────────────────────────────────────────────────────────── */ @media (max-width: 576px) { .site-header:not(.dynamic-header) { padding: 0 16px; } .gs-footer-bar { padding: 16px; } body:not(.section-home) .page-content { padding-top: 32px; padding-bottom: 48px; } }