/* ================================================================ LIGHT THEME OVERRIDE Only active when Do NOT edit any other CSS file for color changes — add here. ================================================================ */ html[data-theme="light"] { --orange: #e05a1e; } /* ===== BASE PAGE ===== */ html[data-theme="light"] body { background: #f7f5f2; color: #1a1a1a; } /* ===== MAJOR SECTION BACKGROUNDS ===== */ /* .csa-hero, .csa-hero-img::before, and .ind-overview-section REMOVED from this group — same "photo/video contrast layer" category as .csa-fade: - .csa-hero's own #000 backdrop is what the semi-transparent hero photos (.csa-hero-img img at opacity .55, .csa-mobile-hero-bg img at .5) blend against; swapping it for cream washed both images out. - .csa-hero-img::before is an edge-blend gradient over the real photo (linear-gradient(90deg, #000 0%, #000 8%, transparent 42%)), not a plain section fill — overriding it with a flat opaque color hid the entire desktop hero photo, not just the intended edge blend. - .ind-overview-section has a real photo via `background-image: linear-gradient(...), url(hero1-bg.jpg)` in style.css; the `background: #f7f5f2` shorthand here resets background-image to none as part of the same declaration, wiping the photo entirely. All three now revert to their dark-mode-only appearance from style.css in both themes. */ html[data-theme="light"] .industries-section, html[data-theme="light"] .bake-section, html[data-theme="light"] .about-section, html[data-theme="light"] .pl-overview, html[data-theme="light"] .site-footer { background: #f7f5f2; } /* .csa-fade REMOVED — this is a contrast vignette over the real homepage hero photo (mobile + desktop), same category as .hero-overlay / .contact-hero-video-overlay / the about-hero & history-intro scrims. Fading it toward the light page color washed the photo out visibly in light mode. It now reverts to its dark-mode-only appearance from style.css in both themes. */ html[data-theme="light"] .ind-overview-section::before, html[data-theme="light"] .industries-section::before, html[data-theme="light"] .about-section::before, html[data-theme="light"] .site-footer::before, html[data-theme="light"] .pl-overview::before { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); } /* ===== HEADINGS / PRIMARY TEXT (white -> dark) ===== */ html[data-theme="light"] .ind-title, html[data-theme="light"] .about-title, html[data-theme="light"] .stat-num, html[data-theme="light"] .fcta-title, html[data-theme="light"] .footer-col ul li a:hover, html[data-theme="light"] .footer-col-title, html[data-theme="light"] .nav-link-text, html[data-theme="light"] .dropdown-item-name { color: #1a1a1a !important; } /* .csa-h / .csa-stat-n / .csa-active-name / .csa-logo-name / .csa-il / .csa-tile-label / .csa-mbadge-name all sit directly over the homepage hero photo + .csa-fade vignette (or, for .csa-tile-label, its own unaffected rgba(0,0,0,0.45) backing) — same category as .csa-fade itself. They stay white in both themes instead of following theme. */ html[data-theme="light"] .csa-h, html[data-theme="light"] .csa-stat-n, html[data-theme="light"] .csa-active-name, html[data-theme="light"] .csa-logo-name, html[data-theme="light"] .csa-il, html[data-theme="light"] .csa-tile-label, html[data-theme="light"] .csa-mbadge-name { color: #fff !important; } /* .csa-mbadge-tag was an orange accent (#e05a1e) in dark mode, not white — restore the accent instead of flattening it to gray. */ html[data-theme="light"] .csa-mbadge-tag { color: var(--orange) !important; } /* No longer gradient-clipped in light mode — a solid dark background flashes visibly before the custom font/GPU layer settles, with no way to hide it against a light page. Plain solid text color instead. */ html[data-theme="light"] .bake-title { background: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; } /* Eyebrow labels above these 3 homepage teaser headings (.industries-section / .bake-section / .about-section, all plain flip sections per MAJOR SECTION BACKGROUNDS above) never had a light-mode rule at all — reasserts their original orange instead of leaving them unstyled. */ html[data-theme="light"] .ind-eyebrow, html[data-theme="light"] .bake-eyebrow, html[data-theme="light"] .about-eyebrow { color: #e05a1e !important; } /* .bake-card-name/-desc (style.css homepage teaser AND the identical class names reused in bake-all.css's full listing page) and .ind-line-pill-name/-cap all sit on a REAL photo (.bake-card-img / .ind-line-pill-icon img, object-fit: cover) behind a hardcoded dark gradient scrim (::before, unaffected by theme) — same category as the hero title fixes. They were incorrectly swept into the generic HEADINGS/MUTED groups; reverting to their original dark-mode white values instead of following theme. */ html[data-theme="light"] .bake-card-name, html[data-theme="light"] .ind-line-pill-name { color: #fff !important; } html[data-theme="light"] .bake-card-desc { color: rgba(255, 255, 255, 0.5) !important; } html[data-theme="light"] .ind-line-pill-cap { color: rgba(255, 255, 255, 0.45) !important; } /* ===== SECONDARY / MUTED TEXT (rgba white -> rgba black) ===== */ html[data-theme="light"] .ind-sub, html[data-theme="light"] .about-body, html[data-theme="light"] .stat-label, html[data-theme="light"] .bake-sub, html[data-theme="light"] .fcta-sub, html[data-theme="light"] .footer-tagline, html[data-theme="light"] .footer-address, html[data-theme="light"] .footer-col ul li a, html[data-theme="light"] .footer-bottom span, html[data-theme="light"] .footer-bottom-links a, html[data-theme="light"] .back-btn { color: rgba(0, 0, 0, 0.55) !important; } /* .ind-overview-header .ind-title / .ind-sub, .pl-overview-title, and the .pl-table cells all sit inside .ind-overview-section, which has a real photo background (see the MAJOR SECTION BACKGROUNDS note above) — the bare .ind-title/.ind-sub/.pl-table-name/.pl-table td/th rules above are shared with .industries-section (a plain solid-color section elsewhere, where dark text is correct), so these are scoped specifically to .ind-overview-section rather than overriding the bare classes, and kept at their original dark-mode values instead of following theme. */ html[data-theme="light"] .ind-overview-section .ind-title { color: #fff !important; } html[data-theme="light"] .ind-overview-section .ind-sub { color: rgba(255, 255, 255, 0.4) !important; } html[data-theme="light"] .ind-overview-section .pl-overview-title { color: #fff !important; } html[data-theme="light"] .ind-overview-section .pl-table-name { color: #fff !important; } html[data-theme="light"] .ind-overview-section .pl-table td { color: rgba(255, 255, 255, 0.6) !important; } html[data-theme="light"] .ind-overview-section .pl-table th { color: rgba(255, 255, 255, 0.3) !important; } /* .ind-cta ("All solutions →") is also in this section, on the same photo — its border was in the shared BORDERS group below (rgba(0,0,0,0.1)), which would wash out against the photo. Scoped back to its original dark-mode border instead of following theme. */ html[data-theme="light"] .ind-overview-section .ind-cta { border-color: rgba(255, 255, 255, 0.15); } /* .pl-table th/td borders were also in the shared BORDERS group (rgba(0,0,0,0.1)) — same wash-out issue, same fix. */ html[data-theme="light"] .ind-overview-section .pl-table th { border-color: rgba(255, 255, 255, 0.06); } html[data-theme="light"] .ind-overview-section .pl-table td { border-color: rgba(255, 255, 255, 0.04); } /* .csa-sub / .csa-tag / .csa-btn-g / .csa-clients span / .csa-stat-l / .csa-logo-sub / .csa-mbadge-spec all sit over the same hero photo + .csa-fade vignette — kept at their original dark-mode rgba(white) values instead of following theme. (.csa-mbadge-spec previously had a duplicate, conflicting entry in both this group and the headings group above — consolidated to this single rule.) */ html[data-theme="light"] .csa-sub, html[data-theme="light"] .csa-btn-g { color: rgba(255, 255, 255, 0.3) !important; } html[data-theme="light"] .csa-tag { color: rgba(255, 255, 255, 0.25) !important; } html[data-theme="light"] .csa-clients span, html[data-theme="light"] .csa-stat-l { color: rgba(255, 255, 255, 0.2) !important; } html[data-theme="light"] .csa-logo-sub { color: rgba(255, 255, 255, 0.22) !important; } html[data-theme="light"] .csa-mbadge-spec { color: rgba(255, 255, 255, 0.32) !important; } /* ===== BORDERS (rgba white -> rgba black) ===== */ html[data-theme="light"] .about-stats, html[data-theme="light"] .about-stat, html[data-theme="light"] .about-cta-link, html[data-theme="light"] .bake-view-all-btn, html[data-theme="light"] .back-btn, html[data-theme="light"] .ind-line-pill, html[data-theme="light"] .bake-card, html[data-theme="light"] .fcta-btn-secondary, html[data-theme="light"] .footer-social, html[data-theme="light"] .footer-bottom, html[data-theme="light"] .pl-comparison { border-color: rgba(0, 0, 0, 0.1); } /* ===== CARD-LIKE BACKGROUNDS (dark panel -> white panel) ===== */ html[data-theme="light"] .about-stat, html[data-theme="light"] .why-card, html[data-theme="light"] .infra-stat-box, html[data-theme="light"] .infra-floor, html[data-theme="light"] .quality-pillar, html[data-theme="light"] .story-img-cell, html[data-theme="light"] .explore-card, html[data-theme="light"] .pl-card, html[data-theme="light"] .ind-card, html[data-theme="light"] .machine-card, html[data-theme="light"] .blog-card, html[data-theme="light"] .timeline-card, html[data-theme="light"] .featured-card, html[data-theme="light"] .stat-block, html[data-theme="light"] .r-card, html[data-theme="light"] .t-card, html[data-theme="light"] .pkg-card, html[data-theme="light"] .pkg-info-card, html[data-theme="light"] .pkg-manpower-card, html[data-theme="light"] .contact-info-card, html[data-theme="light"] .post-sidebar-box, html[data-theme="light"] .flow-step-box, html[data-theme="light"] .iot-card, html[data-theme="light"] .export-panel, html[data-theme="light"] .rating-callout { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } /* ===== PILL / TAG CHIPS ===== */ html[data-theme="light"] .pl-card-capacity, html[data-theme="light"] .pl-card-machine-tag, html[data-theme="light"] .infra-badge, html[data-theme="light"] .tl-tag, html[data-theme="light"] .model-tag, html[data-theme="light"] .card-tag, html[data-theme="light"] .pkg-tag, html[data-theme="light"] .pkg-material, html[data-theme="light"] .detail-tag, html[data-theme="light"] .filter-pill, html[data-theme="light"] .filter-btn { background: #f0eeeb; border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.6); } /* ===== NAVBAR ===== */ html[data-theme="light"] .site-nav { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); /* top/left/right only — border-bottom keeps its orange accent color (set in navbar.css) in both themes, so it isn't touched here. */ border-top-color: rgba(0, 0, 0, 0.08); border-left-color: rgba(0, 0, 0, 0.08); border-right-color: rgba(0, 0, 0, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255,255,255,0.6); } html[data-theme="light"] .site-nav.scrolled { background: rgba(255, 255, 255, 0.92); border-top-color: rgba(224, 90, 30, 0.18); border-left-color: rgba(224, 90, 30, 0.18); border-right-color: rgba(224, 90, 30, 0.18); } html[data-theme="light"] .nav-links > li > a, html[data-theme="light"] .nav-dropdown > a { color: rgba(0, 0, 0, 0.6); } html[data-theme="light"] .nav-links > li > a:hover, html[data-theme="light"] .nav-dropdown > a:hover, html[data-theme="light"] .nav-links > li > a.active, html[data-theme="light"] .nav-dropdown > a.active { color: #000; } html[data-theme="light"] .dropdown-menu, html[data-theme="light"] .dropdown-menu::before { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .dropdown-item { color: rgba(0, 0, 0, 0.6); } html[data-theme="light"] .dropdown-item:hover { background: rgba(0, 0, 0, 0.04); color: #000; } html[data-theme="light"] .dropdown-item-cap, html[data-theme="light"] .dropdown-category-label { color: rgba(0, 0, 0, 0.35); } html[data-theme="light"] .dropdown-item-img { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); } /* .theme-toggle-btn override REMOVED — navbar.css now gives this button a permanent orange gradient (matching .nav-cta/.nav-signin) in both themes; this rule was overriding it to a plain gray circle in light mode. Do not re-add a background/border override here. */ /* Footer social icons: were invisible in light mode (icon color and border stayed near-white). Border-color was already covered by the original BORDERS group, but the icon color itself never got a light-mode rule. Hover is restored explicitly too, since its orange border/color/background would otherwise be silently clobbered by the same same-specificity tiebreak as the card fixes above (the base rule ties with .footer-social:hover and our html[]-prefix wins the tie). */ html[data-theme="light"] .footer-social { color: rgba(0, 0, 0, 0.4); } html[data-theme="light"] .footer-social:hover { border-color: #e05a1e; color: #e05a1e; background: rgba(224, 90, 30, 0.08); } /* ===== TABLE ===== */ html[data-theme="light"] .pl-table th { background: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 0.4); } html[data-theme="light"] .pl-table tr:hover td { background: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 0.75); } /* ===== MOBILE DRAWER / ISLAND ===== */ html[data-theme="light"] .mobile-drawer { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .drawer-link { color: rgba(0, 0, 0, 0.6); border-bottom-color: rgba(0, 0, 0, 0.06); } html[data-theme="light"] .drawer-section-label { color: rgba(0, 0, 0, 0.35); } /* ================================================================ ABOUT.CSS OVERRIDES ================================================================ */ /* ===== SECTION BACKGROUNDS ===== */ html[data-theme="light"] .about-hero, html[data-theme="light"] .story-section, html[data-theme="light"] .why-section, html[data-theme="light"] .quality-section, html[data-theme="light"] .infra-section, html[data-theme="light"] .cert-section, html[data-theme="light"] .explore-section { background: #f7f5f2; } /* ===== SECTION DIVIDER LINES ===== */ html[data-theme="light"] .story-section::before, html[data-theme="light"] .why-section::before, html[data-theme="light"] .quality-section::before, html[data-theme="light"] .infra-section::before, html[data-theme="light"] .cert-section::before, html[data-theme="light"] .explore-section::before, html[data-theme="light"] .section-divider, html[data-theme="light"] .cert-timeline::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .section-title, html[data-theme="light"] .about-hero-stat-num, html[data-theme="light"] .why-card h3, html[data-theme="light"] .quality-tagline, html[data-theme="light"] .quality-pillar-title, html[data-theme="light"] .infra-floor-name, html[data-theme="light"] .explore-card-title, html[data-theme="light"] .cert-milestone:hover .cert-milestone-year, html[data-theme="light"] .history-meta-num { color: #1a1a1a !important; } /* Eyebrow label reused across story/why/quality/infra/cert/explore — all plain flip sections above — never had a light-mode rule. */ html[data-theme="light"] .eyebrow-tag { color: var(--orange) !important; } /* Photo-backed hero (about-hero-bg.jpg + hardcoded dark scrim, inline in about.html — not theme-aware) — stays white in both themes, unlike the plain-background headings above. */ html[data-theme="light"] .about-hero-title .line-inner { background: none; -webkit-text-fill-color: #fff; color: #fff; } /* .accent words (solid opaque orange via -webkit-text-fill-color) sit on the SAME element as .line-inner, which still carries a clipped background gradient underneath. In dark mode that clipped background was light/white on a dark page — invisible. Now it's dark, and shows through/behind the solid-orange word as a visible box. Clearing the background on .accent specifically (it doesn't need one — its fill is already solid, not clipped) removes the artifact in all 4 places this pattern is used: about, terms, blog, history. */ html[data-theme="light"] .about-hero-title .accent, html[data-theme="light"] .terms-hero-title .accent, html[data-theme="light"] .blog-hero-title .accent, html[data-theme="light"] .history-intro-title .t-orange { background: none; } /* Same photo-backed .about-hero as above — eyebrow year sits over the same permanent dark scrim, so it keeps its original dark-mode value instead of the plain-background muted color used elsewhere in light mode. (.about-hero-stat-num and .about-hero-stat-label are excluded here — both sit inside .about-hero-stat, which already has a white card background, so they use the normal dark/muted colors instead, grouped with .section-title and .infra-stat-box-label respectively.) */ html[data-theme="light"] .about-hero-desc { color: rgba(255, 255, 255, 0.4) !important; } html[data-theme="light"] .about-hero-eyebrow-year { color: rgba(255, 255, 255, 0.25) !important; } /* Inline emphasis in body copy */ html[data-theme="light"] .story-body-text strong { color: rgba(0, 0, 0, 0.75) !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .section-body, html[data-theme="light"] .story-img-placeholder, html[data-theme="light"] .infra-img-main .ph, html[data-theme="light"] .story-body-text p, html[data-theme="light"] .why-header-right p, html[data-theme="light"] .why-card p, html[data-theme="light"] .quality-intro, html[data-theme="light"] .quality-pillar-sub, html[data-theme="light"] .quality-pillar-body-inner li, html[data-theme="light"] .quality-pillar-toggle, html[data-theme="light"] .infra-intro, html[data-theme="light"] .infra-stat-box-label, html[data-theme="light"] .about-hero-stat-label, html[data-theme="light"] .infra-floor-detail, html[data-theme="light"] .infra-floor-body, html[data-theme="light"] .cert-milestone-year, html[data-theme="light"] .cert-milestone-label, html[data-theme="light"] .explore-header-sub, html[data-theme="light"] .explore-card-desc, html[data-theme="light"] .explore-card.featured .explore-card-desc, html[data-theme="light"] .history-meta-label, html[data-theme="light"] .story-highlight { color: rgba(0, 0, 0, 0.55) !important; } /* ===== BORDERS ===== */ html[data-theme="light"] .about-hero-stats, html[data-theme="light"] .quality-pillar-body-inner, html[data-theme="light"] .quality-pillar-toggle { border-color: rgba(0, 0, 0, 0.1); } /* ===== CARD-LIKE BACKGROUNDS (add-ons to shared card group) ===== */ html[data-theme="light"] .about-hero-stat, html[data-theme="light"] .infra-img-main { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } /* ===== SMALL ICON / DOT ELEMENTS ===== */ html[data-theme="light"] .quality-pillar-icon { background: #f0eeeb; border-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .cert-milestone-dot { background: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.25); } html[data-theme="light"] .hero-scroll-line { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1a1a1a); } /* ===== GHOST / WATERMARK NUMBERS (shared class names across multiple pages — about, history, blog, terms, production-lines. Consolidated here since about.css was the first file to surface them; do not duplicate later.) ===== */ html[data-theme="light"] .about-hero-bg-num, html[data-theme="light"] .history-intro-ghost, html[data-theme="light"] .tl-year-ghost, html[data-theme="light"] .blog-hero-bg-text, html[data-theme="light"] .terms-hero-bg-text { -webkit-text-stroke: 1px rgba(0, 0, 0, 0.08); } html[data-theme="light"] .pl-lines-count { color: rgba(0, 0, 0, 0.12) !important; } /* ================================================================ BAKE-ALL.CSS OVERRIDES NOTE: .page-hero / .page-title / .page-sub / .page-transition are a shared "inner page hero" component reused across many later files (bake-product, blog, contact, event, machine, model-detail, package-style, privacy, production-lines, terms, testimonials). Consolidated here since bake-all.css was the first file to surface them — do not duplicate later. ================================================================ */ /* ===== PAGE HERO / SECTION BACKGROUND ===== */ html[data-theme="light"] .page-hero, html[data-theme="light"] .grid-section { background: #f7f5f2; } /* ===== DIVIDER LINE ===== */ html[data-theme="light"] .grid-section::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); } /* No longer gradient-clipped in light mode (see note near .bake-title) */ html[data-theme="light"] .page-title { background: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; } /* ===== MUTED TEXT ===== */ html[data-theme="light"] .page-sub { color: rgba(0, 0, 0, 0.55) !important; } /* ===== PAGE TRANSITION OVERLAY (avoid a black flash in light theme) ===== */ html[data-theme="light"] .page-transition { background: #f7f5f2; } /* ================================================================ BAKE-PRODUCT.CSS OVERRIDES NOTE: .process-section/-title/-sub and .cta-strip/-title/-sub/ -btn-secondary are a shared "process + bottom CTA" component likely reused across other product/machine pages — skip re-adding if a later file duplicates them. ================================================================ */ /* ===== PHOTO HERO VIGNETTE (fade toward light bg instead of black) ===== */ /* html[data-theme="light"] .hero-overlay { background: linear-gradient(to bottom, rgba(247, 245, 242, 0.5) 0%, transparent 35%, transparent 55%, rgba(247, 245, 242, 0.95) 100%), radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(247, 245, 242, 0.45) 100%); } html[data-theme="light"] .scroll-line { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1a1a1a); } */ /* Photo-backed hero (per-product photo in #heroBg + .hero-overlay dark scrim) — stays white in both themes, unlike the plain-background headings above. Photo varies per product page, so contrast under dark text can't be guaranteed. */ html[data-theme="light"] .hero-title { background: none; -webkit-text-fill-color: #fff; color: #fff; } /* Fix: .back-btn (shared.css) text/border already covered, but its own translucent chip background was never overridden — dark text was landing on a dark chip in light mode. */ html[data-theme="light"] .back-btn { background: rgba(255, 255, 255, 0.65); } html[data-theme="light"] .back-btn:hover { background: rgba(255, 255, 255, 0.9); } /* ===== SECTION BACKGROUNDS ===== */ html[data-theme="light"] .process-section, html[data-theme="light"] .cta-strip { background: #f7f5f2; } /* Eyebrow labels above .process-section / .cta-strip headings — both plain flip sections above — never had a light-mode rule. */ html[data-theme="light"] .process-eyebrow, html[data-theme="light"] .cta-eyebrow { color: var(--orange) !important; } /* ===== DIVIDERS / BORDERS ===== */ html[data-theme="light"] .process-section::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); } html[data-theme="light"] .cta-strip { border-top-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .card-img-wrap, html[data-theme="light"] .card-img-placeholder { border-bottom-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .card-img-placeholder { background: rgba(0, 0, 0, 0.02); } html[data-theme="light"] .cta-btn-secondary { border-color: rgba(0, 0, 0, 0.15); } html[data-theme="light"] .cta-btn-secondary:hover { border-color: rgba(0, 0, 0, 0.35); } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .process-title, html[data-theme="light"] .card-name, html[data-theme="light"] .cta-title { color: #1a1a1a !important; } html[data-theme="light"] .cta-btn-secondary:hover { color: #1a1a1a !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .process-sub, html[data-theme="light"] .step-label, html[data-theme="light"] .card-models, html[data-theme="light"] .cta-sub, html[data-theme="light"] .cta-btn-secondary { color: rgba(0, 0, 0, 0.55) !important; } /* Same photo-backed hero as .hero-title above — keeps its original dark-mode value instead of following the light-mode muted color. */ html[data-theme="light"] .hero-desc { color: rgba(255, 255, 255, 0.4) !important; } /* ===== PILL / TAG CHIPS (add-on to shared group) ===== */ html[data-theme="light"] .coming-badge { background: #f0eeeb; border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.6); } /* ================================================================ BLOG.CSS OVERRIDES ================================================================ */ /* ===== SECTION BACKGROUNDS ===== */ /* .post-hero REMOVED — when a post has a cover image, blog-detail.html renders it at opacity:0.12 as a faint texture blending against this section's dark backdrop. Same "photo contrast layer" category as .csa-hero — swapping the backdrop to cream washes it out further. Reverts to dark-mode-only appearance from blog.css in both themes. */ html[data-theme="light"] .blog-hero, html[data-theme="light"] .filter-section, html[data-theme="light"] .blog-grid-section, html[data-theme="light"] .post-body-section { background: #f7f5f2; } /* Eyebrow above .blog-hero heading — plain flip section above — never had a light-mode rule. */ html[data-theme="light"] .blog-hero-eyebrow span { color: var(--orange) !important; } /* ===== DIVIDER LINES ===== */ html[data-theme="light"] .filter-section::before, html[data-theme="light"] .blog-grid-section::before, html[data-theme="light"] .post-body-section::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); } html[data-theme="light"] .post-divider { background: rgba(0, 0, 0, 0.08); } /* No longer gradient-clipped in light mode (see note near .bake-title) */ html[data-theme="light"] .blog-hero-title .line-inner { background: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .blog-card-title, html[data-theme="light"] .blog-card.featured .blog-card-title, html[data-theme="light"] .post-hero-title, html[data-theme="light"] .post-content h2, html[data-theme="light"] .post-content h3, html[data-theme="light"] .toc-link:hover, html[data-theme="light"] .post-related-item:hover .post-related-title { color: #1a1a1a !important; } /* Inline emphasis in post body */ html[data-theme="light"] .post-content strong { color: rgba(0, 0, 0, 0.75) !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .toc-link, html[data-theme="light"] .eyebrow-count, html[data-theme="light"] .blog-hero-desc, html[data-theme="light"] .filter-label, html[data-theme="light"] .filter-count, html[data-theme="light"] .blog-card-img-placeholder, html[data-theme="light"] .blog-card-subtitle, html[data-theme="light"] .blog-card-excerpt, html[data-theme="light"] .blog-card-date, html[data-theme="light"] .no-results p, html[data-theme="light"] .post-hero-eyebrow-sep, html[data-theme="light"] .post-hero-subtitle, html[data-theme="light"] .post-hero-date, html[data-theme="light"] .post-content p, html[data-theme="light"] .post-content li, html[data-theme="light"] .post-content .post-highlight, html[data-theme="light"] .post-sidebar-box-title, html[data-theme="light"] .post-related-title, html[data-theme="light"] .post-related-date, html[data-theme="light"] .post-back-btn, html[data-theme="light"] .odoo-loading p, html[data-theme="light"] .odoo-error p, html[data-theme="light"] .post-content td { color: rgba(0, 0, 0, 0.55) !important; } /* ===== BORDERS ===== */ html[data-theme="light"] .toc-link { border-left-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .post-related-item { border-bottom-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .post-back-btn { border-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .post-content td { border-color: rgba(0, 0, 0, 0.1); } /* Preserve the orange spin accent — only recolor the base ring */ html[data-theme="light"] .odoo-loading-spinner { border: 2px solid rgba(0, 0, 0, 0.1); border-top-color: #e05a1e; } /* ===== CARD IMAGE WRAP (fallback bg behind lazy-loaded photos) ===== */ html[data-theme="light"] .blog-card-img-wrap { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); } /* ===== TABLE (post content, Odoo-rendered) ===== */ html[data-theme="light"] .post-content tr:hover td { background: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 0.75); } html[data-theme="light"] .post-content tr:nth-child(even) td { background: rgba(0, 0, 0, 0.02); } /* ===== FORM INPUT (blog filter search box) ===== */ html[data-theme="light"] .filter-search { background: #ffffff; border-color: rgba(0, 0, 0, 0.15); color: #1a1a1a !important; } /* ================================================================ CONTACT.CSS OVERRIDES ================================================================ */ /* ===== SECTION BACKGROUNDS ===== */ html[data-theme="light"] .contact-hero, html[data-theme="light"] .contact-body { background: #f7f5f2; } html[data-theme="light"] .contact-hero { border-bottom-color: rgba(0, 0, 0, 0.08); } /* Video hero vignette (fade toward light bg instead of black) */ html[data-theme="light"] .contact-hero-video-overlay { background: linear-gradient( to bottom, rgba(247, 245, 242, 0.5) 0%, rgba(247, 245, 242, 0.45) 40%, rgba(247, 245, 242, 0.85) 75%, rgba(247, 245, 242, 1) 100% ); } /* Video-backed hero (baking-video.mp4 + .contact-hero-video-overlay dark scrim) — stays white in both themes, unlike the plain-background headings above. Moving video content makes contrast under dark text even less reliable than a static photo. */ html[data-theme="light"] .contact-title { background: none; -webkit-text-fill-color: #fff; color: #fff; } /* Same video-backed hero as .contact-title above — keeps its original dark-mode value instead of following the light-mode muted color. */ html[data-theme="light"] .contact-subtitle { color: rgba(255, 255, 255, 0.4) !important; } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .contact-info-value, html[data-theme="light"] .contact-form-title, html[data-theme="light"] .success-title { color: #1a1a1a !important; } /* No !important: .contact-info-link:hover turns orange in the original design — !important here would permanently kill that hover state. Specificity alone is enough to beat the base (non-hover) rule. */ html[data-theme="light"] .contact-info-link { color: #1a1a1a; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .contact-info-label, html[data-theme="light"] .contact-info-sub, html[data-theme="light"] .contact-form-sub, html[data-theme="light"] .form-field label, html[data-theme="light"] .success-sub, html[data-theme="light"] .success-detail, html[data-theme="light"] .success-refresh { color: rgba(0, 0, 0, 0.55) !important; } /* ===== BORDERS ===== */ html[data-theme="light"] .contact-map-embed { border-color: rgba(0, 0, 0, 0.1); } /* ===== CARD-LIKE BACKGROUNDS (add-ons) ===== */ html[data-theme="light"] .contact-form-wrap, html[data-theme="light"] .contact-success { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } /* ===== FORM INPUTS ===== */ html[data-theme="light"] .form-field input, html[data-theme="light"] .form-field select, html[data-theme="light"] .form-field textarea { background: #ffffff; border-color: rgba(0, 0, 0, 0.15); color: #1a1a1a; } html[data-theme="light"] .form-field input::placeholder, html[data-theme="light"] .form-field textarea::placeholder { color: rgba(0, 0, 0, 0.35); } /* #ctcCountry / #ctcSubject set their own background-color via ID selector (higher specificity than a class) — must be matched with the same IDs */ html[data-theme="light"] #ctcCountry, html[data-theme="light"] #ctcSubject { background-color: #ffffff; } html[data-theme="light"] #ctcCountry option, html[data-theme="light"] #ctcCountry optgroup, html[data-theme="light"] #ctcSubject option { background: #ffffff; color: #1a1a1a; } /* ================================================================ EVENT.CSS OVERRIDES NOTE: .lightbox and its controls (-close, -nav, -image-container, -placeholder, -counter) intentionally excluded — a full-screen photo viewer modal, same "stays dark for photo contrast" reasoning as about.css's .cert-card. ================================================================ */ /* ===== SECTION BACKGROUNDS ===== */ html[data-theme="light"] .events-hero, html[data-theme="light"] .featured-events, html[data-theme="light"] .events-timeline, html[data-theme="light"] .events-stats { background: #f7f5f2; } /* Eyebrow/tag labels above headings in these 4 plain flip sections — never had a light-mode rule. */ html[data-theme="light"] .events-eyebrow, html[data-theme="light"] .featured-eyebrow, html[data-theme="light"] .timeline-eyebrow, html[data-theme="light"] .timeline-date { color: #e05a1e !important; } /* ===== DIVIDER LINES ===== */ html[data-theme="light"] .featured-events::before, html[data-theme="light"] .events-timeline::before, html[data-theme="light"] .events-stats::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); } /* No longer gradient-clipped in light mode (see note near .bake-title) */ html[data-theme="light"] .events-title { background: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .featured-title, html[data-theme="light"] .featured-name, html[data-theme="light"] .timeline-title, html[data-theme="light"] .timeline-event-name, html[data-theme="light"] .stat-number, html[data-theme="light"] .pp-field-value, html[data-theme="light"] .pp-title, html[data-theme="light"] .pp-title-sm { color: #1a1a1a !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .scroll-indicator::before, html[data-theme="light"] .events-sub, html[data-theme="light"] .featured-sub, html[data-theme="light"] .placeholder-content, html[data-theme="light"] .featured-date, html[data-theme="light"] .featured-location, html[data-theme="light"] .featured-desc, html[data-theme="light"] .detail-item, html[data-theme="light"] .timeline-sub, html[data-theme="light"] .timeline-location, html[data-theme="light"] .timeline-desc, html[data-theme="light"] .pp-desc, html[data-theme="light"] .pp-loc-sm, html[data-theme="light"] .gallery-placeholder, html[data-theme="light"] .timeline-placeholder { color: rgba(0, 0, 0, 0.55) !important; } /* Decorative faint year number */ html[data-theme="light"] .year-num { color: rgba(0, 0, 0, 0.2); } /* ===== BORDERS ===== */ html[data-theme="light"] .featured-details { border-top-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .click-hint { border-top-color: rgba(0, 0, 0, 0.1); } /* ===== FADE LINES (re-declared so the fade ends dark, not invisible-white) ===== */ html[data-theme="light"] .year-line { background: linear-gradient(to bottom, rgba(224, 90, 30, 0.3), rgba(0, 0, 0, 0.08)); } html[data-theme="light"] .pp-route-line { background: linear-gradient(to bottom, rgba(224, 90, 30, 0.4), rgba(0, 0, 0, 0.08)); } html[data-theme="light"] .timeline-card.international::before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent); } /* ===== IMAGE / GALLERY PLACEHOLDER TILES ===== */ html[data-theme="light"] .featured-placeholder { background: rgba(0, 0, 0, 0.02); border-bottom-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .gallery-item { background: #f0eeeb; border-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .timeline-placeholder { background: #f0eeeb; border-color: rgba(0, 0, 0, 0.1); } /* ===== PASSPORT / BOARDING-PASS CARDS ===== */ html[data-theme="light"] .pp-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } html[data-theme="light"] .pp-card-image { background: rgba(0, 0, 0, 0.02); } html[data-theme="light"] .pp-card-perf, html[data-theme="light"] .pp-ticket-perf { background-image: linear-gradient(rgba(0, 0, 0, 0.15) 60%, transparent 0%); } html[data-theme="light"] .pp-card-perf::before, html[data-theme="light"] .pp-card-perf::after { background: #f7f5f2; } html[data-theme="light"] .pp-year-stamp { background: #f7f5f2; } html[data-theme="light"] .pp-ticket { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .pp-ticket-stub { background: rgba(0, 0, 0, 0.02); } /* ===== HERO ROUTE-MAP SVG (white elements need a dark equivalent) ===== */ html[data-theme="light"] .pp-route-path-2 { stroke: rgba(0, 0, 0, 0.15); } html[data-theme="light"] .pp-route-traveler { fill: #1a1a1a; } /* ===== MIRROR CURVE ACCENT (glossy highlight -> soft shadow in light mode) ===== */ html[data-theme="light"] .pp-mirror-curve { background: radial-gradient( ellipse 60% 80% at 70% 30%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 35%, transparent 70% ); } html[data-theme="light"] .pp-mirror-curve::before { border-color: rgba(0, 0, 0, 0.08); } /* ================================================================ HISTORY.CSS OVERRIDES NOTE: several elements here (.tl-dot-year, .tl-v-tag/.tl-v-dot, .tl-tag, .timeline-card) have an .orange/.major/.active accent variant styled WITHOUT !important. A blanket !important override on the base selector would permanently clobber that accent — so those get dedicated non-important rules, with the accent variant re-asserted explicitly wherever a same-specificity tie would otherwise let the base override win by our usual html[]-prefix tiebreak. ================================================================ */ /* ===== SECTION BACKGROUNDS ===== */ html[data-theme="light"] .history-intro, html[data-theme="light"] .timeline-wrapper, html[data-theme="light"] .tl-v-section { background: #f7f5f2; } /* Eyebrow-style label above each vertical timeline entry's year, inside .tl-v-section (plain flip section above) — never had a light-mode rule. */ html[data-theme="light"] .tl-v-label { color: var(--orange) !important; } /* Photo-backed hero (history-hero-bg.jpg + hardcoded dark scrim, inline in history.html — not theme-aware) — stays white in both themes, unlike the plain-background headings above. */ html[data-theme="light"] .history-intro-title .t-inner { background: none; -webkit-text-fill-color: #fff; color: #fff; } /* ===== BORDERS ===== */ html[data-theme="light"] .history-intro-meta { border-color: rgba(0, 0, 0, 0.1); } /* ===== CARD-LIKE BACKGROUNDS (add-ons) ===== */ html[data-theme="light"] .history-meta-pill, html[data-theme="light"] .tl-img-frame { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } /* ===== FADE / PROGRESS / SPINE LINES ===== */ html[data-theme="light"] .intro-scroll-line { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1a1a1a); } html[data-theme="light"] .tl-progress-bar { background: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .tl-v-line { background: linear-gradient( to bottom, transparent, rgba(0, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0.15) 95%, transparent ); } html[data-theme="light"] .tl-dot-item:not(:last-child)::after { background: rgba(0, 0, 0, 0.12); } html[data-theme="light"] .tl-dot-item.passed:not(:last-child)::after { background: rgba(224, 90, 30, 0.4); } /* Decorative faint (inactive) slide-year stroke */ html[data-theme="light"] .tl-year { -webkit-text-stroke: 1px rgba(0, 0, 0, 0.15); } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .tl-era-counter strong, html[data-theme="light"] .tl-headline, html[data-theme="light"] .tl-v-headline { color: #1a1a1a !important; } /* .tl-v-divider sits on a real photo (history-divider.jpg) + dark scrim, not a plain section — its span stays white in light mode like .about-hero-title / .contact-title, rather than following the generic dark-mode-following heading color above. */ html[data-theme="light"] .tl-v-divider span { color: #fff !important; } /* Same photo-backed .history-intro hero as .t-inner above — keeps its original dark-mode value instead of following the light-mode muted color. */ html[data-theme="light"] .history-intro-sub { color: rgba(255, 255, 255, 0.35) !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .tl-era-counter, html[data-theme="light"] .tl-key-hint, html[data-theme="light"] .tl-img-placeholder, html[data-theme="light"] .tl-body, html[data-theme="light"] .tl-v-year, html[data-theme="light"] .tl-v-body { color: rgba(0, 0, 0, 0.55) !important; } /* ===== NAV / CHIP BUTTONS (no accent modifier to protect) ===== */ html[data-theme="light"] .tl-nav-btn { background: #f0eeeb; border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.6); } html[data-theme="light"] .key-badge { border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.55); } /* ===== DOT-RAIL YEAR LABEL (no !important — .active stays orange) ===== */ html[data-theme="light"] .tl-dot-year { color: rgba(0, 0, 0, 0.35); } html[data-theme="light"] .tl-dot-item.passed .tl-dot-year { color: rgba(0, 0, 0, 0.5); } /* ===== VERTICAL TIMELINE DOT + TAG (no !important — .orange stays orange) ===== */ html[data-theme="light"] .tl-v-dot { background: rgba(0, 0, 0, 0.2); } html[data-theme="light"] .tl-v-dot.orange { background: var(--orange); } html[data-theme="light"] .tl-v-tag { color: rgba(0, 0, 0, 0.55); border-color: rgba(0, 0, 0, 0.15); } html[data-theme="light"] .tl-v-tag.orange { color: var(--orange); border-color: rgba(224, 90, 30, 0.35); } /* ===== PRE-EXISTING GAPS (from the base pill/tag + card groups added before this file) — .tl-tag.orange and .timeline-card.major are accent variants the earlier blanket .tl-tag / .timeline-card overrides would otherwise win via a same-specificity tiebreak. Restoring explicitly. ===== */ html[data-theme="light"] .tl-tag.orange { background: rgba(224, 90, 30, 0.08); border-color: rgba(224, 90, 30, 0.25); color: var(--orange); } html[data-theme="light"] .timeline-card.major { background: rgba(224, 90, 30, 0.06); border-color: rgba(224, 90, 30, 0.2); } /* ================================================================ LINE-BREAD-RUSK.CSS OVERRIDES NOTE: this is the first of five near-identical "line-*" product pages (line-bun, line-encrusting, line-khari-standard, line-mini-khari, line-samosa share the same .line-hero / .line-flow-section / .machine-card / .line-nav structure). Treating this as the master set — later line-*.css files should only need NEW page-specific classes, not a repeat of this block. NOT converted: .line-cta-title/-sub and the .line-cta-btn-* buttons sit on .line-cta-section, background: var(--orange) (solid orange, unaffected by theme) — their white text stays correct/legible as-is. ================================================================ */ /* ===== SECTION BACKGROUNDS ===== */ html[data-theme="light"] .line-hero, html[data-theme="light"] .line-flow-section, html[data-theme="light"] .line-machines-section, html[data-theme="light"] .line-nav { background: #f7f5f2; } /* Eyebrows above .line-hero / .line-flow-section headings (shared across all 6 line-*.css detail pages) — never had a light-mode rule. */ html[data-theme="light"] .line-hero-eyebrow, html[data-theme="light"] .section-eyebrow { color: var(--orange) !important; } /* ===== DIVIDER LINES ===== */ html[data-theme="light"] .line-flow-section::before, html[data-theme="light"] .line-machines-section::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); } /* No longer gradient-clipped in light mode (see note near .bake-title) */ html[data-theme="light"] .line-hero-title { background: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; } /* ===== DECORATIVE (faint grid / giant page number / dividers) ===== */ html[data-theme="light"] .line-hero-grid { background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); } html[data-theme="light"] .line-num-bg { color: rgba(0, 0, 0, 0.05); } html[data-theme="light"] .line-meta-sep { background: rgba(0, 0, 0, 0.15); } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .flow-step-name, html[data-theme="light"] .machine-card-name, html[data-theme="light"] .line-nav-prev-name, html[data-theme="light"] .line-nav-next-name, html[data-theme="light"] .breadcrumb-current { color: #1a1a1a !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .line-meta-text, html[data-theme="light"] .machine-card-desc, html[data-theme="light"] .line-nav-back, html[data-theme="light"] .line-nav-prev-hint, html[data-theme="light"] .line-nav-next-hint, html[data-theme="light"] .breadcrumb a, html[data-theme="light"] .breadcrumb-sep { color: rgba(0, 0, 0, 0.55) !important; } /* Breadcrumb chip: own background/border + text (self-contained, not a plain text color — floats over varying page content) */ html[data-theme="light"] .breadcrumb { color: rgba(0, 0, 0, 0.55); background: rgba(255, 255, 255, 0.65); border-color: rgba(0, 0, 0, 0.1); } /* Prev/next nav arrows: no !important — .line-nav-prev:hover / .line-nav-next:hover turn these orange, and that hover selector's higher specificity (3 vs our 2) naturally wins without help */ html[data-theme="light"] .line-nav-prev-arrow, html[data-theme="light"] .line-nav-next-arrow { border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.55); } /* ================================================================ LINE-BUN / LINE-ENCRUSTING / LINE-KHARI-STANDARD / LINE-MINI-KHARI / LINE-SAMOSA OVERRIDES All five reuse the line-bread-rusk.css structure/classes verbatim — no new overrides needed there. line-encrusting.css alone adds a few new classes (info callout box, "view all" nav link). ================================================================ */ html[data-theme="light"] .line-info-box { color: rgba(0, 0, 0, 0.6) !important; } html[data-theme="light"] .line-info-box strong { color: #1a1a1a !important; } html[data-theme="light"] .line-nav-all { color: rgba(0, 0, 0, 0.55) !important; } /* ================================================================ MACHINE.CSS / MODEL-DETAIL.CSS / MTYPE.CSS OVERRIDES NOTE: .detail-img-panel (+ .has-3d) and .left-panel (with their .machine-img-wrap/.machine-img/.machine-img-glow/.left-cat/ .left-name/.left-count children) are deliberately EXCLUDED — these are product image / 3D-viewer showcase panels with dramatic, dark-tuned ambient glow + orbit-ring effects (drop-shadows and brightness filters calibrated against black). Same "stays dark" treatment as .cert-card / .lightbox. ================================================================ */ /* Eyebrows above the model-detail / mtype right-column header (plain page body background, not the dark image panel above) — never had a light-mode rule. */ html[data-theme="light"] .detail-eyebrow, html[data-theme="light"] .right-eyebrow { color: var(--orange) !important; } html[data-theme="light"] .detail-img-panel { border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); margin: 24px; } /* No longer gradient-clipped in light mode (see note near .bake-title) */ html[data-theme="light"] .page-stat span:first-child { background: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .card-count span, html[data-theme="light"] .breadcrumb-cur, html[data-theme="light"] .detail-model-name, html[data-theme="light"] .specs-table td:last-child, html[data-theme="light"] .enquire-box h3, html[data-theme="light"] .breadcrumb span, html[data-theme="light"] .right-title, html[data-theme="light"] .model-row, html[data-theme="light"] .model-name, html[data-theme="light"] .models-cta-text h4 { color: #1a1a1a !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .page-stat span:last-child, html[data-theme="light"] .page-footer-strip span, html[data-theme="light"] .card-count, html[data-theme="light"] .detail-machine-name, html[data-theme="light"] .detail-section-title, html[data-theme="light"] .detail-desc, html[data-theme="light"] .specs-table td:first-child, html[data-theme="light"] .enquire-box > p, html[data-theme="light"] .back-link, html[data-theme="light"] .right-sub, html[data-theme="light"] .models-label, html[data-theme="light"] .model-slug, html[data-theme="light"] .models-cta-text p { color: rgba(0, 0, 0, 0.55) !important; } /* ===== BORDERS ===== */ html[data-theme="light"] .page-footer-strip { border-top-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .detail-section-title, html[data-theme="light"] .models-label, html[data-theme="light"] .model-row { border-bottom-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .specs-table tr { border-bottom-color: rgba(0, 0, 0, 0.08); } /* ===== CARD-LIKE BACKGROUNDS (add-ons) ===== */ html[data-theme="light"] .enquire-box, html[data-theme="light"] .models-cta { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } /* ===== DECORATIVE / DIVIDERS ===== */ html[data-theme="light"] .card-divider { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent); } html[data-theme="light"] .specs-table tr:hover { background: rgba(0, 0, 0, 0.03); } html[data-theme="light"] .filter-bar-floating { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.1); } /* Decorative row index number — no !important: .model-row:hover .model-num turns orange (b=3) and naturally outranks our b=2 rule */ html[data-theme="light"] .model-num { color: rgba(0, 0, 0, 0.25); } /* Custom cursor dot: white-on-hover would vanish against the light bg */ html[data-theme="light"] .cursor.hovering { background: #1a1a1a; } html[data-theme="light"] .model-tag { color: rgba(0, 0, 0, 0.5); } html[data-theme="light"] .model-row:hover .model-tag { color: rgba(0, 0, 0, 0.75); } html[data-theme="light"] .iot-card-title, html[data-theme="light"] .iot-card-desc { color: rgba(0, 0, 0, 0.6) !important; } /* ===== ACCENT-VARIANT RESTORATIONS (pre-existing gaps surfaced here) ===== */ /* .filter-btn.active (machine.css) — the base .filter-btn pill/tag override (from the very first pass, no !important) ties in specificity with .active and our html[]-prefix wins the tiebreak, silently replacing the orange active state. Restoring it. */ html[data-theme="light"] .filter-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; } /* .detail-tag.orange (model-detail.css) — same tiebreak issue against the base .detail-tag pill/tag override. Restoring it. */ html[data-theme="light"] .detail-tag.orange { background: rgba(224, 90, 30, 0.07); border-color: rgba(224, 90, 30, 0.4); color: var(--orange); } /* .form-field:focus-within label (contact.css AND model-detail.css) — both files' .form-field label was added to a blanket !important muted-text rule, which permanently suppressed this orange focus-highlight color. General fix, applies to both files. */ html[data-theme="light"] .form-field:focus-within label { color: var(--orange) !important; } /* ================================================================ PACKAGE-STYLE.CSS OVERRIDES ================================================================ */ /* ===== SECTION BACKGROUNDS ===== */ html[data-theme="light"] .pkg-hero, html[data-theme="light"] .packages-hero, html[data-theme="light"] .packages-section { background: #f7f5f2; } /* Eyebrows above .pkg-hero / .packages-hero headings — never had a light-mode rule. */ html[data-theme="light"] .pkg-eyebrow, html[data-theme="light"] .packages-eyebrow { color: var(--orange) !important; } /* ===== DIVIDER LINES / DECORATIVE ===== */ html[data-theme="light"] .pkg-hero-divider, html[data-theme="light"] .packages-hero-divider { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent); } html[data-theme="light"] .pkg-section-title::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.15), transparent); } html[data-theme="light"] .pkg-hero-meta .dot { background: rgba(0, 0, 0, 0.25); } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .pkg-hero h1, html[data-theme="light"] .packages-hero h1, html[data-theme="light"] .pkg-machine-name, html[data-theme="light"] .pkg-capacity-row span:first-child, html[data-theme="light"] .pkg-info-value, html[data-theme="light"] .pkg-manpower-value, html[data-theme="light"] .packages-hero-stat .num, html[data-theme="light"] .pkg-card-name, html[data-theme="light"] .pkg-card-capacity { color: #1a1a1a !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .pkg-hero-meta, html[data-theme="light"] .pkg-section-title, html[data-theme="light"] .pkg-desc, html[data-theme="light"] .pkg-machines-header span, html[data-theme="light"] .pkg-machine-note, html[data-theme="light"] .pkg-capacity-header span, html[data-theme="light"] .pkg-capacity-row span, html[data-theme="light"] .pkg-capacity-note, html[data-theme="light"] .pkg-info-label, html[data-theme="light"] .pkg-info-value span, html[data-theme="light"] .pkg-info-sub, html[data-theme="light"] .pkg-manpower-label, html[data-theme="light"] .pkg-note, html[data-theme="light"] .pkg-cta-secondary, html[data-theme="light"] .packages-hero-sub, html[data-theme="light"] .packages-hero-stat .lbl, html[data-theme="light"] .pkg-card-desc, html[data-theme="light"] .pkg-card-capacity span { color: rgba(0, 0, 0, 0.55) !important; } /* ===== BORDERS ===== */ html[data-theme="light"] .pkg-machines, html[data-theme="light"] .pkg-capacity, html[data-theme="light"] .pkg-machine-row, html[data-theme="light"] .pkg-capacity-row, html[data-theme="light"] .pkg-cta-row, html[data-theme="light"] .packages-hero-stats, html[data-theme="light"] .pkg-card-footer, html[data-theme="light"] .pkg-cta-secondary { border-color: rgba(0, 0, 0, 0.1); } /* ===== TABLE HEADER / ROW HOVER ===== */ html[data-theme="light"] .pkg-machines-header, html[data-theme="light"] .pkg-capacity-header { background: rgba(0, 0, 0, 0.03); border-bottom-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .pkg-machine-row:hover, html[data-theme="light"] .pkg-capacity-row:hover { background: rgba(0, 0, 0, 0.03); } html[data-theme="light"] .pkg-capacity-note { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } /* "← All Packages" floating chip button (was a white-tinted overlay for a dark hero — now a dark-tinted overlay for the light hero) */ html[data-theme="light"] .pkg-hero-meta a[href*="packages"] { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.15); color: #1a1a1a; } html[data-theme="light"] .pkg-hero-meta a[href*="packages"]:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.25); } /* ================================================================ PRIVACY.CSS OVERRIDES ================================================================ */ /* ===== SECTION BACKGROUND ===== */ html[data-theme="light"] .pp-hero { background: #f7f5f2; } /* Eyebrow above .pp-hero heading — never had a light-mode rule. */ html[data-theme="light"] .pp-eyebrow { color: #e05a1e !important; } /* ===== DIVIDER / DECORATIVE ===== */ html[data-theme="light"] .pp-hero-line, html[data-theme="light"] .pp-divider { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent); } html[data-theme="light"] .pp-meta-dot { background: rgba(0, 0, 0, 0.25); } /* No longer gradient-clipped in light mode (see note near .bake-title) */ html[data-theme="light"] .pp-hero h1 { background: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .pp-section h2, html[data-theme="light"] .pp-section h3, html[data-theme="light"] .pp-contact-value { color: #1a1a1a !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .pp-meta, html[data-theme="light"] .pp-toc-label, html[data-theme="light"] .pp-toc ul li a, html[data-theme="light"] .pp-cookie-type, html[data-theme="light"] .pp-cookie-desc, html[data-theme="light"] .pp-note, html[data-theme="light"] .pp-contact-label { color: rgba(0, 0, 0, 0.55) !important; } /* ===== BORDERS ===== */ html[data-theme="light"] .pp-content, html[data-theme="light"] .pp-cookie-row { border-color: rgba(0, 0, 0, 0.1); } /* ===== CARD-LIKE BACKGROUNDS (add-ons) ===== */ html[data-theme="light"] .pp-note, html[data-theme="light"] .pp-contact-card { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); } /* TOC "active" link — no !important: restoring the orange active state that the base .pp-toc ul li a override above would otherwise win via a same-specificity tiebreak (our html[]-prefix adds one more type selector than the plain descendant chain gave .active). */ html[data-theme="light"] .pp-toc ul li a.active { color: #e05a1e; background: rgba(224, 90, 30, 0.06); border-left-color: #e05a1e; } /* ================================================================ PRODUCTION-LINES.CSS OVERRIDES NOTE: .pl-overview, .pl-overview::before, .pl-table (+ th/td/name/ badge/link) and .pl-lines-count were already covered from the very first pass (before this session). Only NEW selectors below. ================================================================ */ /* ===== SECTION BACKGROUNDS ===== */ html[data-theme="light"] .pl-hero, html[data-theme="light"] .pl-lines { background: #f7f5f2; } /* Eyebrows above .pl-hero / .pl-lines / .pl-overview headings (the last also duplicated verbatim in style.css for a homepage embed — one rule covers both) — never had a light-mode rule. */ html[data-theme="light"] .pl-hero-eyebrow, html[data-theme="light"] .pl-lines-eyebrow, html[data-theme="light"] .pl-overview-eyebrow { color: var(--orange) !important; } html[data-theme="light"] .pl-lines::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); } /* Decorative faint grid overlay */ html[data-theme="light"] .pl-hero-grid { background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); } html[data-theme="light"] .pl-scroll-line { background: linear-gradient(90deg, transparent, #1a1a1a); } /* No longer gradient-clipped in light mode (see note near .bake-title) */ html[data-theme="light"] .pl-hero-title { background: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .pl-stat-num, html[data-theme="light"] .pl-card-name { color: #1a1a1a !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .pl-hero-sub, html[data-theme="light"] .pl-stat-label, html[data-theme="light"] .pl-control-badge-label, html[data-theme="light"] .pl-control-item, html[data-theme="light"] .pl-card-desc, html[data-theme="light"] .pl-card-flow span { color: rgba(0, 0, 0, 0.55) !important; } /* ===== BORDERS ===== */ html[data-theme="light"] .pl-hero-stats, html[data-theme="light"] .pl-card-cta { border-color: rgba(0, 0, 0, 0.1); } /* ===== CARD-LIKE BACKGROUND (add-on) ===== */ html[data-theme="light"] .pl-control-badge { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } /* ================================================================ TERMS.CSS OVERRIDES ================================================================ */ /* ===== SECTION BACKGROUNDS ===== */ html[data-theme="light"] .terms-hero, html[data-theme="light"] .toc-section, html[data-theme="light"] .terms-body-section { background: #f7f5f2; } /* Eyebrow above .terms-hero heading — never had a light-mode rule. */ html[data-theme="light"] .terms-hero-eyebrow span { color: var(--orange) !important; } html[data-theme="light"] .toc-section::before, html[data-theme="light"] .terms-body-section::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); } /* No longer gradient-clipped in light mode (see note near .bake-title) */ html[data-theme="light"] .terms-hero-title .line-inner { background: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .terms-clause-title, html[data-theme="light"] .terms-notice strong { color: #1a1a1a !important; } html[data-theme="light"] .terms-clause-body strong { color: rgba(0, 0, 0, 0.75) !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .terms-hero-eyebrow-date, html[data-theme="light"] .terms-hero-desc, html[data-theme="light"] .toc-label span, html[data-theme="light"] .terms-sidebar-title, html[data-theme="light"] .terms-sidebar-link, html[data-theme="light"] .terms-clause-body, html[data-theme="light"] .terms-notice, html[data-theme="light"] .terms-contact-item, html[data-theme="light"] .terms-contact-item a { color: rgba(0, 0, 0, 0.55) !important; } /* ===== BORDERS ===== */ html[data-theme="light"] .terms-clause { border-bottom-color: rgba(0, 0, 0, 0.1); } /* ===== PILL (new, not in the original base group) ===== */ html[data-theme="light"] .toc-pill { background: #f0eeeb; border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.6); } /* Decorative sidebar-link dot — .active variant (background:orange, b=3) naturally outranks this plain b=2 base rule, no restoration needed */ html[data-theme="light"] .terms-sidebar-link-dot { background: rgba(0, 0, 0, 0.2); } /* .active sidebar link — no !important: restoring the orange state our blanket muted-text rule above would otherwise clobber */ html[data-theme="light"] .terms-sidebar-link.active { color: var(--orange); background: rgba(224, 90, 30, 0.06); border-color: rgba(224, 90, 30, 0.2); } /* ===== CARD-LIKE BACKGROUND (add-on) ===== */ html[data-theme="light"] .terms-contact-item { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } /* ================================================================ TESTMONIALS.CSS OVERRIDES NOTE: .t-card, .r-card, .rating-callout, .export-panel are already covered by the base CARD-LIKE group. .rating-callout's original orange tint (vs. the group's neutral white) is lost to the same tiebreak as .timeline-card.major/.international — a minor cosmetic loss, not fixed here (see audit notes). .t-cta / .t-cta-title / .t-cta-sub / .t-cta-btn-* deliberately NOT converted — they sit on .t-cta's solid orange background (var(--orange), unaffected by theme), same as .line-cta-section. ================================================================ */ /* ===== SECTION BACKGROUNDS ===== */ html[data-theme="light"] .t-hero, html[data-theme="light"] .t-stats, html[data-theme="light"] .client-strip, html[data-theme="light"] .video-section, html[data-theme="light"] .slider-section, html[data-theme="light"] .service-section, html[data-theme="light"] .clients-section { background: #f7f5f2; } /* Eyebrow above .t-hero heading — never had a light-mode rule. */ html[data-theme="light"] .t-eyebrow { color: var(--orange) !important; } html[data-theme="light"] .section::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); } html[data-theme="light"] .t-divider { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent); } /* Marquee edge-fade masks must match the new section background */ html[data-theme="light"] .client-strip::before { background: linear-gradient(90deg, #f7f5f2, transparent); } html[data-theme="light"] .client-strip::after { background: linear-gradient(-90deg, #f7f5f2, transparent); } /* No longer gradient-clipped in light mode (see note near .bake-title) */ html[data-theme="light"] .t-hero-title { background: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; } /* ===== HEADINGS / PRIMARY TEXT ===== */ html[data-theme="light"] .t-stat-num, html[data-theme="light"] .video-client, html[data-theme="light"] .t-card-name, html[data-theme="light"] .rating-callout-title, html[data-theme="light"] .r-name, html[data-theme="light"] .export-panel-title, html[data-theme="light"] .export-list li span { color: #1a1a1a !important; } /* ===== SECONDARY / MUTED TEXT ===== */ html[data-theme="light"] .t-hero-sub, html[data-theme="light"] .t-stat-label, html[data-theme="light"] .client-name, html[data-theme="light"] .section-sub, html[data-theme="light"] .video-loc, html[data-theme="light"] .t-card-quote, html[data-theme="light"] .t-card-loc, html[data-theme="light"] .rating-unit, html[data-theme="light"] .rating-callout-sub, html[data-theme="light"] .r-quote, html[data-theme="light"] .r-loc, html[data-theme="light"] .clients-text p, html[data-theme="light"] .export-panel-sub, html[data-theme="light"] .export-list li, html[data-theme="light"] .logos-label, html[data-theme="light"] .logo-cell .logo-name { color: rgba(0, 0, 0, 0.55) !important; } /* ===== BORDERS ===== */ html[data-theme="light"] .t-stats, html[data-theme="light"] .t-stat, html[data-theme="light"] .client-strip, html[data-theme="light"] .video-info, html[data-theme="light"] .t-card-footer, html[data-theme="light"] .r-footer { border-color: rgba(0, 0, 0, 0.1); } /* ===== MEDIA / CARD BACKGROUNDS (add-ons) ===== */ html[data-theme="light"] .video-featured, html[data-theme="light"] .video-thumb { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .video-card, html[data-theme="light"] .logo-cell { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } /* Decorative dividers/dots */ html[data-theme="light"] .rating-sep { background: rgba(0, 0, 0, 0.15); } html[data-theme="light"] .r-avatar { background: #f0eeeb; border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); } /* Slider prev/next buttons — no !important; .active/:hover restored explicitly below since a direct :hover (b=2) ties with our base override (b=2) and our html[]-prefix would otherwise win the tie */ html[data-theme="light"] .slider-btn { border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.55); } html[data-theme="light"] .slider-btn:hover { border-color: var(--orange); color: var(--orange); } html[data-theme="light"] .s-dot { background: rgba(0, 0, 0, 0.2); } html[data-theme="light"] .s-dot.active { background: var(--orange); } /* ================================================================ CARD / ACCENT HOVER-BORDER RESTORATIONS The base CARD-LIKE BACKGROUNDS group (and the matching card-like "add-on" groups added per file throughout this pass) set a plain border-color/background with no !important. Because every rule in this file carries an extra html[data-theme] type-selector, it wins any same-specificity tie against a plain `.card:hover { border-color: orange }` rule from the source file — silently swallowing the hover highlight sitewide. Restoring each one below with its ORIGINAL hover value, verified against source. NOT restored (verified: no :hover rule exists in any source file): .ind-card, .post-sidebar-box, .export-panel, .rating-callout, .contact-form-wrap, .contact-success, .history-meta-pill. .tl-img-frame and .pl-card-machine-tag were flagged in the earlier audit but are actually safe — their accent state is a 3-selector rule ([data-state="active"] / :hover descendant) that already outranks our 2-selector base rule without help. .machine-card is a special case: three source files define three different hover values (bake-product.css: 0.45 border / .045 bg, machine.css: 0.5 border / .048 bg, the six line-*.css pages: 0.25 border / .03 bg). One global stylesheet can't restore a page-correct value for all three, so the line-*.css value is used here since 6 of the 8 source files share it — bake-product.css and machine.css will show a slightly less/more intense orange hover than their original design, but the hover highlight itself is restored on all of them. ================================================================ */ html[data-theme="light"] .why-card:hover, html[data-theme="light"] .explore-card:hover, html[data-theme="light"] .blog-card:hover, html[data-theme="light"] .featured-card:hover { border-color: rgba(224, 90, 30, 0.4); } html[data-theme="light"] .infra-floor:hover, html[data-theme="light"] .story-img-cell:hover, html[data-theme="light"] .t-card:hover, html[data-theme="light"] .contact-info-card:hover, html[data-theme="light"] .models-cta:hover, html[data-theme="light"] .pp-ticket:hover { border-color: rgba(224, 90, 30, 0.3); } html[data-theme="light"] .quality-pillar:hover, html[data-theme="light"] .timeline-card:hover, html[data-theme="light"] .machine-card:hover, html[data-theme="light"] .pp-cookie-row:hover { border-color: rgba(224, 90, 30, 0.25); } html[data-theme="light"] .pl-card:hover, html[data-theme="light"] .pp-card:hover, html[data-theme="light"] .video-card:hover { border-color: rgba(224, 90, 30, 0.35); } html[data-theme="light"] .pkg-card:hover { border-color: rgba(224, 90, 30, 0.45); } html[data-theme="light"] .r-card:hover { border-color: rgba(224, 90, 30, 0.28); } html[data-theme="light"] .infra-img-main:hover { border-color: rgba(224, 90, 30, 0.2); } html[data-theme="light"] .enquire-box:focus-within { border-color: rgba(224, 90, 30, 0.3); } /* Hover states with BOTH border-color and background restored */ html[data-theme="light"] .infra-stat-box:hover, html[data-theme="light"] .stat-block:hover, html[data-theme="light"] .pkg-manpower-card:hover, html[data-theme="light"] .logo-cell:hover, html[data-theme="light"] .terms-contact-item:hover { border-color: rgba(224, 90, 30, 0.3); background: rgba(224, 90, 30, 0.04); } html[data-theme="light"] .pkg-info-card:hover { border-color: rgba(224, 90, 30, 0.4); background: rgba(224, 90, 30, 0.04); } html[data-theme="light"] .iot-card:hover { border-color: rgba(224, 90, 30, 0.4); background: rgba(224, 90, 30, 0.05); } html[data-theme="light"] .flow-step-box:hover { border-color: rgba(224, 90, 30, 0.4); background: rgba(224, 90, 30, 0.06); } html[data-theme="light"] .pp-contact-card:hover { border-color: rgba(224, 90, 30, 0.45); background: rgba(224, 90, 30, 0.06); } /* Background-only hover accents (no border-color change in source) */ html[data-theme="light"] .about-stat:hover, html[data-theme="light"] .about-hero-stat:hover { background: rgba(224, 90, 30, 0.06); } /* Fix: bake-view-all-btn text invisible in light theme (was white-on-white) */ html[data-theme="light"] .bake-view-all-btn { color: rgba(0, 0, 0, 0.65); background: rgba(0, 0, 0, 0.03); } html[data-theme="light"] .bake-view-all-btn:hover { color: #000; }