/* fabriq.su colour tokens: «Аква» (day) and «Глубина» (night). Owner-approved 2026-11-04: blue #0593C6 leads, white #FCFFFF is the page, pink #DB3996 is a small mark and light behind glass. Spec 2026-11-01-homepage-redesign-design.md: §12 "Site-wide palette" (shared names used by every page), §6 "Colour" (homepage names and the glass recipe). data-theme on is always set explicitly to day|night by _inc/theme-init.php before this file loads; :root carries the day values as a fallback for a page without the init script. */ :root, [data-theme="day"] { --bg: #FCFFFF; --bg-1: #EFF7FA; --surface: rgba(5,147,198,.05); --surface-hi: rgba(5,147,198,.09); --border: rgba(4,100,138,.17); --border-hi: rgba(4,100,138,.5); --text: #0E2430; --text-2: #2B4553; --muted: #3C5866; --muted-2: #8CA3AF; --coral: #04648A; --coral-hi: #DB3996; --nav-bg: rgba(252,255,255,.85); --dropdown-bg: rgba(252,255,255,.98); --grid-tone: rgba(4,100,138,.065); --bar-tone: rgba(5,147,198,.05); --code-surface: #EAF5F9; /* homepage names (§6) */ --mat: #0B2A3A; --acc: #B81F78; /* small text: the pink itself is 3.7:1 on the glass */ --pink: #DB3996; /* marks only */ --term: #0B2A3A; --dot: 14,36,48; --btn-bg: #04648A; --btn-ink: #FCFFFF; --btn-hover-bg: #C42A84; /* #DB3996 under white text is 4.2:1 */ --btn-hover-ink: #FCFFFF; --demo-soft: rgba(5,147,198,.17); --demo-mid: rgba(5,147,198,.3); --demo-strong: #04648A; --demo-line: rgba(4,100,138,.16); /* one fixed field of soft light behind the homepage */ --field: radial-gradient(34% 40% at 74% 20%, rgba(219,57,150,.2), rgba(219,57,150,0) 100%), radial-gradient(52% 58% at 4% 42%, rgba(5,147,198,.36), rgba(5,147,198,0) 100%), radial-gradient(46% 54% at 98% 84%, rgba(43,163,207,.34), rgba(43,163,207,0) 100%); /* colour panels (hero, contact) */ --panel-stops: #0593C6 0%, #057BA6 44%, #04648A 100%; --panel-stops-text: #057BA6 0%, #046C93 50%, #045C7E 100%; /* the contact panel: body text across its whole width */ --panel-sky: rgba(190,232,246,.62); --panel-sky-soft: rgba(190,232,246,.24); --panel-sky-0: rgba(190,232,246,0); --panel-ember-1: rgba(219,57,150,.86); --panel-ember-2: rgba(205,70,185,.46); --panel-ember-3: rgba(96,120,235,.2); --panel-ember-4: rgba(96,120,235,0); /* glass tiles */ --glass-fill: linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.36) 36%, rgba(255,255,255,.26) 66%, rgba(255,255,255,.44) 100%); --glass-border: rgba(255,255,255,.62); --glass-border-hi: rgba(255,255,255,.95); --glass-shadow: 0 0 0 1px rgba(4,100,138,.1), inset 0 1px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(5,147,198,.14), 0 22px 44px -18px rgba(4,80,120,.26); --glass-solid: rgba(255,255,255,.88); /* browsers without the blur */ --glass-opaque: #FCFFFF; /* prefers-reduced-transparency */ --panel-opaque: #04648A; /* the same, for the glass on a colour panel (white text on it: 6.5:1) */ --modal-fill: linear-gradient(135deg, rgba(255,255,255,.985), rgba(241,249,252,.965)); --glass-inner: rgba(255,255,255,.38); --glass-inner-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 0 1px 3px rgba(4,80,120,.1); --term-glass: rgba(11,42,58,.95); --chip-bg: rgba(255,255,255,.46); --chip-border: rgba(255,255,255,.7); --chip-ring: rgba(4,100,138,.12); --nav-glass: rgba(252,255,255,.74); --nav-glass-border: rgba(255,255,255,.7); --nav-glass-shadow: 0 1px 2px rgba(6,60,90,.05), 0 10px 30px rgba(6,60,90,.08); color-scheme: light; } [data-theme="night"] { --bg: #0A1822; --bg-1: #0F2230; --surface: rgba(127,214,242,.06); --surface-hi: rgba(127,214,242,.1); --border: rgba(170,220,240,.18); --border-hi: rgba(170,220,240,.5); --text: #E8F4F8; --text-2: #C2D8E2; --muted: #B4CAD5; --muted-2: #5B7787; --coral: #7FD6F2; --coral-hi: #F27CBE; --nav-bg: rgba(10,24,34,.85); --dropdown-bg: rgba(10,24,34,.97); --grid-tone: rgba(127,214,242,.05); --bar-tone: rgba(127,214,242,.05); --code-surface: #071019; --mat: #06131C; --acc: #F27CBE; --pink: #F27CBE; --term: #06131C; --dot: 232,244,248; --btn-bg: #7FD6F2; --btn-ink: #08202E; --btn-hover-bg: #F27CBE; --btn-hover-ink: #08202E; --demo-soft: rgba(127,214,242,.16); --demo-mid: rgba(127,214,242,.3); --demo-strong: #2BA3CF; --demo-line: rgba(170,220,240,.16); --field: radial-gradient(34% 40% at 74% 20%, rgba(219,57,150,.15), rgba(219,57,150,0) 100%), radial-gradient(52% 58% at 4% 42%, rgba(5,147,198,.34), rgba(5,147,198,0) 100%), radial-gradient(46% 54% at 98% 84%, rgba(43,163,207,.26), rgba(43,163,207,0) 100%); --panel-stops: #0E6288 0%, #0A4C6E 42%, #07304A 100%; --panel-stops-text: #0E6288 0%, #0A4C6E 42%, #07304A 100%; --panel-sky: rgba(70,175,220,.42); --panel-sky-soft: rgba(70,175,220,.26); --panel-sky-0: rgba(70,175,220,0); --panel-ember-1: rgba(219,57,150,.62); --panel-ember-2: rgba(170,70,175,.34); --panel-ember-3: rgba(80,100,215,.16); --panel-ember-4: rgba(80,100,215,0); --glass-fill: linear-gradient(135deg, rgba(190,230,250,.17) 0%, rgba(190,230,250,.08) 36%, rgba(190,230,250,.05) 66%, rgba(190,230,250,.1) 100%); --glass-border: rgba(190,230,250,.2); --glass-border-hi: rgba(190,230,250,.42); --glass-shadow: 0 0 0 1px rgba(0,10,18,.25), inset 0 1px 0 rgba(220,240,250,.28), inset 1px 0 0 rgba(220,240,250,.1), inset 0 -1px 0 rgba(0,10,18,.2), 0 22px 44px -18px rgba(0,8,16,.6); --glass-solid: rgba(15,34,48,.92); --glass-opaque: #0F2230; --panel-opaque: #0A4C6E; --modal-fill: linear-gradient(135deg, rgba(20,44,60,.97), rgba(13,30,42,.95)); --glass-inner: rgba(4,14,22,.36); --glass-inner-shadow: inset 0 0 0 1px rgba(190,230,250,.08), inset 0 1px 3px rgba(0,8,16,.4); --term-glass: rgba(6,19,28,.92); --chip-bg: rgba(190,230,250,.09); --chip-border: rgba(190,230,250,.22); --chip-ring: rgba(0,10,18,.25); --nav-glass: rgba(12,30,42,.66); --nav-glass-border: rgba(190,230,250,.2); --nav-glass-shadow: 0 1px 2px rgba(0,8,16,.3), 0 10px 30px rgba(0,8,16,.34); color-scheme: dark; } /* Aliases resolve on , where both blocks above apply, so they follow the active theme. */ :root { --ink: var(--text); --mut: var(--muted); --line: var(--border); --grid: var(--grid-tone); --logo-dot: #d97757; /* tells: allow (logo dot only, spec §6) */ /* text on --term / --mat, which are dark in both themes, so one set of values (ruling R13, cooled to the blue with the 2026-11-04 palette) */ --term-ink: #D6E6EE; --term-mut: #8FA8B5; --term-ok: #8fc3a6; /* on a colour panel (hero, contact), the same in both themes: the panel is blue in both */ --on-panel: #FCFFFF; --on-panel-mut: rgba(252,255,255,.95); --on-panel-line: rgba(252,255,255,.3); --on-panel-dot: 252,255,255; --on-panel-btn: #04648A; --pane-fill: linear-gradient(145deg, rgba(3,58,88,.24), rgba(3,58,88,.1)); --pane-border: rgba(255,255,255,.3); --pane-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 18px 44px rgba(3,50,75,.09); --row-fill: linear-gradient(145deg, rgba(3,58,88,.24), rgba(3,58,88,.1)); --row-border: rgba(255,255,255,.26); --row-shadow: inset 0 1px 0 rgba(255,255,255,.36); --panel-shade: rgba(2,48,74,.15); /* a local shade behind small text where a panel is at its lightest */ --glass-blur: 20px; --pane-blur: 26px; }