/* ============================================================ NOCRAX.COM — LIGHT THEME Drop this file AFTER your existing style.css in the OR paste it at the very bottom of style.css Strategy: - Warm off-white base, deep charcoal text - Orange stays identical — pops harder on light - Hero & CTA band stay dark for drama - Section alternates: light / warm-grey / light - Cards: white with warm borders - All existing class names preserved ============================================================ */ /* ── ROOT COLOUR OVERRIDES ── */ :root { /* Backgrounds — light warm palette */ --color-bg: #f5f2ee; --color-asphalt-1: #ffffff; --color-asphalt-2: #f5f2ee; --color-asphalt-3: #ede9e3; --color-asphalt-4: rgba(0,0,0,0.1); --color-asphalt-5: rgba(0,0,0,0.06); /* Text */ --color-text: #1a1916; --color-text-muted: #5a5650; --color-text-dim: #9a9690; --color-white: #1a1916; /* Orange — unchanged, pops harder on light */ --color-orange: #f05a00; --color-orange-dk: #c44800; /* Borders */ --color-border: rgba(0,0,0,0.1); --color-border-light:rgba(0,0,0,0.06); /* Section backgrounds */ --color-section-dark: #f5f2ee; --color-section-darker: #ede9e3; --color-section-darkest: #e4e0d8; } /* ── BODY ── */ body { background: var(--color-bg); color: var(--color-text); } /* ── HERO — STAYS DARK ── */ /* The hero keeps its dark dramatic feel */ .hero { position: relative; min-height: 100vh; overflow: hidden; background: #000; } .hero-bg { position: absolute; inset: 0; z-index: 1; background-image: url('/assets/images/hero-asphalt.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; } .hero-texture { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.25) 100% ); } .hero-content { position: relative; z-index: 3; } .hero .hero-eyebrow, .hero .hero-subtitle, .hero .hero-trust-item { color: rgba(255,255,255,0.99); } .hero .hero-title { color: #f5f2ee; } .hero .hero-trust-item .check { opacity: 1; } /* ─ ESTIMATE SECTION — STAYS DARK ─ */ .estimate-section { background: #1a1916; border-color: rgba(255,255,255,0.08); } .estimate-section-title { color: #f5f2ee; } .estimate-section-sub { color: rgba(255,255,255,0.6); } .fw-step { color: rgba(255,255,255,0.4); } .fw-step.fw-active{ color: var(--color-orange); } .fw-step-line { background: rgba(255,255,255,0.1); } .fw-field label { color: rgba(255,255,255,0.5); } .fw-field input, .fw-field select, .fw-field textarea, #fw-form input, #fw-form select, #fw-form textarea { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: #f5f2ee; } #fw-form input::placeholder, #fw-form textarea::placeholder { color: rgba(255,255,255,0.3); } #fw-form input:focus, #fw-form select:focus, #fw-form textarea:focus { border-color: rgba(240,90,0,0.6); background: rgba(255,255,255,0.1); } .fw-svc-tile { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .fw-svc-tile:hover { border-color: rgba(240,90,0,0.4); } .fw-svc-name { color: #f5f2ee; } .fw-svc-sub { color: rgba(255,255,255,0.45); } .fw-tl-tile { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .fw-tl-tile:hover { border-color: rgba(240,90,0,0.4); } .fw-tl-label { color: #f5f2ee; } .fw-tl-sub { color: rgba(255,255,255,0.45); } .fw-svc-summary { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.08); } .fw-svc-empty { color: rgba(255,255,255,0.35); } .fw-step-hint { color: rgba(255,255,255,0.55); } .fw-submit-trust { color: rgba(255,255,255,0.6); } .fw-submit-note { color: rgba(255,255,255,0.4); } .fw-submit-note a { color: var(--color-orange); } .fw-success-inner { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .fw-success-inner h3 { color: #f5f2ee; } .fw-success-inner p { color: rgba(255,255,255,0.6); } .estimate-sms { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); } .estimate-sms:hover { border-color: var(--color-orange); color: var(--color-orange); } /* ── TRUST BAR ── */ .trust-bar { background: var(--color-orange); border: none; } .trust-bar-item { color: #fff; } .trust-bar-item svg { stroke: #fff; } /* ── STATS SECTION ── */ .section-dark, .section-sm.section-dark { background: #f5f2ee; } .stat-block { background: transparent; } .stat-number { color: var(--color-orange); text-shadow: none; } .stat-label { color: var(--color-text-muted); } /* ── SECTION BACKGROUNDS ── */ .section-darker { background: #ede9e3; } .section-dark { background: #f5f2ee; } /* ── SECTION HEADERS ── */ .section-header h2, .section-header p, h2, h3, h4 { color: var(--color-text); } .section-header p, p { color: var(--color-text-muted); } /* ── SECTION EYEBROW ─ */ .section-eyebrow { color: var(--color-orange); } /* ─ SERVICE CARDS ── */ .service-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .service-card:hover { border-color: rgba(240,90,0,0.3); box-shadow: 0 0 0 1px rgba(240,90,0,0.1), 0 8px 24px rgba(0,0,0,0.08), 0 0 30px rgba(240,90,0,0.05); transform: translateY(-3px); } .service-card h3 { color: var(--color-text); } .service-card p { color: var(--color-text-muted); } .card-link { color: var(--color-orange); } .card-link:hover { color: var(--color-orange-dk); } /* ── WHY SECTION ── */ .feature-item { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; } .feature-text h4 { color: var(--color-text); } .feature-text p { color: var(--color-text-muted); } /* ─ TESTIMONIALS ── */ .testimonial-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .testimonial-card:hover { border-color: rgba(240,90,0,0.25); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .testimonial-text { color: var(--color-text-muted); } .testimonial-name { color: var(--color-text); } .testimonial-role { color: var(--color-text-dim); } .testimonial-stars { color: var(--color-orange); } /* ─ FAQ ── */ .faq-item { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; margin-bottom: 8px; overflow: hidden; } .faq-question { color: var(--color-text); background: #ffffff; } .faq-question:hover { background: #faf7f4; color: var(--color-orange); } .faq-answer-inner { color: var(--color-text-muted); } /* ── AREA BADGES ─ */ .area-badge { background: #ffffff; border: 1px solid rgba(0,0,0,0.1); color: var(--color-text-muted); } .area-badge:hover { background: rgba(240,90,0,0.06); border-color: rgba(240,90,0,0.3); color: var(--color-orange); box-shadow: none; } /* ── CTA BAND — STAYS DARK ORANGE ── */ .cta-band { background: linear-gradient( 135deg, #c44800 0%, #f05a00 40%, #e04d00 60%, #c44800 100% ); background-size: 300% 300%; animation: gradientShift 6s ease infinite; } .cta-band h2, .cta-band p { color: #fff; } /* ── SPRING SECTION ─ */ .feature-item[style*="color-asphalt-2"] { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; } /* ── NAVIGATION ── */ .site-header { background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .logo-crax { color: #1a1916; } .logo-asphalt{ color: var(--color-orange); } .nav-list a { color: #3a3630; } .nav-list a:hover { color: var(--color-orange); } .nav-list li.active a { color: var(--color-orange); } .nav-list a::after { background: var(--color-orange); box-shadow: none; } .btn-phone { background: var(--color-orange); color: #fff; border-color: var(--color-orange); } .btn-phone:hover { background: var(--color-orange-dk); } .btn-quote { background: transparent; color: var(--color-orange); border: 1.5px solid var(--color-orange); } .btn-quote:hover { background: var(--color-orange); color: #fff; } /* Mobile nav */ .mobile-nav { background: #ffffff; border-top: 1px solid rgba(0,0,0,0.08); } .mobile-nav a { color: var(--color-text-muted); } .mobile-nav a:hover { color: var(--color-orange); } .mobile-nav strong { color: var(--color-text); } /* Hamburger */ .hamburger span { background: var(--color-text); } /* ─ FOOTER — STAYS DARK ── */ .site-footer { background: #0e0e0e; } .footer-cta-band { background: #1a1916; } .footer-main { background: #0e0e0e; } .footer-bottom { background: #0a0a0a; border-top-color: rgba(255,255,255,0.06); } .footer-logo .logo-crax { color: #f5f2ee; } .footer-logo .logo-asphalt{ color: var(--color-orange); } .footer-col p, .footer-col li, .footer-contact-list span { color: rgba(255,255,255,0.45); } .footer-col-heading { color: rgba(255,255,255,0.3); } .footer-links a { color: rgba(255,255,255,0.55); } .footer-links a:hover { color: var(--color-orange); } .footer-bottom p { color: rgba(255,255,255,0.3); } .footer-bottom a { color: rgba(255,255,255,0.4); } .footer-bottom a:hover { color: var(--color-orange); } .footer-contact-list a { color: var(--color-orange); } .badge { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); } .footer-cta-heading { color: #f5f2ee; } .footer-cta-label { color: var(--color-orange); } .footer-cta-sub { color: rgba(255,255,255,0.55); } /* ─ BUTTONS — general ── */ .btn-primary { background: var(--color-orange); color: #fff; border-color: var(--color-orange); } .btn-primary:hover { background: var(--color-orange-dk); color: #fff; } .btn-ghost { color: var(--color-text); border-color: rgba(0,0,0,0.2); } .btn-ghost:hover { border-color: var(--color-orange); color: var(--color-orange); } .btn-outline-orange { color: var(--color-orange); border-color: var(--color-orange); background: transparent; } .btn-outline-orange:hover { background: var(--color-orange); color: #fff; } /* ── FORMS — contact page etc ── */ input[type="text"], input[type="email"], input[type="tel"], select, textarea { background: #ffffff; border: 1px solid rgba(0,0,0,0.15); color: var(--color-text); } input::placeholder, textarea::placeholder { color: rgba(0,0,0,0.3); } input:focus, select:focus, textarea:focus { border-color: rgba(240,90,0,0.5); background: #fff; box-shadow: 0 0 0 3px rgba(240,90,0,0.08); } /* ─ CONTACT PAGE SPECIFICS ── */ .contact-hero-band { /* stays orange — no change needed */ } .contact-form-wrap { background: #ffffff; border-color: rgba(0,0,0,0.1); box-shadow: 0 4px 24px rgba(0,0,0,0.06); } .cf-field label { color: var(--color-text-muted); } .cf-pane-title { color: var(--color-text); } .cf-pane-sub { color: var(--color-text-muted); } .cf-field input, .cf-field select, .cf-field textarea { background: #f9f6f2; border-color: rgba(0,0,0,0.12); color: var(--color-text); } .cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { border-color: rgba(240,90,0,0.5); background: #fff; } .cf-svc-tile { background: #f9f6f2; border-color: rgba(0,0,0,0.1); } .cf-svc-tile:hover { border-color: rgba(240,90,0,0.35); background: #fff; } .cf-svc-tile.cf-svc-on { background: rgba(240,90,0,0.06); } .cf-svc-name { color: var(--color-text); } .cf-svc-sub { color: var(--color-text-muted); } .cf-svc-tile.cf-svc-on .cf-svc-name { color: var(--color-orange); } .cf-tl-tile { background: #f9f6f2; border-color: rgba(0,0,0,0.1); } .cf-tl-tile:hover { border-color: rgba(240,90,0,0.35); background: #fff; } .cf-tl-tile.cf-tl-on { background: rgba(240,90,0,0.06); } .cf-tl-label { color: var(--color-text); } .cf-tl-sub { color: var(--color-text-muted); } .cf-tl-tile.cf-tl-on .cf-tl-label { color: var(--color-orange); } .cf-svc-summary { background: #f9f6f2; border-color: rgba(0,0,0,0.08); } .cf-svc-empty { color: var(--color-text-dim); } .cf-review-card { background: #f9f6f2; border-color: rgba(0,0,0,0.08); } .cf-review-label { color: var(--color-text-muted); } .cf-rk { color: var(--color-text-muted); } .cf-rv { color: var(--color-text); } .cf-step { color: var(--color-text-muted); } .cf-step.cf-active{ color: var(--color-orange); } .cf-step-line { background: rgba(0,0,0,0.1); } .contact-info-card, .contact-process-card, .contact-trust-card { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .contact-info-card h3, .contact-process-card h3, .contact-trust-card h3 { color: var(--color-text); } .contact-info-text strong { color: var(--color-text-muted); } .contact-info-text span { color: var(--color-text-muted); } .cp-text { color: var(--color-text-muted); } .contact-trust-ul li { color: var(--color-text-muted); border-color: rgba(0,0,0,0.06); } .contact-area-chip { background: #f9f6f2; border-color: rgba(0,0,0,0.1); color: var(--color-text-muted); } .contact-area-chip:hover { color: var(--color-orange); border-color: rgba(240,90,0,0.3); background: #fff; } /* ── PAGE HERO BAND (internal pages) ── */ .page-hero { background: #1a1916; } .page-hero h1 { color: #f5f2ee; } .page-hero p { color: rgba(255,255,255,0.6); } .breadcrumb a { color: rgba(255,255,255,0.5); } .breadcrumb span[aria-current] { color: rgba(255,255,255,0.8); } /* ── SERVICE / AREA PAGES ── */ .content-main h2, .content-main h3 { color: var(--color-text); } .content-main p, .content-main li { color: var(--color-text-muted); } .content-main a { color: var(--color-orange); } .sidebar-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .sidebar-card h3 { color: var(--color-text); } .trust-box li { color: var(--color-text-muted); } .faq-list .faq-item { background: #ffffff; border-color: rgba(0,0,0,0.08); } /* ─ GRAIN OVERLAY — lighter on light bg ── */ .grain-overlay { opacity: 0.02; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar-track { background: #f5f2ee; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); } ::-webkit-scrollbar-thumb:hover { background: rgba(240,90,0,0.4); } /* ─ STAT NUMBER GLOW — remove on light ── */ .stat-number { text-shadow: none; } /* ── REVEAL ANIMATION unchanged ─ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); } .reveal.revealed { opacity: 1; transform: translateY(0); } /* ─ PYLO unchanged ── */ /* Pylo styles are inline — no changes needed */ /* ── MOBILE CTA BAR ── */ .sticky-cta-call { background: var(--color-orange); } .sticky-cta-text { background: #1a1916; } /* ── BLOG / FAQ PAGES ── */ .blog-post-card { background: #ffffff; border-color: rgba(0,0,0,0.08); } .blog-post-card:hover { border-color: rgba(240,90,0,0.25); } .blog-post-card h3 { color: var(--color-text); } .blog-post-card p { color: var(--color-text-muted); } /* ── DROPDOWN NAV ── */ .dropdown { background: #ffffff; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .dropdown a { color: var(--color-text-muted); } .dropdown a:hover { color: var(--color-orange); background: #faf7f4; } /* ─ CONTACT INFO STRIP (footer of some pages) ── */ .contact-info-strip { background: #1a1916; }