/* * Theme Name: Rock Solid Solutions Child * Theme URI: https://rocksolid.guru * Description: Salient Child Theme — Command Design * Author: Purple AI, LLC / Web Design * Author URI: https://gopurple.ai * Template: salient * Version: 1.1.0 * License: GNU General Public License v2 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html * Text Domain: rss-child */ /* ============================================================ GOOGLE FONTS IMPORT ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:wght@500;700&display=swap'); /* ============================================================ CSS CUSTOM PROPERTIES (DESIGN TOKENS) ============================================================ */ :root { --rss-navy: #0a0f1e; --rss-dark: #0e1628; --rss-panel: #141e35; --rss-border: #1e2d4a; --rss-blue: #0066ff; --rss-cyan: #00d4ff; --rss-cyan-dim: rgba(0, 212, 255, 0.08); --rss-white: #f0f4ff; --rss-gray: #8a9bb5; --rss-light-gray: #c4d0e3; /* Typography */ --font-display: 'Bebas Neue', sans-serif; --font-condensed: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; } /* ============================================================ GLOBAL BASE — WHITE GAP FIX (DEFINITIVE) ROOT CAUSE: WordPress injects html.admin-bar { margin-top: 32px } via wp-admin/css/admin-bar.css. This pushes the entire element down, revealing whatever is behind it (white by default). Salient also injects body padding via JS for its fixed header. Both are killed here with targeted overrides. ============================================================ */ /* Step 1 — Dark background on the root covers every gap */ html { background: #0a0f1e !important; background-color: #0a0f1e !important; scroll-behavior: smooth; min-height: 100%; } /* Step 2 — The actual WordPress admin bar rule adds margin-top to html.admin-bar (NOT body). This is the white gap you see when logged in. Override it directly. */ html.admin-bar { margin-top: 0 !important; padding-top: 0 !important; background: #0a0f1e !important; } /* Step 3 — Body: dark, no margins, no padding */ body, body.admin-bar { font-family: var(--font-body) !important; background: #0a0f1e !important; background-color: var(--rss-navy) !important; color: var(--rss-white) !important; overflow-x: hidden; margin: 0 !important; padding: 0 !important; } /* Step 4 — Nuclear dark lock on every wrapper Salient can inject */ html, body, body.admin-bar, #ajax-content-wrap, #page-container, #main-content, #content, .container-wrap, #inner-content, .post-area, .full-width-content, .content-full-width, .page-template-default #page-container, .page-template-homepage #page-container, .home #page-container, #page-container > .container, .nectar-page-content-wrap, #nectar-sliding-panel, .page-template-no-sidebar #main-content, .page-template-no-sidebar-full-width #main-content, .single-page-area, #page-container .container, .wpb-content-wrapper, .vc_row-fluid, .vc_column_inner, .wpb_column, .wpb_wrapper, #header-space, #sliding-bar-wrap, .nectar-box-roll, .body-inner { background-color: var(--rss-navy) !important; } /* Step 5 — #header-space specifically: Salient JS sets its height dynamically to match the header. The background must be dark or you see a white band exactly as tall as the header. */ #header-space { background: #0a0f1e !important; background-color: #0a0f1e !important; border: none !important; box-shadow: none !important; } /* Step 6 — Nectar/WPBakery row types */ .vc_row, .vc_row-fluid, .full-width-section, .full-width-section .container, .wpb_row { background-color: var(--rss-navy) !important; background-image: none; } /* Step 7 — Remove any top spacing Salient JS adds to ajax wrap */ #ajax-content-wrap { padding-top: 0 !important; margin-top: 0 !important; } /* Step 8 — Admin bar: since we zeroed html.admin-bar margin-top, the fixed header needs to account for the 32px bar height itself */ #wpadminbar { background: #141e35 !important; border-bottom: 1px solid #1e2d4a !important; } /* Header sits below the admin bar when logged in */ body.admin-bar #header-outer { top: 32px !important; } @media screen and (max-width: 782px) { /* Mobile: admin bar collapses to 46px */ html.admin-bar { margin-top: 0 !important; } body.admin-bar #header-outer { top: 46px !important; } #wpadminbar { position: fixed !important; } } /* Full-page blueprint grid overlay */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(0, 102, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 102, 255, 0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } /* General container z-index lift above grid overlay */ #header-outer, .container, .full-width-section, #footer-outer, #page-header-wrap { position: relative; z-index: 1; } /* ============================================================ TYPOGRAPHY — GLOBAL OVERRIDES ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display) !important; color: var(--rss-white) !important; letter-spacing: 0.02em; } h3, h4 { font-family: var(--font-condensed) !important; letter-spacing: 0.05em; text-transform: uppercase; } p { font-family: var(--font-body) !important; color: var(--rss-light-gray); font-weight: 300; line-height: 1.75; font-size: 17px !important; } a { color: var(--rss-cyan); transition: color 0.2s; } a:hover { color: var(--rss-white); text-decoration: none; } /* Section label / eyebrow text utility */ .section-label, .nectar-fancy-box .title, span.sub-color { font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--rss-cyan) !important; margin-bottom: 12px; } /* Section titles via Nectar Heading element */ .nectar-highlighted-text, .nectar-heading h2, .nectar-heading h3 { font-family: var(--font-display) !important; color: var(--rss-white) !important; letter-spacing: 0.03em; } /* ============================================================ HEADER & NAVIGATION — SALIENT #header-outer ============================================================ */ /* Outer wrapper — fixed, full width, dark with blur */ #header-outer { background-color: rgba(10, 15, 30, 0.95) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--rss-border) !important; box-shadow: none !important; height: 72px !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; display: flex !important; align-items: center !important; overflow: visible !important; } #header-outer.scrolled, #header-outer.transparent-header-scrolled { background-color: rgba(10, 15, 30, 0.99) !important; } /* Inner header row — must be flex and vertically centered */ #header-inner, #header-outer > .container, #header-outer .row { height: 72px !important; display: flex !important; align-items: center !important; width: 100% !important; overflow: visible !important; } /* Logo */ #logo, #header-outer #logo { display: flex !important; align-items: center !important; height: 72px !important; flex-shrink: 0 !important; } #logo img, #header-outer #logo img { height: 42px !important; width: auto !important; max-height: 42px !important; filter: brightness(1.1) !important; display: block !important; } /* Navigation wrapper */ #header-outer nav, #header-outer .nav-outer, #header-outer #top-bar { display: flex !important; align-items: center !important; height: 72px !important; overflow: visible !important; } /* Main nav menu — all items visible and vertically centered */ #header-outer ul.sf-menu, #header-outer nav > ul { display: flex !important; align-items: center !important; list-style: none !important; height: 72px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #header-outer ul.sf-menu > li, #header-outer nav > ul > li { display: flex !important; align-items: center !important; height: 72px !important; position: relative !important; overflow: visible !important; } /* Nav link text */ #header-outer ul.sf-menu > li > a, #header-outer nav > ul > li > a { font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--rss-gray) !important; transition: color 0.2s !important; padding: 0 14px !important; display: flex !important; align-items: center !important; height: 72px !important; white-space: nowrap !important; text-decoration: none !important; } #header-outer ul.sf-menu > li > a:hover, #header-outer ul.sf-menu > li.current-menu-item > a, #header-outer ul.sf-menu > li.current_page_item > a { color: var(--rss-cyan) !important; background: transparent !important; } /* Dropdown menus */ #header-outer ul.sf-menu ul, #header-outer ul.sf-menu .sub-menu { background: var(--rss-panel) !important; border: 1px solid var(--rss-border) !important; border-top: 2px solid var(--rss-cyan) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important; position: absolute !important; top: 72px !important; left: 0 !important; min-width: 200px !important; z-index: 10000 !important; } #header-outer ul.sf-menu ul li a, #header-outer ul.sf-menu .sub-menu li a { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--rss-gray) !important; border-bottom: 1px solid var(--rss-border) !important; padding: 12px 18px !important; height: auto !important; display: block !important; } #header-outer ul.sf-menu ul li a:hover, #header-outer ul.sf-menu .sub-menu li a:hover { color: var(--rss-cyan) !important; background: rgba(0, 212, 255, 0.05) !important; } /* Header CTA button — "Contact Us" */ #header-outer ul.sf-menu > li.btn > a, #header-outer ul.sf-menu > li:last-child > a, .nav-contact-cta > a { background: var(--rss-blue) !important; color: #ffffff !important; padding: 10px 22px !important; height: auto !important; border-radius: 3px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; transition: background 0.2s !important; } #header-outer ul.sf-menu > li.btn > a:hover, #header-outer ul.sf-menu > li:last-child > a:hover { background: #0055d4 !important; color: #ffffff !important; } /* Mobile hamburger */ #mobile-menu-button, .mobile-menu-btn { display: flex !important; align-items: center !important; } #mobile-menu-button span, .mobile-menu-btn span { background: var(--rss-white) !important; } /* ============================================================ SALIENT PAGE HEADER SUPPRESSION Salient injects a #page-header-wrap above the page content area by default. On our custom-built pages this creates a large empty gap between the nav and our own hero sections. We collapse it completely — our HTML pages have their own hero sections that replace it. ============================================================ */ /* Collapse the auto-generated Salient page title area */ #page-header-wrap { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } /* Also suppress the breadcrumb bar Salient inserts */ #breadcrumb-block, .page-header-bg, .page-intro-text, #page-header-bg { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } /* #ajax-content-wrap must start right below the header — no top padding that Salient JS might add */ #ajax-content-wrap, #page-container { padding-top: 0 !important; margin-top: 0 !important; } /* ============================================================ PAGE HERO / HEADER — #page-header-wrap (styled version) Only used if a page explicitly includes the class ============================================================ */ .rss-page-header-wrap, .container.page-header-bg { background-color: var(--rss-navy) !important; position: relative; overflow: hidden; } /* Radial glow orbs on page headers */ #page-header-wrap::after { content: ''; position: absolute; width: 800px; height: 800px; right: -200px; top: 50%; transform: translateY(-50%); background: radial-gradient(ellipse, rgba(0, 102, 255, 0.12) 0%, transparent 70%); pointer-events: none; } #page-header-wrap::before { content: ''; position: absolute; width: 500px; height: 500px; left: 200px; bottom: -100px; background: radial-gradient(ellipse, rgba(0, 212, 255, 0.06) 0%, transparent 70%); pointer-events: none; } #page-header-wrap .inner-wrap h1, #page-header-wrap h1 { font-family: var(--font-display) !important; font-size: clamp(72px, 10vw, 130px) !important; line-height: 0.92 !important; letter-spacing: 0.02em !important; color: var(--rss-white) !important; animation: rss-fadeUp 0.6s ease both; } #page-header-wrap .inner-wrap p, #page-header-wrap p { font-size: 17px !important; line-height: 1.7 !important; color: var(--rss-light-gray) !important; font-weight: 300 !important; max-width: 520px; animation: rss-fadeUp 0.6s ease 0.2s both; } /* Hero badge / eyebrow on page headers */ #page-header-wrap .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--rss-cyan-dim); border: 1px solid rgba(0, 212, 255, 0.2); border-radius: 2px; padding: 7px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rss-cyan); margin-bottom: 32px; animation: rss-fadeUp 0.6s ease both; } #page-header-wrap .hero-badge::before { content: ''; width: 6px; height: 6px; background: var(--rss-cyan); border-radius: 50%; animation: rss-pulse 2s infinite; } /* Hero sub-tagline */ .hero-sub, #page-header-wrap .tagline { font-family: var(--font-condensed) !important; font-size: 22px !important; font-weight: 500 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--rss-gray) !important; margin-bottom: 28px; } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes rss-fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes rss-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } /* ============================================================ BUTTONS — NECTAR BUTTONS & GLOBAL ============================================================ */ /* Primary button */ .nectar-button, .nectar-button.see-through, a.nectar-button, input[type="submit"], button[type="submit"], .btn-primary, .wpcf7-submit { background: var(--rss-blue) !important; color: #ffffff !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: 3px !important; border: none !important; padding: 16px 36px !important; transition: background 0.2s, transform 0.2s !important; box-shadow: none !important; } .nectar-button:hover, a.nectar-button:hover, input[type="submit"]:hover, .btn-primary:hover, .wpcf7-submit:hover { background: #0055d4 !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* Ghost / secondary link buttons */ .btn-ghost, .nectar-button.see-through-2 { color: var(--rss-gray) !important; background: transparent !important; border: none !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.06em !important; } .btn-ghost:hover, .nectar-button.see-through-2:hover { color: var(--rss-white) !important; background: transparent !important; } /* White button (used on colored band sections) */ .btn-white { background: #ffffff !important; color: var(--rss-blue) !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: 3px !important; padding: 16px 36px !important; transition: transform 0.2s !important; display: inline-block; } .btn-white:hover { transform: translateY(-2px) !important; color: var(--rss-blue) !important; } /* ============================================================ MAIN CONTENT AREA ============================================================ */ #page-container, #main-content, .container .row, .wpb_wrapper { background-color: transparent; color: var(--rss-white); } /* All Nectar/WPBakery rows on dark bg */ .vc_row, .wpb_row, .full-width-section { background-color: var(--rss-navy); } /* Standard section padding */ .vc_row, .wpb_row { position: relative; z-index: 1; } /* Inner sections / panels */ .vc_row.panel-bg, .wpb_row.panel-bg, .rss-panel-bg { background-color: var(--rss-panel) !important; } .vc_row.dark-bg, .wpb_row.dark-bg, .rss-dark-bg { background-color: var(--rss-dark) !important; } /* ============================================================ STATS STRIP ============================================================ */ .stats-strip, .rss-stats-strip { border-top: 1px solid var(--rss-border) !important; border-bottom: 1px solid var(--rss-border) !important; background: var(--rss-panel) !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; padding: 0 48px !important; position: relative; z-index: 2; } .stat-item { padding: 36px 24px !important; border-right: 1px solid var(--rss-border) !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .stat-item:last-child { border-right: none !important; } .stat-number { font-family: var(--font-display) !important; font-size: 52px !important; line-height: 1 !important; color: var(--rss-white) !important; letter-spacing: 0.02em !important; } .stat-number span { color: var(--rss-cyan) !important; } .stat-label { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--rss-gray) !important; } /* ============================================================ SERVICE CARDS (Works with Nectar Icon Boxes or WPBakery columns) ============================================================ */ /* Grid container */ .services-grid, .rss-services-grid, .nectar-icon-list { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 2px !important; background: var(--rss-border) !important; border: 1px solid var(--rss-border) !important; } /* Individual card — targets Nectar Icon Box and custom cards */ .service-card, .nectar-icon-list-item, .icon-box-wrap, .wpb_content_element.service-card { background: var(--rss-dark) !important; padding: 44px 36px !important; position: relative !important; overflow: hidden !important; transition: background 0.3s !important; } /* Animated top-edge gradient reveal on hover */ .service-card::before, .nectar-icon-list-item::before, .icon-box-wrap::before { content: '' !important; position: absolute !important; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--rss-blue), var(--rss-cyan)) !important; transform: scaleX(0) !important; transform-origin: left !important; transition: transform 0.4s ease !important; } .service-card:hover::before, .nectar-icon-list-item:hover::before, .icon-box-wrap:hover::before { transform: scaleX(1) !important; } .service-card:hover, .nectar-icon-list-item:hover, .icon-box-wrap:hover { background: var(--rss-panel) !important; } /* Service icon */ .service-icon, .nectar-icon-list-item .icon i, .icon-box-wrap .icon i { color: var(--rss-cyan) !important; font-size: 36px !important; margin-bottom: 24px !important; } /* Service card heading */ .service-card h3, .nectar-icon-list-item h3, .icon-box-wrap h3 { font-family: var(--font-condensed) !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--rss-white) !important; margin-bottom: 12px !important; } /* Service card body */ .service-card p, .nectar-icon-list-item p, .icon-box-wrap p { font-size: 15px !important; line-height: 1.6 !important; color: var(--rss-gray) !important; font-weight: 300 !important; } /* Ghost number watermark */ .service-num { position: absolute !important; top: 24px !important; right: 28px !important; font-family: var(--font-display) !important; font-size: 42px !important; color: rgba(255, 255, 255, 0.04) !important; letter-spacing: 0.02em !important; line-height: 1 !important; pointer-events: none; } /* ============================================================ UNIFI / HIGHLIGHT BAND (Full-width colored CTA row) ============================================================ */ .unifi-band, .rss-highlight-band, .full-width-section.unifi-band { background: linear-gradient(135deg, var(--rss-blue) 0%, #0044aa 100%) !important; padding: 60px 48px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 40px !important; position: relative !important; overflow: hidden !important; } /* Decorative background circle */ .unifi-band::after { content: ''; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); pointer-events: none; } .unifi-band h2, .rss-highlight-band h2 { font-family: var(--font-display) !important; font-size: 44px !important; letter-spacing: 0.04em !important; line-height: 1 !important; color: #ffffff !important; } .unifi-band p, .rss-highlight-band p { font-size: 16px !important; line-height: 1.6 !important; opacity: 0.85 !important; max-width: 440px !important; font-weight: 300 !important; color: #ffffff !important; } /* ============================================================ WHY US / TWO-COLUMN ABOUT SECTION ============================================================ */ .why-section, .rss-why { padding: 100px 48px !important; position: relative; z-index: 2; } .why-text p { font-size: 16px !important; line-height: 1.8 !important; color: var(--rss-light-gray) !important; font-weight: 300 !important; margin-bottom: 20px !important; } /* Pillar grid (2x2 feature boxes) */ .why-pillars, .rss-pillars { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2px !important; background: var(--rss-border) !important; border: 1px solid var(--rss-border) !important; } .pillar { background: var(--rss-panel) !important; padding: 36px 28px !important; } .pillar-icon, .pillar .icon i { color: var(--rss-blue) !important; font-size: 28px !important; margin-bottom: 16px !important; } .pillar h4 { font-family: var(--font-condensed) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--rss-white) !important; margin-bottom: 8px !important; } .pillar p { font-size: 14px !important; line-height: 1.6 !important; color: var(--rss-gray) !important; } /* ============================================================ NECTAR / WPBAKERY FEATURE BOX & ICON BOX OVERRIDES ============================================================ */ .nectar-icon-box, .wpb_single_image, .feature_line_holder .feature_line { background: var(--rss-dark) !important; border: 1px solid var(--rss-border) !important; color: var(--rss-white) !important; } .nectar-icon-box h3, .nectar-icon-box .title { font-family: var(--font-condensed) !important; font-size: 20px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--rss-white) !important; } .nectar-icon-box p, .nectar-icon-box .description { color: var(--rss-gray) !important; font-weight: 300 !important; } /* Icon color */ .nectar-icon-box .icon i, .nectar-icon-box svg { color: var(--rss-cyan) !important; fill: var(--rss-cyan) !important; } /* Nectar CTA (Call To Action element) */ .nectar-cta { background: var(--rss-panel) !important; border-top: 1px solid var(--rss-border) !important; } .nectar-cta h2, .nectar-cta .cta-title { font-family: var(--font-display) !important; font-size: clamp(48px, 7vw, 90px) !important; line-height: 0.95 !important; letter-spacing: 0.03em !important; color: var(--rss-white) !important; } .nectar-cta h2 .accent, .nectar-cta .accent { color: var(--rss-cyan) !important; } .nectar-cta p { font-size: 17px !important; color: var(--rss-gray) !important; font-weight: 300 !important; max-width: 480px; margin: 0 auto; } /* ============================================================ CTA / CONTACT SECTION ============================================================ */ .cta-section, .rss-cta-section { padding: 100px 48px !important; text-align: center !important; border-top: 1px solid var(--rss-border) !important; background: var(--rss-navy) !important; position: relative; z-index: 2; } .cta-contact-row { display: flex !important; justify-content: center !important; gap: 32px !important; margin-top: 40px !important; flex-wrap: wrap !important; } .cta-contact-item { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; color: var(--rss-gray) !important; } .cta-contact-item svg, .cta-contact-item i { color: var(--rss-cyan) !important; } .cta-contact-item a { color: var(--rss-gray) !important; } .cta-contact-item a:hover { color: var(--rss-cyan) !important; } /* ============================================================ CONTACT FORM 7 OVERRIDES ============================================================ */ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select { background: #141e35 !important; background-color: #141e35 !important; border: 1px solid var(--rss-border) !important; border-radius: 3px !important; color: #f0f4ff !important; font-family: var(--font-body) !important; font-size: 16px !important; padding: 14px 18px !important; width: 100% !important; transition: border-color 0.2s !important; -webkit-appearance: none !important; appearance: none !important; color-scheme: dark !important; } .wpcf7 input[type="text"]:focus, .wpcf7 input[type="email"]:focus, .wpcf7 input[type="tel"]:focus, .wpcf7 textarea:focus { border-color: var(--rss-cyan) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08) !important; } .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: var(--rss-gray) !important; opacity: 0.6; } .wpcf7 label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--rss-gray) !important; margin-bottom: 6px !important; display: block; } /* ============================================================ BROWSER DARK MODE — FORM INPUT FIX Some browsers (Chrome, Edge, Firefox in dark mode) override input field backgrounds. Force our dark theme on all inputs site-wide so fields stay readable in dark mode. ============================================================ */ input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], textarea, select { color-scheme: dark !important; background-color: #141e35 !important; color: #f0f4ff !important; -webkit-text-fill-color: #f0f4ff !important; } input::placeholder, textarea::placeholder { color: #8a9bb5 !important; opacity: 1 !important; } /* Specifically target CF7's wrapper to prevent inheritance issues */ .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { background: #141e35 !important; background-color: #141e35 !important; color: #f0f4ff !important; -webkit-text-fill-color: #f0f4ff !important; color-scheme: dark !important; } /* Autofill override — browsers turn autofilled fields yellow/white */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #141e35 inset !important; -webkit-text-fill-color: #f0f4ff !important; caret-color: #f0f4ff !important; } /* ============================================================ FOOTER — #footer-outer ============================================================ */ #footer-outer { background: var(--rss-panel) !important; border-top: 1px solid var(--rss-border) !important; color: var(--rss-gray) !important; } #footer-inner { border-top: none !important; padding: 32px 48px !important; } /* Logo in footer */ #footer-outer #logo img { height: 32px !important; filter: brightness(0.7) !important; } /* Footer nav links */ #footer-outer ul li a, #footer-outer .footer-links a { font-size: 13px !important; color: var(--rss-gray) !important; letter-spacing: 0.04em !important; transition: color 0.2s !important; text-decoration: none !important; } #footer-outer ul li a:hover, #footer-outer .footer-links a:hover { color: var(--rss-cyan) !important; } /* Footer copyright text */ #footer-outer p, #footer-outer .copyright { font-size: 13px !important; color: var(--rss-gray) !important; letter-spacing: 0.04em !important; } /* Footer widget headings */ #footer-outer .widget-title, #footer-outer h4 { font-family: var(--font-condensed) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--rss-white) !important; margin-bottom: 16px !important; } /* Social icons in footer */ #footer-outer .nectar-social a, #footer-outer .social-icons a { color: var(--rss-gray) !important; transition: color 0.2s !important; } #footer-outer .nectar-social a:hover, #footer-outer .social-icons a:hover { color: var(--rss-cyan) !important; } /* ============================================================ BACK TO TOP BUTTON ============================================================ */ #to-top { background: var(--rss-blue) !important; border-radius: 3px !important; } #to-top:hover { background: #0055d4 !important; } /* ============================================================ DIVIDERS & HR ============================================================ */ hr, .divider { border-color: var(--rss-border) !important; } /* ============================================================ BLOG / POST CARDS ============================================================ */ .blog-item-wrap, .post-area article { background: var(--rss-dark) !important; border: 1px solid var(--rss-border) !important; transition: background 0.3s, border-color 0.3s !important; } .blog-item-wrap:hover, .post-area article:hover { background: var(--rss-panel) !important; border-color: var(--rss-blue) !important; } .blog-item-wrap h2 a, .post-area article h2 a { font-family: var(--font-condensed) !important; font-weight: 700 !important; letter-spacing: 0.05em !important; color: var(--rss-white) !important; } .blog-item-wrap h2 a:hover, .post-area article h2 a:hover { color: var(--rss-cyan) !important; } .blog-item-wrap p, .post-area article p { color: var(--rss-gray) !important; } .post-meta, .entry-meta, .blog-item-wrap .meta { color: var(--rss-gray) !important; font-size: 12px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .post-meta a, .entry-meta a { color: var(--rss-cyan) !important; } /* ============================================================ SINGLE POST / PAGE CONTENT AREA ============================================================ */ .post-content, .page-content, #page-container .wpb_text_column p { color: var(--rss-light-gray) !important; font-size: 16px !important; line-height: 1.8 !important; font-weight: 300 !important; } .post-content h2, .post-content h3, .page-content h2, .page-content h3 { font-family: var(--font-condensed) !important; color: var(--rss-white) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-top: 40px !important; margin-bottom: 16px !important; } .post-content a, .page-content a { color: var(--rss-cyan) !important; border-bottom: 1px solid rgba(0, 212, 255, 0.3) !important; } .post-content a:hover, .page-content a:hover { color: var(--rss-white) !important; border-color: var(--rss-white) !important; } /* Blockquote */ blockquote { border-left: 3px solid var(--rss-cyan) !important; background: var(--rss-panel) !important; padding: 24px 28px !important; margin: 32px 0 !important; font-style: italic !important; color: var(--rss-light-gray) !important; } /* ============================================================ SIDEBAR WIDGETS ============================================================ */ #sidebar .widget { background: var(--rss-panel) !important; border: 1px solid var(--rss-border) !important; padding: 28px !important; margin-bottom: 24px !important; } #sidebar .widget-title { font-family: var(--font-condensed) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--rss-white) !important; margin-bottom: 16px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--rss-border) !important; } #sidebar ul li a { color: var(--rss-gray) !important; font-size: 14px !important; transition: color 0.2s !important; } #sidebar ul li a:hover { color: var(--rss-cyan) !important; } /* ============================================================ SEARCH FORM ============================================================ */ .search-form input[type="text"], .search-form input[type="search"] { background: var(--rss-dark) !important; border: 1px solid var(--rss-border) !important; color: var(--rss-white) !important; font-family: var(--font-body) !important; border-radius: 3px !important; padding: 12px 18px !important; } .search-form input:focus { border-color: var(--rss-cyan) !important; outline: none !important; } .search-form input[type="submit"] { background: var(--rss-blue) !important; color: #ffffff !important; } /* ============================================================ PAGINATION ============================================================ */ .pagination .page-numbers, .nav-links .page-numbers { background: var(--rss-panel) !important; border: 1px solid var(--rss-border) !important; color: var(--rss-gray) !important; border-radius: 3px !important; padding: 8px 14px !important; transition: background 0.2s, color 0.2s !important; } .pagination .page-numbers:hover, .pagination .page-numbers.current, .nav-links .page-numbers:hover, .nav-links .page-numbers.current { background: var(--rss-blue) !important; border-color: var(--rss-blue) !important; color: #ffffff !important; } /* ============================================================ ACCENT COLOR UTILITY CLASS ============================================================ */ .rss-accent, .accent { color: var(--rss-cyan) !important; } .rss-accent-blue { color: var(--rss-blue) !important; } /* ============================================================ RESPONSIVE — TABLET (max-width: 1024px) ============================================================ */ @media only screen and (max-width: 1024px) { .services-grid, .rss-services-grid { grid-template-columns: repeat(2, 1fr) !important; } .stats-strip, .rss-stats-strip { grid-template-columns: repeat(2, 1fr) !important; padding: 0 24px !important; } .stat-item:nth-child(2) { border-right: none !important; } .why-pillars { grid-template-columns: 1fr !important; } .unifi-band, .rss-highlight-band { flex-direction: column !important; text-align: center !important; gap: 24px !important; padding: 48px 32px !important; } } /* ============================================================ RESPONSIVE — MOBILE (max-width: 768px) ============================================================ */ @media only screen and (max-width: 768px) { #header-outer { height: 64px !important; } #logo img, #header-outer #logo img { height: 34px !important; } .services-grid, .rss-services-grid { grid-template-columns: 1fr !important; } .stats-strip, .rss-stats-strip { grid-template-columns: 1fr 1fr !important; padding: 0 !important; } .stat-item { padding: 24px 18px !important; } .stat-number { font-size: 38px !important; } #page-header-wrap .inner-wrap h1, #page-header-wrap h1 { font-size: clamp(52px, 14vw, 90px) !important; } .cta-section, .rss-cta-section { padding: 72px 24px !important; } .cta-contact-row { flex-direction: column !important; align-items: center !important; gap: 16px !important; } .why-section, .rss-why { padding: 60px 24px !important; } #footer-inner { padding: 32px 24px !important; flex-direction: column !important; gap: 24px !important; } } /* ============================================================ UNIFI PROJECT FORM — CF7 COMPLETE RESTYLE ============================================================ */ /* Card wrapper */ .form-card { background: #141e35 !important; border: 1px solid #1e2d4a !important; padding: 40px !important; position: relative !important; } .form-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #0066ff, #00d4ff) !important; } .form-card h3 { font-family: 'Bebas Neue', sans-serif !important; font-size: 28px !important; letter-spacing: .03em !important; color: #f0f4ff !important; margin-bottom: 4px !important; } .form-subtitle { font-size: 13px !important; color: #8a9bb5 !important; font-weight: 300 !important; margin-bottom: 24px !important; display: block !important; } /* Form grid */ .form-card .wpcf7 form { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 20px !important; width: 100% !important; } /* Each CF7 paragraph is a grid item */ .form-card .wpcf7 form > p { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 5px !important; } .form-card .wpcf7 form > p > br { display: none !important; } /* Full-width rows: services checkboxes (p5), textarea (p6), budget row (p7+p8 paired), support row (p9+p10 paired), consent, submit */ .form-card .wpcf7 form > p:nth-child(5), .form-card .wpcf7 form > p:nth-child(6), .form-card .wpcf7 form > p:last-of-type, .form-card .wpcf7 form > .wpcf7-response-output { grid-column: 1 / -1 !important; } /* Section dividers */ .form-card .wpcf7 form > p:nth-child(4) { position: relative !important; padding-bottom: 16px !important; } .form-card .wpcf7 form > p:nth-child(4)::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: #1e2d4a !important; } .form-card .wpcf7 form > p:nth-child(5) { padding-top: 4px !important; padding-bottom: 16px !important; position: relative !important; } .form-card .wpcf7 form > p:nth-child(5)::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: #1e2d4a !important; } .form-card .wpcf7 form > p:nth-child(6) { padding-bottom: 16px !important; position: relative !important; } .form-card .wpcf7 form > p:nth-child(6)::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: #1e2d4a !important; } /* Labels */ .form-card .wpcf7 label { font-family: 'Barlow', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #8a9bb5 !important; -webkit-text-fill-color: #8a9bb5 !important; display: block !important; margin-bottom: 0 !important; } /* Text inputs */ .form-card .wpcf7 input[type="text"], .form-card .wpcf7 input[type="email"], .form-card .wpcf7 input[type="tel"], .form-card .wpcf7 input[type="url"] { background: rgba(255,255,255,0.04) !important; background-color: rgba(255,255,255,0.04) !important; border: none !important; border-bottom: 1px solid #1e2d4a !important; border-radius: 0 !important; padding: 10px 0 !important; font-size: 14px !important; color: #f0f4ff !important; -webkit-text-fill-color: #f0f4ff !important; font-family: 'Barlow', sans-serif !important; font-weight: 400 !important; width: 100% !important; outline: none !important; -webkit-appearance: none !important; color-scheme: dark !important; display: block !important; transition: border-color .2s !important; background: transparent !important; } .form-card .wpcf7 input[type="text"]:focus, .form-card .wpcf7 input[type="email"]:focus, .form-card .wpcf7 input[type="tel"]:focus { border-bottom-color: #00d4ff !important; box-shadow: none !important; outline: none !important; } .form-card .wpcf7 input::placeholder { color: rgba(255,255,255,0.25) !important; } /* Textarea */ .form-card .wpcf7 textarea { background: rgba(255,255,255,0.04) !important; border: 1px solid #1e2d4a !important; border-radius: 3px !important; padding: 12px 14px !important; font-size: 14px !important; color: #f0f4ff !important; -webkit-text-fill-color: #f0f4ff !important; font-family: 'Barlow', sans-serif !important; width: 100% !important; min-height: 100px !important; resize: vertical !important; outline: none !important; color-scheme: dark !important; transition: border-color .2s !important; } .form-card .wpcf7 textarea:focus { border-color: #00d4ff !important; } .form-card .wpcf7 textarea::placeholder { color: rgba(255,255,255,0.2) !important; } /* Selects */ .form-card .wpcf7 select { background: rgba(255,255,255,0.04) !important; border: none !important; border-bottom: 1px solid #1e2d4a !important; border-radius: 0 !important; padding: 10px 32px 10px 0 !important; font-size: 14px !important; color: #f0f4ff !important; -webkit-text-fill-color: #f0f4ff !important; font-family: 'Barlow', sans-serif !important; width: 100% !important; outline: none !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; color-scheme: dark !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238a9bb5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 4px center !important; transition: border-color .2s !important; } .form-card .wpcf7 select:focus { border-bottom-color: #00d4ff !important; } .form-card .wpcf7 select option { background: #141e35 !important; color: #f0f4ff !important; } /* Checkboxes — 2-col bordered tiles */ .form-card .wpcf7 .wpcf7-checkbox { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .form-card .wpcf7 .wpcf7-list-item { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; background: rgba(255,255,255,0.03) !important; border: 1px solid #1e2d4a !important; border-radius: 3px !important; padding: 0 !important; cursor: pointer !important; transition: background .2s, border-color .2s !important; } .form-card .wpcf7 .wpcf7-list-item:hover { background: rgba(0,212,255,0.06) !important; border-color: rgba(0,212,255,0.25) !important; } /* The label wraps the entire tile — clicking anywhere checks the right box */ .form-card .wpcf7 .wpcf7-list-item label { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 10px 14px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #c4d0e3 !important; -webkit-text-fill-color: #c4d0e3 !important; cursor: pointer !important; margin: 0 !important; line-height: 1.3 !important; } .form-card .wpcf7 input[type="checkbox"] { width: 15px !important; height: 15px !important; min-width: 15px !important; padding: 0 !important; accent-color: #00d4ff !important; cursor: pointer !important; flex-shrink: 0 !important; } /* Acceptance */ .form-card .wpcf7 .wpcf7-acceptance { grid-column: 1 / -1 !important; } .form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item { background: none !important; border: none !important; padding: 0 !important; } .form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item label { font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; color: #8a9bb5 !important; -webkit-text-fill-color: #8a9bb5 !important; font-weight: 400 !important; } /* Submit */ .form-card .wpcf7 input[type="submit"] { grid-column: 1 / -1 !important; background: #0066ff !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: none !important; border-radius: 3px !important; padding: 16px 36px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; font-family: 'Barlow', sans-serif !important; cursor: pointer !important; width: 100% !important; -webkit-appearance: none !important; display: block !important; margin-top: 8px !important; transition: background .2s, transform .2s !important; } .form-card .wpcf7 input[type="submit"]:hover { background: #0055d4 !important; transform: translateY(-1px) !important; } /* Response messages */ .form-card .wpcf7-response-output, .form-card .wpcf7 .wpcf7-response-output { grid-column: 1 / -1 !important; border-radius: 3px !important; padding: 14px 20px !important; font-size: 14px !important; font-family: 'Barlow', sans-serif !important; font-weight: 500 !important; margin: 8px 0 0 !important; border-width: 1px !important; border-style: solid !important; display: block !important; } /* Success */ .form-card .wpcf7-mail-sent-ok, div.wpcf7 .wpcf7-mail-sent-ok { background: rgba(0,200,150,0.12) !important; background-color: rgba(0,200,150,0.12) !important; border-color: rgba(0,200,150,0.4) !important; color: #00c896 !important; -webkit-text-fill-color: #00c896 !important; } /* Validation errors */ .form-card .wpcf7-validation-errors, div.wpcf7 .wpcf7-validation-errors { background: rgba(255,80,80,0.10) !important; background-color: rgba(255,80,80,0.10) !important; border-color: rgba(255,80,80,0.3) !important; color: #ff6060 !important; -webkit-text-fill-color: #ff6060 !important; } /* Server error */ .form-card .wpcf7-mail-sent-ng, div.wpcf7 .wpcf7-mail-sent-ng { background: rgba(255,80,80,0.10) !important; background-color: rgba(255,80,80,0.10) !important; border-color: rgba(255,80,80,0.3) !important; color: #ff6060 !important; -webkit-text-fill-color: #ff6060 !important; } /* Inline validation tip */ .form-card .wpcf7-not-valid-tip, .wpcf7-not-valid-tip { color: #ff6060 !important; -webkit-text-fill-color: #ff6060 !important; font-size: 11px !important; font-family: 'Barlow', sans-serif !important; margin-top: 4px !important; display: block !important; background: transparent !important; border: none !important; padding: 0 !important; } /* Autofill */ .form-card .wpcf7 input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #141e35 inset !important; -webkit-text-fill-color: #f0f4ff !important; } /* ============================================================ CF7 RESPONSE MESSAGE — NUCLEAR OVERRIDE Fixes white-on-white success message on UniFi page ============================================================ */ .wpcf7-response-output, div.wpcf7 .wpcf7-response-output, div.wpcf7-response-output, .wpcf7 .wpcf7-response-output, form.wpcf7-form .wpcf7-response-output, .form-card .wpcf7-response-output, .form-card div.wpcf7 .wpcf7-response-output { background: transparent !important; background-color: transparent !important; color: #00c896 !important; -webkit-text-fill-color: #00c896 !important; border: 1px solid rgba(0,200,150,0.4) !important; border-radius: 3px !important; padding: 14px 20px !important; font-size: 14px !important; font-family: 'Barlow', sans-serif !important; font-weight: 500 !important; margin-top: 12px !important; } .wpcf7-mail-sent-ok, div.wpcf7 .wpcf7-mail-sent-ok, .form-card .wpcf7-mail-sent-ok { background: rgba(0,200,150,0.10) !important; background-color: rgba(0,200,150,0.10) !important; color: #00c896 !important; -webkit-text-fill-color: #00c896 !important; border-color: rgba(0,200,150,0.4) !important; } .wpcf7-mail-sent-ng, .wpcf7-validation-errors, .wpcf7-acceptance-missing, div.wpcf7 .wpcf7-mail-sent-ng, div.wpcf7 .wpcf7-validation-errors { background: rgba(255,80,80,0.10) !important; background-color: rgba(255,80,80,0.10) !important; color: #ff6060 !important; -webkit-text-fill-color: #ff6060 !important; border-color: rgba(255,80,80,0.3) !important; } /* ============================================================ CF7 CHECKBOX — FIRST-CLICK BUG FIX Container was capturing clicks and firing on first input. Block pointer events on container, restore on items only. ============================================================ */ .form-card .wpcf7 .wpcf7-checkbox { pointer-events: none !important; } .form-card .wpcf7 .wpcf7-list-item { pointer-events: auto !important; } .form-card .wpcf7 .wpcf7-list-item label { pointer-events: auto !important; cursor: pointer !important; } .form-card .wpcf7 .wpcf7-list-item input[type="checkbox"] { pointer-events: auto !important; cursor: pointer !important; position: relative !important; z-index: 2 !important; } /* Prevent any click on the tile background from bubbling to the wrong input */ .form-card .wpcf7 .wpcf7-list-item label { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 10px 14px !important; user-select: none !important; -webkit-user-select: none !important; }