/* ============================================================ Foundry Workspaces — Dark Theme Layer Loaded LAST. The dark palette is now OPT-IN: the `.theme-dark` class is toggled on by js/theme.js (and an inline pre-paint script in each page ). Without it the site renders in the template's native light palette (white bg). Orange accent (#F47C2B) is preserved in both themes. ============================================================ */ /* ============================================================ THEME SWITCHER — toggle button (applies in BOTH themes) ============================================================ */ .theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-right: 14px; padding: 0; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; color: var(--heading-color, #0f0f0f); background: transparent; border: 1px solid var(--p-line, rgba(15, 15, 15, 0.18)); transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; vertical-align: middle; } .theme-toggle:hover { color: var(--accent-color); border-color: var(--accent-color); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0); } .theme-toggle i { pointer-events: none; } /* sit the toggle inline next to the responsive menu trigger */ .navbar .navbar-toggle { display: inline-block; vertical-align: middle; } /* The site logo (foundry-logo-white.png) is a black wordmark + orange accent. It reads as-is on the light header, so no filter trick is needed there — it keeps its natural brand colours (premium.css adds the subtle drop-shadow). In dark theme the header sits on a dark background, so invert the wordmark to solid white for contrast. */ .main-header .navbar-brand img { transition: filter 0.35s ease; } .theme-dark .main-header .navbar-brand img { filter: brightness(0) invert(1); } /* Header sits transparent over the dark hero at the top of the page; the blurred light strip only fades in once scrolled (.active — premium.css). Keep the nav readable over the dark hero while it's transparent. */ html:not(.theme-dark) header.main-header .header-sticky:not(.active) .main-menu ul li a { color: var(--primary-color); } html:not(.theme-dark) header.main-header .header-sticky:not(.active) .main-menu ul li a:hover, html:not(.theme-dark) header.main-header .header-sticky:not(.active) .main-menu ul li a:focus { color: var(--accent-color); } /* Keep the mobile hamburger bars dark on the light hero. */ html:not(.theme-dark) header.main-header .header-sticky:not(.active) .slicknav_icon .slicknav_icon-bar { background-color: var(--primary-color); } /* Inner pages (about, blog, contact, gallery…) open with a DARK hero banner (.page-header.dark-section), unlike the home page's light hero. Over that dark banner the transparent header's near-black nav text is unreadable, so flip it (and the hamburger bars) to light there. */ html:not(.theme-dark) header.main-header:has(+ .page-header.dark-section) .header-sticky:not(.active) .main-menu ul li a { color: #f4f2ec; } html:not(.theme-dark) header.main-header:has(+ .page-header.dark-section) .header-sticky:not(.active) .main-menu ul li a:hover, html:not(.theme-dark) header.main-header:has(+ .page-header.dark-section) .header-sticky:not(.active) .main-menu ul li a:focus { color: var(--accent-color); } html:not(.theme-dark) header.main-header:has(+ .page-header.dark-section) .header-sticky:not(.active) .slicknav_icon .slicknav_icon-bar { background-color: #f4f2ec; } /* ============================================================ DARK PALETTE — only active when carries .theme-dark ============================================================ */ html.theme-dark { /* Dark palette (token flip) */ --primary-color : #0e0e12; /* dark backgrounds, buttons, sections */ --secondary-color : #121318; /* .bg-section elevated areas */ --white-color : #17181e; /* template "white" card backgrounds -> dark */ --text-color : #a9aab4; /* muted light body text */ --accent-color : #f47c2b; /* unchanged */ --bg-color : #08080a; /* page background */ --divider-color : #ffffff1f; --dark-divider-color : #ffffff1f; /* New semantic tokens used by dark theme + home */ --heading-color : #f4f2ec; --card-bg : #15161c; --card-bg-2 : #1b1d24; --card-border : #ffffff14; --accent-soft : #f47c2b1a; /* Override premium.css light palette tokens for dark */ --p-ink : #f4f2ec; --p-ink-soft : #b9bac3; --p-cream : #15161c; --p-fog : #15161c; --p-line : rgba(255, 255, 255, 0.10); --p-line-strong : rgba(255, 255, 255, 0.18); } html, body { background: var(--bg-color); } /* ---- Readability sweep ------------------------------------ */ .theme-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--heading-color) !important; } .theme-dark :is(p, li, td, th, label, blockquote, figcaption, dd, dt) { color: var(--text-color); } /* keep orange highlight words */ .theme-dark .text-accent, .theme-dark .accent, .theme-dark :is(h1, h2, h3) .text-accent { color: var(--accent-color) !important; } /* links */ .theme-dark a { color: var(--text-color); } .theme-dark a:hover { color: var(--accent-color); } /* ---- Section wrappers ------------------------------------- */ .theme-dark .bg-section { background-color: var(--secondary-color); } .theme-dark .dark-section { background-color: #0c0c10; } /* ---- Header ----------------------------------------------- */ .theme-dark header.main-header .header-sticky.bg-section { background: transparent; } .theme-dark header.main-header .header-sticky.active { background: rgba(12, 12, 16, 0.85); backdrop-filter: blur(14px); border: 1px solid var(--card-border); } .theme-dark .main-menu ul li a { color: #d8d8df; } .theme-dark .main-menu ul li a:hover, .theme-dark .main-menu ul li a:focus { color: var(--accent-color); } .theme-dark .main-menu ul ul { background: #16171d; border: 1px solid var(--card-border); } .theme-dark .main-menu ul ul li a { color: #d8d8df !important; } .theme-dark .main-menu ul ul li a:hover { color: var(--accent-color) !important; } /* ---- Buttons --------------------------------------------- */ .theme-dark .btn-default { color: #14130f !important; background: var(--accent-color); } .theme-dark .btn-default.btn-highlighted { color: var(--heading-color) !important; background: transparent; border: 1px solid #ffffff33; } .theme-dark .btn-default.btn-highlighted::before { background-color: #ffffff14; } .theme-dark .readmore-btn { color: var(--heading-color) !important; } .theme-dark .readmore-btn:hover { color: var(--accent-color) !important; } /* ---- Page header (inner pages) --------------------------- */ .theme-dark .page-header.dark-section { background: #0c0c10; } .theme-dark .breadcrumb-item, .theme-dark .breadcrumb-item a, .theme-dark .breadcrumb-item.active { color: var(--text-color) !important; } .theme-dark .breadcrumb-item a:hover { color: var(--accent-color) !important; } /* ---- Forms ----------------------------------------------- */ .theme-dark .form-control, .theme-dark .contact-us-form input, .theme-dark .contact-us-form textarea, .theme-dark .contact-form .form-control, .theme-dark .our-contact-us-form .contact-form .form-control, .theme-dark .footer-newsletter-form .form-group .form-control { background: #101117 !important; border: 1px solid var(--card-border) !important; color: var(--heading-color) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .theme-dark .form-control::placeholder, .theme-dark .contact-form .form-control::placeholder { color: #71727b !important; opacity: 1 !important; } .theme-dark .form-control:focus, .theme-dark .contact-us-form input:focus, .theme-dark .contact-us-form textarea:focus { border-color: var(--accent-color) !important; background: #14151c !important; box-shadow: 0 0 0 3px rgba(244,124,43,0.15) !important; } .theme-dark .form-label { color: var(--text-color) !important; } /* ---- Generic card-ish surfaces --------------------------- */ .theme-dark :is(.what-we-do-item, .pricing-item, .post-item, .team-item, .approach-item, .why-choose-box-1, .why-choose-box-3, .why-choose-box-4, .hero-info-item, .gallery-item, .faq-item) { border-color: var(--card-border); } /* dividers / borders that used dark colors */ .theme-dark .section-title h3, .theme-dark .section-sub-title h3 { border-color: var(--card-border) !important; color: var(--accent-color) !important; } /* counters & accent numerals */ .theme-dark .counter, .theme-dark .hero-info-content h2 { color: var(--heading-color) !important; } /* footer tweaks */ .theme-dark .main-footer.dark-section { background: #0c0c10; } .theme-dark .footer-newsletter-form .form-control { background: #101117; } /* social pills: the light circle bg flips dark in dark theme, so give it a subtle visible surface instead */ .theme-dark .footer-social-links ul li a { background: rgba(255, 255, 255, 0.08); color: var(--heading-color); } .theme-dark .footer-social-links ul li a:hover { background: var(--accent-color); color: #14130f; } /* ============================================================ READABILITY FIX LAYER The template flips `--white-color` to a dark card colour, which left every element that used `color: var(--white-color)` as dark-text-on-dark (footer, about cards, contact info, etc.). Force those text contexts back to a high-contrast light tone. ============================================================ */ /* ---- Footer: text was dark-on-dark ----------------------- */ .theme-dark .about-footer-content p, .theme-dark .footer-links h3, .theme-dark .footer-contact-content h3, .theme-dark .footer-contact-content p, .theme-dark .footer-contact-content p a, .theme-dark .footer-menu ul li a, .theme-dark .footer-copyright-text p { color: #e7e8ee !important; } .theme-dark .footer-contact-content p a:hover, .theme-dark .footer-menu ul li:hover a, .theme-dark .footer-copyright-text p a { color: var(--accent-color) !important; } .theme-dark .about-footer-content p { color: #b9bac3 !important; } .theme-dark .footer-copyright-text p { color: #9a9ba4 !important; } /* Newsletter input + placeholder were near-invisible */ .theme-dark .footer-newsletter-form .form-group { border-bottom-color: var(--card-border); } .theme-dark .footer-newsletter-form .form-group .form-control { color: var(--heading-color) !important; background: transparent !important; } .theme-dark .footer-newsletter-form .form-group .form-control::placeholder { color: #8c8d96 !important; opacity: 1 !important; } /* Footer CTA strip: lift it off the background a touch */ .theme-dark .footer-cta-box { background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); backdrop-filter: none; -webkit-backdrop-filter: none; } /* ---- About page "Why Choose" cards: dark-on-dark text ---- */ .theme-dark .why-choose-item-content h3, .theme-dark .why-choose-item-content p, .theme-dark .why-choose-item-content ul li, .theme-dark .why-choose-box-1 .why-choose-item-content h3, .theme-dark .why-choose-box-1 .why-choose-item-content p { color: #e7e8ee !important; } /* The orange-background card (box-3) keeps dark text for contrast */ .theme-dark .why-choose-box-3 .why-choose-item-content h3, .theme-dark .why-choose-box-3 .why-choose-item-content p { color: #14130f !important; } .theme-dark .why-choose-box-3 .skill-title, .theme-dark .why-choose-box-3 .skill-no { color: #14130f !important; } /* ---- Contact / section-title intros that read too faint -- */ .theme-dark .section-title p, .theme-dark .contact-item-content p, .theme-dark .contact-us-content p { color: #c2c3cc !important; } .theme-dark .contact-item-content h3, .theme-dark .contact-item-content h3 a { color: var(--heading-color) !important; } .theme-dark .contact-item-content h3 a:hover { color: var(--accent-color) !important; } /* ---- WOW reveal safety net ------------------------------- If WOW.js fails to fire (or runs before paint), `.wow` elements can get stuck at opacity:0 / hidden. Guarantee they stay visible once the animation class lands or never runs. */ .theme-dark .wow { visibility: visible !important; } .theme-dark .animated { visibility: visible !important; } /* ---- Generic muted-text contrast bump -------------------- `--text-color` (#a9aab4) is a little dim on near-black; nudge the most common body contexts up for legibility. */ .theme-dark .text-anime-style-3, .theme-dark .why-choose-content p, .theme-dark .about-content p, .theme-dark .page-onboarding-content p { color: #c2c3cc; }