/* S1079 (owner 2026-10-04): "add more graphics, they should have more depth, better design architecture - make it more solid and depth in the theme". A layer over S1077 (homepage-depth-glass.css), linked straight after it. 1 Material. The S1077 glass becomes solid porcelain. Its tokens are redefined here (same selectors, later in the cascade), so every card family changes in one place: near-opaque fills, a top light, a visible base edge and grounded warm shadows. Backdrop blur is switched off: behind an opaque fill it shows nothing, and it cost scroll frames. 2 Graphics. The shared SVG language of the bento scenes (homepage-bento-pack.js) and the membership vignettes (index.html): the colour tokens for both themes, the stage each graphic stands on, and the generator's classes. The gradient stops and shadow floods live in one hidden and take their colours from these tokens. 3 Sections. The drill console gets a drill-core graphic; the Quinn console stands on an indigo stage; the actual-output screenshots get a mat and a sheet behind; the data-flow diagram's dark nodes become porcelain in the light theme (owner 2026-06-19: dark sections become light in bright mode). No layout shift: every graphic box is sized here (aspect-ratio or a fixed height) before its SVG paints. */ /* ============================================================ 1. material */ :root { --dg-fill-1: rgb(255 253 249 / .97); --dg-fill-2: rgb(255 253 249 / .96); --dg-fill-3: rgb(255 255 255 / .95); --dg-sheen: linear-gradient(180deg, rgb(255 255 255 / .85) 0%, rgb(255 255 255 / 0) 38%); --dg-edge: rgb(255 255 255 / 1); --dg-base: rgb(96 70 40 / .16); --dg-edge-soft: rgb(255 255 255 / .55); --dg-rim: rgb(120 98 66 / .24); --dg-shadow-1: 0 1px 1px rgb(96 70 40 / .12), 0 6px 12px -5px rgb(96 70 40 / .15), 0 26px 50px -22px rgb(96 70 40 / .38), 0 64px 120px -56px rgb(55 48 163 / .32); --dg-shadow-2: 0 1px 1px rgb(96 70 40 / .12), 0 4px 9px -4px rgb(96 70 40 / .15), 0 18px 36px -16px rgb(96 70 40 / .32), 0 48px 90px -48px rgb(55 48 163 / .26); --dg-shadow-3: 0 1px 1px rgb(96 70 40 / .12), 0 4px 8px -4px rgb(96 70 40 / .15), 0 14px 26px -14px rgb(96 70 40 / .30); --dg-shadow-up: 0 2px 2px rgb(96 70 40 / .10), 0 8px 16px -6px rgb(96 70 40 / .16), 0 30px 56px -22px rgb(96 70 40 / .36), 0 76px 130px -60px rgb(55 48 163 / .36); } html[data-theme="dark"] { --dg-fill-1: rgb(27 24 22 / .96); --dg-fill-2: rgb(27 24 22 / .95); --dg-fill-3: rgb(35 31 28 / .94); --dg-sheen: linear-gradient(180deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / 0) 40%); --dg-edge: rgb(255 255 255 / .13); --dg-base: rgb(0 0 0 / .55); --dg-edge-soft: rgb(255 255 255 / .05); --dg-rim: rgb(255 255 255 / .10); --dg-shadow-1: 0 1px 1px rgb(0 0 0 / .35), 0 20px 40px -18px rgb(0 0 0 / .70), 0 56px 104px -52px rgb(79 70 229 / .36); --dg-shadow-2: 0 1px 1px rgb(0 0 0 / .32), 0 16px 32px -16px rgb(0 0 0 / .64), 0 38px 76px -42px rgb(79 70 229 / .28); --dg-shadow-3: 0 1px 1px rgb(0 0 0 / .30), 0 10px 20px -11px rgb(0 0 0 / .60); --dg-shadow-up: 0 2px 2px rgb(0 0 0 / .32), 0 28px 52px -20px rgb(0 0 0 / .76), 0 70px 124px -56px rgb(79 70 229 / .48); } /* same selector lists as S1077, so these win by order alone */ html[data-theme] :is(.ws, .pro-terminal, .pricing-compare, .video-card, .qt-mining-panel, .qvstrip-inner, .dg-sheet, .qt-bento-card, .qm-card, .inst-card, .voice, .trusted-card, .infra-col, .pro-panel, .price-card:not(.recommended), .istat, .trust-stat, .qt-stat, .metric, .qt-mining-table), html[data-theme] #vs-ai-chat .aicmp-table, html[data-theme] #vs-ai-chat table { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (prefers-reduced-transparency: reduce) { :root { --dg-fill-1: rgb(255 253 249); --dg-fill-2: rgb(255 253 249); --dg-fill-3: rgb(255 255 255); } html[data-theme="dark"] { --dg-fill-1: rgb(27 24 22); --dg-fill-2: rgb(27 24 22); --dg-fill-3: rgb(35 31 28); } } /* ============================================================ 2. graphics: tokens */ :root { --qs-stage-hi: #FFFFFF; --qs-stage-mid: #F6F1E8; --qs-stage-lo: #EDE5D7; --qs-stage-rule: rgb(96 70 40 / .12); --qs-dot: rgb(96 70 40 / .085); --qs-paper-hi: #FFFFFF; --qs-paper-lo: #F7F2EA; --qs-paper2-hi: #FAF6EF; --qs-paper2-lo: #EEE7DA; --qs-side: #D8CCB6; --qs-edge: rgb(96 70 40 / .22); --qs-hl: rgb(255 255 255 / .95); --qs-ink: #1C1712; --qs-mut: #544C42; --qs-fnt: #6B6156; --qs-line: rgb(96 70 40 / .10); --qs-line2: rgb(96 70 40 / .22); --qs-acc: #4F46E5; --qs-acc-hi: #6A63F0; --qs-acc-lo: #3B33C4; --qs-acc-ink: #3F38C9; --qs-acc-soft: rgb(79 70 229 / .11); --qs-acc-soft2: rgb(79 70 229 / .30); --qs-acc-line: rgb(79 70 229 / .30); --qs-gold-hi: #FCC64A; --qs-gold-lo: #D97706; --qs-gold-ink: #94560A; --qs-gold-soft: rgb(217 119 6 / .12); --qs-gold-line: rgb(217 119 6 / .34); --qs-green-hi: #34B36A; --qs-green-lo: #15803D; --qs-green-ink: #15703A; --qs-green-soft: rgb(21 128 61 / .11); --qs-green-line: rgb(21 128 61 / .30); --qs-red-hi: #E25555; --qs-red-lo: #B91C1C; --qs-red-ink: #A51D1D; --qs-red-soft: rgb(185 28 28 / .09); --qs-red-line: rgb(185 28 28 / .28); --qs-teal-hi: #1E9BB8; --qs-teal-lo: #0E7490; --qs-teal-ink: #0B6178; --qs-teal-soft: rgb(14 116 144 / .11); --qs-teal-line: rgb(14 116 144 / .30); --qs-maple-hi: #C2353B; --qs-maple-lo: #7F1D1D; --qs-navy-hi: #2B4A8F; --qs-navy-lo: #172554; --qs-foil: #E9C46A; --qs-hub-hi: #5B54E8; --qs-hub-lo: #27236F; --qs-shadow: #5A4026; --qs-sh-k: .16; --qs-sh-a: .14; --qs-floor: rgb(90 64 38 / .20); --qs-rtop: #E9E1D1; --qs-rk0: #D8C9AE; --qs-rk1: #D0C8BA; --qs-rk2: #C2BAAC; --qs-rk3: #ADA496; --qs-rk4: #938A7D; --qs-rs0: #C3B394; --qs-rs1: #B9B0A1; --qs-rs2: #AAA193; --qs-rs3: #958C7E; --qs-rs4: #7D7568; --qs-grain: rgb(70 52 32 / .22); } html[data-theme="dark"] { --qs-stage-hi: #1E2335; --qs-stage-mid: #161A28; --qs-stage-lo: #10131E; --qs-stage-rule: rgb(255 255 255 / .07); --qs-dot: rgb(255 255 255 / .05); --qs-paper-hi: #2A3044; --qs-paper-lo: #1F2434; --qs-paper2-hi: #232839; --qs-paper2-lo: #1A1E2C; --qs-side: #0B0D15; --qs-edge: rgb(255 255 255 / .12); --qs-hl: rgb(255 255 255 / .12); --qs-ink: #F0EBE0; --qs-mut: #B9BECC; --qs-fnt: #8D96B0; --qs-line: rgb(255 255 255 / .08); --qs-line2: rgb(255 255 255 / .18); --qs-acc: #818CF8; --qs-acc-hi: #8B95FA; --qs-acc-lo: #5850EC; --qs-acc-ink: #A5B4FC; --qs-acc-soft: rgb(129 140 248 / .16); --qs-acc-soft2: rgb(129 140 248 / .38); --qs-acc-line: rgb(129 140 248 / .36); --qs-gold-hi: #FCD34D; --qs-gold-lo: #F59E0B; --qs-gold-ink: #FBBF24; --qs-gold-soft: rgb(251 191 36 / .14); --qs-gold-line: rgb(251 191 36 / .34); --qs-green-hi: #4ADE80; --qs-green-lo: #16A34A; --qs-green-ink: #4ADE80; --qs-green-soft: rgb(74 222 128 / .13); --qs-green-line: rgb(74 222 128 / .32); --qs-red-hi: #F87171; --qs-red-lo: #DC2626; --qs-red-ink: #F87171; --qs-red-soft: rgb(248 113 113 / .12); --qs-red-line: rgb(248 113 113 / .32); --qs-teal-hi: #22D3EE; --qs-teal-lo: #0891B2; --qs-teal-ink: #67E8F9; --qs-teal-soft: rgb(34 211 238 / .12); --qs-teal-line: rgb(34 211 238 / .32); --qs-shadow: #000000; --qs-sh-k: .45; --qs-sh-a: .42; --qs-floor: rgb(0 0 0 / .45); --qs-rtop: #3A4053; --qs-rk0: #343A4C; --qs-rk1: #2D3343; --qs-rk2: #272C3B; --qs-rk3: #222634; --qs-rk4: #1B1E2A; --qs-rs0: #2A2F3E; --qs-rs1: #242837; --qs-rs2: #1F2230; --qs-rs3: #1A1D29; --qs-rs4: #151722; --qs-grain: rgb(255 255 255 / .10); } /* the shared defs: colours of the gradient stops and the shadow floods */ #qs-defs .qs-s-paper-hi { stop-color: var(--qs-paper-hi); } #qs-defs .qs-s-paper-lo { stop-color: var(--qs-paper-lo); } #qs-defs .qs-s-paper2-hi { stop-color: var(--qs-paper2-hi); } #qs-defs .qs-s-paper2-lo { stop-color: var(--qs-paper2-lo); } #qs-defs .qs-s-acc-hi { stop-color: var(--qs-acc-hi); } #qs-defs .qs-s-acc-lo { stop-color: var(--qs-acc-lo); } #qs-defs .qs-s-gold-hi { stop-color: var(--qs-gold-hi); } #qs-defs .qs-s-gold-lo { stop-color: var(--qs-gold-lo); } #qs-defs .qs-s-green-hi { stop-color: var(--qs-green-hi); } #qs-defs .qs-s-green-lo { stop-color: var(--qs-green-lo); } #qs-defs .qs-s-red-hi { stop-color: var(--qs-red-hi); } #qs-defs .qs-s-red-lo { stop-color: var(--qs-red-lo); } #qs-defs .qs-s-teal-hi { stop-color: var(--qs-teal-hi); } #qs-defs .qs-s-teal-lo { stop-color: var(--qs-teal-lo); } #qs-defs .qs-s-maple-hi { stop-color: var(--qs-maple-hi); } #qs-defs .qs-s-maple-lo { stop-color: var(--qs-maple-lo); } #qs-defs .qs-s-navy-hi { stop-color: var(--qs-navy-hi); } #qs-defs .qs-s-navy-lo { stop-color: var(--qs-navy-lo); } #qs-defs .qs-s-hub-hi { stop-color: var(--qs-hub-hi); } #qs-defs .qs-s-hub-lo { stop-color: var(--qs-hub-lo); } #qs-defs .qs-s-area-hi { stop-color: var(--qs-acc); stop-opacity: .20; } #qs-defs .qs-s-area-lo { stop-color: var(--qs-acc); stop-opacity: 0; } #qs-defs .qs-s-floor { stop-color: var(--qs-shadow); stop-opacity: var(--qs-sh-a); } #qs-defs .qs-s-floor0 { stop-color: var(--qs-shadow); stop-opacity: 0; } #qs-defs .qs-s-halo { stop-color: var(--qs-gold-hi); stop-opacity: .55; } #qs-defs .qs-s-halo0 { stop-color: var(--qs-gold-hi); stop-opacity: 0; } #qs-defs .qs-s-halo-acc { stop-color: var(--qs-acc); stop-opacity: .30; } #qs-defs .qs-s-halo-acc0 { stop-color: var(--qs-acc); stop-opacity: 0; } #qs-defs .qs-hatch-bg { fill: var(--qs-paper2-lo); } #qs-defs .qs-hatch-fg { fill: var(--qs-fnt); } #qs-defs .qs-fk { flood-color: var(--qs-shadow); flood-opacity: var(--qs-sh-k); } #qs-defs .qs-fa { flood-color: var(--qs-shadow); flood-opacity: var(--qs-sh-a); } /* ============================================================ 2. graphics: the generator's classes */ .qs { display: block; overflow: visible; } .qs text { font-kerning: normal; } .qs .qs-m { font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; } .qs .qs-s { font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif; } .qs .qs-i { font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; font-style: italic; } .qs .qs-ink { fill: var(--qs-ink); } .qs .qs-mut { fill: var(--qs-mut); } .qs .qs-fnt { fill: var(--qs-fnt); } .qs .qs-white { fill: #FFFFFF; } .qs .qs-acc-t { fill: var(--qs-acc-ink); } .qs .qs-gold-t { fill: var(--qs-gold-ink); } .qs .qs-green-t { fill: var(--qs-green-ink); } .qs .qs-red-t { fill: var(--qs-red-ink); } /* solid tiles */ .qs .qs-side { fill: var(--qs-side); } .qs .qs-face { stroke: var(--qs-edge); stroke-width: .8; } .qs .qs-pa { fill: url(#qs-g-paper) var(--qs-paper-lo); } .qs .qs-pb { fill: url(#qs-g-paper2) var(--qs-paper2-lo); } .qs .qs-hl { fill: none; stroke: var(--qs-hl); stroke-width: 1; stroke-linecap: round; } .qs .qs-face.qs-sel { stroke: var(--qs-acc); stroke-width: 1.4; } .qs .qs-ghost { fill: none; stroke: var(--qs-line2); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; } /* fills */ .qs .qs-ac { fill: url(#qs-g-acc) var(--qs-acc); } .qs .qs-acs { fill: var(--qs-acc-soft); } .qs .qs-acs2 { fill: var(--qs-acc-soft2); } .qs .qs-gd { fill: url(#qs-g-gold) var(--qs-gold-lo); } .qs .qs-gds { fill: var(--qs-gold-soft); } .qs .qs-gr { fill: url(#qs-g-green) var(--qs-green-lo); } .qs .qs-grs { fill: var(--qs-green-soft); } .qs .qs-rd { fill: url(#qs-g-red) var(--qs-red-lo); } .qs .qs-rds { fill: var(--qs-red-soft); } .qs .qs-tl { fill: url(#qs-g-teal) var(--qs-teal-lo); } .qs .qs-ln { fill: var(--qs-line); } .qs .qs-ln2 { fill: var(--qs-line2); } .qs .qs-white-b { fill: rgb(255 255 255 / .85); } .qs .qs-hatch { fill: url(#qs-p-hatch) var(--qs-line2); stroke: var(--qs-line2); stroke-width: .8; } .qs .qs-floor { fill: url(#qs-g-floor) transparent; } .qs .qs-halo { fill: url(#qs-g-halo) transparent; } .qs .qs-halo-acc { fill: url(#qs-g-halo-acc) transparent; } .qs .qs-area { fill: url(#qs-g-area) transparent; } /* chips */ .qs .qs-chip { stroke-width: .8; } .qs .qs-ch-acc { fill: var(--qs-acc-soft); stroke: var(--qs-acc-line); } .qs .qs-cht-acc { fill: var(--qs-acc-ink); } .qs .qs-ch-gold { fill: var(--qs-gold-soft); stroke: var(--qs-gold-line); } .qs .qs-cht-gold { fill: var(--qs-gold-ink); } .qs .qs-ch-green { fill: var(--qs-green-soft); stroke: var(--qs-green-line); } .qs .qs-cht-green { fill: var(--qs-green-ink); } .qs .qs-ch-red { fill: var(--qs-red-soft); stroke: var(--qs-red-line); } .qs .qs-cht-red { fill: var(--qs-red-ink); } .qs .qs-ch-teal { fill: var(--qs-teal-soft); stroke: var(--qs-teal-line); } .qs .qs-cht-teal { fill: var(--qs-teal-ink); } .qs .qs-ch-neu { fill: url(#qs-g-paper) var(--qs-paper-lo); stroke: var(--qs-edge); } .qs .qs-cht-neu { fill: var(--qs-mut); } .qs .qs-ch-solid { fill: url(#qs-g-acc) var(--qs-acc); stroke: var(--qs-acc-lo); } .qs .qs-cht-solid { fill: #FFFFFF; } /* strokes and lines */ .qs .qs-st-fnt { stroke: var(--qs-line2); stroke-width: 1; fill: none; } .qs .qs-st-edge { stroke: var(--qs-edge); stroke-width: .8; fill: none; } .qs .qs-st-acc { stroke: var(--qs-acc); stroke-width: 1.2; fill: none; } .qs .qs-st-teal { stroke: var(--qs-teal-lo); stroke-width: 1.2; fill: none; } .qs .qs-dash { stroke: var(--qs-line2); stroke-width: 1; stroke-dasharray: 2 3; } .qs .qs-arrow { fill: none; stroke: var(--qs-fnt); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .qs .qs-leader { fill: none; stroke: var(--qs-acc); stroke-width: 1.2; stroke-dasharray: 3 3; } .qs .qs-link { fill: none; stroke: var(--qs-acc); stroke-width: 1.1; stroke-dasharray: 2.5 2.5; opacity: .8; } .qs .qs-bridge { stroke: var(--qs-acc-line); stroke-width: 2; } .qs .qs-disc-edge { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 1; } .qs .qs-par { stroke: var(--qs-line2); stroke-width: 1; stroke-dasharray: 3 3; } .qs .qs-spread { fill: none; stroke: var(--qs-acc); stroke-width: 2; stroke-linecap: round; } .qs .qs-spk-acc { fill: none; stroke: var(--qs-acc); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .qs .qs-spk-teal { fill: none; stroke: var(--qs-teal-lo); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .qs .qs-spk-green { fill: none; stroke: var(--qs-green-lo); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .qs .qs-tick { fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .qs .qs-pip { fill: none; stroke: var(--qs-line2); stroke-width: 1.4; } .qs .qs-cell { fill: var(--qs-line); } .qs .qs-cell-on { fill: var(--qs-green-soft); stroke: var(--qs-green-line); stroke-width: .8; } .qs .qs-cell-mark { fill: var(--qs-acc-soft); } .qs .qs-cluster { fill: var(--qs-acc-soft); stroke: var(--qs-acc); stroke-width: 1; stroke-dasharray: 3 2.5; opacity: .9; } .qs .qs-select { fill: none; stroke: var(--qs-acc); stroke-width: 1.4; stroke-dasharray: 4 3; } .qs .qs-select-ring { fill: none; stroke: var(--qs-acc); stroke-width: 1.4; } .qs .qs-url { fill: var(--qs-line); } .qs .qs-input { fill: var(--qs-line); stroke: var(--qs-edge); stroke-width: .8; } .qs .qs-caret { fill: var(--qs-acc); } .qs .qs-dot-r { fill: #E0716A; } .qs .qs-dot-a { fill: #E5B454; } .qs .qs-dot-g { fill: #6CBF79; } /* drill block */ .qs .qs-rtop { fill: var(--qs-rtop); } .qs .qs-rk0 { fill: var(--qs-rk0); } .qs .qs-rk1 { fill: var(--qs-rk1); } .qs .qs-rk2 { fill: var(--qs-rk2); } .qs .qs-rk3 { fill: var(--qs-rk3); } .qs .qs-rk4 { fill: var(--qs-rk4); } .qs .qs-rs0 { fill: var(--qs-rs0); } .qs .qs-rs1 { fill: var(--qs-rs1); } .qs .qs-rs2 { fill: var(--qs-rs2); } .qs .qs-rs3 { fill: var(--qs-rs3); } .qs .qs-rs4 { fill: var(--qs-rs4); } .qs .qs-grain { fill: var(--qs-grain); } .qs .qs-blk-edge { fill: none; stroke: rgb(60 44 26 / .28); stroke-width: .8; stroke-linejoin: round; } html[data-theme="dark"] .qs .qs-blk-edge { stroke: rgb(255 255 255 / .10); } .qs .qs-rig { fill: none; stroke: var(--qs-acc-lo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .qs .qs-hole { stroke: var(--qs-ink); stroke-width: 2; stroke-dasharray: 5 3; opacity: .55; } .qs .qs-iv-hot { stroke: url(#qs-g-gold) var(--qs-gold-lo); stroke-width: 7; stroke-linecap: round; } .qs .qs-iv-warm { stroke: var(--qs-gold-hi); stroke-width: 5.5; stroke-linecap: round; opacity: .85; } /* sharia, insider, tax */ .qs .qs-pages { fill: var(--qs-paper2-hi); stroke: var(--qs-edge); stroke-width: .6; } .qs .qs-pageline { stroke: var(--qs-line2); stroke-width: .5; } .qs .qs-maple { fill: url(#qs-g-maple) var(--qs-maple-lo); } .qs .qs-navy { fill: url(#qs-g-navy) var(--qs-navy-lo); } .qs .qs-cover-edge { fill: none; stroke: rgb(0 0 0 / .25); stroke-width: .8; } .qs .qs-spine { stroke: rgb(0 0 0 / .22); stroke-width: 1.2; } .qs .qs-foil { fill: var(--qs-foil); } .qs .qs-foil-ring { fill: none; stroke: var(--qs-foil); stroke-width: 1.1; opacity: .9; } .qs .qs-treaty { fill: none; stroke: var(--qs-gold-lo); stroke-width: 1.5; stroke-dasharray: 4 3; } .qs .qs-buy { stroke: var(--qs-green-lo); stroke-width: 2.2; stroke-linecap: round; } .qs .qs-sell { stroke: var(--qs-red-lo); stroke-width: 2.2; stroke-linecap: round; } /* vignettes */ .qs .qs-knob { fill: #FFFFFF; } .qs .qs-up { fill: none; stroke: var(--qs-green-lo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .qs .qs-dim { opacity: .35; } .qs .qs-arc-r { fill: none; stroke: var(--qs-red-hi); stroke-width: 9; } .qs .qs-arc-a { fill: none; stroke: var(--qs-gold-hi); stroke-width: 9; } .qs .qs-arc-n { fill: none; stroke: var(--qs-line2); stroke-width: 9; } .qs .qs-arc-l { fill: none; stroke: var(--qs-green-hi); stroke-width: 9; opacity: .6; } .qs .qs-arc-g { fill: none; stroke: var(--qs-green-lo); stroke-width: 9; } .qs .qs-needle { stroke: var(--qs-ink); stroke-width: 2.4; stroke-linecap: round; } .qs .qs-hub { fill: var(--qs-ink); } .qs .qs-doc { fill: none; stroke: var(--qs-acc); stroke-width: 1.2; } .qs .qs-track { stroke: var(--qs-line2); stroke-width: 3; stroke-linecap: round; } .qs .qs-track-on { stroke: var(--qs-acc); stroke-width: 3; stroke-linecap: round; } .qs .qs-ring { fill: var(--qs-paper-hi); stroke: var(--qs-fnt); stroke-width: 1.6; } .qs .qs-lane { fill: var(--qs-line); stroke: var(--qs-edge); stroke-width: .6; } .qs .qs-tab { fill: var(--qs-line); } .qs .qs-curve { fill: none; stroke: var(--qs-acc); stroke-width: 2; stroke-linecap: round; } .qs .qs-curve-old { fill: none; stroke: var(--qs-fnt); stroke-width: 1.5; stroke-dasharray: 3 3; stroke-linecap: round; } .qs .qs-hz-g2 { fill: var(--qs-green-lo); } .qs .qs-hz-g1 { fill: var(--qs-green-hi); opacity: .55; } .qs .qs-hz-n { fill: var(--qs-line2); } .qs .qs-hz-r1 { fill: var(--qs-red-hi); opacity: .5; } .qs .qs-hz-r2 { fill: var(--qs-red-lo); } .qs .qs-dotp { fill: var(--qs-acc); opacity: .55; } .qs .qs-fit { stroke: var(--qs-acc); stroke-width: 1.4; stroke-linecap: round; } .qs .qs-step { fill: none; stroke: var(--qs-acc); stroke-width: 1.8; stroke-linejoin: round; } .qs .qs-target { stroke: var(--qs-ink); stroke-width: 1.4; } .qs .qs-st-acc-w { fill: none; stroke: var(--qs-acc); stroke-width: 7; } .qs .qs-st-teal-w { fill: none; stroke: var(--qs-teal-lo); stroke-width: 7; } .qs .qs-st-gold-w { fill: none; stroke: var(--qs-gold-lo); stroke-width: 7; } /* motion: one gentle pulse per graphic, never on a filtered element */ .qs .qs-pulse { transform-box: fill-box; transform-origin: center; animation: qs-pulse 2.8s ease-in-out infinite; } @keyframes qs-pulse { 0%, 100% { transform: scale(.7); opacity: .25; } 50% { transform: scale(1.15); opacity: 1; } } .qs .qs-caret { animation: qs-caret 1.1s steps(1) infinite; } @keyframes qs-caret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .qs .qs-pulse, .qs .qs-caret { animation: none; } .qs animateMotion { display: none; } } /* ============================================================ 2. graphics: where they stand */ /* the stage: a lit workbench with a faint dot grid; the graphic's objects cast their shadows onto it */ html[data-theme] .qt-bento-card .qt-bento-viz, html[data-theme] .qmemb .qm-card .qm-viz { position: relative; display: block; width: auto; overflow: hidden; background: radial-gradient(130% 120% at 50% 0%, var(--qs-stage-hi) 0%, var(--qs-stage-mid) 52%, var(--qs-stage-lo) 100%) !important; box-shadow: inset 0 -1px 0 var(--qs-stage-rule); } html[data-theme] .qt-bento-card .qt-bento-viz::before, html[data-theme] .qmemb .qm-card .qm-viz::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--qs-dot) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(85% 90% at 50% 35%, #000 25%, transparent 100%); mask-image: radial-gradient(85% 90% at 50% 35%, #000 25%, transparent 100%); } html[data-theme] .qt-bento-card .qt-bento-viz > svg, html[data-theme] .qmemb .qm-card .qm-viz > svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; } /* (max-width: none: the page's reset "img, svg { max-width: 100% }" would clamp the wider-than-the-box crops below) */ /* bento: the scene is the card's full-bleed header */ html[data-theme] .qt-bento-card .qt-bento-viz { height: auto; aspect-ratio: 600 / 230; margin: -26px -24px 4px; border-radius: 17px 17px 0 0; } html[data-theme] .qt-bento-card:is([data-card="sharia"], [data-card="insider"], [data-card="tax"]) .qt-bento-viz { aspect-ratio: 400 / 230; } @media (min-width: 981px) { /* the full-width Quinn card: words on the left, the scene on the right */ html[data-theme] .qt-bento-card[data-card="quinn"] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: 44px; row-gap: 0; min-height: 360px; padding-left: 36px; } html[data-theme] .qt-bento-card[data-card="quinn"] > .qt-bento-viz { grid-column: 2; grid-row: 1 / -1; aspect-ratio: auto; height: auto; align-self: stretch; margin: -26px -24px -24px 0; border-radius: 0 17px 17px 0; box-shadow: inset 1px 0 0 var(--qs-stage-rule); } html[data-theme] .qt-bento-card[data-card="quinn"] > .qt-bento-tag { grid-column: 1; grid-row: 2; margin-bottom: 16px; justify-self: start; } html[data-theme] .qt-bento-card[data-card="quinn"] > .qt-bento-title { grid-column: 1; grid-row: 3; margin-bottom: 12px; font-size: clamp(26px, 2.5vw, 34px); } html[data-theme] .qt-bento-card[data-card="quinn"] > .qt-bento-blurb { grid-column: 1; grid-row: 4; margin-bottom: 20px; font-size: 15px; max-width: 42ch; } html[data-theme] .qt-bento-card[data-card="quinn"] > .qt-bento-cta { grid-column: 1; grid-row: 5; } } @media (max-width: 980px) { /* narrow cards show the centre of the wide scenes (everything that matters is drawn there) */ html[data-theme] .qt-bento-card .qt-bento-viz { aspect-ratio: 400 / 230; } html[data-theme] .qt-bento-card:is([data-card="drill"], [data-card="arb"]) .qt-bento-viz > svg { left: -25%; width: 150%; } html[data-theme] .qt-bento-card[data-card="quinn"] .qt-bento-viz > svg { left: -21.15%; width: 142.31%; } } /* membership cards: the vignette is the card's full-bleed header; the icon tile is raised */ html[data-theme] .qmemb .qm-card .qm-viz { height: 116px; margin: -18px -20px 14px; border-radius: 13px 13px 0 0; } /* bug fix (live before S1079): the grid's tablet and phone rules (.qm-grid, (0,1,0)) lost to its desktop rule (.qmemb .qm-grid, (0,2,0)), so below 1100px it stayed six columns of ~174px: cards ran off-screen and at 820-1100px the page scrolled sideways (document 1243-1251px wide). Two columns to 641px, then one; an odd last card takes the row. */ @media (max-width: 1100px) { html[data-theme] .qmemb .qm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme] .qmemb .qm-grid > .qm-card { grid-column: span 1; } html[data-theme] .qmemb .qm-grid > .qm-card:last-child:nth-child(odd) { grid-column: 1 / -1; } html[data-theme] .qmemb .qm-grid > .qm-card:not(:last-child:nth-child(odd)) .qm-viz.qm-viz-wide > svg { left: -23.68%; width: 147.37%; } html[data-theme] .qmemb .qm-deep { overflow-wrap: anywhere; } } @media (max-width: 640px) { html[data-theme] .qmemb .qm-grid { grid-template-columns: minmax(0, 1fr); } html[data-theme] .qmemb .qm-card .qm-viz.qm-viz-wide > svg { left: -23.68%; width: 147.37%; } } html[data-theme] .qmemb .qm-card .qm-ic { background: linear-gradient(180deg, #FFFFFF 0%, #ECEBFF 100%) !important; border: 1px solid rgb(79 70 229 / .18); box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 1px rgb(55 48 163 / .10), 0 5px 12px -5px rgb(55 48 163 / .35); } html[data-theme="dark"] .qmemb .qm-card .qm-ic { background: linear-gradient(180deg, #2C3148 0%, #1D2133 100%) !important; border-color: rgb(129 140 248 / .26); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 5px 12px -5px rgb(0 0 0 / .6); } /* ============================================================ 3. sections */ /* the drill console: a drill-core strip (hole by depth, the intervals in the table drawn to scale) */ .qt-core { margin: 2px 0 22px; display: grid; gap: 12px; } .qt-core-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: end; gap: 14px; } .qt-core-id { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 11px; line-height: 16px; letter-spacing: .06em; color: var(--qs-fnt); } .qt-core-track { position: relative; height: 16px; border-radius: 8px; margin-top: 18px; background: linear-gradient(180deg, #EEE7DA 0%, #D9CFBD 42%, #BDB099 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), inset 0 -1px 0 rgb(96 70 40 / .22), 0 1px 2px rgb(96 70 40 / .18), 0 6px 12px -8px rgb(96 70 40 / .35); } .qt-core-track::after { /* core breaks every 10 m */ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(11.111% - 1px), rgb(96 70 40 / .20) calc(11.111% - 1px) 11.111%); } .qt-core-iv { position: absolute; top: -2px; bottom: -2px; border-radius: 4px; z-index: 1; } .qt-core-iv b { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 11px/1 var(--font-mono, 'IBM Plex Mono', monospace); color: var(--qs-gold-ink); } .qt-core-hot { background: linear-gradient(180deg, #FDE08A 0%, #F2A20F 55%, #C76A06 100%); box-shadow: 0 0 0 1px rgb(146 64 14 / .35), 0 0 16px rgb(245 158 11 / .55); } .qt-core-warm { background: linear-gradient(180deg, #FDE9A8 0%, #F5B13A 100%); box-shadow: 0 0 0 1px rgb(146 64 14 / .25), 0 0 8px rgb(245 158 11 / .30); } .qt-core-pale { background: linear-gradient(180deg, #FEF4D2 0%, #F2CF79 100%); box-shadow: 0 0 0 1px rgb(146 64 14 / .18); } .qt-core-axis { position: relative; height: 14px; margin-left: 102px; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 10px; color: var(--qs-fnt); } .qt-core-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } .qt-core-axis span:first-child { transform: none; } .qt-core-axis span:last-child { transform: translateX(-100%); } html[data-theme="dark"] .qt-core-track { background: linear-gradient(180deg, #3A4053 0%, #282D3D 45%, #1A1E2A 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), 0 6px 12px -8px rgb(0 0 0 / .7); } html[data-theme="dark"] .qt-core-track::after { background: repeating-linear-gradient(90deg, transparent 0 calc(11.111% - 1px), rgb(0 0 0 / .45) calc(11.111% - 1px) 11.111%); } @media (max-width: 640px) { .qt-core-row { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; } .qt-core-axis { margin-left: 82px; } .qt-core-iv b { font-size: 10px; } } html[data-theme] .qt-mining-panel .qt-mining-verdict { background: linear-gradient(180deg, rgb(255 255 255 / .9), rgb(236 248 240 / .9)) !important; border-color: rgb(21 128 61 / .30) !important; box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 1px rgb(21 128 61 / .10), 0 10px 22px -14px rgb(21 128 61 / .45); } html[data-theme="dark"] .qt-mining-panel .qt-mining-verdict { background: linear-gradient(180deg, rgb(74 222 128 / .10), rgb(74 222 128 / .05)) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 10px 22px -14px rgb(0 0 0 / .7); } /* "Built for these desks": the edge fades were gradients to var(--bg, #08080F), an undefined variable, so two black bars framed the strip in the light theme. A mask fades the pills into whatever is behind them, in either theme. */ html[data-theme] .qt-archetype-marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%); } html[data-theme] .qt-archetype-marquee::before, html[data-theme] .qt-archetype-marquee::after { display: none; } /* the Quinn console stands on an indigo stage that shows past its sides and foot */ html[data-theme] section.product .qmock { position: relative; isolation: isolate; } html[data-theme] section.product .qmock::before { content: ""; position: absolute; z-index: -1; inset: 64px -26px -26px; border-radius: 34px; pointer-events: none; background: radial-gradient(70% 55% at 50% 0%, rgb(255 255 255 / .18), transparent 62%), radial-gradient(rgb(255 255 255 / .10) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(160deg, #5B54E8 0%, #4038C8 46%, #27236F 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -2px 0 rgb(0 0 0 / .18), 0 34px 70px -34px rgb(39 35 111 / .60); } html[data-theme] section.product .qmock .ws { box-shadow: 0 0 0 1px rgb(39 35 111 / .14), 0 2px 3px rgb(30 27 75 / .14), 0 26px 50px -22px rgb(30 27 75 / .50), 0 70px 110px -60px rgb(30 27 75 / .55) !important; } html[data-theme="dark"] section.product .qmock::before { background: radial-gradient(70% 55% at 50% 0%, rgb(255 255 255 / .10), transparent 62%), radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(160deg, #3A35A8 0%, #27236F 50%, #15133D 100%); } @media (max-width: 820px) { html[data-theme] section.product .qmock::before { inset: 48px -10px -14px; border-radius: 24px; } } /* "This is the actual output": each screenshot on a mat, with a second sheet behind it */ html[data-theme] .qproof .qproof-grid { gap: 52px; } html[data-theme] .qproof .qproof-fig { gap: 30px; } html[data-theme] .qproof .qproof-shot { border: 1px solid rgb(96 70 40 / .18); border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 7px #FFFDF9, 0 0 0 8px rgb(96 70 40 / .13), 15px 15px 0 1px #EFE7D9, 15px 15px 0 2px rgb(96 70 40 / .12), 0 32px 60px -28px rgb(96 70 40 / .42), 0 76px 120px -60px rgb(55 48 163 / .30); transition: transform 420ms var(--dg-ease, ease), box-shadow 420ms var(--dg-ease, ease); } html[data-theme] .qproof .qproof-fig:hover .qproof-shot { transform: translateY(-4px); } html[data-theme="dark"] .qproof .qproof-shot { border-color: rgb(255 255 255 / .10); box-shadow: 0 0 0 7px #1D1A17, 0 0 0 8px rgb(255 255 255 / .08), 15px 15px 0 1px #24201C, 15px 15px 0 2px rgb(255 255 255 / .06), 0 32px 60px -28px rgb(0 0 0 / .75); } @media (prefers-reduced-motion: reduce) { html[data-theme] .qproof .qproof-shot { transition: none; } html[data-theme] .qproof .qproof-fig:hover .qproof-shot { transform: none; } } /* the data-flow diagram, light theme: porcelain nodes on a recessed board, a solid indigo hub */ html[data-theme="light"] #dataflow .dataflow-canvas { background: radial-gradient(120% 110% at 50% 0%, var(--qs-stage-hi) 0%, var(--qs-stage-mid) 55%, var(--qs-stage-lo) 100%) !important; border-radius: 28px; padding: 30px 28px; box-shadow: inset 0 2px 4px rgb(96 70 40 / .10), inset 0 0 0 1px rgb(96 70 40 / .10), 0 1px 0 rgb(255 255 255 / .9); } html[data-theme="light"] #dataflow .dataflow-svg rect[fill="url(#df-card-bg)"] { fill: url(#qs-g-paper) #FFFDF9; filter: drop-shadow(0 1px 1px rgb(96 70 40 / .16)) drop-shadow(0 12px 18px rgb(96 70 40 / .20)); } html[data-theme="light"] #dataflow .dataflow-svg rect[rx="14"][fill="none"] { filter: none; stroke-opacity: .14; } html[data-theme="light"] #dataflow .dataflow-svg :is(g[transform^="translate(60,"], g[transform^="translate(1130,"]) text[fill="#F0EBE0"] { fill: #1C1712; } html[data-theme="light"] #dataflow .dataflow-svg :is(g[transform^="translate(60,"], g[transform^="translate(1130,"]) text[fill="#B5BAC9"] { fill: #4A453E; } html[data-theme="light"] #dataflow .dataflow-svg :is(g[transform^="translate(60,"], g[transform^="translate(1130,"]) text[fill="#7681A0"] { fill: #6B6156; } html[data-theme="light"] #dataflow .dataflow-svg > g:not([transform]) text[fill="#7681A0"] { fill: #6B6156; } html[data-theme="light"] #dataflow .dataflow-svg > g:not([transform]) text[fill="#818CF8"] { fill: #4F46E5; } html[data-theme="light"] #dataflow .dataflow-svg circle[r="4.5"][fill="#0B0E18"] { fill: #FFFDF9; } /* the hub grows from r 46 to r 60 so its three small labels sit on it (they spilled past the old disc onto the board) */ html[data-theme="light"] #dataflow .dataflow-svg circle[r="46"][fill="#0B0E18"] { r: 60px; fill: url(#qs-g-hub) #3730A3; filter: drop-shadow(0 2px 2px rgb(39 35 111 / .30)) drop-shadow(0 14px 22px rgb(39 35 111 / .35)); } html[data-theme="light"] #dataflow .dataflow-svg g[transform="translate(700, 210)"] text[fill="#7681A0"] { fill: #E0E7FF; letter-spacing: 1.2px; } html[data-theme="light"] #dataflow .dataflow-svg g[transform="translate(700, 210)"] text[fill="#818CF8"] { fill: #E0E7FF; letter-spacing: .6px; } html[data-theme="light"] #dataflow .dataflow-svg use[stroke-width="14"] { opacity: .10; } html[data-theme="light"] #dataflow .dataflow-svg use[stroke-width="5"] { opacity: .28; } html[data-theme="light"] #dataflow .dataflow-svg use[stroke-width="1.8"] { opacity: .85; } /* S1112: rendered glass panes. Two variants per size - a white bevel measured as a hot sticker outline on the dark card, so each theme gets its own render. */ .qs .qs-glass-d { display: none; } html[data-theme="dark"] .qs .qs-glass-l { display: none; } html[data-theme="dark"] .qs .qs-glass-d { display: block; } /* ───────────────────────────────────────────────────────────────────────── S1115: measured contrast fixes. Every selector below is a node measured below WCAG AA on the LIVE page, with the background composited through the real layer stack (translucent glass included) and the foreground's own alpha carried. Nodes sitting over a background image are deliberately NOT here: text-shadow is the correct technique there and a colour change would not help. Specificity is html[data-theme] + class = (0,2,1) on purpose. The rules these override are plain classes (0,1,0) in index.html inline