/* * ADS Theme — Light Mode * ads-light.css * * Activate by adding class="ads-light" to in WP Admin → * Appearance → Customize → ADS Theme → Theme Mode (or via body_class filter). * * Everything scoped to body.ads-light so it never fires on dark mode. * The gold accent colour (#c9a96e) is preserved — it reads beautifully * on both cream and white backgrounds. */ /* ============================================================ VARIABLES */ body.ads-light { --c-bg: #fafaf8; --c-surface: #f4f3ef; --c-card: #ffffff; --c-border: rgba(0,0,0,0.09); --c-gold: #b8924a; --c-gold-lt: #d4aa6a; --c-white: #1a1916; --c-muted: rgba(26,25,22,0.52); --c-text: rgba(26,25,22,0.84); } /* ============================================================ BASE */ body.ads-light { background: var(--c-bg); color: var(--c-text); } body.ads-light img { display: block; max-width: 100%; } /* ============================================================ SCROLLBAR */ body.ads-light ::-webkit-scrollbar-track { background: var(--c-surface); } body.ads-light ::-webkit-scrollbar-thumb { background: var(--c-gold); } /* ============================================================ LOADER */ body.ads-light #loader { background: var(--c-bg); } body.ads-light .loader-logo { color: var(--c-gold); } body.ads-light .loader-bar { background: var(--c-gold); } /* ============================================================ CURSOR */ body.ads-light .cursor { background: var(--c-gold); } body.ads-light .cursor-ring { border-color: rgba(184,146,74,0.4); } /* ============================================================ NAV */ body.ads-light nav.scrolled { background: rgba(250,250,248,0.94); backdrop-filter: blur(20px); border-bottom: 1px solid var(--c-border); box-shadow: 0 1px 24px rgba(0,0,0,0.06); } body.ads-light .nav-logo { color: var(--c-gold); } body.ads-light .nav-links a { color: var(--c-muted); } body.ads-light .nav-links a:hover { color: var(--c-gold); } body.ads-light .nav-lang button { color: var(--c-muted); } body.ads-light .nav-lang button.active { color: var(--c-gold); border-color: var(--c-gold); } body.ads-light .hamburger span { background: var(--c-gold); } body.ads-light .mobile-menu { background: rgba(250,250,248,0.98); } body.ads-light .mobile-menu a { color: var(--c-white); } body.ads-light .mobile-menu a:hover { color: var(--c-gold); } /* ============================================================ HERO SLIDER */ body.ads-light .slide-bg { filter: brightness(0.92) saturate(0.9); } body.ads-light .slide-eyebrow { color: var(--c-gold); } body.ads-light .slide-title { color: #1a1916; } body.ads-light .slide-title em { color: var(--c-gold); } body.ads-light .slide-sub { color: rgba(26,25,22,0.6); } body.ads-light .slider-dot { background: rgba(26,25,22,0.2); } body.ads-light .slider-dot.active { background: var(--c-gold); } body.ads-light .slider-arrow { border-color: rgba(26,25,22,0.2); color: #1a1916; } body.ads-light .slider-arrow:hover { border-color: var(--c-gold); color: var(--c-gold); } body.ads-light .btn-gold { border-color: var(--c-gold); color: var(--c-gold); } body.ads-light .btn-gold:hover { background: var(--c-gold); color: #fff; } /* ============================================================ SECTION BASE */ body.ads-light .section-label { color: var(--c-gold); } body.ads-light .section-title { color: #1a1916; } body.ads-light .section-title em { color: var(--c-gold); } body.ads-light .section-rule { background: var(--c-gold); } body.ads-light .section-body { color: var(--c-muted); } /* ============================================================ STATS TICKER */ body.ads-light .stats-ticker { border-top-color: var(--c-border); border-bottom-color: var(--c-border); background: var(--c-surface); } body.ads-light .ticker-item { color: var(--c-muted); } body.ads-light .ticker-item strong { color: var(--c-gold); } body.ads-light .ticker-dot { color: var(--c-gold); } /* ============================================================ ABOUT */ body.ads-light .about-img { filter: none; } body.ads-light .about-img-placeholder { background: var(--c-surface); border-color: var(--c-border); } body.ads-light .about-accent { border-color: rgba(184,146,74,0.25); } body.ads-light .about-gold-tag { background: var(--c-gold); color: #fff; } body.ads-light .stat-num { color: var(--c-gold); } body.ads-light .stat-label { color: var(--c-muted); } /* ============================================================ SERVICES */ body.ads-light #services { background: var(--c-surface); border-top-color: var(--c-border); border-bottom-color: var(--c-border); } body.ads-light .services-grid { background: var(--c-border); } body.ads-light .service-card { background: var(--c-card); box-shadow: 0 1px 3px rgba(0,0,0,0.04); } body.ads-light .service-card:hover { background: #f9f7f2; } body.ads-light .service-card::before { background: var(--c-gold); } body.ads-light .service-icon { border-color: var(--c-border); color: var(--c-gold); } body.ads-light .service-card:hover .service-icon { border-color: var(--c-gold); } body.ads-light .service-name { color: #1a1916; } body.ads-light .service-desc { color: var(--c-muted); } body.ads-light .service-list li { color: var(--c-muted); border-bottom-color: var(--c-border); } body.ads-light .service-list li::before { color: var(--c-gold); } body.ads-light .service-number { color: rgba(184,146,74,0.07); } /* ============================================================ WORK GRID */ body.ads-light .work-header .section-title { color: #1a1916; } body.ads-light .btn-outline { border-color: rgba(26,25,22,0.2); color: var(--c-muted); } body.ads-light .btn-outline:hover { border-color: var(--c-gold); color: var(--c-gold); } body.ads-light .work-item-overlay { background: linear-gradient(to top, rgba(26,25,22,0.7) 0%, transparent 60%); } body.ads-light .work-cat { color: var(--c-gold); } body.ads-light .work-title { color: #faf8f4; } body.ads-light .work-placeholder { color: rgba(184,146,74,0.18); } /* ============================================================ PROCESS */ body.ads-light #process { background: var(--c-surface); border-top-color: var(--c-border); } body.ads-light .process-step::before { background: var(--c-border); } body.ads-light .process-step::after { background: var(--c-gold); } body.ads-light .process-num { color: rgba(184,146,74,0.14); } body.ads-light .process-name { color: #1a1916; } body.ads-light .process-desc { color: var(--c-muted); } /* ============================================================ TESTIMONIALS */ body.ads-light .testimonial-card { background: var(--c-card); border-color: var(--c-border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); } body.ads-light .t-quote { color: var(--c-gold); } body.ads-light .t-body { color: var(--c-muted); } body.ads-light .t-name { color: #1a1916; } body.ads-light .t-role { color: var(--c-muted); } body.ads-light .t-avatar { background: var(--c-surface); border-color: var(--c-border); color: var(--c-gold); } /* ============================================================ CTA BAND */ body.ads-light #cta { background: var(--c-surface); border-top-color: var(--c-border); } body.ads-light #cta::before { background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(184,146,74,0.08) 0%, transparent 70%); } body.ads-light .cta-title { color: #1a1916; } body.ads-light .cta-title em { color: var(--c-gold); } body.ads-light .cta-sub { color: var(--c-muted); } body.ads-light .btn-filled { background: var(--c-gold); color: #fff; } body.ads-light .btn-filled:hover { background: var(--c-gold-lt); } /* ============================================================ CONTACT */ body.ads-light .form-input, body.ads-light .form-textarea { background: var(--c-card); border-color: var(--c-border); color: #1a1916; } body.ads-light .form-input:focus, body.ads-light .form-textarea:focus { border-color: var(--c-gold); } body.ads-light .form-label { color: var(--c-gold); } body.ads-light .form-input::placeholder, body.ads-light .form-textarea::placeholder { color: rgba(26,25,22,0.2); } body.ads-light .contact-detail-label { color: var(--c-gold); } body.ads-light .contact-detail-value { color: var(--c-muted); } body.ads-light .social-link { border-color: var(--c-border); color: var(--c-muted); } body.ads-light .social-link:hover { border-color: var(--c-gold); color: var(--c-gold); } /* ============================================================ FOOTER */ body.ads-light footer { border-top-color: var(--c-border); background: var(--c-surface); } body.ads-light .footer-logo { color: var(--c-gold); } body.ads-light .footer-links a { color: var(--c-muted); } body.ads-light .footer-links a:hover { color: var(--c-gold); } body.ads-light .footer-copy { color: var(--c-muted); } /* ============================================================ GRAIN */ body.ads-light .grain { opacity: 0.025; } /* ============================================================ PAGE HERO */ body.ads-light .ads-page-hero { /* Each hero keeps its own inline styles */ } /* ============================================================ PB BLOCKS — light overrides */ /* Text + Image */ body.ads-light .about-accent { border-color: rgba(184,146,74,0.2); } /* Section background variants within light theme */ body.ads-light section[style*="background:#0f0f0f"], body.ads-light section[style*="background: #0f0f0f"], body.ads-light section[style*="background:#080808"] { /* If a PB block has a dark inline bg, let it keep its own colour */ } /* ============================================================ SINGLE PROJECT */ body.ads-light .work-item-bg { background-color: var(--c-surface); }