/* Shared public-site colour themes. The controller in assets/js/main.js sets data-theme on before the page is painted, while the original light palette remains the default. */ :root { color-scheme: light; --theme-surface: #ffffff; --theme-surface-2: #f4f8ff; --theme-surface-3: #eaf3ff; --theme-border: #c8dced; --theme-heading: #153966; --theme-copy: #617997; --theme-control: #f9fcff; --theme-control-text: #1d426f; } html[data-theme="dark"] { color-scheme: dark; --ink: #050d1b; --ink-2: #09162a; --ink-3: #10213b; --navy: #0b1c38; --paper: #071424; --white: #eef8ff; --text: #d9e8f7; --muted: #a7bad0; --line: rgba(164, 203, 244, .2); --line-dark: rgba(180, 223, 255, .18); --shadow-lg: 0 32px 75px rgba(0, 0, 0, .38); --shadow-md: 0 18px 40px rgba(0, 0, 0, .27); --theme-surface: #0d1d32; --theme-surface-2: #09182a; --theme-surface-3: #11263f; --theme-border: rgba(159, 208, 247, .24); --theme-heading: #ebf7ff; --theme-copy: #afc3d9; --theme-control: #0b1a2d; --theme-control-text: #d9ebfb; } /* The fixed header is shared by every public page, so the control can be injected once. */ .theme-toggle { position: relative; z-index: 2; display: inline-grid; width: 42px; height: 42px; flex: 0 0 auto; margin-left: 12px; padding: 0; place-items: center; border: 1px solid rgba(223, 241, 255, .27); border-radius: 9px; color: #dff7ff; background: rgba(255, 255, 255, .045); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); font-size: .83rem; transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease; } .theme-toggle:hover { border-color: rgba(116, 230, 255, .72); color: #092447; background: var(--cyan); transform: translateY(-2px); } .theme-toggle:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; } html[data-theme="dark"] .theme-toggle { border-color: rgba(156, 219, 255, .34); color: #ffeab1; background: rgba(119, 174, 255, .11); } html[data-theme="dark"] .theme-toggle:hover { color: #102440; background: #ffe7a8; border-color: #ffe7a8; } /* Core light surfaces. Existing intentionally dark hero, footer, and showcase sections stay dark. */ html[data-theme="dark"] body, html[data-theme="dark"] .subpage, html[data-theme="dark"] .primary-page, html[data-theme="dark"] .showcase-page, html[data-theme="dark"] .technology-page, html[data-theme="dark"] .solution-page { color: var(--text); background: var(--paper); } html[data-theme="dark"] :is( .section:not(.section-dark):not(.portfolio-section):not(.services-section):not(.technologies-section):not(.contact-section), .page-section:not(.page-section--dark), .page-section--tint, .founder-section, .team-section, .verification-workspace, .internship-intro, .internship-programs-section, .about-principles, .about-story-section, .services-suite, .service-models, .solution-workflows, .solution-faq, .showcase-section:not(.showcase-section--dark) ) { color: var(--text); background: linear-gradient(145deg, var(--theme-surface-2), #0b1b30); } html[data-theme="dark"] :is( .section:not(.section-dark):not(.portfolio-section):not(.services-section):not(.technologies-section):not(.contact-section), .page-section:not(.page-section--dark), .founder-section, .team-section, .verification-workspace, .internship-intro, .internship-programs-section, .about-principles, .about-story-section, .services-suite, .service-models, .solution-workflows, .solution-faq, .showcase-section:not(.showcase-section--dark) ) :is(h1, h2, h3) { color: var(--theme-heading); } html[data-theme="dark"] :is( .section:not(.section-dark):not(.portfolio-section):not(.services-section):not(.technologies-section):not(.contact-section), .page-section:not(.page-section--dark), .founder-section, .team-section, .verification-workspace, .internship-intro, .internship-programs-section, .about-principles, .about-story-section, .services-suite, .service-models, .solution-workflows, .solution-faq, .showcase-section:not(.showcase-section--dark) ) :is(p, li, dd, dt, .page-heading > p, .section-intro > p, .heading-row > p) { color: var(--theme-copy); } /* Cards and records used across public routes. */ html[data-theme="dark"] :is( .surface-card, .mou-card, .job-card, .career-card, .team-role-card, .founder-principles article, .culture-card, .role-card, .contact-channel, .gallery-card, .source-note, .certificate-card, .internship-intro-card, .internship-card, .service-suite-card, .model-card, .workflow-card, .principle-card, .timeline-item, .industry-focus-card, .showcase-tech-card, .verification-card, .verification-result, .gallery-state, .faq-list details, .modal-dialog ) { color: var(--text); border-color: var(--theme-border); background: var(--theme-surface); box-shadow: 0 16px 35px rgba(0, 0, 0, .18); } html[data-theme="dark"] :is( .surface-card, .mou-card, .job-card, .career-card, .team-role-card, .founder-principles article, .culture-card, .role-card, .contact-channel, .gallery-card, .source-note, .certificate-card, .internship-intro-card, .internship-card, .service-suite-card, .model-card, .workflow-card, .principle-card, .timeline-item, .industry-focus-card, .showcase-tech-card, .verification-card, .verification-result, .gallery-state, .faq-list details, .modal-dialog ) :is(h2, h3, strong, summary) { color: var(--theme-heading); } html[data-theme="dark"] :is( .surface-card, .mou-card, .job-card, .career-card, .team-role-card, .founder-principles article, .culture-card, .role-card, .contact-channel, .gallery-card, .source-note, .certificate-card, .internship-intro-card, .internship-card, .service-suite-card, .model-card, .workflow-card, .principle-card, .timeline-item, .industry-focus-card, .showcase-tech-card, .verification-card, .verification-result, .gallery-state, .faq-list details, .modal-dialog ) :is(p, small, li, label, span:not(.text-gradient)) { color: var(--theme-copy); } html[data-theme="dark"] :is( .gallery-card--featured, .internship-card--feature, .culture-card--lime, .culture-card--purple, .workflow-card:nth-child(2), .workflow-card:nth-child(3) ) { background: linear-gradient(145deg, #112944, #0d1d34); } /* Light visual/workspace panels retain their structure, but move to the dark palette. */ html[data-theme="dark"] :is( .story-visual, .split-visual, .workflow-studio, .workflow-map, .verification-panel, .document-notice, .gallery-state ) { border-color: var(--theme-border); background-color: var(--theme-surface-3); background-image: none; } html[data-theme="dark"] :is(.flow-step, .flow-step.active, .workflow-card li, .tag-list span, .career-filters, .gallery-filter button, .gallery-state button) { border-color: var(--theme-border); color: var(--theme-copy); background: var(--theme-control); } html[data-theme="dark"] :is(.flow-step strong, .flow-step.active b, .workflow-card h3, .gallery-filter button.is-active, .gallery-filter button.is-active:hover) { color: var(--theme-heading); } html[data-theme="dark"] :is(.page-heading h2, .section-intro h2, .contact-form-wrap h2, .verification-card h2, .document-notice h2, .gallery-context-copy h2) { color: var(--theme-heading); } html[data-theme="dark"] :is(.page-heading > p, .section-intro > p, .contact-form-wrap > p, .verification-card > p, .document-notice > p, .gallery-context-copy > p, .gallery-card p, .gallery-state p) { color: var(--theme-copy); } /* Form controls and modals need explicit colours because their original values are page-specific. */ html[data-theme="dark"] :is(input, select, textarea) { color: var(--theme-control-text); border-color: var(--theme-border); background: var(--theme-control); color-scheme: dark; } html[data-theme="dark"] :is(input, textarea)::placeholder { color: #8096b2; } html[data-theme="dark"] select option { color: var(--theme-control-text); background: #0d1d32; } html[data-theme="dark"] :is(.modal-close, .verification-input-row input, .gallery-filter button, .gallery-state button) { color: var(--theme-control-text); } html[data-theme="dark"] .modal-close { border-color: var(--theme-border); background: var(--theme-control); } html[data-theme="dark"] :is(.form-grid label, .contact-form-wrap .form-grid label) { color: #b9cfe6; } /* These page rules intentionally use more selectors than the shared form rules. */ html[data-theme="dark"] .form-grid :is(input, select, textarea), html[data-theme="dark"] .contact-form-wrap .form-grid :is(input, select, textarea), html[data-theme="dark"] .modal-dialog .form-grid :is(input, select, textarea) { color: var(--theme-control-text); border-color: var(--theme-border); background: var(--theme-control); } html[data-theme="dark"] :is(.contact-form-wrap, .modal-dialog) .form-grid :is(input, textarea)::placeholder { color: #8096b2; } html[data-theme="dark"] .contact-form-wrap .form-grid select option, html[data-theme="dark"] .modal-dialog .form-grid select option { color: var(--theme-control-text); background: #0d1d32; } /* Targeted public-page panels that have their own original light surface rules. */ html[data-theme="dark"] :is(.career-board, .contact-form-shell, .verification-form-panel, .founder-portrait) { color: var(--text); border-color: var(--theme-border); background: var(--theme-surface); box-shadow: 0 18px 40px rgba(0, 0, 0, .24); } html[data-theme="dark"] .founder-portrait img { background: var(--theme-surface-3); } html[data-theme="dark"] .founder-portrait figcaption :is(strong, span) { color: var(--theme-heading); } html[data-theme="dark"] .career-board :is(.career-board-top, .career-filters, .job-row) { border-color: var(--theme-border); } html[data-theme="dark"] .career-board-top, html[data-theme="dark"] .career-filters { color: var(--theme-copy); background: var(--theme-surface-2); } html[data-theme="dark"] .career-board-top p, html[data-theme="dark"] .job-row :is(p, span, small) { color: var(--theme-copy); } html[data-theme="dark"] .career-filter, html[data-theme="dark"] .section-nav button { border-color: var(--theme-border); color: var(--theme-copy); background: var(--theme-control); } html[data-theme="dark"] :is(.career-filter, .section-nav button):hover { border-color: #70dff7; color: #dff8ff; } html[data-theme="dark"] :is(.career-filter.active, .section-nav button.is-active) { border-color: var(--cyan); color: #08234b; background: var(--cyan); } html[data-theme="dark"] .industry-card { border-color: var(--theme-border); background: rgba(13, 31, 53, .8); } html[data-theme="dark"] .industry-card :is(h3, p), html[data-theme="dark"] .industry-card > span { color: var(--theme-copy); } html[data-theme="dark"] .industry-card h3 { color: var(--theme-heading); } html[data-theme="dark"] .industry-card a { border-color: var(--theme-border); color: #8bdff5; } html[data-theme="dark"] .industry-card:hover { background: #123a68; } html[data-theme="dark"] .tech-partner-row { border-color: var(--theme-border); background: var(--theme-surface-2); } html[data-theme="dark"] .tech-partner-row p { color: var(--theme-copy); } html[data-theme="dark"] .tech-partner-list { color: var(--theme-heading); } html[data-theme="dark"] .tech-tab { border-color: var(--theme-border); color: var(--theme-copy); background: var(--theme-control); } html[data-theme="dark"] .tech-tab:hover { border-color: #70dff7; color: #dff8ff; } html[data-theme="dark"] .tech-tab.active { border-color: var(--cyan); color: #08234b; background: var(--cyan); } html[data-theme="dark"] .contact-form-wrap { color: var(--text); } html[data-theme="dark"] .contact-form-wrap .form-privacy { color: var(--theme-copy); } html[data-theme="dark"] .verification-form-panel h2 { color: var(--theme-heading); } html[data-theme="dark"] .verification-form-panel > p, html[data-theme="dark"] .verification-input-help { color: var(--theme-copy); } html[data-theme="dark"] .verification-form-panel label { color: #bfd5eb; } html[data-theme="dark"] .verification-input-help code { border-color: var(--theme-border); color: #a4eafa; background: var(--theme-control); } html[data-theme="dark"] .verification-demo-notice { border-color: var(--theme-border); color: var(--theme-copy); background: var(--theme-control); } /* Keep clear contrast in the public Gallery and certificate routes. */ html[data-theme="dark"] .gallery-featured-badge { color: #edfaff; background: rgba(5, 17, 34, .84); } html[data-theme="dark"] .gallery-card-copy small, html[data-theme="dark"] .certificate-meta, html[data-theme="dark"] .gallery-state i { color: #7eeeff; } html[data-theme="dark"] .source-note i, html[data-theme="dark"] .icon-tile, html[data-theme="dark"] .internship-card-icon, html[data-theme="dark"] .job-icon { color: #79e9ff; background: rgba(55, 193, 231, .13); } /* Public dark sections are already intentional; retain their contrast while harmonising the page canvas. */ html[data-theme="dark"] :is(.section-dark, .page-section--dark, .showcase-section--dark, .portfolio-page, .delivery-section, .outcomes-section, .solutions-cta) { color: var(--white); background-color: var(--ink); } html.theme-transitioning :is( body, .subpage, .section, .page-section, .showcase-section, .surface-card, .gallery-card, .certificate-card, .internship-card, .modal-dialog, .theme-toggle ) { transition: color .22s ease, background-color .22s ease, background .22s ease, border-color .22s ease; } @media (max-width: 1240px) { .theme-toggle { margin-left: auto; } .menu-toggle { margin-left: 9px; } } @media (max-width: 480px) { .theme-toggle, .menu-toggle { width: 39px; height: 39px; } .site-header .brand-logo { max-width: min(148px, calc(100vw - 154px)); } } @media (prefers-reduced-motion: reduce) { .theme-toggle, html.theme-transitioning :is(body, .subpage, .section, .page-section, .showcase-section, .surface-card, .gallery-card, .certificate-card, .internship-card, .modal-dialog) { transition: none; } }