/* ============================================================================ Loop Light — v163 Sujesh, 28 Sep: "keep the current UI as dark mode and create a light mode also". Dark (loop-holo.css) stays the default. This file is loaded after it on every customer and provider page, and only acts when — set by the early script in each page's from localStorage "loop-theme", and by the Light / Dark switch in the app header and the More list. The same holographic spectrum and the same layout, on a near-white ground: · paper #F7F7F4, cards white with the spectrum on their edge · ink near-black, machine yellow for prices and the brand · the headers and the brand bar stay dark — Loop's black-and-yellow signature Every rule is scoped to html[data-theme="light"], so it always outranks the dark rule it replaces and does nothing at all in dark mode. ========================================================================== */ html[data-theme="light"]:root{ --holo-soft:linear-gradient(115deg,rgba(34,190,220,.55),rgba(139,106,246,.5),rgba(226,120,236,.45),rgba(236,190,60,.5)); --panel:#FFFFFF; --glass:rgba(255,255,255,.8); --glow:0 0 0 1px rgba(20,20,40,.05), 0 6px 20px rgba(30,30,60,.08), 0 0 22px rgba(140,110,246,.08); --paper:#F7F7F4; --raised:#FFFFFF; --sunk:rgba(10,10,30,.045); --sunk-2:rgba(10,10,30,.08); --ink:#0B0B0C; --ink-2:#26262B; --muted:#5A5A63; --faint:#86868F; --rule:rgba(10,10,30,.10); --rule-2:rgba(10,10,30,.20); --ochre:#8A5A00; --ochre-br:#F2A90A; --ochre-l:#FFC63F; --ochre-wash:#FFF3D6; --good:#16794A; --good-wash:#E3F4EA; --alert:#B3361A; --alert-wash:#FCE9E3; --e1:0 1px 2px rgba(20,20,40,.06); --e2:0 4px 12px rgba(20,20,40,.08); --e3:0 14px 34px rgba(20,20,40,.14); --ink-bg:#111114; --on-ink:#FFFFFF; --bg:#F7F7F4; --surface:#FFFFFF; --sheet:#FFFFFF; --line:rgba(10,10,30,.10); --mut:#5A5A63; --soft:#F0F0EB; --teal:#111114; --black:#111114; --black-2:#1D1D22; --black-ink:#FFFFFF; --amber:#F2A90A; --ochre-d:#8A5A00; color-scheme:light; } /* the ground */ html[data-theme="light"]{background:#F7F7F4} html[data-theme="light"] body{ background: linear-gradient(rgba(10,10,30,.035) 1px, transparent 1px) 0 0/34px 34px, linear-gradient(90deg, rgba(10,10,30,.035) 1px, transparent 1px) 0 0/34px 34px, #F7F7F4 !important; color:var(--ink-2); } html[data-theme="light"] ::selection{background:rgba(139,106,246,.28);color:#0B0B0C} /* type */ html[data-theme="light"] .u-display, html[data-theme="light"] .u-display .l-en, html[data-theme="light"] .u-display .l-ml, html[data-theme="light"] .lede h1, html[data-theme="light"] #gate h2, html[data-theme="light"] .hero h2{color:#0B0B0C !important;text-shadow:none} html[data-theme="light"] .u-eyebrow{color:#5B4BD0 !important} html[data-theme="light"] a{color:#1B5FA8} html[data-theme="light"] .u-hint, html[data-theme="light"] .hint, html[data-theme="light"] small{color:var(--muted)} html[data-theme="light"] body[data-holo=old] h2, html[data-theme="light"] .done h2, html[data-theme="light"] #done h2, html[data-theme="light"] .back, html[data-theme="light"] .code, html[data-theme="light"] .chk, html[data-theme="light"] .addph{color:#4A3BB8 !important} /* buttons: the spectrum button is the same; ghosts turn white */ html[data-theme="light"] .u-cta, html[data-theme="light"] .cta{box-shadow:0 0 0 1px rgba(255,255,255,.6) inset, 0 8px 22px rgba(120,90,230,.25) !important} html[data-theme="light"] .u-cta:disabled, html[data-theme="light"] .u-cta[disabled], html[data-theme="light"] .cta:disabled{ background:#ECECE8 !important;color:#9A9AA2 !important;box-shadow:0 0 0 1px var(--rule) inset !important} html[data-theme="light"] .u-cta:disabled *, html[data-theme="light"] .u-cta[disabled] *{color:#9A9AA2 !important} html[data-theme="light"] .u-ghost, html[data-theme="light"] button.ghost, html[data-theme="light"] .ghost{ background:#FFFFFF !important;color:var(--ink) !important;border:1px solid var(--rule-2) !important} html[data-theme="light"] .u-ghost:active, html[data-theme="light"] .ghost:active{background:#F1EEFF !important} /* choices */ html[data-theme="light"] .u-opt:active{background:rgba(139,106,246,.07) !important} html[data-theme="light"] .u-opt.on{background:linear-gradient(90deg,rgba(139,106,246,.10),rgba(34,190,220,.04) 70%,transparent) !important} html[data-theme="light"] .u-opt.on::after{background-color:#7C5CF0 !important;box-shadow:0 0 10px rgba(124,92,240,.45)} html[data-theme="light"] .u-opt .ic{background:#F2F2EE !important;color:#4B4B55 !important;box-shadow:0 0 0 1px var(--rule) inset} html[data-theme="light"] .u-opt.on .ic{background:#EEE9FF !important;color:#4A3BB8 !important;box-shadow:0 0 0 1px rgba(124,92,240,.45) inset} html[data-theme="light"] .u-opt .ic.art, html[data-theme="light"] .ic.art{box-shadow:0 0 0 1px rgba(10,10,30,.12), 0 4px 12px rgba(20,20,40,.12)} html[data-theme="light"] .u-opt.on .u-tick{background:#7C5CF0 !important;border-color:#7C5CF0 !important} /* cards */ html[data-theme="light"] .u-card.is-wash{background:linear-gradient(#F4F1FF,#F4F1FF) padding-box, var(--holo-soft) border-box !important} html[data-theme="light"] .talk{background:linear-gradient(#FFFFFF,#FBFAFF) padding-box, var(--holo) border-box !important; box-shadow:0 0 22px rgba(139,106,246,.18), 0 6px 20px rgba(20,20,40,.08) !important} html[data-theme="light"] .talk, html[data-theme="light"] .talk b, html[data-theme="light"] .talk .ttl{color:#0B0B0C !important} html[data-theme="light"] .talk .ttl svg{color:#8A5A00 !important} html[data-theme="light"] .tile .art{background:#EDEDE8 !important} html[data-theme="light"] body.mapon .sheet{background:rgba(255,255,255,.94) !important} html[data-theme="light"] .note{background:#F4F1FF !important} html[data-theme="light"] .tabs button{background:#FFFFFF !important} html[data-theme="light"] .chk, html[data-theme="light"] .addph, html[data-theme="light"] .st button{background:#FFFFFF !important;border-color:rgba(124,92,240,.45) !important} html[data-theme="light"] .st button.on-av, html[data-theme="light"] .st button.on-bz, html[data-theme="light"] .st button.on-off{color:#FFFFFF !important} html[data-theme="light"] .code{background:#F1EEFF !important} html[data-theme="light"] body[data-holo=field] button.ghost, html[data-theme="light"] body[data-holo=field] .ghost2{background:#FFFFFF !important} html[data-theme="light"] .hero::after{background:radial-gradient(circle, rgba(139,106,246,.16), transparent 70%) !important} html[data-theme="light"] .hero{color:var(--ink-2) !important} html[data-theme="light"] .hero .kick{color:#8A5A00 !important} /* the shell's My job list */ html[data-theme="light"] .jobrow .st{background:#EEE9FF;color:#3F31A6;box-shadow:0 0 0 1px rgba(124,92,240,.35) inset} html[data-theme="light"] .jobrow .st.live{background:#E3F4EA;color:#12603B;box-shadow:0 0 0 1px rgba(22,121,74,.35) inset} html[data-theme="light"] .jobrow .st.done{background:#F0F0EC;color:#5A5A63} html[data-theme="light"] .jobrow .st.act{background:#FFF3D6;color:#7A4E00;box-shadow:0 0 0 1px rgba(242,169,10,.5) inset} /* fields */ html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea{ background:#FFFFFF !important;color:#0B0B0C !important;border:1px solid var(--rule-2) !important} html[data-theme="light"] .tfield input{border:0 !important;background:transparent !important} html[data-theme="light"] select option{background:#FFFFFF;color:#0B0B0C} html[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator{filter:none} html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus{ border-color:#7C5CF0 !important;box-shadow:0 0 0 3px rgba(124,92,240,.18) !important} /* small parts */ html[data-theme="light"] .mprice{color:#7A4E00 !important} html[data-theme="light"] .warnbox{background:#FCE9E3 !important;border-color:rgba(179,54,26,.45) !important;color:#7A2410} html[data-theme="light"] img[src*="logo"]{filter:none} html[data-theme="light"] header img[src*="logo"]{filter:drop-shadow(0 0 8px rgba(255,194,58,.3))} /* the app's frame — header and bottom bar — stays dark in both modes: Loop's black and yellow */ html[data-theme="light"] .pnav{background:transparent !important} html[data-theme="light"] .pnav button{background:#FFFFFF} html[data-theme="light"] *{scrollbar-color:rgba(124,92,240,.4) transparent} /* profile */ html[data-theme="light"] .todo{background:linear-gradient(#FFF8E6,#FFF8E6) padding-box, linear-gradient(115deg,#F2A90A,#E278EC 60%,#22BEDC) border-box !important; color:#0B0B0C !important;box-shadow:0 4px 16px rgba(242,169,10,.12) !important} html[data-theme="light"] .todo .tt{color:#0B0B0C} html[data-theme="light"] .todo li{border-top-color:rgba(10,10,30,.08)} html[data-theme="light"] .todo li a{color:#6E4600 !important} html[data-theme="light"] .todo li a i{color:#B37800} html[data-theme="light"] .todo.ok{background:#E3F4EA !important;border:1px solid rgba(22,121,74,.4) !important;color:#12603B !important} html[data-theme="light"] .agree, html[data-theme="light"] .fform, html[data-theme="light"] .ofr{background:#FFFBF0 !important} html[data-theme="light"] .ofr .clk{background:#E3F4EA !important;color:#12603B !important} html[data-theme="light"] .ofr .row button.red{background:#FCE9E3 !important;color:#8E2A12 !important} html[data-theme="light"] .urg.URGENT{background:#FFF3D6 !important;color:#7A4E00 !important} html[data-theme="light"] .urg.EMERGENCY{background:#FCE9E3 !important;color:#8E2A12 !important} html[data-theme="light"] .av, html[data-theme="light"] .iart, html[data-theme="light"] .sart, html[data-theme="light"] .fform .iart, html[data-theme="light"] .item .iart{background:#EDEDE8 !important} html[data-theme="light"] .item.inv .reg, html[data-theme="light"] .rrow .reg{box-shadow:none;border-color:#6E6E66 !important} html[data-theme="light"] .item.inv .st.new{background:#FFF3D6 !important;color:#7A4E00 !important} html[data-theme="light"] .item.inv .st.ok{background:#E3F4EA !important;color:#12603B !important;box-shadow:0 0 0 1px rgba(22,121,74,.3) inset} html[data-theme="light"] .item.inv .st.bad{background:#FCE9E3 !important;color:#8E2A12 !important} html[data-theme="light"] .item.inv .ph button{background:#FFFFFF !important} html[data-theme="light"] .item.inv .ph button.warn{color:#7A4E00 !important} html[data-theme="light"] .item.inv .ph .need{color:#B3361A !important} html[data-theme="light"] .availst.on{background:#E3F4EA;color:#12603B} html[data-theme="light"] .availst.off{background:#F0F0EC;color:#5A5A63} html[data-theme="light"] .item.inv .ph .avail.busy{background:linear-gradient(115deg,#D8F6FC,#EEE9FF) !important;color:#26206B !important} html[data-theme="light"] .rwarn{background:#FFF3D6;color:#6E4600;box-shadow:0 0 0 1px rgba(242,169,10,.55) inset} /* ------------------------------------------------------------ the switch ---- */ /* the header button in the app shell and the row in More (index.html) */ .themebtn{display:inline-flex;align-items:center;justify-content:center} .themebtn svg{width:19px;height:19px} /* v163 — a dark button that happens to be a link keeps its light words */ html[data-theme="light"] a.add{color:#FBFAF6 !important} /* small grey notes under a heading */ html[data-theme="light"] .sub{color:#5A5A63} /* the profile card at the top of Profile is content, not the app frame: a white card in light mode */ html[data-theme="light"] header.phead{background:#FFFFFF !important;box-shadow:0 6px 22px rgba(10,10,30,.08) !important;-webkit-backdrop-filter:none;backdrop-filter:none}