/* ===================================================== CASEY ADDASON PHOTOGRAPHY — DARK MODE Toggle via [data-theme="dark"] on ===================================================== */ /* ── Smooth theme transition ── */ *, *::before, *::after { transition-property: background-color, border-color, color, fill, stroke, box-shadow; transition-duration: 0.25s; transition-timing-function: ease; } /* ── Main-page CSS var overrides ── */ [data-theme="dark"] { --warm-white: #0b0a08; --cream: #1a1814; --charcoal: #f0ebe3; --soft-black: #e0d8cc; --warm-gray: #9a9088; --light-gray: #3a3530; --bronze: #c8a84b; --bronze-hover: #b8974a; --bronze-light: #e4c97a; --sand: #2a2520; --sage: #7a8298; --sage-muted: #5a6278; } /* ── Blog-page CSS var overrides (main.css system) ── */ [data-theme="dark"] { /* Invert ink/white: dark→light, light→dark */ --ink: #f0ebe3; --ink-soft: #d8d0c4; --warm-gray: #9a9088; --stone: #6a6058; --sand: #2a2520; --cream: #1a1814; --pearl: #131109; --white: #0b0a08; --gold: #c8a84b; --gold-muted: #c8a84b; } /* ── Body & global ── */ [data-theme="dark"] body { background: #0b0a08 !important; color: #f0ebe3 !important; } /* ═══════════════════════════════════════════════════ HEADERS ═══════════════════════════════════════════════════ */ [data-theme="dark"] header, [data-theme="dark"] .site-header { background: rgba(11,10,8,0.97) !important; border-bottom-color: rgba(200,168,75,0.12) !important; } /* Main-page nav links */ [data-theme="dark"] .nav-link, [data-theme="dark"] .nav-group a:not(.nav-cta):not(.nav-cta-link) { color: #9a9088 !important; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-group a:hover { color: #f0ebe3 !important; } [data-theme="dark"] .nav-cta, [data-theme="dark"] .nav-cta-link { background: #c8a84b !important; color: #0b0a08 !important; } /* Blog-page nav links */ [data-theme="dark"] .site-nav-link { color: #9a9088 !important; } [data-theme="dark"] .site-nav-link:hover { color: #f0ebe3 !important; } [data-theme="dark"] .site-nav-cta { background: #c8a84b !important; color: #0b0a08 !important; } [data-theme="dark"] .site-hamburger span { background: #f0ebe3 !important; } [data-theme="dark"] .site-mobile-menu { background: #0b0a08 !important; } [data-theme="dark"] .site-mobile-menu a { color: #f0ebe3 !important; } /* Book Now button in mobile menu (has inline background:var(--charcoal)) */ [data-theme="dark"] .mobile-menu a, [data-theme="dark"] #mobileMenu a[style*="background"], [data-theme="dark"] .site-mobile-menu a[style*="background"] { background: #c8a84b !important; color: #0b0a08 !important; } /* ═══════════════════════════════════════════════════ ANNOUNCE BAR ═══════════════════════════════════════════════════ */ [data-theme="dark"] .announce, [data-theme="dark"] .site-announce { background: #0f0d0a !important; border-bottom: 1px solid rgba(200,168,75,0.2) !important; } /* ═══════════════════════════════════════════════════ INTENTIONALLY DARK SECTIONS — keep dark in dark mode These use background:var(--charcoal) or var(--ink) which would become light if we let vars do the work ═══════════════════════════════════════════════════ */ /* Services dark band */ [data-theme="dark"] .services { background: #0e0c09 !important; color: #f0ebe3 !important; } [data-theme="dark"] .services h2, [data-theme="dark"] .services h3 { color: #f0ebe3 !important; } [data-theme="dark"] .services p, [data-theme="dark"] .services li { color: #9a9088 !important; } [data-theme="dark"] .services .overline { color: #c8a84b !important; } /* Blog post hero (dark band with ink bg) */ [data-theme="dark"] .blog-post-hero { background: #0b0a08 !important; } [data-theme="dark"] .blog-post-h1 { color: #f0ebe3 !important; } [data-theme="dark"] .blog-post-category { color: #c8a84b !important; } [data-theme="dark"] .blog-post-meta { color: rgba(240,235,227,0.4) !important; } /* Venues preview dark band (main.css) */ [data-theme="dark"] .venues-preview { background: #0e0c09 !important; } [data-theme="dark"] .venues-preview .section-headline { color: #f0ebe3 !important; } [data-theme="dark"] .venues-preview .section-eyebrow { color: #c8a84b !important; } [data-theme="dark"] .venue-name { color: rgba(240,235,227,0.65) !important; } [data-theme="dark"] .venue-name:hover { color: #c8a84b !important; } /* Final CTA dark band */ [data-theme="dark"] .final-cta { background: #0e0c09 !important; } [data-theme="dark"] .cta-section { background: #0e0c09 !important; } /* ═══════════════════════════════════════════════════ LIGHT SECTIONS — convert to dark surfaces ═══════════════════════════════════════════════════ */ /* Page backgrounds */ [data-theme="dark"] .split-text.cream-bg { background: #1a1814 !important; } [data-theme="dark"] .split-text { background: #0b0a08; } [data-theme="dark"] .split-text h2 { color: #f0ebe3 !important; } [data-theme="dark"] .split-text p { color: #9a9088 !important; } [data-theme="dark"] .split-text h1, [data-theme="dark"] .split-text .intro-h1 { color: #f0ebe3 !important; } [data-theme="dark"] .overline { color: #c8a84b !important; } /* Featured bar */ [data-theme="dark"] .featured { background: #131109 !important; border-color: #2c2820 !important; } [data-theme="dark"] .featured p, [data-theme="dark"] .featured span { color: #6a6058 !important; } [data-theme="dark"] .stars { color: #c8a84b !important; } /* Scroll hint */ [data-theme="dark"] .scroll-hint { color: rgba(240,235,227,0.4) !important; } /* Testimonials — flip card hierarchy (cards should be lighter than section bg) */ [data-theme="dark"] .testi { background: #0f0d0a !important; } [data-theme="dark"] .testi-card { background: #1a1814 !important; border-color: #2c2820 !important; } [data-theme="dark"] .testi-card blockquote, [data-theme="dark"] .testi-card .qm { color: #d8d0c4 !important; } [data-theme="dark"] .testi-name { color: #f0ebe3 !important; } [data-theme="dark"] .testi-venue { color: #9a9088 !important; } [data-theme="dark"] .testi-stars { color: #c8a84b !important; } [data-theme="dark"] .testi-avatar { background: #2c2820 !important; } /* Venue cards */ [data-theme="dark"] .venues { background: #0b0a08 !important; } [data-theme="dark"] .venue-card { background: #131109 !important; border-color: #2c2820 !important; } [data-theme="dark"] .venue-card h3 { color: #f0ebe3 !important; } [data-theme="dark"] .venue-card p { color: #9a9088 !important; } /* Location pills */ [data-theme="dark"] .locations { background: #131109 !important; } [data-theme="dark"] .loc-pill { background: #1a1814 !important; color: #9a9088 !important; border-color: #2c2820 !important; } [data-theme="dark"] .loc-pill:hover { background: #c8a84b !important; color: #0b0a08 !important; } /* Blog index */ [data-theme="dark"] .blog { background: #0b0a08 !important; } [data-theme="dark"] .blog-thumb { background: #131109; } [data-theme="dark"] .blog-card-title { color: #f0ebe3 !important; } [data-theme="dark"] .blog-card-excerpt, [data-theme="dark"] .blog-card-meta { color: #9a9088 !important; } /* Blog body */ [data-theme="dark"] .blog-body { background: #0b0a08 !important; } [data-theme="dark"] .blog-body-inner h2, [data-theme="dark"] .blog-body-inner h3 { color: #f0ebe3 !important; } [data-theme="dark"] .blog-body-inner p, [data-theme="dark"] .blog-body-inner li { color: #c0b8ae !important; } [data-theme="dark"] .blog-body-inner strong { color: #f0ebe3 !important; } [data-theme="dark"] .blog-body-inner a { color: #c8a84b !important; } [data-theme="dark"] .blog-img-caption { color: #6a6058 !important; } [data-theme="dark"] .blog-divider { border-color: #2c2820 !important; } [data-theme="dark"] .blog-cta-box { background: #131109 !important; border-color: #c8a84b !important; } [data-theme="dark"] .blog-cta-box h3 { color: #f0ebe3 !important; } [data-theme="dark"] .blog-cta-box p { color: #9a9088 !important; } /* Related posts */ [data-theme="dark"] .related-posts { background: #0f0d0a !important; border-color: #2c2820 !important; } [data-theme="dark"] .related-post-card { background: #1a1814 !important; border-color: #2c2820 !important; } [data-theme="dark"] .related-post-card-title { color: #f0ebe3 !important; } [data-theme="dark"] .related-post-card-label { color: #9a9088 !important; } [data-theme="dark"] .related-post-card:hover { background: #242018 !important; border-color: #c8a84b !important; } /* FAQ */ [data-theme="dark"] .faq-preview { background: #131109 !important; } [data-theme="dark"] .faq-item { border-color: #2c2820 !important; } [data-theme="dark"] .faq-q { color: #f0ebe3 !important; } [data-theme="dark"] .faq-a { color: #9a9088 !important; } /* Services / packages */ [data-theme="dark"] .pkg { background: #131109 !important; border-color: #2c2820 !important; } [data-theme="dark"] .pkg-name { color: #f0ebe3 !important; } [data-theme="dark"] .pkg-price { color: #c8a84b !important; } [data-theme="dark"] .pkg-features li, [data-theme="dark"] .pkg li { color: #9a9088 !important; border-bottom-color: #2c2820 !important; } [data-theme="dark"] .addons-section { background: #0e0c09 !important; } [data-theme="dark"] .addon-group h3 { color: #f0ebe3 !important; } /* Service cards (main.css) */ [data-theme="dark"] .service-card { background: #131109 !important; border-color: #2c2820 !important; } [data-theme="dark"] .service-card:hover { background: #1a1814 !important; } [data-theme="dark"] .service-card h3 { color: #f0ebe3 !important; } [data-theme="dark"] .service-card p { color: #9a9088 !important; } /* About / bio */ [data-theme="dark"] .about-section { background: #0b0a08 !important; } [data-theme="dark"] .bio-text { color: #9a9088 !important; } [data-theme="dark"] .about-heading, [data-theme="dark"] .intro-heading { color: #f0ebe3 !important; } /* Contact */ [data-theme="dark"] .contact-section { background: #0b0a08 !important; } [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: #131109 !important; color: #f0ebe3 !important; border-color: #3a3530 !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #5c5448 !important; } [data-theme="dark"] label { color: #9a9088 !important; } /* Portfolio */ [data-theme="dark"] .portfolio-section, [data-theme="dark"] .portfolio { background: #0b0a08 !important; } [data-theme="dark"] .gallery-grid-item::after { background: rgba(11,10,8,0.5) !important; } /* Photo 101 */ [data-theme="dark"] .photo-101-section { background: #0b0a08 !important; } [data-theme="dark"] .note-box, [data-theme="dark"] .tip-box { background: #131109 !important; border-color: #c8a84b !important; color: #d8d0c4 !important; } /* Footer */ [data-theme="dark"] footer { background: #060504 !important; border-top-color: #2c2820 !important; } [data-theme="dark"] .footer-link, [data-theme="dark"] footer a { color: #9a9088 !important; } [data-theme="dark"] .footer-link:hover, [data-theme="dark"] footer a:hover { color: #c8a84b !important; } [data-theme="dark"] footer p { color: #5c5448 !important; } /* Dividers */ [data-theme="dark"] hr, [data-theme="dark"] .section-divider { border-color: #2c2820 !important; } /* Buttons — ghost/outline variants */ [data-theme="dark"] .btn-ghost, [data-theme="dark"] .btn-outline { border-color: #3a3530 !important; color: #f0ebe3 !important; } [data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .btn-outline:hover { background: #c8a84b !important; border-color: #c8a84b !important; color: #0b0a08 !important; } /* ═══════════════════════════════════════════════════ DARK MODE TOGGLE BUTTON ═══════════════════════════════════════════════════ */ .dark-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; background: #1a1814; border: 1px solid #c8a84b; color: #c8a84b; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.25s !important; box-shadow: 0 2px 12px rgba(0,0,0,0.4); outline: none; -webkit-tap-highlight-color: transparent; } .dark-toggle:hover { background: #c8a84b; color: #0b0a08; transform: scale(1.08); box-shadow: 0 4px 20px rgba(200,168,75,0.3); } [data-theme="dark"] .dark-toggle { background: #f0ebe3; border-color: #c8a84b; color: #0b0a08; } [data-theme="dark"] .dark-toggle:hover { background: #c8a84b; color: #0b0a08; }