/* ===================================================================== /home appearance variants: Standard, Yoga and Polaris, each in Ljust or Mörkt, the same choices the signed-in product offers. Replaced the single Yoga sheet on 2026-09-14. That one recoloured the page selector by selector, which does not survive three styles times two appearances: the same override would have been written six times. SHAPE OF THIS FILE 1. Token blocks, one per state, holding only VALUES. 2. One surface block, written once, that maps those tokens onto the page's elements. It hangs off :where(html.dark, html.yoga, html.polaris), so the standard light page never sees a single rule from this file. 3. Style-specific shape rules (Yoga's serif and round corners, Polaris' glow), which are about form rather than colour. 4. The appearance picker in the header and the transition glass. The colour values are the app's OWN tokens, copied from wwwroot/styles/shared/theme.css ([data-theme="stegvis"] and its .dark block) and wwwroot/styles/shared/polaris.css. They are literal hsl() here because /home does not load the app's token layer, and pulling that cascade onto a marketing page to reuse a dozen colours would cost more than it saves. If a palette is retuned there, retune it here. State is carried on : .dark, .yoga, .polaris. Polaris always implies .dark, exactly as ThemeCustomizer does it. ===================================================================== */ /* --------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------- */ /* Standard, mörkt. The blue stays; the paper goes. */ html.dark{ --page:hsl(217 33% 8%); --page-2:hsl(217 30% 10%); --card:hsl(217 28% 12%); --ink:hsl(210 32% 93%); --muted:hsl(213 16% 68%); --muted-2:hsl(213 14% 60%); --line:hsl(215 22% 22%); --soft:hsl(217 30% 13%); --plate:hsl(217 32% 16%); --accent:hsl(214 100% 60%); --accent-ink:hsl(212 100% 74%); --accent-on-dark:hsl(212 100% 74%); --dark-1:hsl(219 45% 5%); --dark-2:hsl(218 42% 9%); --shadow:0 18px 46px hsl(220 60% 2% / .55); --shadow-sm:0 8px 24px hsl(220 60% 2% / .4); } /* Yoga on Skogsgrön, ljust. */ html.yoga{ --page:hsl(47 27% 94%); --page-2:hsl(44 30% 96.5%); --card:hsl(40 100% 98.8%); --ink:hsl(171 34% 15%); --muted:hsl(147 7% 40%); --muted-2:hsl(147 7% 48%); --line:hsl(53 12% 85%); --soft:hsl(158 30% 94%); --plate:hsl(158 30% 89%); --accent:hsl(171 64% 25%); --accent-ink:hsl(171 64% 23%); --accent-on-dark:hsl(161 38% 65%); --dark-1:hsl(166 24% 9%); --dark-2:hsl(166 20% 12%); --shadow:0 10px 34px hsl(171 34% 15% / .09); --shadow-sm:0 6px 22px hsl(171 34% 15% / .05); } /* Yoga on Skogsgrön, mörkt. */ html.yoga.dark{ --page:hsl(166 24% 9%); --page-2:hsl(166 22% 10.5%); --card:hsl(166 20% 12%); --ink:hsl(150 20% 92%); --muted:hsl(155 12% 66%); --muted-2:hsl(155 10% 58%); --line:hsl(166 16% 25%); --soft:hsl(166 17% 14%); --plate:hsl(166 20% 18%); --accent:hsl(161 38% 65%); --accent-ink:hsl(161 38% 70%); --accent-on-dark:hsl(161 38% 65%); --dark-1:hsl(166 26% 6%); --dark-2:hsl(166 22% 9%); --shadow:0 16px 40px hsl(166 40% 3% / .5); --shadow-sm:0 8px 22px hsl(166 40% 3% / .38); } /* Polaris: the cosmic skin, always on the dark base. */ html.polaris{ --page:hsl(0 0% 7%); --page-2:hsl(0 0% 8.5%); --card:hsl(218 16% 15%); --ink:hsl(192 70% 80%); --muted:hsl(193 20% 60%); --muted-2:hsl(193 18% 54%); --line:hsl(195 30% 30%); --soft:hsl(200 18% 13%); --plate:hsl(200 18% 20%); --accent:hsl(355 75% 68%); --accent-ink:hsl(355 75% 74%); --accent-on-dark:hsl(355 75% 68%); --dark-1:hsl(0 0% 5%); --dark-2:hsl(220 17% 10%); --shadow:0 18px 50px hsl(0 0% 0% / .6); --shadow-sm:0 8px 26px hsl(0 0% 0% / .45); } /* --------------------------------------------------------------------- 2. SURFACES — written once, driven by the tokens above. --------------------------------------------------------------------- */ /* NOT written with :where() like the rules below it. :where() has zero specificity, and :root{--blue-ink:#0d62df} in styles.css would then win, which is exactly what happened: every .learn link kept the light-mode blue on a dark card. The token remap has to outrank :root, so it names the classes. */ html.dark, html.yoga, html.polaris{ --page-ground:var(--page); --blue:var(--accent); --blue-2:var(--accent); --blue-ink:var(--accent-ink); } :where(html.dark, html.yoga, html.polaris) body{ color:var(--ink); background:var(--page); } /* Page grounds */ :where(html.dark, html.yoga, html.polaris) .samband{background:linear-gradient(180deg,var(--page),var(--page-2))} :where(html.dark, html.yoga, html.polaris) .psec{background:transparent} :where(html.dark, html.yoga, html.polaris) .psec--alt{background:linear-gradient(180deg,var(--soft),transparent)} :where(html.dark, html.yoga, html.polaris) .section{background:transparent} :where(html.dark, html.yoga, html.polaris) .page-hero{background:linear-gradient(180deg,var(--soft),transparent)} :where(html.dark, html.yoga, html.polaris) .handover{background:linear-gradient(180deg,var(--page-2),var(--page))} :where(html.dark, html.yoga, html.polaris) .hero:after{background:var(--page)} /* The four surfaces that are dark in every variant */ :where(html.dark, html.yoga, html.polaris) .site-header{background:linear-gradient(180deg,var(--dark-1),var(--dark-1));border-bottom-color:hsl(0 0% 100% / .08)} :where(html.dark, html.yoga, html.polaris) .site-header.transparent{background:linear-gradient(180deg,hsl(0 0% 0% / .55),hsl(0 0% 0% / .2),transparent);border-bottom-color:transparent} :where(html.dark, html.yoga, html.polaris) .site-header.nav-open{background:var(--dark-1)} :where(html.dark, html.yoga, html.polaris) .hero{background:var(--dark-1)} :where(html.dark, html.yoga, html.polaris) .dark-band{background:var(--dark-2)} :where(html.dark, html.yoga, html.polaris) .footer{background:var(--dark-1)} /* The footer keeps its 96px top margin in every appearance. Zeroing it here was right when that margin was an empty stripe, and wrong the moment the glass logo moved into it: switching style then dropped the breathing room under the pane while the standard page kept it. */ :where(html.dark, html.yoga, html.polaris) .company-cta{background:linear-gradient(120deg,var(--dark-2),var(--plate))} :where(html.dark, html.yoga, html.polaris) .flow{background:linear-gradient(165deg,var(--dark-2),var(--dark-1));border-color:hsl(0 0% 100% / .1)} :where(html.dark, html.yoga, html.polaris) .flow-sub, :where(html.dark, html.yoga, html.polaris) .flow-lab small{color:hsl(0 0% 100% / .6)} /* Cards and panels */ :where(html.dark, html.yoga, html.polaris) .fam-tile, :where(html.dark, html.yoga, html.polaris) .solution-card, :where(html.dark, html.yoga, html.polaris) .industry-card, :where(html.dark, html.yoga, html.polaris) .shot-card, :where(html.dark, html.yoga, html.polaris) .samband-shot, :where(html.dark, html.yoga, html.polaris) .insikter-card, :where(html.dark, html.yoga, html.polaris) .tpl, :where(html.dark, html.yoga, html.polaris) .strip, :where(html.dark, html.yoga, html.polaris) .sol-modal, :where(html.dark, html.yoga, html.polaris) .shot-modal, :where(html.dark, html.yoga, html.polaris) .demo-modal, :where(html.dark, html.yoga, html.polaris) .filo-card{ background:var(--card);border-color:var(--line);box-shadow:var(--shadow-sm) } :where(html.dark, html.yoga, html.polaris) .fam-tile--base{background:linear-gradient(180deg,var(--soft),var(--card));border-color:var(--line)} :where(html.dark, html.yoga, html.polaris) .fam-tile--soon{background:var(--soft);border-style:dashed} :where(html.dark, html.yoga, html.polaris) .filo-card{border-left-color:var(--accent)} :where(html.dark, html.yoga, html.polaris) a.fam-tile:hover, :where(html.dark, html.yoga, html.polaris) .solution-card:hover, :where(html.dark, html.yoga, html.polaris) .industry-card:hover, :where(html.dark, html.yoga, html.polaris) .insikter-card:hover{border-color:var(--accent);box-shadow:var(--shadow)} /* Icon plates. .card-ic is a bare inline-flex glyph in styles.css and stretches inside a flex column, so it never gets a background here. */ :where(html.dark, html.yoga, html.polaris) .card-ic{color:var(--accent)} :where(html.dark, html.yoga, html.polaris) .fam-ic, :where(html.dark, html.yoga, html.polaris) .value-ic, :where(html.dark, html.yoga, html.polaris) .strip-badge, :where(html.dark, html.yoga, html.polaris) .oee-out{background:var(--plate);border-color:var(--line);color:var(--accent)} :where(html.dark, html.yoga, html.polaris) .bullet-dot{background:var(--accent);color:var(--page)} /* Vägar in (spår 12): only the keyline and the heading colour are surfaces. */ :where(html.dark, html.yoga, html.polaris) .path{border-top-color:var(--line)} :where(html.dark, html.yoga, html.polaris) .path:hover{border-top-color:var(--accent)} :where(html.dark, html.yoga, html.polaris) .path h3{color:var(--ink)} :where(html.dark, html.yoga, html.polaris) .path p{color:var(--muted)} :where(html.dark, html.yoga, html.polaris) .samband-list li:before, :where(html.dark, html.yoga, html.polaris) .sol-modal-list li:before{background:var(--accent)} :where(html.dark, html.yoga, html.polaris) .grund-engine, :where(html.dark, html.yoga, html.polaris) .insikter-admin{border-color:var(--line);background:var(--soft)} /* Image wells and captions */ :where(html.dark, html.yoga, html.polaris) .shot-bar, :where(html.dark, html.yoga, html.polaris) .shot-box, :where(html.dark, html.yoga, html.polaris) .insikter-card-media, :where(html.dark, html.yoga, html.polaris) .sol-modal-media{background:var(--dark-2)} :where(html.dark, html.yoga, html.polaris) .samband-box{background:var(--page-2)} :where(html.dark, html.yoga, html.polaris) .samband-shot figcaption{background:var(--soft);color:var(--muted)} /* Relationskartan i stort format. The zoom badge and the switcher chips are the only new surfaces; the modal box itself rides the .shot-modal entry above. */ :where(html.dark, html.yoga, html.polaris) .shot-modal-media{background:var(--dark-2)} :where(html.dark, html.yoga, html.polaris) .samband-zoom{ background:var(--plate);color:var(--accent);box-shadow:var(--shadow) } :where(html.dark, html.yoga, html.polaris) .shot-modal-foot{background:var(--soft);border-top-color:var(--line)} :where(html.dark, html.yoga, html.polaris) .shot-modal-copy h3{color:var(--ink)} :where(html.dark, html.yoga, html.polaris) .shot-modal-copy p{color:var(--muted)} :where(html.dark, html.yoga, html.polaris) .shot-opt{ background:var(--card);border-color:var(--line);color:var(--muted) } :where(html.dark, html.yoga, html.polaris) .shot-opt:hover{color:var(--ink);border-color:var(--accent)} :where(html.dark, html.yoga, html.polaris) .shot-opt.on{ border-color:var(--accent);color:var(--accent);background:var(--plate) } /* On the dark band the statement card is glass, never a light card */ :where(html.dark, html.yoga, html.polaris) .stmt-card{ background:hsl(0 0% 100% / .04);border-color:hsl(0 0% 100% / .14); border-left-color:var(--accent-on-dark);box-shadow:none } :where(html.dark, html.yoga, html.polaris) .hero h1 .em{color:var(--accent-on-dark)} :where(html.dark, html.yoga, html.polaris) .hero .eyebrow, :where(html.dark, html.yoga, html.polaris) .dark-band .eyebrow{color:var(--accent-on-dark)} :where(html.dark, html.yoga, html.polaris) .hero-ai-chip{border-color:hsl(0 0% 100% / .2);background:hsl(0 0% 100% / .06)} :where(html.dark, html.yoga, html.polaris) .hero-ai-chip:hover{background:hsl(0 0% 100% / .13);border-color:var(--accent-on-dark)} :where(html.dark, html.yoga, html.polaris) .footer a:hover{color:var(--accent-on-dark)} /* Buttons */ :where(html.dark, html.yoga, html.polaris) .btn-primary{ background:var(--accent);color:var(--dark-1); box-shadow:0 10px 22px hsl(0 0% 0% / .3) } :where(html.dark, html.yoga, html.polaris) .btn-primary:hover{filter:brightness(1.08);box-shadow:0 14px 28px hsl(0 0% 0% / .36)} :where(html.dark, html.yoga, html.polaris) .btn-secondary{background:hsl(0 0% 0% / .45);border-color:hsl(0 0% 100% / .35);color:#fff} :where(html.dark, html.yoga, html.polaris) .btn-outline{background:var(--card);border-color:var(--line);color:var(--accent-ink)} :where(html.dark, html.yoga, html.polaris) .btn-outline:hover{border-color:var(--accent);background:var(--soft)} /* Form fields */ :where(html.dark, html.yoga, html.polaris) .demo-field input, :where(html.dark, html.yoga, html.polaris) .demo-field textarea{background:var(--soft);border-color:var(--line);color:var(--ink)} :where(html.dark, html.yoga, html.polaris) .demo-field input:focus, :where(html.dark, html.yoga, html.polaris) .demo-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px hsl(0 0% 100% / .1)} /* Links, small print, tree */ :where(html.dark, html.yoga, html.polaris) .learn, :where(html.dark, html.yoga, html.polaris) .filo-link, :where(html.dark, html.yoga, html.polaris) .insikter-kicker{color:var(--accent-ink)} :where(html.dark, html.yoga, html.polaris) .tpl-btn[aria-pressed="true"]{background:var(--accent);color:var(--page);border-color:var(--accent)} :where(html.dark, html.yoga, html.polaris) .tr-id{background:var(--plate);color:var(--accent-ink)} :where(html.dark, html.yoga, html.polaris) .lang-btn.on, :where(html.dark, html.yoga, html.polaris) .stil-btn.on{background:var(--accent);color:var(--dark-1)} /* Anything the page paints white and the tokens cannot reach */ :where(html.dark, html.yoga, html.polaris) .hero-ai-mark--plate{background:hsl(0 0% 100% / .9)} /* --------------------------------------------------------------------- 3. STYLE, not colour --------------------------------------------------------------------- */ /* Yoga: serif headings at 500, rounder corners, quieter shadows. The brand wordmark keeps the standard face in every variant: it is a logotype, not a heading, and a serif BIMDOC is a different mark. */ html.yoga{--radius:20px;--disp:Georgia,"Times New Roman",serif} html.yoga h1,html.yoga h2,html.yoga h3,html.yoga .disp{font-family:var(--disp);font-weight:500;letter-spacing:-.025em} html.yoga .brand{font-family:var(--disp-std);font-weight:800;letter-spacing:-.03em} html.yoga .fam-tile,html.yoga .solution-card,html.yoga .industry-card, html.yoga .shot-card,html.yoga .samband-shot,html.yoga .insikter-card, html.yoga .tpl,html.yoga .strip,html.yoga .filo-card{border-radius:var(--radius)} html.yoga .btn{border-radius:14px} /* The warm washes body.yoga paints in the app, on the light variant only. */ html.yoga:not(.dark) body{ background: radial-gradient(ellipse at 5% 0%, hsl(171 64% 25% / .07), transparent 36rem), radial-gradient(ellipse at 95% 20%, hsl(11 48% 55% / .06), transparent 32rem), var(--page); } /* Polaris sets the whole interface in monospace in the app (polaris.css line 98), which is most of why it reads as Polaris rather than as a dark page with a pink accent. Same stack here, and the wordmark keeps --disp-std like it does in every other variant. Fira Code itself is fetched by main.js only when Polaris is actually chosen: it is the one variant most visitors will never open, and a font request for all of them to serve a few is not a trade worth making. */ html.polaris{ --body:"Fira Code",ui-monospace,"IBM Plex Mono",Consolas,monospace; --disp:"Fira Code",ui-monospace,"IBM Plex Mono",Consolas,monospace; --mono:"Fira Code",ui-monospace,"IBM Plex Mono",Consolas,monospace; } html.polaris h1,html.polaris h2,html.polaris h3{letter-spacing:-.015em;font-weight:600} html.polaris .brand{font-family:var(--disp-std);font-weight:800;letter-spacing:-.03em} /* Mono runs wide: the hero headline needs a lower ceiling or it breaks badly. */ html.polaris .hero h1{font-size:clamp(26px,4.4vw,40px)} /* Polaris: the void, with two faint cosmic glows instead of a starfield. The real starfield is a canvas the app owns; a marketing page does not need to animate behind its own copy. */ html.polaris body{ background: radial-gradient(ellipse at 12% -5%, hsl(205 60% 40% / .18), transparent 40rem), radial-gradient(ellipse at 88% 12%, hsl(355 75% 55% / .10), transparent 34rem), var(--page); } html.polaris .site-header{border-bottom-color:hsl(195 30% 30% / .5)} /* The hero photograph stays in every variant (an explicit decision). Only the wash over it changes, so the headline keeps its contrast. */ html.dark .hero:before{background: radial-gradient(72% 55% at 80% 32%,hsl(214 100% 60% / .22),transparent 60%), linear-gradient(90deg,hsl(219 45% 5%) 0%,hsl(218 42% 9%) 30%,hsl(219 45% 5% / .72) 55%,hsl(219 45% 5% / .08) 100%), url("assets/hero-refinery.jpg");background-size:cover;background-position:center right} html.yoga .hero:before{background: radial-gradient(72% 55% at 80% 32%,hsl(161 38% 65% / .2),transparent 60%), linear-gradient(90deg,hsl(166 24% 9%) 0%,hsl(166 22% 12%) 30%,hsl(166 24% 9% / .74) 55%,hsl(166 24% 9% / .08) 100%), url("assets/hero-refinery.jpg");background-size:cover;background-position:center right} html.polaris .hero:before{background: radial-gradient(72% 55% at 80% 32%,hsl(355 75% 60% / .18),transparent 60%), linear-gradient(90deg,hsl(0 0% 4%) 0%,hsl(220 17% 8%) 30%,hsl(0 0% 4% / .74) 55%,hsl(0 0% 4% / .1) 100%), url("assets/hero-refinery.jpg");background-size:cover;background-position:center right} /* --------------------------------------------------------------------- 4. THE PICKER + THE TRANSITION GLASS --------------------------------------------------------------------- */ .appearance{position:relative} .appearance-btn{ width:38px;height:38px;display:grid;place-items:center;border-radius:999px; border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05); color:#fff;cursor:pointer;font-size:15px;transition:background .18s ease,border-color .18s ease } .appearance-btn:hover{background:rgba(255,255,255,.14)} .appearance-btn .ic{width:17px;height:17px} .appearance-menu{ position:absolute;top:calc(100% + 10px);right:0;z-index:70;width:210px;padding:12px; border-radius:16px;border:1px solid rgba(255,255,255,.14); background:rgba(14,20,32,.72);backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); box-shadow:0 24px 60px rgba(0,0,0,.45);color:#fff } .appearance-menu[hidden]{display:none} .appearance-group + .appearance-group{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)} .appearance-label{ font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.55);margin:0 0 8px } .appearance-opt{ width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0; border:0;border-radius:10px;background:none;color:rgba(255,255,255,.86); font:inherit;font-size:13.5px;text-align:left;cursor:pointer;transition:background .16s ease } .appearance-opt:hover{background:rgba(255,255,255,.1)} .appearance-opt[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff;font-weight:600} .appearance-opt .ic{width:15px;height:15px;opacity:.85} .appearance-opt[disabled]{opacity:.4;cursor:not-allowed} /* The same frost-and-morph the app runs between appearances: a blurred sheet over the page while the palette swaps, with the outgoing glyph rotating out as the incoming one rotates in. Mirrors .theme-transition-glass in wwwroot/styles/shared/theme.css, rewritten for this page's SVG sprite. */ .theme-glass{ position:fixed;inset:0;z-index:999;display:grid;place-items:center; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); background:rgba(255,255,255,.3);opacity:1;transition:opacity .6s ease-out;pointer-events:none } :where(html.dark, html.yoga.dark, html.polaris) .theme-glass{background:rgba(0,0,0,.4)} .theme-glass.fade-out{opacity:0} .theme-morph{display:grid;place-items:center;width:48px;height:48px} .theme-morph .ic{ grid-area:1/1;width:32px;height:32px;color:var(--ink,#0a1626); transition:transform .42s cubic-bezier(.34,1.3,.5,1),opacity .32s ease } .theme-morph .is-from{transform:scale(1) rotate(0);opacity:1} .theme-morph .is-to{transform:scale(.45) rotate(-110deg);opacity:0} .theme-glass.is-swapped .is-from{transform:scale(.45) rotate(110deg);opacity:0} .theme-glass.is-swapped .is-to{transform:scale(1) rotate(0);opacity:1} @media (prefers-reduced-motion: reduce){ .theme-morph .ic{transition-duration:.01ms} } @media (max-width:860px){ .appearance-menu{width:190px} } /* ---- The watermark follows the appearance ---- The two logo files draw the same picture but are not the same document, so each mode masks with the file it actually renders; masking the white logo with the black file is only accidentally aligned. */ :where(html.dark, html.yoga.dark, html.polaris) .home-watermark .wm-light{display:none} :where(html.dark, html.yoga.dark, html.polaris) .home-watermark .wm-dark{display:block} :where(html.dark, html.yoga.dark, html.polaris) .wm-fx{ -webkit-mask-image:url("/assets/images/Industri_logg_vit_1024.svg"); mask-image:url("/assets/images/Industri_logg_vit_1024.svg") } :where(html.dark, html.yoga.dark, html.polaris) .home-watermark img{opacity:.2} :where(html.dark, html.yoga.dark, html.polaris) .wm-band{filter:blur(.5px) brightness(1.35)} :where(html.dark, html.yoga, html.polaris) .home-watermark{--wm-c:var(--accent)} /* Only on the DARK panes: white is the brightest thing there, so it reads as the light source itself. On the light pane the core stays the accent (see styles.css --wm-edge-core) because white on white glass is invisible. */ :where(html.dark, html.yoga.dark, html.polaris) .home-watermark{ --wm-edge-core:hsl(0 0% 100%); /* Back near the shipped weight: a bright line on near-black already reads, and the light pane's 3px would be a stripe here. */ --wm-edge-w:1.8px; --wm-edge-bloom:5px; --wm-edge-bloom-a:45%; } /* ---- The surfaces styles.css paints white directly ---- Found by sweeping the rendered page in dark mode for any element still resolving to a light background; a token override cannot reach a literal #fff or a two-stop gradient. */ :where(html.dark, html.yoga, html.polaris) .family{background:linear-gradient(180deg,var(--page),var(--page-2))} :where(html.dark, html.yoga, html.polaris) .filo{background:linear-gradient(180deg,var(--page-2),var(--page))} :where(html.dark, html.yoga, html.polaris) .plat-why{background:var(--page)} :where(html.dark, html.yoga, html.polaris) .mt-band{background:var(--page)} :where(html.dark, html.yoga, html.polaris) .mt-row{background:var(--soft);border-color:var(--line)} :where(html.dark, html.yoga, html.polaris) .fact{background:linear-gradient(180deg,var(--soft),var(--page-2));border-color:var(--line)} :where(html.dark, html.yoga, html.polaris) .handover-shot, :where(html.dark, html.yoga, html.polaris) .handover-sys, :where(html.dark, html.yoga, html.polaris) .oee{background:var(--card);border-color:var(--line)} :where(html.dark, html.yoga, html.polaris) .oee-in{background:var(--soft);border-color:var(--line)} :where(html.dark, html.yoga, html.polaris) .fam-ic{background:var(--plate)} :where(html.dark, html.yoga, html.polaris) .fam-tag--soon{background:var(--soft);border-color:var(--line)} :where(html.dark, html.yoga, html.polaris) .tpl-tog{background:var(--soft);border-color:var(--line)} :where(html.dark, html.yoga, html.polaris) .tr-p{background:var(--plate);color:var(--accent-ink)} :where(html.dark, html.yoga, html.polaris) .tr-cls{background:transparent} :where(html.dark, html.yoga, html.polaris) .company-photo{background:var(--dark-2)} :where(html.dark, html.yoga, html.polaris) .insikter-pub--unpub{background:var(--card);border-color:var(--line);color:var(--ink)} :where(html.dark, html.yoga, html.polaris) .insikter-tab{color:var(--muted)} :where(html.dark, html.yoga, html.polaris) .proof-ic{background:hsl(0 0% 100% / .06)} /* ---- The glass pane in the dark appearances ---- Same construction, inverted: the pane is a thin light film over the dark ground rather than a bright sheet, and the edge highlight drops to a hint. */ :where(html.dark, html.yoga.dark, html.polaris) .home-watermark{ background: linear-gradient(150deg,hsl(0 0% 100% / .1),hsl(0 0% 100% / .03) 46%,hsl(0 0% 100% / .07)), hsl(0 0% 100% / .03); border-color:hsl(0 0% 100% / .14); box-shadow: 0 26px 60px hsl(0 0% 0% / .45), inset 0 1px 0 hsl(0 0% 100% / .2), inset 0 -1px 0 hsl(0 0% 100% / .06) } :where(html.dark, html.yoga.dark, html.polaris) .home-watermark:after{ background:radial-gradient(125% 95% at calc(var(--sheen-x) + var(--tilt-x) * 16%) calc(var(--sheen-y) + var(--tilt-y) * 11%),hsl(0 0% 100% / .13),hsl(0 0% 100% / .035) 40%,transparent 72%) } :where(html.dark, html.yoga.dark, html.polaris) .home-watermark:before{opacity:.07;mix-blend-mode:soft-light} /* Two small contrast fixes the sweep found: the class pill in the standards tree, and the admin-only "Ny insikt" button. */ :where(html.dark, html.yoga, html.polaris) .tr-cls .tr-id{color:var(--accent-ink)} :where(html.dark, html.yoga, html.polaris) .insikter-pub{color:var(--ink);border-color:var(--line)} /* The client marks follow the appearance like every other card. */ :where(html.dark, html.yoga, html.polaris) .ai-logo{background:var(--card);border-color:var(--line);color:var(--ink)} :where(html.dark, html.yoga, html.polaris) .ai-logo-mark--plate{background:hsl(0 0% 100% / .92)} /* ---- The browser's own chrome ---- color-scheme tells the UA to paint its scrollbars, form controls and the rubber band dark, which is what stops a white flash at the ends of the scroll on a dark page. theme-color, the other half of this, is set from --dark-1 by main.js whenever the appearance changes. */ html.dark, html.yoga.dark, html.polaris{color-scheme:dark} html.yoga:not(.dark){color-scheme:light}