/* FitoNova site -- hand-written, no build step, no external requests. The type faces and the four theme blocks -- the whole palette, and nothing that paints with it. One of the ordered sheets in public/css/; the load order in every page's IS the cascade, so a rule moved between files is a rule moved in the cascade. Owner's ruling 2026-08-10: no source file over 500 lines. */ @font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- palette */ /* Brand constants come from the app's brand.dart: the mark must read the same on the site as it does in the app. Four theme blocks follow, in this order: light default, the dark system preference, then the two manual overrides the header toggle writes as data-theme on . The override blocks must stay identical to the two above them, declaration for declaration -- the toggle has to land exactly where the system preference would, or a user who toggles gets a third, half-built theme. site_verify.py compares the bodies; never edit one block alone and never put a comment inside one. */ :root { --paper: #f1f2f3; --paperfade: rgba(241, 242, 243, 0.84); --panel: #ffffff; --raise: #fbfbfc; --ink: #10222c; --mut: #5c7280; --acc: #0d4f6e; --acc2: #4f7396; --fill: #0d4f6e; --fill2: #14647f; --line: rgba(16, 34, 44, 0.14); --line2: rgba(16, 34, 44, 0.3); --band: #0d4f6e; --grn: #3d8b40; --grnsoft: rgba(61, 139, 64, 0.12); --warn: #b4482f; --vine: rgba(89, 128, 166, 0.42); --grid: rgba(16, 34, 44, 0.045); --glow: rgba(13, 79, 110, 0.16); --shadow: 0 1px 0 rgba(16, 34, 44, 0.05), 0 18px 40px -22px rgba(16, 34, 44, 0.32); --pshade: rgba(3, 20, 29, 0.26); --mark: #0d4f6e; --playbg: #0a1a23; --playbg2: #11303f; --appbg: #f4f6f7; --appcard: #ffffff; --appink: #12222c; --appmut: #6b8291; --appline: rgba(16, 34, 44, 0.1); --appacc: #0d4f6e; --appfill: #0d4f6e; --appaccsoft: rgba(13, 79, 110, 0.1); --appgrn: #3d8b40; --onacc: #ffffff; --onaccmut: rgba(255, 255, 255, 0.78); --vinefx: brightness(0) invert(48%) sepia(32%) saturate(760%) hue-rotate(168deg) brightness(88%) opacity(0.75); --vinefx-soft: brightness(0) invert(48%) sepia(32%) saturate(760%) hue-rotate(168deg) brightness(88%) opacity(0.45); --hover: rgba(16, 34, 44, 0.05); --mark-l: block; --mark-d: none; } @media (prefers-color-scheme: dark) { :root { --paper: #0e1317; --paperfade: rgba(14, 19, 23, 0.86); --panel: #181f26; --raise: #212a32; --ink: #e7edf2; --mut: #94a5b2; --acc: #7fb9dd; --acc2: #a4bfd2; --fill: #1b5a7d; --fill2: #236e96; --line: rgba(233, 241, 246, 0.11); --line2: rgba(233, 241, 246, 0.26); --band: #123a4c; --grn: #5cba7d; --grnsoft: rgba(92, 186, 125, 0.13); --warn: #e0906d; --vine: rgba(127, 185, 221, 0.2); --grid: rgba(233, 241, 246, 0.035); --glow: rgba(127, 185, 221, 0.13); --shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 46px -22px rgba(0, 0, 0, 0.72); --pshade: rgba(0, 0, 0, 0.6); --mark: #7fb9dd; --playbg: #090e12; --playbg2: #18222a; --appbg: #0e1317; --appcard: #181f26; --appink: #e7edf2; --appmut: #94a5b2; --appline: rgba(233, 241, 246, 0.1); --appacc: #7fb9dd; --appfill: #1b5a7d; --appaccsoft: rgba(127, 185, 221, 0.13); --appgrn: #5cba7d; --onacc: #ffffff; --onaccmut: rgba(255, 255, 255, 0.76); --vinefx: brightness(0) invert(70%) sepia(22%) saturate(620%) hue-rotate(168deg) opacity(0.3); --vinefx-soft: brightness(0) invert(70%) sepia(22%) saturate(620%) hue-rotate(168deg) opacity(0.18); --hover: rgba(255, 255, 255, 0.07); --mark-l: none; --mark-d: block; } } :root[data-theme="light"] { --paper: #f1f2f3; --paperfade: rgba(241, 242, 243, 0.84); --panel: #ffffff; --raise: #fbfbfc; --ink: #10222c; --mut: #5c7280; --acc: #0d4f6e; --acc2: #4f7396; --fill: #0d4f6e; --fill2: #14647f; --line: rgba(16, 34, 44, 0.14); --line2: rgba(16, 34, 44, 0.3); --band: #0d4f6e; --grn: #3d8b40; --grnsoft: rgba(61, 139, 64, 0.12); --warn: #b4482f; --vine: rgba(89, 128, 166, 0.42); --grid: rgba(16, 34, 44, 0.045); --glow: rgba(13, 79, 110, 0.16); --shadow: 0 1px 0 rgba(16, 34, 44, 0.05), 0 18px 40px -22px rgba(16, 34, 44, 0.32); --pshade: rgba(3, 20, 29, 0.26); --mark: #0d4f6e; --playbg: #0a1a23; --playbg2: #11303f; --appbg: #f4f6f7; --appcard: #ffffff; --appink: #12222c; --appmut: #6b8291; --appline: rgba(16, 34, 44, 0.1); --appacc: #0d4f6e; --appfill: #0d4f6e; --appaccsoft: rgba(13, 79, 110, 0.1); --appgrn: #3d8b40; --onacc: #ffffff; --onaccmut: rgba(255, 255, 255, 0.78); --vinefx: brightness(0) invert(48%) sepia(32%) saturate(760%) hue-rotate(168deg) brightness(88%) opacity(0.75); --vinefx-soft: brightness(0) invert(48%) sepia(32%) saturate(760%) hue-rotate(168deg) brightness(88%) opacity(0.45); --hover: rgba(16, 34, 44, 0.05); --mark-l: block; --mark-d: none; } :root[data-theme="dark"] { --paper: #0e1317; --paperfade: rgba(14, 19, 23, 0.86); --panel: #181f26; --raise: #212a32; --ink: #e7edf2; --mut: #94a5b2; --acc: #7fb9dd; --acc2: #a4bfd2; --fill: #1b5a7d; --fill2: #236e96; --line: rgba(233, 241, 246, 0.11); --line2: rgba(233, 241, 246, 0.26); --band: #123a4c; --grn: #5cba7d; --grnsoft: rgba(92, 186, 125, 0.13); --warn: #e0906d; --vine: rgba(127, 185, 221, 0.2); --grid: rgba(233, 241, 246, 0.035); --glow: rgba(127, 185, 221, 0.13); --shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 46px -22px rgba(0, 0, 0, 0.72); --pshade: rgba(0, 0, 0, 0.6); --mark: #7fb9dd; --playbg: #090e12; --playbg2: #18222a; --appbg: #0e1317; --appcard: #181f26; --appink: #e7edf2; --appmut: #94a5b2; --appline: rgba(233, 241, 246, 0.1); --appacc: #7fb9dd; --appfill: #1b5a7d; --appaccsoft: rgba(127, 185, 221, 0.13); --appgrn: #5cba7d; --onacc: #ffffff; --onaccmut: rgba(255, 255, 255, 0.76); --vinefx: brightness(0) invert(70%) sepia(22%) saturate(620%) hue-rotate(168deg) opacity(0.3); --vinefx-soft: brightness(0) invert(70%) sepia(22%) saturate(620%) hue-rotate(168deg) opacity(0.18); --hover: rgba(255, 255, 255, 0.07); --mark-l: none; --mark-d: block; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }