/* ============================================================ URETHANE DESIGN — portable token sheet + generic components App-agnostic. Pair with 05-theme-engine.js, which sets on : data-du-mode = light | dark (auto resolved by the engine) data-du-glass = faithful | modern | flat --du-h = accent hue (inline style, number) No-JS defaults: light + faithful + blue (205). Self-host this file (content-app CSP blocks CDNs). Link it LAST in so it wins cascade ties against app CSS. ============================================================ */ /* ------------------------------------------------------------------ ACCESSIBLE CONTRAST (WCAG 2.x) — measured at hue 205, faithful glass. Body text target >=4.5:1 ; large text / icon glyph target >=3:1. Computed from the HSL token values below (sRGB relative luminance). LIGHT (data-du-mode="light") --du-text on --du-panel ....... 15.02:1 (body PASS) --du-text on --du-page ........ 13.12:1 (body PASS) --du-text on --du-panel2 ...... 14.05:1 (body PASS) --du-muted on --du-panel ........ 6.04:1 (body PASS) --du-muted on --du-page ......... 5.28:1 (body PASS) --du-link on --du-page ......... 6.27:1 (body PASS) --du-link on --du-panel ........ 7.18:1 (body PASS) --du-glyph on --du-face(mid) .... 3.06:1 (large/glyph PASS) DARK (data-du-mode="dark") --du-text on --du-panel ....... 12.70:1 (body PASS) --du-text on --du-page ........ 14.62:1 (body PASS) --du-text on --du-panel2 ...... 11.49:1 (body PASS) --du-muted on --du-panel ........ 5.81:1 (body PASS) --du-muted on --du-page ......... 6.69:1 (body PASS) --du-link on --du-page ......... 9.23:1 (body PASS) --du-link on --du-panel ........ 8.02:1 (body PASS) --du-glyph on --du-face(mid) ... 13.10:1 (large/glyph PASS) FIXED tile glyphs (mode-independent gradients; large glyph, >=3:1). The glyph centroid sits on the bright body bands; only the 1px 45% hard-break stop (the intentional bottom-lit recipe break) dips lower. hot glyph hsl(10 80% 19%) on --du-hot body band 60%L .. 5.06:1 PASS (worst single stop, 45% hard-break ............ 2.56:1) gold glyph hsl(35 90% 18%) on --du-gold body band 60%L .. 6.42:1 PASS (worst single stop, 45% hard-break ............ 3.17:1) ------------------------------------------------------------------ */ /* === TIER: PRIMITIVE === */ :root{ --du-h:205; --du-c:1; --du-base-h: 205; /* P0-02 fixed protected surface hue; du-theme.js sets it to the live base 202, never the picker */ --du-base-c: 1; /* fixed protected surface chroma */ --du-on-accent: hsl(var(--du-h) calc(42% * var(--du-c)) 15%); /* A2 dark etched label ink (tinted, not black) */ --du-accent-label-shadow: 0 -1px 0 hsl(var(--du-h) calc(96% * var(--du-c)) 97% / .8),0 1px 1px hsl(var(--du-h) calc(50% * var(--du-c)) 15% / .32),0 0 1px hsl(var(--du-h) calc(88% * var(--du-c)) 94% / .5); /* light rim + dark depth + thin stroke */ --du-ah: var(--du-h); /* back-compat alias of the live accent hue */ --du-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cg fill='none' stroke='white' stroke-opacity='.14'%3E%3Crect x='11' y='11' width='16' height='16'/%3E%3Crect x='11' y='11' width='16' height='16' transform='rotate(45 19 19)'/%3E%3C/g%3E%3C/svg%3E"); --du-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E"); /* === TIER: SEMANTIC === */ /* light base */ --du-page:hsl(var(--du-base-h) calc(30% * var(--du-base-c)) 93%); --du-panel:hsl(var(--du-base-h) calc(40% * var(--du-base-c)) 99%); --du-panel2:hsl(var(--du-base-h) calc(35% * var(--du-base-c)) 96%); --du-text:hsl(var(--du-base-h) calc(55% * var(--du-base-c)) 14%); --du-muted:hsl(var(--du-base-h) calc(20% * var(--du-base-c)) 38%); --du-line:hsl(var(--du-base-h) calc(28% * var(--du-base-c)) 86%); --du-link:hsl(var(--du-h) calc(80% * var(--du-c)) 31%); --du-glyph:hsl(var(--du-h) calc(62% * var(--du-c)) 21%); --du-gsh:0 -1px 0 hsl(var(--du-h) calc(90% * var(--du-c)) 97% / .6),0 1px 1px hsl(var(--du-h) calc(70% * var(--du-c)) 16% / .35); --du-tsh:0 1px rgb(255 255 255 / .4); --du-psh:0 2px 6px hsl(var(--du-base-h) calc(55% * var(--du-base-c)) 30% / .14); --du-chbev:inset 0 1px hsl(var(--du-h) calc(90% * var(--du-c)) 99% / .85),inset 0 -1px hsl(var(--du-h) calc(92% * var(--du-c)) 92% / .9); --du-tabbg:linear-gradient(180deg,hsl(var(--du-h) calc(32% * var(--du-c)) 86%),hsl(var(--du-h) calc(32% * var(--du-c)) 76%) 44%,hsl(var(--du-h) calc(46% * var(--du-c)) 59%) 45%,hsl(var(--du-h) calc(55% * var(--du-c)) 71%) 100%); --du-tabon:linear-gradient(180deg,#fff,hsl(var(--du-h) calc(50% * var(--du-c)) 92%) 60%,hsl(var(--du-h) calc(65% * var(--du-c)) 96%) 100%); --du-fade:linear-gradient(180deg,hsl(var(--du-h) calc(45% * var(--du-c)) 58% / .10),hsl(var(--du-h) calc(45% * var(--du-c)) 50% / .26)); /* light + faithful glass */ --du-chrome:linear-gradient(180deg,hsl(var(--du-h) calc(80% * var(--du-c)) 97%),hsl(var(--du-h) calc(58% * var(--du-c)) 82%) 44%,hsl(var(--du-h) calc(52% * var(--du-c)) 66%) 45%,hsl(var(--du-h) calc(56% * var(--du-c)) 73%) 76%,hsl(var(--du-h) calc(72% * var(--du-c)) 86%) 100%); --du-face:linear-gradient(180deg,hsl(var(--du-h) calc(85% * var(--du-c)) 98%) 0%,hsl(var(--du-h) calc(35% * var(--du-c)) 85%) 9%,hsl(var(--du-h) calc(35% * var(--du-c)) 74%) 44%,hsl(var(--du-h) calc(55% * var(--du-c)) 49%) 45%,hsl(var(--du-h) calc(58% * var(--du-c)) 57%) 65%,hsl(var(--du-h) calc(68% * var(--du-c)) 71%) 88%,hsl(var(--du-h) calc(90% * var(--du-c)) 86%) 100%); --du-prim:linear-gradient(180deg,hsl(var(--du-h) calc(78% * var(--du-c)) 88%) 0%,hsl(var(--du-h) calc(62% * var(--du-c)) 62%) 9%,hsl(var(--du-h) calc(60% * var(--du-c)) 53%) 44%,hsl(var(--du-h) calc(76% * var(--du-c)) 30%) 45%,hsl(var(--du-h) calc(72% * var(--du-c)) 38%) 65%,hsl(var(--du-h) calc(70% * var(--du-c)) 51%) 88%,hsl(var(--du-h) calc(88% * var(--du-c)) 70%) 100%); --du-edge:hsl(var(--du-h) calc(42% * var(--du-c)) 52%); --du-bev:inset 0 0 0 1px hsl(var(--du-h) calc(85% * var(--du-c)) 96% / .5),inset 0 1px hsl(var(--du-h) calc(90% * var(--du-c)) 99% / .95),inset 0 -1px hsl(var(--du-h) calc(95% * var(--du-c)) 88% / .95),inset 0 -2px hsl(var(--du-h) calc(70% * var(--du-c)) 68% / .45),0 1px 2px hsl(var(--du-h) calc(60% * var(--du-c)) 28% / .25); --du-glow:0 0 9px hsl(var(--du-h) calc(85% * var(--du-c)) 58% / .6); --du-hot:linear-gradient(180deg,hsl(26 100% 90%) 0%,hsl(22 92% 72%) 9%,hsl(20 88% 64%) 44%,hsl(12 85% 42%) 45%,hsl(14 84% 48%) 65%,hsl(20 90% 60%) 88%,hsl(30 100% 75%) 100%); --du-gold:linear-gradient(180deg,hsl(48 100% 88%) 0%,hsl(45 95% 72%) 9%,hsl(42 90% 62%) 44%,hsl(34 85% 42%) 45%,hsl(36 85% 48%) 65%,hsl(42 90% 60%) 88%,hsl(50 100% 76%) 100%); } html[data-du-mode="light"][data-du-glass="modern"]{ --du-chrome:linear-gradient(180deg,hsl(var(--du-h) calc(70% * var(--du-c)) 97%),hsl(var(--du-h) calc(52% * var(--du-c)) 84%) 72%,hsl(var(--du-h) calc(66% * var(--du-c)) 91%) 100%); --du-face:linear-gradient(180deg,hsl(var(--du-h) calc(70% * var(--du-c)) 98%),hsl(var(--du-h) calc(48% * var(--du-c)) 87%) 72%,hsl(var(--du-h) calc(64% * var(--du-c)) 93%) 100%); --du-prim:linear-gradient(180deg,hsl(var(--du-h) calc(72% * var(--du-c)) 58%),hsl(var(--du-h) calc(70% * var(--du-c)) 42%) 72%,hsl(var(--du-h) calc(75% * var(--du-c)) 56%) 100%); --du-edge:hsl(var(--du-h) calc(36% * var(--du-c)) 66%); --du-bev:inset 0 0 0 1px hsl(var(--du-h) calc(85% * var(--du-c)) 96% / .4),inset 0 1px hsl(var(--du-h) calc(90% * var(--du-c)) 99% / .9),inset 0 -1px hsl(var(--du-h) calc(90% * var(--du-c)) 88% / .7),0 1px 2px hsl(var(--du-h) calc(50% * var(--du-c)) 40% / .14); --du-glow:0 0 8px hsl(var(--du-h) calc(80% * var(--du-c)) 62% / .45); } html[data-du-mode="light"][data-du-glass="flat"]{ --du-chrome:hsl(var(--du-h) calc(42% * var(--du-c)) 88%); --du-face:hsl(var(--du-h) calc(40% * var(--du-c)) 97%); --du-prim:hsl(var(--du-h) calc(66% * var(--du-c)) 42%); --du-edge:hsl(var(--du-h) calc(26% * var(--du-c)) 76%); --du-bev:0 0 0 transparent; --du-glow:0 0 0 transparent; --du-hot:hsl(16 80% 48%); --du-gold:hsl(40 85% 50%); } html[data-du-mode="dark"]{ --du-page:hsl(var(--du-base-h) calc(26% * var(--du-base-c)) 9%); --du-panel:hsl(var(--du-base-h) calc(20% * var(--du-base-c)) 14%); --du-panel2:hsl(var(--du-base-h) calc(18% * var(--du-base-c)) 17%); --du-text:hsl(var(--du-base-h) calc(28% * var(--du-base-c)) 91%); --du-muted:hsl(var(--du-base-h) calc(13% * var(--du-base-c)) 62%); --du-line:hsl(var(--du-base-h) calc(17% * var(--du-base-c)) 23%); --du-link:hsl(var(--du-h) calc(82% * var(--du-c)) 72%); --du-glyph:hsl(var(--du-h) calc(38% * var(--du-c)) 90%); --du-on-accent: hsl(var(--du-h) calc(34% * var(--du-c)) 91%); --du-accent-label-shadow: 0 1px 2px rgb(0 0 0 / .55),0 -1px 0 hsl(var(--du-h) calc(50% * var(--du-c)) 68% / .35),0 0 1px rgb(0 0 0 / .4); --du-gsh:0 -1px 0 rgb(0 0 0 / .5),0 1px 2px hsl(var(--du-h) calc(80% * var(--du-c)) 65% / .35); --du-tsh:0 1px rgb(0 0 0 / .4); --du-psh:0 2px 8px rgb(0 0 0 / .45); --du-chbev:inset 0 1px hsl(var(--du-h) calc(40% * var(--du-c)) 72% / .28),inset 0 -1px hsl(var(--du-h) calc(85% * var(--du-c)) 62% / .3); --du-tabbg:linear-gradient(180deg,hsl(var(--du-h) calc(22% * var(--du-c)) 24%),hsl(var(--du-h) calc(24% * var(--du-c)) 18%) 44%,hsl(var(--du-h) calc(32% * var(--du-c)) 11%) 45%,hsl(var(--du-h) calc(42% * var(--du-c)) 19%) 100%); --du-tabon:linear-gradient(180deg,hsl(var(--du-h) calc(26% * var(--du-c)) 34%),hsl(var(--du-h) calc(22% * var(--du-c)) 20%) 70%,hsl(var(--du-h) calc(32% * var(--du-c)) 24%) 100%); --du-fade:linear-gradient(180deg,hsl(var(--du-h) calc(60% * var(--du-c)) 60% / .08),hsl(var(--du-h) calc(60% * var(--du-c)) 55% / .2)); --du-chrome:linear-gradient(180deg,hsl(var(--du-h) calc(32% * var(--du-c)) 31%),hsl(var(--du-h) calc(34% * var(--du-c)) 21%) 44%,hsl(var(--du-h) calc(42% * var(--du-c)) 13%) 45%,hsl(var(--du-h) calc(44% * var(--du-c)) 17%) 76%,hsl(var(--du-h) calc(56% * var(--du-c)) 27%) 100%); --du-face:linear-gradient(180deg,hsl(var(--du-h) calc(32% * var(--du-c)) 42%) 0%,hsl(var(--du-h) calc(26% * var(--du-c)) 29%) 9%,hsl(var(--du-h) calc(28% * var(--du-c)) 23%) 44%,hsl(var(--du-h) calc(46% * var(--du-c)) 12%) 45%,hsl(var(--du-h) calc(46% * var(--du-c)) 16%) 65%,hsl(var(--du-h) calc(56% * var(--du-c)) 26%) 88%,hsl(var(--du-h) calc(72% * var(--du-c)) 40%) 100%); --du-prim:linear-gradient(180deg,hsl(var(--du-h) calc(70% * var(--du-c)) 64%) 0%,hsl(var(--du-h) calc(68% * var(--du-c)) 50%) 9%,hsl(var(--du-h) calc(70% * var(--du-c)) 44%) 44%,hsl(var(--du-h) calc(80% * var(--du-c)) 26%) 45%,hsl(var(--du-h) calc(76% * var(--du-c)) 32%) 65%,hsl(var(--du-h) calc(72% * var(--du-c)) 44%) 88%,hsl(var(--du-h) calc(85% * var(--du-c)) 60%) 100%); --du-edge:hsl(var(--du-h) calc(32% * var(--du-c)) 6%); --du-bev:inset 0 0 0 1px hsl(var(--du-h) calc(45% * var(--du-c)) 70% / .18),inset 0 1px hsl(var(--du-h) calc(45% * var(--du-c)) 76% / .4),inset 0 -1px hsl(var(--du-h) calc(88% * var(--du-c)) 66% / .5),inset 0 -2px hsl(var(--du-h) calc(70% * var(--du-c)) 45% / .35),0 1px 2px rgb(0 0 0 / .5); --du-glow:0 0 9px hsl(var(--du-h) calc(90% * var(--du-c)) 58% / .45); } html[data-du-mode="dark"][data-du-glass="modern"]{ --du-chrome:linear-gradient(180deg,hsl(var(--du-h) calc(26% * var(--du-c)) 23%),hsl(var(--du-h) calc(28% * var(--du-c)) 15%) 75%,hsl(var(--du-h) calc(40% * var(--du-c)) 22%) 100%); --du-face:linear-gradient(180deg,hsl(var(--du-h) calc(22% * var(--du-c)) 28%),hsl(var(--du-h) calc(24% * var(--du-c)) 18%) 75%,hsl(var(--du-h) calc(36% * var(--du-c)) 25%) 100%); --du-prim:linear-gradient(180deg,hsl(var(--du-h) calc(70% * var(--du-c)) 54%),hsl(var(--du-h) calc(72% * var(--du-c)) 38%) 75%,hsl(var(--du-h) calc(76% * var(--du-c)) 50%) 100%); --du-edge:hsl(var(--du-h) calc(28% * var(--du-c)) 6%); --du-bev:inset 0 0 0 1px hsl(var(--du-h) calc(40% * var(--du-c)) 70% / .15),inset 0 1px hsl(var(--du-h) calc(40% * var(--du-c)) 72% / .3),inset 0 -1px hsl(var(--du-h) calc(80% * var(--du-c)) 60% / .35),0 1px 2px rgb(0 0 0 / .35); --du-glow:0 0 8px hsl(var(--du-h) calc(85% * var(--du-c)) 58% / .35); } html[data-du-mode="dark"][data-du-glass="flat"]{ --du-chrome:hsl(var(--du-h) calc(24% * var(--du-c)) 16%); --du-face:hsl(var(--du-h) calc(21% * var(--du-c)) 21%); --du-prim:hsl(var(--du-h) calc(70% * var(--du-c)) 46%); --du-edge:hsl(var(--du-h) calc(18% * var(--du-c)) 26%); --du-bev:0 0 0 transparent; --du-glow:0 0 0 transparent; --du-hot:hsl(16 75% 45%); --du-gold:hsl(40 70% 42%); } /* === TIER: SEMANTIC (typography) === */ :root{ --du-body-size: 16px; --du-body-lh: 1.55; --du-body-track: 0; /* letter-spacing, LTR only */ --du-font-ui: Inter, ui-sans-serif, system-ui, sans-serif; --du-font-ar: "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; } :root:lang(ar), [lang="ar"], [dir="rtl"]{ --du-body-size: 18px; /* ~+12% step-up: Arabic glyphs read smaller at same px */ --du-body-lh: 1.75; /* more leading for stacked harakat / voweled Qur'anic text */ --du-body-track: normal; /* NEVER letter-space cursive Arabic */ } /* === TIER: COMPONENT === */ /* ============ generic components (opt-in classes) ============ */ html{background:var(--du-page)} .du-body{background:var(--du-page);color:var(--du-text)} .du-chrome{background:var(--du-noise),var(--du-chrome);box-shadow:var(--du-chbev);border-bottom:1px solid var(--du-edge);color:var(--du-text);text-shadow:var(--du-tsh)} .du-chrome--hero{background:var(--du-star),var(--du-noise),var(--du-chrome)} html[data-du-glass="flat"] .du-chrome,html[data-du-glass="flat"] .du-chrome--hero{background:var(--du-chrome)} .du-panel{background:var(--du-panel);border:1px solid var(--du-edge);border-radius:9px;box-shadow:var(--du-psh);color:var(--du-text)} .du-panel2{background:var(--du-panel2)} .du-button{display:inline-flex;gap:7px;align-items:center;background:var(--du-face);border:1px solid var(--du-edge);border-radius:7px;box-shadow:var(--du-bev);color:var(--du-on-accent);text-shadow:var(--du-accent-label-shadow);padding:7px 15px;cursor:pointer;transition:box-shadow .15s,filter .15s;text-decoration:none} .du-button:hover{box-shadow:var(--du-bev),var(--du-glow);filter:brightness(1.06)} .du-button:active{transform:translateY(1px);filter:brightness(.93)} .du-button--primary{background:var(--du-prim);color:#fff;text-shadow:0 1px rgb(0 0 0 / .3);position:relative;overflow:hidden} .du-button--primary::after{content:"";position:absolute;top:0;inset-inline-start:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .5),transparent);transform:skewX(-20deg);transition:inset-inline-start .5s;pointer-events:none} .du-button--primary:hover::after{inset-inline-start:120%} .du-tile{width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:var(--du-face);border:1px solid var(--du-edge);box-shadow:var(--du-bev);color:var(--du-on-accent);text-shadow:var(--du-accent-label-shadow);cursor:pointer} .du-tile:hover{box-shadow:var(--du-bev),var(--du-glow);filter:brightness(1.07)} .du-tile:active{transform:translateY(1px);filter:brightness(.92)} .du-tile--hot{background:var(--du-hot);border-color:hsl(14 65% 34%);color:hsl(10 80% 19%);text-shadow:0 -1px 0 hsl(30 100% 88% / .7),0 1px 1px hsl(8 80% 12% / .4)} .du-tile--hot.du-pulse{animation:du-unread 3.2s ease-in-out infinite} .du-tile--gold{background:var(--du-gold);border-color:hsl(34 65% 36%);color:hsl(35 90% 18%);text-shadow:0 -1px 0 hsl(52 100% 88% / .75),0 1px 1px hsl(30 80% 12% / .4)} .du-input{background:var(--du-panel);border:1px solid var(--du-edge);border-radius:7px;color:var(--du-text);padding:6px 11px;box-shadow:inset 0 1px 2px hsl(var(--du-h) calc(40% * var(--du-c)) 35% / .18)} .du-input:focus{border-color:hsl(var(--du-h) calc(70% * var(--du-c)) 50%);box-shadow:0 0 6px hsl(var(--du-h) calc(85% * var(--du-c)) 58% / .4);outline:none} .du-tab{padding:7px 15px 8px;border:1px solid var(--du-edge);border-bottom:none;border-radius:8px 8px 0 0;background:var(--du-tabbg);color:var(--du-text);text-shadow:var(--du-tsh);box-shadow:inset 0 1px hsl(var(--du-h) calc(80% * var(--du-c)) 96% / .5);cursor:pointer} .du-tab:hover{filter:brightness(1.05)} .du-tab.on,.du-tab[aria-selected="true"]{background:var(--du-tabon);box-shadow:var(--du-chbev);font-weight:500} .du-crumb{background:hsl(var(--du-h) calc(50% * var(--du-c)) 52% / .13);padding:2px 10px;border-radius:99px;box-shadow:inset 0 1px hsl(var(--du-h) calc(80% * var(--du-c)) 94% / .5);color:var(--du-muted)} .du-pill{font-size:11px;padding:1px 8px;border-radius:99px;font-weight:500} .du-pill--new{background:linear-gradient(180deg,hsl(22 95% 70%),hsl(12 82% 46%) 60%,hsl(20 90% 58%));color:#fff;text-shadow:0 1px rgb(0 0 0 / .25);box-shadow:inset 0 1px rgb(255 255 255 / .5),inset 0 -1px hsl(28 100% 70% / .7)} .du-pill--mod{background:linear-gradient(180deg,hsl(145 55% 52%),hsl(148 65% 28%) 60%,hsl(143 55% 42%));color:#fff;text-shadow:0 1px rgb(0 0 0 / .25);box-shadow:inset 0 1px rgb(255 255 255 / .45),inset 0 -1px hsl(140 80% 60% / .6)} .du-quote{border-inline-start:3px solid hsl(var(--du-h) calc(60% * var(--du-c)) 55%);background:linear-gradient(180deg,hsl(var(--du-h) calc(55% * var(--du-c)) 50% / .06),hsl(var(--du-h) calc(55% * var(--du-c)) 50% / .14));box-shadow:inset 0 1px hsl(var(--du-h) calc(80% * var(--du-c)) 92% / .4);padding:7px 11px;color:var(--du-text);border-radius:0} .du-row-hover:hover{background:var(--du-fade)} .du-fade--gold{background:linear-gradient(180deg,hsl(42 95% 60% / .12),hsl(42 95% 55% / .3))} .du-fade--red{background:linear-gradient(180deg,hsl(8 75% 50% / .12),hsl(8 75% 45% / .26))} .du-dot{width:7px;height:7px;border-radius:50%;background:hsl(135 70% 45%);box-shadow:0 0 0 0 hsl(135 70% 45% / .5);animation:du-pulse 2.2s infinite} @keyframes du-unread{50%{box-shadow:var(--du-bev),0 0 8px hsl(18 92% 55% / .55)}} @keyframes du-pulse{70%{box-shadow:0 0 0 6px transparent}} @media (prefers-reduced-motion:reduce){ .du-tile--hot.du-pulse,.du-dot{animation:none} .du-button--primary::after{display:none} } /* ============ THEME ORB TILE (Plan 002 nav) ============ A glass TILE holding a split orb: LEFT half = light-mode surface->accent, RIGHT half = dark-mode surface->accent, tinted by the live accent hue (hsl(var(--du-h) ...)), white seam + marble-glass highlight. Rendered by du-theme.js into #du-theme-slot / .du-theme-mount. */ .du-theme-tile{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--du-face);box-shadow:var(--du-bev);border:1px solid var(--du-edge);flex:0 0 auto;cursor:pointer;padding:0} .du-theme-tile:hover{box-shadow:var(--du-bev),var(--du-glow);filter:brightness(1.04)} .du-theme-tile:focus-visible{outline:none;box-shadow:var(--du-bev),0 0 0 3px var(--du-link)} .du-theme-tile.mini{width:34px;height:34px;border-radius:9px} .du-theme-orb{position:relative;width:28px;height:28px;border-radius:50%;overflow:hidden;flex:0 0 auto; border:1px solid hsl(var(--du-h) calc(58% * var(--du-c)) 32%);box-shadow:0 1px 2px rgb(0 0 0 / .3); background:linear-gradient(180deg, hsl(var(--du-h) calc(36% * var(--du-c)) 91%), hsl(var(--du-h) calc(56% * var(--du-c)) 74%) 46%, hsl(var(--du-h) calc(80% * var(--du-c)) 50%) 80%, hsl(var(--du-h) calc(86% * var(--du-c)) 44%)) left/50% 100% no-repeat, linear-gradient(180deg, hsl(var(--du-h) calc(28% * var(--du-c)) 15%), hsl(var(--du-h) calc(42% * var(--du-c)) 24%) 46%, hsl(var(--du-h) calc(80% * var(--du-c)) 42%) 80%, hsl(var(--du-h) calc(86% * var(--du-c)) 36%)) right/50% 100% no-repeat} .du-theme-tile.mini .du-theme-orb{width:22px;height:22px} .du-theme-orb::before{content:"";position:absolute;left:50%;top:8%;bottom:8%;width:1.5px;transform:translateX(-50%);border-radius:2px;z-index:3; background:rgb(255 255 255 / .62);box-shadow:0 0 3px rgb(255 255 255 / .4)} .du-theme-orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2; background:radial-gradient(52% 40% at 35% 19%, rgb(255 255 255 / .8), rgb(255 255 255 / .12) 42%, transparent 62%),radial-gradient(125% 95% at 50% 128%, rgb(0 0 0 / .45), transparent 52%); box-shadow:inset 0 1px 1px rgb(255 255 255 / .5), inset 0 -5px 8px rgb(0 0 0 / .38)}