/* ═══════════════════════════════════════════════════════════════ DARK MODE — Site-wide styles Applied when or ═══════════════════════════════════════════════════════════════ */ /* ═══ GLOBAL TOKENS ═══ */ html.dark, body.dark { /* Color tokens */ --paper: #0e1410; --white: #141a16; --ink: #e8ede8; --ink-2: #a0a8a0; --ink-3: #707870; --ink-4: #505850; --border: #2a342c; --gm: #0d2818; --gm2: #0f3520; /* Apply to body */ background: var(--paper); color: var(--ink); } /* ═══ COMPONENTS ═══ */ /* Navigation (site-header component) */ html.dark .site-header-light, body.dark .site-header-light { background: rgba(14,20,16,.95); border-bottom-color: rgba(42,52,44,.8); } html.dark .site-header-light .nav-center a, body.dark .site-header-light .nav-center a { color: rgba(232,237,232,.5); } html.dark .site-header-light .nav-center a:hover, body.dark .site-header-light .nav-center a:hover { color: rgba(232,237,232,.9); } html.dark .site-header-light .nav-search-toggle, body.dark .site-header-light .nav-search-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); } html.dark .site-header-light .nav-search-toggle:hover, body.dark .site-header-light .nav-search-toggle:hover { background: rgba(255,255,255,.15); } html.dark .site-header-light .nav-search-toggle svg, body.dark .site-header-light .nav-search-toggle svg { stroke: rgba(255,255,255,.7); } html.dark .site-header-light .nav-search-input-wrap, body.dark .site-header-light .nav-search-input-wrap { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); } html.dark .site-header-light .nav-search-input, body.dark .site-header-light .nav-search-input { color: #fff; } html.dark .site-header-light .nav-search-input::placeholder, body.dark .site-header-light .nav-search-input::placeholder { color: rgba(255,255,255,.4); } html.dark .site-header-light .nav-burger span, body.dark .site-header-light .nav-burger span { background: #e8ede8; } /* Footer (site-footer component) */ html.dark .footer, body.dark .footer { background: var(--white); border-top-color: var(--border); } /* ═══ COMMON ELEMENTS ═══ */ /* Cards */ html.dark .card, html.dark .now-card, html.dark .service-card, html.dark .process-card, html.dark .phil-card, html.dark .fact-item, html.dark .test-card, html.dark .rc, html.dark .sp, html.dark .gi, html.dark .vid-item, body.dark .card, body.dark .now-card, body.dark .service-card, body.dark .process-card, body.dark .phil-card, body.dark .fact-item, body.dark .test-card, body.dark .rc, body.dark .sp, body.dark .gi, body.dark .vid-item { background: rgba(255,255,255,.03); border-color: var(--border); } /* Buttons */ html.dark .hbtn-s, html.dark .cta-btn-sec, html.dark .cta-bs, body.dark .hbtn-s, body.dark .cta-btn-sec, body.dark .cta-bs { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.7); } html.dark .hbtn-s:hover, html.dark .cta-btn-sec:hover, html.dark .cta-bs:hover, body.dark .hbtn-s:hover, body.dark .cta-btn-sec:hover, body.dark .cta-bs:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; } /* Form inputs */ html.dark .form-input, html.dark .form-select, html.dark .form-textarea, html.dark .nl-f, html.dark .ms-input, html.dark .sb-nl-inp, body.dark .form-input, body.dark .form-select, body.dark .form-textarea, body.dark .nl-f, body.dark .ms-input, body.dark .sb-nl-inp { background: rgba(255,255,255,.04); border-color: var(--border); color: var(--ink); } html.dark .form-input:focus, html.dark .form-select:focus, html.dark .form-textarea:focus, html.dark .nl-f:focus, html.dark .ms-input:focus, html.dark .sb-nl-inp:focus, body.dark .form-input:focus, body.dark .form-select:focus, body.dark .form-textarea:focus, body.dark .nl-f:focus, body.dark .ms-input:focus, body.dark .sb-nl-inp:focus { background: rgba(255,255,255,.06); border-color: var(--g); } /* ═══ PAGE: HOME ═══ */ /* Fix for text on permanently dark sections. Since --white becomes a dark background color in dark mode, text that used --white needs to be explicitly forced back to #fff. */ html.dark .hero-title, body.dark .hero-title, html.dark .hstat-n, body.dark .hstat-n, html.dark .hbtn-p, body.dark .hbtn-p, html.dark .wl-quote, body.dark .wl-quote, html.dark .ap-name, body.dark .ap-name, html.dark .gi-t, body.dark .gi-t, html.dark .cta-t, body.dark .cta-t, html.dark .cta-bp, body.dark .cta-bp, html.dark .vid-play svg, body.dark .vid-play svg { color: #ffffff; fill: #ffffff; } html.dark .vid-play svg, body.dark .vid-play svg { stroke: #ffffff; } html.dark .hero, body.dark .hero { background: var(--paper); } html.dark .hero-overlay, body.dark .hero-overlay { background: linear-gradient(to top,rgba(14,20,16,.97) 0%,rgba(14,20,16,.5) 45%,rgba(14,20,16,.1) 75%,transparent 100%), linear-gradient(to right,rgba(14,20,16,.3) 0%,transparent 50%); } html.dark .who-section, body.dark .who-section { background: var(--paper); } html.dark .now-section, html.dark .gallery-section, html.dark .videos-section, html.dark .journal-section, body.dark .now-section, body.dark .gallery-section, body.dark .videos-section, body.dark .journal-section { background: var(--white); } html.dark .feat, html.dark .fb, body.dark .feat, body.dark .fb { background: rgba(255,255,255,.03); border-color: var(--border); } /* ═══ PAGE: ABOUT ═══ */ html.dark .story-section, html.dark .expertise-section, html.dark .timeline-section, html.dark .now-section, body.dark .story-section, body.dark .expertise-section, body.dark .timeline-section, body.dark .now-section { background: var(--paper); } html.dark .philosophy-section, html.dark .facts-section, body.dark .philosophy-section, body.dark .facts-section { background: var(--white); } html.dark .exp-cell, body.dark .exp-cell { background: rgba(255,255,255,.03); } html.dark .exp-cell:hover, body.dark .exp-cell:hover { background: rgba(30,158,62,.08); } html.dark .timeline-entry::after, body.dark .timeline-entry::after { background: var(--border); } html.dark .now-item, body.dark .now-item { border-bottom-color: var(--border); } /* ═══ PAGE: CONTACT ═══ */ html.dark .hero-right, body.dark .hero-right { background: var(--white); } html.dark .stats-strip, body.dark .stats-strip { background: var(--white); border-color: var(--border); } html.dark .stat-item, body.dark .stat-item { border-color: var(--border); } html.dark .process-section, html.dark .faq-section, body.dark .process-section, body.dark .faq-section { background: var(--paper); } html.dark .services-section, body.dark .services-section { background: var(--white); } html.dark .faq-item, body.dark .faq-item { border-bottom-color: var(--border); } html.dark .faq-icon, body.dark .faq-icon { background: var(--gm); } /* ═══ PAGE: GALLERY ═══ */ html.dark .gallery-hero, html.dark .collections-strip, body.dark .gallery-hero, body.dark .collections-strip { background: var(--paper); } html.dark .gallery-controls, body.dark .gallery-controls { background: var(--white); border-color: var(--border); } html.dark .filter-pill, body.dark .filter-pill { background: rgba(255,255,255,.04); border-color: var(--border); } html.dark .filter-pill.active, body.dark .filter-pill.active { background: var(--gm); border-color: var(--g); } /* ═══ PAGE: PORTFOLIO INDEX ═══ */ html.dark .portfolio-hero, html.dark .results-section, html.dark .process-section, body.dark .portfolio-hero, body.dark .results-section, body.dark .process-section { background: var(--paper); } html.dark .featured-card, html.dark .project-card, body.dark .featured-card, body.dark .project-card { background: rgba(255,255,255,.03); border-color: var(--border); } /* ═══ PAGE: PORTFOLIO SINGLE ═══ */ html.dark .sidebar, body.dark .sidebar { background: rgba(255,255,255,.03); border-color: var(--border); } html.dark .timeline, html.dark .result-numbers, body.dark .timeline, body.dark .result-numbers { background: var(--white); } /* ═══ PAGE: BLOG INDEX ═══ */ html.dark .blog-hero, html.dark .blog-grid-section, body.dark .blog-hero, body.dark .blog-grid-section { background: var(--paper); } html.dark .blog-card, body.dark .blog-card { background: rgba(255,255,255,.03); border-color: var(--border); } /* ═══ PAGE: BLOG SINGLE ═══ */ html.dark .breadcrumb-bar, body.dark .breadcrumb-bar { background: rgba(14,20,16,.95); border-bottom-color: var(--border); } html.dark .hero, body.dark .hero { background: var(--paper); } html.dark .hero::before, body.dark .hero::before { opacity: .04; } html.dark .hero-byline, body.dark .hero-byline { background: rgba(255,255,255,.04); border-color: var(--border); } html.dark .callout, body.dark .callout { background: rgba(30,158,62,.08); border-color: rgba(30,158,62,.2); } html.dark .cl-ico, body.dark .cl-ico { background: rgba(255,255,255,.06); } html.dark .cl-txt, body.dark .cl-txt { color: var(--ink-2); } html.dark .prose blockquote, body.dark .prose blockquote { background: rgba(255,255,255,.04); } html.dark .prose blockquote p, body.dark .prose blockquote p { color: var(--ink-2); } html.dark .step, body.dark .step { border-color: var(--border); } html.dark .pn, body.dark .pn { background: rgba(255,255,255,.03); border-color: var(--border); } html.dark .pn:hover, body.dark .pn:hover { background: rgba(255,255,255,.06); } html.dark .author-card, body.dark .author-card { background: rgba(255,255,255,.04); } html.dark .sb-toc, body.dark .sb-toc { background: rgba(255,255,255,.03); } html.dark .toc-li a:hover, html.dark .toc-li.active a, body.dark .toc-li a:hover, body.dark .toc-li.active a { background: rgba(30,158,62,.12); } html.dark .sb-back, body.dark .sb-back { background: rgba(255,255,255,.04); border-color: var(--border); } html.dark .sb-stats, body.dark .sb-stats { background: rgba(255,255,255,.03); } html.dark .af-tag, body.dark .af-tag { background: rgba(255,255,255,.04); } html.dark .read-toolbar, body.dark .read-toolbar { background: rgba(30,30,24,.96); border-color: var(--border); box-shadow: 0 8px 32px rgba(0,0,0,.4); } html.dark .rtb-sep, body.dark .rtb-sep { background: var(--border); } html.dark .feature-cap, body.dark .feature-cap { color: var(--ink-4); } html.dark .hero-stats, body.dark .hero-stats { border-color: var(--border); } html.dark .sh, body.dark .sh { border-color: var(--border); } html.dark .pull, body.dark .pull { border-color: var(--g); } html.dark .article-foot, body.dark .article-foot { border-color: var(--border); } html.dark .mid-sub, body.dark .mid-sub { background: var(--gd); } /* ═══ PAGE: 404 ═══ */ html.dark .error-page, body.dark .error-page { background: var(--paper); } html.dark .error-left, body.dark .error-left { background: var(--white); border-color: var(--border); } html.dark .score-card, body.dark .score-card { background: rgba(255,255,255,.04); border-color: var(--border); } /* ═══ SEARCH PAGE ═══ */ html.dark .search-page, body.dark .search-page { background: var(--paper); } html.dark .search-result-card, body.dark .search-result-card { background: rgba(255,255,255,.03); border-color: var(--border); }