/* ========================================================================== LAVZEN โ€” Light theme (lavzen-theme-light.css) -------------------------------------------------------------------------- The theme is monochrome and token-driven, so light mode is mostly the same design with the greyscale ramp turned upside down: what was near-white text on a near-black field becomes near-black text on a near-white one. Loaded LAST, after lavzen-bg.css. Everything here is scoped to `:root[data-theme="light"]`, which is specificity (0,1,1) against the bare `:root` (0,1,0) the dark tokens use โ€” so the dark theme stays the file-level default and this layer only speaks when the attribute is present. Nothing in here is `!important`; each override earns its place on specificity alone. Three things need more than a token flip, and they are the three blocks at the bottom: 1. `.topbar` re-declares the tokens locally. That CSS lives in the database (Code Studio โ†’ Header), not on disk, so it cannot be edited alongside this file โ€” it has to be out-specified instead. 2. The background is painted by `html body::before` in lavzen-bg.css, a gradient stack of literal hex values with no token in sight. 3. The wordmark is an inline SVG with `fill` presentation attributes. CSS `fill` beats a presentation attribute, so it can be recoloured from here. ๐Ÿ”ด The dark theme remains the file default on purpose. If the attribute is ever missing โ€” JS disabled, markup changed, a cached page โ€” the site falls back to the design that every other stylesheet was written for, which is the one that cannot look broken. ========================================================================== */ :root[data-theme="light"] { /* Tells the UA to render form controls, scrollbars and the caret light. */ color-scheme: light; /* โ€” surfaces โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” The dark theme runs #0B0B0B โ†’ #1B1B1B. Light runs the mirror, but not to pure white: #FFF as a page field makes every glass panel above it invisible, so the canvas sits at #F2F2F3 and the panels rise to white. */ --bg:#F2F2F3; --bg-deep:#FFFFFF; --ink:#FFFFFF; --ink-deep:#FAFAFA; --menu-bg:#FFFFFF; /* โ€” text โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” Not pure black: #131315 against #F2F2F3 is ~15.8:1, comfortably past AAA, without the hard edge full black gives on a bright field. */ --text:#131315; --text-2:#2C2C31; --text-3:#4F4F57; --muted:#71717A; /* โ€” accents โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” Monochrome, so these simply invert: the near-white accent becomes the near-black one, and the CTA swaps ink with its own background. */ --accent:#131315; --accent-2:#3A3A41; --accent-3:#71717A; --gold:#131315; --cta:#131315; --cta-ink:#FFFFFF; --green:#3A3A41; --blue:#71717A; --pink:#71717A; --danger:#B3261E; --success:#1B6E3C; /* โ€” glass material โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” The dark theme builds glass out of white at low alpha. On a light field white-on-white is nothing at all, so the tint flips to black and the alphas drop: black reads far stronger against white than white does against black, so .06 there becomes .04 here, not .06. */ --glass-1:rgba(17,17,20,0.035); --glass-2:rgba(17,17,20,0.055); --glass-3:rgba(17,17,20,0.085); --stroke:rgba(17,17,20,0.14); --stroke-soft:rgba(17,17,20,0.08); --sheen:linear-gradient(180deg,rgba(255,255,255,0.85),rgba(255,255,255,0.25) 42%,rgba(255,255,255,0) 72%); --edge:inset 0 1px 0 rgba(255,255,255,0.9),inset 0 -1px 1px rgba(17,17,20,0.05); /* Shadows stay dark โ€” light does not cast a light shadow โ€” but a shadow that reads as depth on black reads as dirt on white, so every alpha is cut hard. */ --e1:0 1px 2px rgba(17,17,20,.06),0 2px 8px rgba(17,17,20,.05); --e2:0 6px 16px rgba(17,17,20,.07),0 12px 30px rgba(17,17,20,.06); --e3:0 18px 40px rgba(17,17,20,.09),0 40px 100px rgba(17,17,20,.08); --focus:0 0 0 3px rgba(19,19,21,.32); /* ===== Liquid-Glass token family ===== */ --lav-ink-0:#FFFFFF; --lav-ink-1:#F7F7F8; --lav-ink-3:#E4E4E7; --lav-ink-6:#A1A1AA; --lav-ink-8:#52525B; --lav-ink-9:#2C2C31; --lav-ink-white:#131315; --lav-text-primary:#131315; --lav-text-secondary:rgba(19,19,21,0.70); --lav-text-tertiary:rgba(19,19,21,0.56); --lav-line:rgba(17,17,20,0.11); --lav-line-strong:rgba(17,17,20,0.19); --lav-focus:#131315; --lav-cta:#131315; --lav-cta-press:#2C2C31; --lav-cta-ink:#FFFFFF; --lav-glass-tint-alpha:0.045; --lav-glass-tint-strong-alpha:0.075; --lav-glass-edge:rgba(17,17,20,0.14); --lav-glass-edge-bright:rgba(255,255,255,0.95); --lav-glass-highlight:rgba(255,255,255,0.95); --lav-glass-shade:rgba(17,17,20,0.07); --lav-glass-scrim:rgba(255,255,255,0.62); --lav-glass-text-plate:rgba(255,255,255,0.74); --lav-glass-refract-1:rgba(255,255,255,0.55); --lav-glass-saturate:118%; --lav-glass-brightness:1.0; --lav-glass-shadow:0 10px 30px -12px rgba(17,17,20,0.14),0 3px 10px -6px rgba(17,17,20,0.10); --lav-noise-opacity:0.028; } /* -------------------------------------------------------------------------- 1 ยท The canvas `html body::before` in lavzen-bg.css is (0,0,2); the same selector here wins on source order because this file is enqueued after it. Same four-stop gradient geometry as the dark field, so the light theme is recognisably the same room with the lights on rather than a different page. -------------------------------------------------------------------------- */ :root[data-theme="light"] { background: #FFFFFF; } :root[data-theme="light"] body::before { background: radial-gradient(120% 90% at 18% 6%, #FFFFFF 0%, rgba(255,255,255,0) 46%), radial-gradient(95% 80% at 88% 18%, #F7F7F8 0%, rgba(247,247,248,0) 50%), radial-gradient(140% 120% at 50% 120%, #E9E9EC 0%, rgba(233,233,236,0) 55%), linear-gradient(180deg, #FAFAFB 0%, #F4F4F6 60%, #EDEDF0 100%); } /* -------------------------------------------------------------------------- 2 ยท The topbar Its CSS lives in the database and opens by re-declaring the token set on `.topbar` with literal dark values, so a `:root` override never reaches it. `:root[data-theme="light"] .topbar` is (0,1,2) against that (0,1,0) and takes the same tokens back. -------------------------------------------------------------------------- */ :root[data-theme="light"] .topbar { --accent:#131315; --accent-2:#3A3A41; --accent-3:#71717A; --gold:#131315; --cta:#131315; --green:#3A3A41; --blue:#71717A; --pink:#71717A; --success:#1B6E3C; --danger:#B3261E; --text:#131315; --text-2:rgba(19,19,21,.74); --text-3:rgba(19,19,21,.58); --muted:rgba(19,19,21,.48); --bg-deep:#FFFFFF; --stroke:rgba(17,17,20,.14); --stroke-soft:rgba(17,17,20,.08); --glass-1:rgba(17,17,20,0.035); --glass-2:rgba(17,17,20,0.055); --glass-3:rgba(17,17,20,0.085); box-shadow:0 8px 28px rgba(17,17,20,.08); } /* The glass sub-layers the topbar stacks for refraction, tint and sheen. On a light field their white fills read as haze, so they are re-pointed at the light tokens rather than switched off โ€” the material stays, the value flips. */ :root[data-theme="light"] .topbar .lzx-tnt { background:var(--glass-1); } :root[data-theme="light"] .topbar .lzx-shn { background:var(--sheen); } /* -------------------------------------------------------------------------- 3 ยท The wordmark Inline SVG with `fill` presentation attributes. A CSS `fill` outranks a presentation attribute, so no markup change is needed for the colour โ€” only the gradient stops have to be reached through their own elements. -------------------------------------------------------------------------- */ :root[data-theme="light"] .logo-type tspan:first-child { fill:#131315; } :root[data-theme="light"] .logo-type tspan + tspan { fill:#71717A; } :root[data-theme="light"] .logo-type circle { stroke:#FFFFFF; } :root[data-theme="light"] .logo-type #lg stop:first-child { stop-color:#2C2C31; } :root[data-theme="light"] .logo-type #lg stop + stop { stop-color:#71717A; } /* -------------------------------------------------------------------------- 4 ยท The mode switch itself Built out of the same `.icon-btn` the notification bell uses, so it inherits the topbar's glass, focus ring and 44px tap target without new material. Both icons live in the button and the inactive one is hidden โ€” swapping `display` rather than re-rendering keeps the press instant and the width from jumping. -------------------------------------------------------------------------- */ .theme-toggle { position:relative; } .theme-toggle svg { width:20px; height:20px; display:block; } .theme-toggle .ic-sun { display:none; } .theme-toggle .ic-moon { display:block; } :root[data-theme="light"] .theme-toggle .ic-sun { display:block; } :root[data-theme="light"] .theme-toggle .ic-moon { display:none; } /* The icon rotates a few degrees on press. Purely tactile โ€” it tells you the button did something in the frame before the repaint lands. */ .theme-toggle svg { transition:transform var(--lav-dur-fast,150ms) var(--ease,ease); } .theme-toggle:active svg { transform:rotate(-25deg) scale(.92); } @media (prefers-reduced-motion:reduce) { .theme-toggle svg { transition:none; } .theme-toggle:active svg { transform:none; } } /* -------------------------------------------------------------------------- 5 ยท The swap itself Set for one frame by the toggle script, on , while the attribute changes. Every transition and animation in the document is cut for that frame, so the two themes replace each other in a single repaint instead of a few hundred elements each easing at their own rate โ€” which does not look like a crossfade, it looks like a page falling apart and reassembling. -------------------------------------------------------------------------- */ :root[data-theme-switching] *, :root[data-theme-switching] *::before, :root[data-theme-switching] *::after { transition: none !important; animation-duration: .001ms !important; animation-delay: .001ms !important; } /* ========================================================================== 6 ยท The literals -------------------------------------------------------------------------- Everything above rides on tokens, and tokens carried most of the theme. What is left are the places that were written as literal hex โ€” mostly in home.css, which paints the marketplace shell and predates the token layer. Each block below mirrors the geometry of the rule it overrides exactly and changes only the greyscale ramp, so the light theme is the same composition under different light rather than a second, diverging design. ========================================================================== */ /* The hero field. Same four-stop stack as the dark original โ€” two highlights top-left and top-right, a floor gradient from below, a vertical base โ€” with the ramp run upward instead of down. Keeping the geometry is what stops the light hero from reading as a different section. */ :root[data-theme="light"] .hero__bg { background: radial-gradient(120% 90% at 18% 8%, #FFFFFF 0%, rgba(255,255,255,0) 46%), radial-gradient(95% 80% at 88% 22%, #F8F8FA 0%, rgba(248,248,250,0) 50%), radial-gradient(140% 120% at 50% 120%, #E7E7EB 0%, rgba(231,231,235,0) 55%), linear-gradient(180deg, #FCFCFD 0%, #F5F5F7 60%, #EEEEF2 100%); } /* The grain exists to stop banding across those gradients, and banding is more visible on a light ramp, not less โ€” so it stays. But `overlay` against white lifts toward pure white and disappears; `multiply` puts the same texture back by darkening instead. Alpha drops because dark grain on light reads stronger. */ :root[data-theme="light"] .hero__grain { mix-blend-mode: multiply; opacity: .022; } /* The topbar plate. home.css paints it a translucent near-black that survives the token swap because it is a literal. The light value is a translucent white with a slightly higher alpha: white-on-light needs more opacity than black-on-dark to separate the bar from what scrolls under it. */ :root[data-theme="light"] .topbar { background: rgba(255,255,255,.72); border: 1px solid rgba(17,17,20,.08); } /* Popovers, from the header CSS held in the database. Same treatment, and the inset highlight/shade pair that gives them their edge is rebalanced: the white inset that reads as a lit rim on dark reads as nothing on light, so the weight moves to the dark inset. */ :root[data-theme="light"] .popover { background: rgba(255,255,255,.86); border-color: rgba(17,17,20,.10); box-shadow: inset 1px 1px 1px rgba(255,255,255,.9), inset -1px -1px 1px rgba(17,17,20,.05), 0 18px 44px rgba(17,17,20,.13); } /* The footer sits on a black wash that darkens whatever is behind it. On light the equivalent gesture is a white wash, not a black one. */ :root[data-theme="light"] .footer { background: rgba(255,255,255,.35); } /* -------------------------------------------------------------------------- 7 ยท The `!important` rules The header CSS in the database sets these with `!important`, so specificity alone cannot reach them. Matching the flag here is not a shortcut around a cascade problem โ€” it is the only way to answer a declaration that already opted out of the cascade, and it is confined to exactly those declarations. -------------------------------------------------------------------------- */ :root[data-theme="light"] .topbar .icon-btn.has-dot::after { background: #131315 !important; box-shadow: 0 0 8px rgba(19,19,21,.35) !important; } :root[data-theme="light"] .topbar .avatar.is-online::after { background: #3A3A41 !important; box-shadow: 0 0 8px rgba(19,19,21,.28) !important; } :root[data-theme="light"] .topbar .topnav a::after { background: #131315 !important; } :root[data-theme="light"] .topbar .pop-badge { color: #131315 !important; background: rgba(17,17,20,.07) !important; border-color: rgba(17,17,20,.16) !important; } /* The nav labels carry a text-shadow tuned to lift them off a dark plate. On a light one the same shadow is a grey halo, which is the one artefact that most reliably makes a light theme look like a dark theme someone inverted. */ :root[data-theme="light"] .topbar .topnav a { text-shadow: none; } /* -------------------------------------------------------------------------- 8 ยท The hero scrim The original is a dark wash whose job is stated in its own comment: keep hero text off bare glass so it always has contrast. That job does not go away in light mode, it reverses โ€” the text is dark now, so the wash has to be white. Same two gradients, same stops, same intent, opposite direction. -------------------------------------------------------------------------- */ :root[data-theme="light"] .hero__bg::before { background: radial-gradient(75% 55% at 50% 46%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.42) 78%), linear-gradient(180deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.52) 100%); } /* -------------------------------------------------------------------------- 9 ยท The wordmark Locked with `!important` in two places at once โ€” chrome.css on disk and the header CSS in the database โ€” so the flag has to be matched here as well. The selectors are copied verbatim from those rules rather than rewritten, so if either source moves, this stops matching visibly instead of drifting quietly out of sync. The mark keeps its two-tone structure: the name at full strength, the suffix stepped back. On a light field the pair simply moves down the ramp instead of up it. -------------------------------------------------------------------------- */ :root[data-theme="light"] .topbar .logo-type text tspan { fill:#131315 !important; } :root[data-theme="light"] .topbar .logo-type text tspan:last-child { fill:#71717A !important; } :root[data-theme="light"] .topbar .logo-type path[fill^="url"] { fill:#2C2C31 !important; } /* The hexagon carries a white ring that read as a cut-out on the dark mark. On the dark hexagon of the light theme it still does, so it stays white. */ :root[data-theme="light"] .topbar .logo-type circle { stroke:#FFFFFF !important; } /* -------------------------------------------------------------------------- 10 ยท The inner contexts -------------------------------------------------------------------------- Each inner context โ€” single post, blog archive, shop, account, auth, 404 โ€” opens its own stylesheet by declaring a small private vocabulary on its root class: a panel fill, two card fills, two hairlines. Every panel, card and divider inside that context is drawn from those five. So they are the whole job. Overriding them here reaches every surface in every one of those pages without naming a single component, and it keeps working when a component is added later โ€” which listing selectors one by one would not. The panel goes translucent white rather than solid: these sit over the page gradient with a backdrop blur, and a solid fill would throw away the blur that gives them their depth. -------------------------------------------------------------------------- */ :root[data-theme="light"] .lav-single, :root[data-theme="light"] .lav-blog, :root[data-theme="light"] .lav-shop, :root[data-theme="light"] .lav-account, :root[data-theme="light"] .lav-auth, :root[data-theme="light"] .lav-404, :root[data-theme="light"] .lav-checkout { --surf: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.92)); --card: rgba(17,17,20,.032); --card-2: rgba(17,17,20,.055); --hairline: rgba(17,17,20,.11); --hairline-2: rgba(17,17,20,.06); } /* -------------------------------------------------------------------------- 11 ยท The surfaces that were written as literals What the token override above cannot reach: the handful of places across the inner contexts that name a dark colour directly instead of going through the vocabulary. Grouped by what they are rather than by which file they came from, because the answer is the same for all of them โ€” a dark translucent plate over a dark page becomes a light translucent plate over a light one. -------------------------------------------------------------------------- */ /* Scrims and overlays: they exist to push the page back behind something in front. On light that means a white veil, not a black one. */ :root[data-theme="light"] .lav-qv__overlay, :root[data-theme="light"] .lav-shop .lav-shop-overlay { background: rgba(250,250,251,.72); } /* Small floating plates โ€” pills, favourite and quick-view buttons, the mobile nav drawer, caption bars. Alphas are raised a little: a white plate needs more opacity over a light page than a black one needed over a dark page. */ :root[data-theme="light"] .lav-blog .ppill, :root[data-theme="light"] .lav-shop .pfav, :root[data-theme="light"] .post-pill, :root[data-theme="light"] .lav-single .cover .cap { background: rgba(255,255,255,.78); } :root[data-theme="light"] .lav-shop .pquick { background: rgba(255,255,255,.88); } /* Only the mobile drawer. On desktop .topnav is a bare row of links with no plate of its own, and giving it one paints a white band across the header. */ :root[data-theme="light"] .topnav.is-open { background: rgba(255,255,255,.94); } /* Inputs read as wells โ€” recessed, slightly darker than their surround. That reverses too: on light, a well is a faint grey, not a near-black. */ :root[data-theme="light"] .lav-blog .nl input, :root[data-theme="light"] .lav-shop .promo-form input, :root[data-theme="light"] .lav-auth .la-form-wrap { background: rgba(17,17,20,.035); } /* Code blocks keep contrast with the prose around them by sitting apart from it. Same idea, opposite direction. */ :root[data-theme="light"] .lav-single .prose pre, :root[data-theme="light"] .lav-single .lavs-content pre { background: rgba(17,17,20,.045); } /* Product and collection cards carry a blue-grey tint (rgba(22,26,38,โ€ฆ)) that is the one place the monochrome system admits a hue. Keeping a trace of it on light preserves that distinction instead of flattening it to neutral. */ :root[data-theme="light"] .lavc-card, :root[data-theme="light"] .lavp-grid .lavp-card { background: rgba(240,242,248,.86); } /* Success and error states are the only hued tokens in the theme, and hues that read on black are washed out on white. These step down in lightness so they stay legible against a light plate. */ :root[data-theme="light"] .lav-account .edd_purchase_status.publish, :root[data-theme="light"] .lav-account .edd_purchase_status.complete, :root[data-theme="light"] .lav-account .edd_success, :root[data-theme="light"] .lav-account .edd-alert-success, :root[data-theme="light"] .lav-auth .la-alert--success { background: rgba(27,110,60,.10); color: #14512C; } /* -------------------------------------------------------------------------- 12 ยท The app shell -------------------------------------------------------------------------- `.app` in chrome.css re-declares the text tokens, and it wraps every inner page. Custom properties resolve from the nearest ancestor that declares them, not from the most specific selector anywhere โ€” so `.app` beats `:root[data-theme="light"]` for everything inside it no matter how the specificity compares. Redeclaring them at the same depth is the only fix. ๐Ÿ”ด This is the one that matters. Without it the tokens flip at :root, the page looks right at a glance, and every piece of secondary text inside the shell โ€” ledes, breadcrumbs, bylines, captions โ€” stays near-white on near-white. It reads as a rendering glitch rather than a missing rule, which is what makes it expensive to find twice. -------------------------------------------------------------------------- */ :root[data-theme="light"] .app { --accent:#131315; --text:#131315; --text-2:rgba(19,19,21,.74); --text-3:rgba(19,19,21,.58); --muted:rgba(19,19,21,.48); } /* -------------------------------------------------------------------------- 13 ยท The gradient wordmark on post titles `.grad` paints the title with a gradient clipped to the glyphs โ€” white into a warm cream. Clipped to text, so the fill IS the letterform: on a light page the title does not merely lose contrast, it disappears. The light version keeps the same gesture, a neutral running into the same warm hue, with the ramp inverted: near-black into a deep tan. Same angle and same stops, so the title still catches the light across its width. -------------------------------------------------------------------------- */ :root[data-theme="light"] .grad { background-image: linear-gradient(120deg, #131315 38%, #8A5A2B 92%); } /* -------------------------------------------------------------------------- 14 ยท The promo panel `.glass` itself is token-driven and needed nothing. `.lav-shop .promo` layers an extra white sheen on top of it as a literal, to lift the newsletter block above the panels around it. On a light page that reads as a blank white rectangle with invisible controls inside it. Same lift, dark tint. -------------------------------------------------------------------------- */ :root[data-theme="light"] .lav-shop .promo { background: linear-gradient(120deg, rgba(17,17,20,.05), rgba(17,17,20,.025)), var(--glass-2); } /* -------------------------------------------------------------------------- 15 ยท The subscribe button Half of it was written as a literal and half through a token: the fill is a hard #fff, the label is var(--cta-ink). In the dark theme those agreed by coincidence โ€” white plate, dark ink. Flipping the tokens turns the ink white and leaves the plate where it was, so the button becomes white on white. Putting both halves back on the CTA tokens is the fix, and it makes the button match every other primary action on the page in either theme instead of only in one of them. -------------------------------------------------------------------------- */ :root[data-theme="light"] .lav-shop .promo-form button { background: var(--cta); color: var(--cta-ink); } /* -------------------------------------------------------------------------- 16 ยท The icon rail -------------------------------------------------------------------------- The right-hand rail holds the social links, so it has to be legible, not just present. chrome.css builds it the same way as the topbar: `.sidebar` forces its own plate with `!important`, and the glass is painted by ::before and ::after with white at low alpha โ€” invisible against a light page, which left the icons floating with nothing behind them. Scoped through `.sidebar` rather than left to the generated `.nav-item` sweep so the rail is styled as one component: plate, edge and icons together. -------------------------------------------------------------------------- */ :root[data-theme="light"] .sidebar { --accent:#131315; box-shadow: 0 8px 28px rgba(17,17,20,.08) !important; } /* The two stacked glass layers. `.sidebar::after` carries the tint and the inset rim; both are rebalanced the same way the topbar's were โ€” the tint flips to dark at a lower alpha, and the rim's weight moves from the white inset to the dark one. */ :root[data-theme="light"] .sidebar::after { background: rgba(17,17,20,.035); box-shadow: inset 2px 2px 1px rgba(255,255,255,.95), inset -2px -2px 1px rgba(17,17,20,.06), inset 0 0 34px rgba(255,255,255,.5), inset 0 -22px 46px rgba(17,17,20,.04), 0 1px 0 rgba(255,255,255,.7); } /* Icons. Same three states as the dark theme โ€” resting, hover, active โ€” with the ramp inverted. `.sidebar` prefix so these outrank the bare `.nav-item` rules in chrome.css whatever order the sheets end up in. */ :root[data-theme="light"] .sidebar .nav-item { color: rgba(19,19,21,.62); } :root[data-theme="light"] .sidebar .nav-item:hover { color: #131315; background: rgba(17,17,20,.05); } :root[data-theme="light"] .sidebar .nav-item.active { color: #131315; background: linear-gradient(180deg,rgba(17,17,20,.10),rgba(17,17,20,.04)); box-shadow: inset 0 0 0 1px rgba(17,17,20,.10); } /* The marker beside the active item was a white bar with a white glow. */ :root[data-theme="light"] .sidebar .nav-item.active::before { background: #131315; box-shadow: 0 0 10px rgba(19,19,21,.35); }