/* Theme Name: Hello Elementor Child Theme URI: https://elementor.com/hello-theme/ Description: Child theme of Hello Elementor for NorCal Ghostbusters. Holds the site's custom CSS (including The Events Calendar / Modern Tribe styling) migrated out of the Customizer "Additional CSS". Author: NorCal Ghostbusters Template: hello-elementor Version: 1.6.1 Text Domain: hello-elementor-child */ /* ================================================== NCGB design tokens — "slime" system Industrial / retro-futurist · dark base · slime-green + slime-pink · caution + detector grid NOTE: Base colors, links, buttons, headings, body text and form fields are standardized in the Elementor Kit (Site Settings → Global Colors / Theme Style). This file holds only what the Kit can't reach: The Events Calendar (tribe-*) styling and bespoke effects (HUD brackets, detector grid, caution tape, reading measures). The --gb-* tokens below mirror the Kit globals. ================================================== */ :root { /* Surfaces */ --gb-bg: #0e161d; --gb-panel: #141b22; --gb-panel-2: #1a242d; --gb-elev: #20303a; /* Slime highlights */ --gb-green: #d8ff97; --gb-green-bright: #c6ff5e; --gb-pink: #ff4fc3; --gb-pink-soft: #ff8fe0; /* Utility accents */ --gb-caution: #ffd400; --gb-red: #e5251f; /* Text — readability first */ --gb-text: #f4fff2; /* headings / strong */ --gb-body: #e7f0ea; /* body copy (high contrast, no glow) */ --gb-muted: #9fb0a6; /* secondary / meta */ --gb-faint: #6f8278; /* tertiary */ /* Lines */ --gb-border: rgba(216, 255, 151, 0.18); --gb-border-strong: rgba(216, 255, 151, 0.4); --gb-grid: rgba(216, 255, 151, 0.05); /* Glow (kept subtle) */ --gb-glow-green: 0 0 16px rgba(216, 255, 151, 0.28); --gb-glow-pink: 0 0 16px rgba(255, 79, 195, 0.32); /* Caution tape (yellow/black diagonal) */ --gb-tape: repeating-linear-gradient( -45deg, var(--gb-caution) 0 12px, #0a0a0a 12px 24px ); --gb-radius: 16px; } /* ================================================== Foundation — base element styles, Elementor-independent. Mirrors the Elementor Kit's Theme Style so the brand survives if Elementor is ever removed. While Elementor is active, its higher- specificity `.elementor-kit-12 …` rules win, so these change nothing now — they are the fallback that takes over when the Kit CSS is gone. ================================================== */ body { background-color: var(--gb-bg); color: var(--gb-body); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; line-height: 1.7; } a { color: #283e03; text-decoration: none; } a:hover { color: #ffe3f7; } h1, h2, h3, h4, h5, h6 { font-family: "Spectral SC", Georgia, serif; font-weight: 600; letter-spacing: 0.5px; line-height: 1.15; color: var(--gb-text); } h1 { font-size: 2.875rem; } h2 { font-size: 2.125rem; } h3 { font-size: 1.5625rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1rem; } h6 { font-size: 0.8125rem; } input[type="submit"], input[type="reset"], .search-submit, .wp-block-button__link { padding: 11px 24px; border: none; border-radius: 30px; background: var(--gb-green); color: #07120b; font-family: "Open Sans", sans-serif; font-weight: 700; cursor: pointer; } input[type="submit"]:hover, input[type="reset"]:hover, .search-submit:hover, .wp-block-button__link:hover { background: var(--gb-pink); color: #1a0414; } /* Elementor Kit button style. Only applies while Elementor is active (`.elementor-kit-12` on ); the generic button rules above are the no-Elementor fallback. The brand button is a slime-green pill with near-black text (same as the header "Contact Us", the events "Add to calendar", and `.ncgb-btn`). This previously forced LIGHT text (#99e5b5) on every Elementor button, which was illegible on the light-green buttons used in the Home hero and "Who We Are" sections (light-on-light). Dark text keeps them readable on any green background. The background isn't !important, so per-widget button colors set in Elementor still win. */ .elementor-kit-12 button, .elementor-kit-12 input[type="button"], .elementor-kit-12 input[type="submit"], .elementor-kit-12 .elementor-button { background-color: var(--gb-green); color: #07120b !important; } /* ================================================== Site chrome (non–Events Calendar) — preserved as-is ================================================== */ label, .wpforms-field-label, .elementor-field-label { color: #f2f2f2 !important; } /* Native form fields (comment/search) — dark + on-brand. Elementor form widgets inherit the Kit's Theme Style form settings. */ input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], textarea, select { color: var(--gb-text) !important; background: #050807 !important; border: 1px solid var(--gb-border-strong) !important; border-radius: 8px !important; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gb-green) !important; } /* Offset fixed Elementor header when WordPress admin bar is visible */ body.admin-bar .elementor-location-header, body.admin-bar .site-header, body.admin-bar .ncgb-sticky-header { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar .elementor-location-header, body.admin-bar .site-header, body.admin-bar .ncgb-sticky-header { top: 46px !important; } } /* Normal fixed header */ .ncgb-sticky-header { position: fixed; top: 0; width: 100%; z-index: 9999; } /* Logged-in desktop admin bar offset */ body.admin-bar .ncgb-sticky-header { top: 32px !important; } /* Logged-in mobile admin bar offset */ @media screen and (max-width: 782px) { body.admin-bar .ncgb-sticky-header { top: 46px !important; } } /* ================================================== Native site header + footer (Elementor-Pro-free) ================================================== */ .ncgb-tape { height: 10px; background: var(--gb-tape); } /* --- Header --- */ .ncgb-header { position: relative; background: var(--gb-bg); border-bottom: 1px solid var(--gb-border); } .ncgb-header__inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; } .ncgb-header__logo { flex: 0 0 auto; display: inline-flex; } .ncgb-header__logo img { height: 55px; width: auto; display: block; } .ncgb-header__nav { margin-left: auto; display: flex; align-items: center; gap: 28px; } .ncgb-menu { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; } .ncgb-menu a { color: var(--gb-text); font-family: "Spectral SC", Georgia, serif; font-size: 1rem; letter-spacing: 0.04em; text-decoration: none; transition: color 0.15s ease; } .ncgb-menu a:hover, .ncgb-menu .current-menu-item > a { color: var(--gb-green); } /* Shared pill button */ .ncgb-btn { display: inline-block; padding: 11px 24px; border-radius: 999px; background: var(--gb-green); color: #07120b; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 0.95rem; text-decoration: none; box-shadow: var(--gb-glow-green); transition: background 0.18s ease, color 0.18s ease; } .ncgb-btn:hover { background: var(--gb-pink); color: #1a0414; } /* Mobile toggle */ .ncgb-header__toggle { display: none; margin-left: auto; width: 42px; height: 42px; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; } .ncgb-header__toggle span { display: block; height: 2px; width: 24px; margin: 0 auto; background: var(--gb-green); } @media (max-width: 1024px) { .ncgb-header__toggle { display: flex; } .ncgb-header__nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 20px; background: var(--gb-panel); border-bottom: 1px solid var(--gb-border); display: none; z-index: 9998; } .ncgb-header.is-open .ncgb-header__nav { display: flex; } .ncgb-menu { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; } .ncgb-menu li { width: 100%; } .ncgb-menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--gb-border); } .ncgb-header__cta { margin-top: 16px; } } /* --- Footer --- */ .ncgb-footer { background: var(--gb-bg); color: var(--gb-body); } .ncgb-footer__cta { position: relative; padding: 64px 24px; text-align: center; background-size: cover; background-position: center; } .ncgb-footer__cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(14, 22, 29, 0.82), rgba(14, 22, 29, 0.93) ); } .ncgb-footer__cta-inner { position: relative; max-width: 720px; margin: 0 auto; } .ncgb-eyebrow { margin: 0 0 10px; font-family: "Open Sans", sans-serif; font-size: 0.78rem; letter-spacing: 0.2em; font-weight: bold; text-transform: uppercase; color: #c92626; } .ncgb-footer__cta-title { margin: 0 0 24px; font-family: "Spectral SC", Georgia, serif; font-size: 2.2rem; line-height: 1.1; color: var(--gb-text); } .ncgb-footer__cols { max-width: 1200px; margin: 0 auto; padding: 56px 24px; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } .ncgb-footer__logo { height: 70px; width: auto; margin-bottom: 16px; } .ncgb-footer__tagline { max-width: 360px; color: var(--gb-muted); font-size: 0.95rem; line-height: 1.7; } .ncgb-footer__heading { margin: 0 0 16px; font-family: "Spectral SC", Georgia, serif; font-size: 1.15rem; letter-spacing: 0.04em; color: var(--gb-green); } .ncgb-footer__menu { margin: 0; padding: 0; list-style: none; } .ncgb-footer__menu li { margin-bottom: 10px; } .ncgb-footer__menu a { color: var(--gb-body); text-decoration: none; transition: color 0.15s ease; } .ncgb-footer__menu a:hover { color: var(--gb-green); } .ncgb-footer__social { display: flex; gap: 12px; } .ncgb-footer__social a { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gb-border-strong); color: var(--gb-body); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .ncgb-footer__social a:hover { color: #07120b; background: var(--gb-green); border-color: var(--gb-green); } .ncgb-footer__copyright { padding: 20px 24px; border-top: 1px solid var(--gb-border); text-align: center; color: var(--gb-muted); font-size: 0.85rem; } @media (max-width: 880px) { .ncgb-footer__cols { grid-template-columns: 1fr; gap: 32px; } .ncgb-footer__cta-title { font-size: 1.7rem; } } /* ================================================== Contact Form 7 — "Reach Out to HQ" Brand-aligned layout + validation messaging. CF7 ships generic markup and stock orange/red alerts; this section reskins them with the slime system and tightens the form into the 2-col grid its template (.row/.col-*) intends. ================================================== */ /* --- Grid: honor the template's .row / .col-6 / .col-12 --- Scoped to .wpcf7 so these generic class names don't leak. */ .wpcf7 .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; align-items: start; } .wpcf7 .col-6 { grid-column: span 1; } .wpcf7 .col-12 { grid-column: 1 / -1; } @media (max-width: 600px) { .wpcf7 .row { grid-template-columns: 1fr; } } /* --- Labels --- */ .wpcf7 label { display: block; margin-bottom: 6px; font-family: "Open Sans", sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gb-muted) !important; } /* --- Fields --- Base dark/rounded styling comes from the generic input rules above; here we just unify sizing and make them fill the column. */ .wpcf7 .form-control, .wpcf7 input.wpcf7-form-control, .wpcf7 textarea, .wpcf7 select { width: 100%; padding: 12px 14px !important; font-size: 1rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wpcf7 textarea { min-height: 150px; resize: vertical; } .wpcf7 .form-control:focus, .wpcf7 textarea:focus, .wpcf7 select:focus { box-shadow: var(--gb-glow-green); } /* --- Acceptance checkbox --- */ .wpcf7 .wpcf7-acceptance .wpcf7-list-item { display: flex; align-items: baseline; gap: 10px; margin: 0; } .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label { font-size: 0.92rem; color: var(--gb-body); } .wpcf7 .wpcf7-acceptance input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gb-green); flex: 0 0 auto; transform: translateY(2px); } /* --- Submit pill --- */ .wpcf7 .btn.btn-primary { margin-top: 4px; } /* ================================================== Validation messaging — reskinned alerts ================================================== */ /* Inline field tip ("The field is required.") — small HUD alert, brand red, no glow. */ .wpcf7-not-valid-tip { display: block; margin-top: 7px; padding-left: 20px; position: relative; font-family: "Open Sans", sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #ff6b61; } .wpcf7-not-valid-tip::before { content: "▸"; position: absolute; left: 0; color: var(--gb-red); } /* Invalid field outline */ .wpcf7 .wpcf7-not-valid { border-color: var(--gb-red) !important; box-shadow: 0 0 0 1px var(--gb-red) !important; } /* Response banner at the bottom of the form — reset CF7's stock box. */ .wpcf7 form .wpcf7-response-output { margin: 22px 0 0; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--gb-border-strong); border-left-width: 4px; background: var(--gb-panel); font-family: "Open Sans", sans-serif; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gb-body); } /* Error states (invalid / unaccepted / failed / aborted / spam) — red */ .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: var(--gb-red); border-left-color: var(--gb-red); background: rgba(229, 37, 31, 0.08); color: #ffb3ad; } /* Success state — slime green */ .wpcf7 form.sent .wpcf7-response-output { border-color: var(--gb-green); border-left-color: var(--gb-green); background: rgba(216, 255, 151, 0.08); color: var(--gb-green); } /* Submitting spinner — tint to brand */ .wpcf7 .wpcf7-spinner { background-color: var(--gb-green); } .tribe-events .datepicker .day, .tribe-events .datepicker .dow { color: #beccff; font-family: var(--tec-font-family-sans-serif); font-weight: var(--tec-font-weight-regular); } .tribe-common .tribe-common-c-svgicon__svg-fill { fill: #ffffff; } .tribe-events .tribe-events-c-view-selector__content { background-color: #141b22; border: 1pxsolid#3f4c3a; border-radius: var(--tec-border-radius-default); box-shadow: var(--tec-box-shadow-tooltip); } .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector__button { background-color: #425342; padding: var(--tec-spacer-1); } .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active, .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus, .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within, .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover { background-color: #d8ff97; color: #568416; } .elementor-kit-12 button, .elementor-kit-12 input[type="button"], .elementor-kit-12 input[type="submit"], .elementor-kit-12 .elementor-button { background-color: #000000; color: #07120b !important; }