/* ============================================================ CILTS XXI — DAY THEME (Mode clair / équipe de jour) Activated via . Night is default. Re-themes by flipping core tokens + a few hard-coded surfaces. ============================================================ */ html[data-theme="day"] { --ink: #e9ebef; --ink-2: #e1e4ea; --panel: #ffffff; --panel-2: #f3f5f8; --hair: rgba(14,18,24,.10); --hair-2: rgba(14,18,24,.18); --text: #14161b; --muted: #545c6b; --muted-2: #99a1ad; } html[data-theme="day"] body { background: #d7dce2; } html[data-theme="day"] ::selection { background: var(--red); color: #fff; } /* ---- warehouse backdrop: bright, airy daylight ---- */ html[data-theme="day"] .world__sky { background: radial-gradient(120% 80% at 50% 38%, #f3f5f9 0%, #dfe4ea 55%, #ccd3dc 100%); } html[data-theme="day"] .world { opacity: .5; } html[data-theme="day"] .world__scrim { background: linear-gradient(180deg, rgba(236,239,243,.5) 0%, rgba(236,239,243,.12) 24%, rgba(236,239,243,.12) 76%, rgba(220,225,232,.6) 100%), radial-gradient(75% 70% at 50% 46%, transparent 42%, rgba(200,208,218,.55) 100%); } html[data-theme="day"] .ops { opacity: .42; } html[data-theme="day"] .ops::after { background: linear-gradient(180deg, rgba(236,239,243,.42) 0%, rgba(236,239,243,.08) 30%, rgba(236,239,243,.08) 64%, rgba(220,225,232,.55) 100%); } /* ---- sections become light operation stations ---- */ html[data-theme="day"] .section--ink { background: rgba(237,239,243,.82); } html[data-theme="day"] .section--ink2 { background: rgba(229,233,238,.82); } html[data-theme="day"] .section--paper { background: rgba(233,236,241,.84); color: var(--text); } html[data-theme="day"] .flow { background: rgba(231,235,240,.82); } html[data-theme="day"] .stats { background: rgba(233,236,241,.88); } html[data-theme="day"] .safety { background: linear-gradient(120% 80% at 80% 0%, rgba(255,234,232,.84), rgba(233,236,241,.86) 55%); } html[data-theme="day"] .footer { background: rgba(224,229,235,.92); border-top-color: var(--hair); } html[data-theme="day"] .section::before { background: linear-gradient(90deg, transparent, rgba(227,36,27,.4) 18%, rgba(227,36,27,.4) 82%, transparent); } /* ---- nav / chrome ---- */ html[data-theme="day"] .nav.is-stuck { background: rgba(255,255,255,.7); border-bottom-color: var(--hair); } html[data-theme="day"] .nav__menu a { color: var(--muted); } html[data-theme="day"] .nav__menu a:hover, html[data-theme="day"] .nav__menu a.active { color: var(--text); } html[data-theme="day"] .lang { border-color: var(--hair-2); } html[data-theme="day"] .lang button { color: var(--muted); } html[data-theme="day"] .lang button.active { background: var(--red); color: #fff; } html[data-theme="day"] .burger { border-color: var(--hair-2); } html[data-theme="day"] .burger span { background: var(--text); } html[data-theme="day"] .mobile-menu { background: rgba(240,242,245,.97); } html[data-theme="day"] .mobile-menu a { color: var(--text); } /* ---- hero ---- */ html[data-theme="day"] .hero__sub { color: var(--text); } html[data-theme="day"] .hero__grid { background-image: linear-gradient(rgba(14,18,24,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,18,24,.05) 1px, transparent 1px); } html[data-theme="day"] .hero__glow { background: radial-gradient(circle, rgba(227,36,27,.16), transparent 62%); } /* ---- cards / surfaces hard-coded in world.css ---- */ html[data-theme="day"] .svc { background: rgba(255,255,255,.88); } html[data-theme="day"] .svc:hover { background: #fff; } html[data-theme="day"] .client { background: rgba(255,255,255,.74); } html[data-theme="day"] .client:hover { background: #fff; } html[data-theme="day"] .safe { background: rgba(255,255,255,.7); } html[data-theme="day"] .safe:hover { background: #fff; } html[data-theme="day"] .profile-card { background: #fff; box-shadow: 0 30px 60px -30px rgba(20,30,45,.25); } html[data-theme="day"] .profile-card__head { background: var(--ink-2); color: var(--text); } html[data-theme="day"] .profile-card__head .iso { background: var(--red); color: #fff; } html[data-theme="day"] .pillar { background: #fff; } html[data-theme="day"] .pillar__ic { background: rgba(227,36,27,.1); } /* ---- client mono tiles ---- */ html[data-theme="day"] .client__mono { background: linear-gradient(135deg, #f0f2f5, #e2e6ec); color: var(--text); border-color: var(--hair); } html[data-theme="day"] .client:hover .client__mono { color: var(--red); } /* ---- WMS dashboard + warehouse scene stay dark (device screens) ---- */ /* keep .dash and #whScene as-is: they read as monitors on a light floor */ /* ---- immersive layer (zone rail / gates / cursor) ---- */ html[data-theme="day"] .zonerail { background: rgba(255,255,255,.55); border-color: var(--hair); } html[data-theme="day"] .zonerail__dot { background: rgba(20,24,30,.25); } html[data-theme="day"] .zonerail__item:hover .zonerail__dot { background: rgba(20,24,30,.5); } html[data-theme="day"] .zonerail__lab { color: var(--muted); } html[data-theme="day"] .zonerail__item.active .zonerail__lab { color: var(--text); } html[data-theme="day"] .zonerail__num { color: rgba(20,24,30,.35); } html[data-theme="day"] .zone-gate { border-color: var(--hair); background: rgba(14,18,24,.03); } html[data-theme="day"] .zone-gate__t { color: var(--muted); } html[data-theme="day"] .livebg > * { color: #14161b; opacity: .04; } /* ---- form / inputs ---- */ html[data-theme="day"] .field input, html[data-theme="day"] .field select, html[data-theme="day"] .field textarea { background: #fff; color: var(--text); border-color: var(--hair-2); } html[data-theme="day"] .form { background: #fff; } html[data-theme="day"] .cinfo { background: #fff; } html[data-theme="day"] .wh-card { background: #fff; } html[data-theme="day"] .cert-main, html[data-theme="day"] .proj { background: #fff; } html[data-theme="day"] .cert-main::after { color: rgba(14,18,24,.04); } html[data-theme="day"] .infra-total { background: var(--ink-2); } html[data-theme="day"] .wms-feat { background: #fff; } html[data-theme="day"] .hw-chip { background: #fff; } html[data-theme="day"] .fleet { background: #fff; } /* ---- map iframe: lighten ---- */ html[data-theme="day"] #contact iframe { filter: none !important; } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ .theme-tg { width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0; border: 1px solid var(--hair-2); display: grid; place-items: center; color: var(--text); transition: border-color .25s, color .25s, background .25s; position: relative; } .theme-tg:hover { border-color: var(--red); color: var(--red); } .theme-tg svg { width: 19px; height: 19px; position: absolute; transition: opacity .3s, transform .4s var(--ease); } .theme-tg .ic-moon { opacity: 1; transform: rotate(0) scale(1); } .theme-tg .ic-sun { opacity: 0; transform: rotate(-90deg) scale(.6); } html[data-theme="day"] .theme-tg .ic-moon { opacity: 0; transform: rotate(90deg) scale(.6); } html[data-theme="day"] .theme-tg .ic-sun { opacity: 1; transform: rotate(0) scale(1); } /* smooth cross-theme transition */ .section, .nav, .footer, .svc, .client, .safe, .profile-card, .pillar, .form, .cinfo, .wh-card, .fleet, .world__sky, .world__scrim, .ops::after, .zonerail { transition: background-color .5s ease, color .5s ease, border-color .5s ease, opacity .5s ease; }