/* * StreamCohort — Cinema Gold Theme Override * Theme: Black (#000) + Cinema Gold (#C9922A / #FFD700) * Inspired by DirectOTT / Storiyan marquee aesthetic * Added: June 2026 — DO NOT REMOVE (applied via functions.php) */ /* ======================================== CSS CUSTOM PROPERTIES (Root Variables) ======================================== */ :root { --sc-black: #000000; --sc-black-soft: #0D0D0D; --sc-black-card: #111111; --sc-black-border: #1A1A1A; --sc-gold-bright: #FFD700; --sc-gold-primary: #C9922A; --sc-gold-warm: #E8A020; --sc-gold-deep: #8B6200; --sc-gold-light: #F5D060; --sc-gold-glow: rgba(201, 146, 42, 0.35); --sc-gold-glow-strong: rgba(255, 215, 0, 0.55); --sc-text-primary: #FFFFFF; --sc-text-muted: #CCCCCC; --sc-gradient-gold: linear-gradient(135deg, #8B6200 0%, #FFD700 45%, #C9922A 100%); --sc-gradient-gold-v: linear-gradient(180deg, #FFD700 0%, #C9922A 60%, #8B6200 100%); --sc-gradient-dark: linear-gradient(135deg, #000000 0%, #111111 100%); } /* ======================================== GLOBAL BASE — aggressive override for Astra Customizer inline styles ======================================== */ html, body, body.home, body.page, body.single, body.archive, body.blog, body.ast-page-builder-template, body.ast-full-width-layout, body.ast-no-sidebar, .site, #page, #content, .wp-site-blocks, main#main, .ast-container, .entry-content, .post-content, .page-content { background-color: #000000 !important; color: #ffffff !important; } /* Astra dynamic inline CSS overrides — these selectors match what Astra outputs from the Customizer into via wp_add_inline_style */ body { background-color: #000000 !important; } .ast-separate-container .ast-article-post, .ast-separate-container .ast-article-inner, .ast-separate-container #page, .ast-separate-container .site-content { background-color: #000000 !important; } /* Full-width page builder sections */ .elementor-section, .elementor-container, .fl-row, .fl-row-content, .wp-block-template-part { background-color: transparent !important; } /* White box removal — catch any remaining white surfaces */ .ast-page-builder-template .hfeed, .ast-page-builder-template .site, .ast-page-builder-template .site-content, .ast-page-builder-template main, .ast-page-builder-template #main { background-color: #000000 !important; } /* ======================================== TYPOGRAPHY — HEADINGS ======================================== */ h1, h2, h3, h4, h5, h6, .entry-title, .entry-title a, .ast-blog-single-element.ast-read-more-enabled a, .page-title { background: var(--sc-gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; } /* Fallback for browsers that don't support background-clip: text */ @supports not (-webkit-background-clip: text) { h1, h2, h3, h4, h5, h6, .entry-title, .page-title { color: var(--sc-gold-primary) !important; } } p, .entry-content p, li, .entry-content li, td, th { color: var(--sc-text-muted) !important; } /* ======================================== LINKS ======================================== */ a, .entry-content a { color: var(--sc-gold-warm) !important; text-decoration: none; transition: color 0.25s ease, text-shadow 0.25s ease; } a:hover, .entry-content a:hover { color: var(--sc-gold-bright) !important; text-shadow: 0 0 12px var(--sc-gold-glow-strong); } /* ======================================== HEADER & NAVIGATION ======================================== */ .site-header, #masthead, .ast-primary-header-bar, .ast-above-header-bar, .ast-below-header-bar, .main-header-bar { background-color: var(--sc-black) !important; border-bottom: 1px solid var(--sc-gold-deep) !important; box-shadow: 0 2px 20px rgba(201, 146, 42, 0.2) !important; } /* Nav links */ .main-navigation a, .ast-primary-menu > li > a, #site-navigation a, .ast-header-custom-el a, .menu-item a { color: var(--sc-gold-light) !important; font-weight: 500; letter-spacing: 0.04em; transition: color 0.2s ease, text-shadow 0.2s ease; } .main-navigation a:hover, .ast-primary-menu > li > a:hover, #site-navigation a:hover, .ast-primary-menu > li.current-menu-item > a, .ast-primary-menu > li.current_page_item > a { color: var(--sc-gold-bright) !important; text-shadow: 0 0 10px var(--sc-gold-glow-strong); } /* Dropdown menus */ .ast-primary-menu .sub-menu, .main-navigation .sub-menu { background-color: var(--sc-black-card) !important; border: 1px solid var(--sc-gold-deep) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.8) !important; } .ast-primary-menu .sub-menu a, .main-navigation .sub-menu a { color: var(--sc-gold-light) !important; } .ast-primary-menu .sub-menu a:hover { background-color: var(--sc-black-border) !important; color: var(--sc-gold-bright) !important; } /* Site logo area */ .site-title a, .custom-logo-link { color: var(--sc-gold-primary) !important; } /* Mobile hamburger */ .ast-mobile-menu-buttons button, .menu-toggle { color: var(--sc-gold-primary) !important; } /* ======================================== HERO / PAGE SECTIONS ======================================== */ .wp-block-cover, .wp-block-cover__inner-container, .uagb-section, .uagb-section__inner-wrap { background-color: var(--sc-black) !important; } /* Section background overrides */ .wp-block-group, .wp-block-group__inner-container { background-color: transparent !important; } /* Alternate dark section */ .wp-block-group.has-background, section.wp-block-group { background-color: var(--sc-black-soft) !important; } /* ======================================== BUTTONS & CTAs ======================================== */ .wp-block-button__link, .wp-block-button .wp-block-button__link, .ast-button, .ast-custom-button, .wpcf7-submit, input[type="submit"], button[type="submit"], .edd-submit, .button, .btn { background: var(--sc-gradient-gold) !important; color: var(--sc-black) !important; border: none !important; font-weight: 700 !important; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 20px var(--sc-gold-glow), 0 0 0 1px var(--sc-gold-deep) !important; transition: all 0.3s ease !important; border-radius: 4px !important; } .wp-block-button__link:hover, .ast-button:hover, input[type="submit"]:hover, button[type="submit"]:hover, .button:hover, .btn:hover { background: linear-gradient(135deg, #FFD700 0%, #E8A020 100%) !important; box-shadow: 0 6px 28px var(--sc-gold-glow-strong), 0 0 0 1px var(--sc-gold-primary) !important; transform: translateY(-2px) !important; color: var(--sc-black) !important; } /* Outline button variant */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; border: 2px solid var(--sc-gold-primary) !important; color: var(--sc-gold-primary) !important; box-shadow: none !important; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--sc-gold-primary) !important; color: var(--sc-black) !important; box-shadow: 0 4px 20px var(--sc-gold-glow) !important; } /* ======================================== FORMS & INPUTS ======================================== */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], textarea, select, .wpcf7-form-control:not(.wpcf7-submit), .sureforms-field input, .sureforms-field textarea, .wpforms-field input, .wpforms-field textarea, .wpforms-field select { background-color: var(--sc-black-card) !important; border: 1px solid var(--sc-gold-deep) !important; color: var(--sc-text-primary) !important; border-radius: 4px !important; transition: border-color 0.25s ease, box-shadow 0.25s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus, .wpcf7-form-control:focus { border-color: var(--sc-gold-primary) !important; box-shadow: 0 0 0 3px var(--sc-gold-glow) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: #666666 !important; } /* Form labels */ label, .wpcf7 label, .wpforms-field-label, .sureforms-field label { color: var(--sc-gold-light) !important; font-weight: 500; } /* ======================================== CARDS & CONTENT BLOCKS ======================================== */ .wp-block-column, .uagb-columns__inner-block, .uagb-column__inner-wrap { background-color: transparent !important; } /* Content cards — dark surface */ .wp-block-group.is-style-card, .uagb-container-inner-blocks-wrap, .latepoint-booking-form-main-wrap { background-color: var(--sc-black-card) !important; border: 1px solid var(--sc-black-border) !important; border-radius: 8px !important; } /* Separator / HR */ hr, .wp-block-separator { border-color: var(--sc-gold-deep) !important; opacity: 0.6; } /* Blockquotes */ blockquote, .wp-block-quote { border-left: 4px solid var(--sc-gold-primary) !important; background-color: var(--sc-black-card) !important; color: var(--sc-gold-light) !important; padding: 1rem 1.5rem !important; } /* ======================================== TABLES ======================================== */ table { border-collapse: collapse; width: 100%; } th { background: var(--sc-gradient-gold) !important; color: var(--sc-black) !important; font-weight: 700; padding: 10px 14px !important; } td { border: 1px solid var(--sc-black-border) !important; padding: 10px 14px !important; background-color: var(--sc-black-card) !important; } tr:hover td { background-color: var(--sc-black-soft) !important; } /* ======================================== SIDEBAR & WIDGETS ======================================== */ .widget-area, .sidebar-area, #secondary { background-color: transparent !important; } .widget, .widget-container { background-color: var(--sc-black-card) !important; border: 1px solid var(--sc-black-border) !important; border-radius: 6px !important; padding: 20px !important; margin-bottom: 24px !important; } .widget-title, .widgettitle { background: var(--sc-gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; border-bottom: 1px solid var(--sc-gold-deep) !important; padding-bottom: 8px !important; margin-bottom: 16px !important; } /* ======================================== FOOTER ======================================== */ .site-footer, #colophon, .ast-footer-overlay, .footer-widget-area, .ast-footer-widget-area { background-color: var(--sc-black-soft) !important; border-top: 1px solid var(--sc-gold-deep) !important; color: var(--sc-text-muted) !important; } .site-footer a, #colophon a { color: var(--sc-gold-warm) !important; } .site-footer a:hover, #colophon a:hover { color: var(--sc-gold-bright) !important; } .footer-widget-area .widget-title, .ast-footer-widget-area .widget-title { color: var(--sc-gold-primary) !important; -webkit-text-fill-color: var(--sc-gold-primary) !important; background: none !important; background-clip: unset !important; } .ast-footer-copyright, .footer-credit, #colophon p { color: #666666 !important; border-top: 1px solid var(--sc-black-border) !important; padding-top: 16px !important; } /* ======================================== UAG (ULTIMATE ADDONS FOR GUTENBERG) BLOCKS ======================================== */ /* UAG Info Box */ .uagb-infobox-wrap { background-color: var(--sc-black-card) !important; border: 1px solid var(--sc-black-border) !important; border-radius: 8px !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } .uagb-infobox-wrap:hover { border-color: var(--sc-gold-primary) !important; box-shadow: 0 8px 32px var(--sc-gold-glow) !important; } .uagb-ifb-title, .uagb-infobox-title-wrap h3, .uagb-infobox-title-wrap h4 { color: var(--sc-gold-light) !important; } .uagb-ifb-desc, .uagb-infobox-desc { color: var(--sc-text-muted) !important; } /* UAG Icon */ .uagb-icon svg, .uagb-ifb-icon-wrap svg { fill: var(--sc-gold-primary) !important; color: var(--sc-gold-primary) !important; } /* UAG Tabs */ .uagb-tabs__panel { background-color: var(--sc-black-card) !important; border: 1px solid var(--sc-black-border) !important; } .uagb-tabs__tab { background-color: var(--sc-black-soft) !important; color: var(--sc-text-muted) !important; border: 1px solid var(--sc-black-border) !important; } .uagb-tabs__tab.uagb-tabs__active, .uagb-tabs__tab:hover { background: var(--sc-gradient-gold) !important; color: var(--sc-black) !important; border-color: transparent !important; } /* UAG Timeline */ .uagb-timeline__line { background-color: var(--sc-gold-deep) !important; } .uagb-timeline__marker { background: var(--sc-gradient-gold) !important; border-color: var(--sc-gold-bright) !important; } /* UAG FAQ / Accordion */ .uagb-faq-child__question { background-color: var(--sc-black-card) !important; color: var(--sc-gold-light) !important; border: 1px solid var(--sc-black-border) !important; } .uagb-faq-child__question:hover, .uagb-faq-child.uagb-faq-child--active .uagb-faq-child__question { background-color: var(--sc-black-soft) !important; border-color: var(--sc-gold-primary) !important; color: var(--sc-gold-bright) !important; } .uagb-faq-child__answer { background-color: var(--sc-black-soft) !important; color: var(--sc-text-muted) !important; border: 1px solid var(--sc-black-border) !important; border-top: none !important; } /* UAG Section */ .uagb-section__wrap { background-color: var(--sc-black) !important; } /* ======================================== LATEPOINT BOOKING ======================================== */ .latepoint-booking-form-main-wrap, .latepoint-step, .latepoint-calendar, .latepoint-timeslots-wrap { background-color: var(--sc-black-card) !important; border: 1px solid var(--sc-black-border) !important; color: var(--sc-text-primary) !important; border-radius: 8px !important; } .latepoint-btn, .latepoint-next-btn, .latepoint-confirm-btn { background: var(--sc-gradient-gold) !important; color: var(--sc-black) !important; border: none !important; font-weight: 700 !important; } .latepoint-calendar .latepoint-calendar-day.is-selected { background: var(--sc-gradient-gold) !important; color: var(--sc-black) !important; } .latepoint-calendar .latepoint-calendar-day:hover { background-color: var(--sc-black-soft) !important; border-color: var(--sc-gold-primary) !important; color: var(--sc-gold-bright) !important; } .latepoint-step-title, .latepoint-heading { color: var(--sc-gold-light) !important; } /* ======================================== MARQUEE / GLOW ACCENT ELEMENTS ======================================== */ /* Gold glow divider utility class */ .sc-gold-divider { width: 60px; height: 3px; background: var(--sc-gradient-gold); margin: 12px auto 24px; border-radius: 2px; box-shadow: 0 0 10px var(--sc-gold-glow-strong); } /* Glowing gold badge */ .sc-badge { display: inline-block; background: var(--sc-gradient-gold); color: var(--sc-black); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; box-shadow: 0 0 14px var(--sc-gold-glow); } /* ======================================== ASTRA SPECIFIC ======================================== */ .ast-page-builder-template .hfeed, .ast-page-builder-template .site-content { background-color: var(--sc-black) !important; } /* Scroll to top button */ .ast-scroll-top { background: var(--sc-gradient-gold) !important; color: var(--sc-black) !important; box-shadow: 0 4px 16px var(--sc-gold-glow) !important; } /* Breadcrumbs */ .ast-breadcrumbs-wrapper, .ast-breadcrumbs { background-color: transparent !important; color: var(--sc-text-muted) !important; } .ast-breadcrumbs a { color: var(--sc-gold-warm) !important; } /* Page header */ .ast-archive-description, .ast-page-header-content-wrap { background-color: var(--sc-black-soft) !important; border-bottom: 1px solid var(--sc-gold-deep) !important; } /* ======================================== GOOGLE SITE KIT & MISC ADMIN BARS ======================================== */ #wpadminbar { background-color: var(--sc-black-soft) !important; } /* ======================================== SCROLLBAR (webkit) ======================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--sc-black); } ::-webkit-scrollbar-thumb { background: var(--sc-gold-deep); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--sc-gold-primary); } /* ======================================== SELECTION ======================================== */ ::selection { background-color: var(--sc-gold-primary); color: var(--sc-black); } ::-moz-selection { background-color: var(--sc-gold-primary); color: var(--sc-black); } /* ======================================== MOBILE RESPONSIVE ======================================== */ @media (max-width: 768px) { .ast-mobile-menu-buttons button { color: var(--sc-gold-primary) !important; } .ast-mobile-header-wrap { background-color: var(--sc-black) !important; border-bottom: 1px solid var(--sc-gold-deep) !important; } .ast-mobile-menu-content, .mobile-menu-drawer { background-color: var(--sc-black-soft) !important; } .ast-mobile-menu-content .menu-item a { color: var(--sc-gold-light) !important; border-bottom: 1px solid var(--sc-black-border) !important; } }