/* ========================================================================== Fluviaweb design tokens — self-contained. Drop this into any product and every colour, type, radius, shadow and glass surface matches the brand. Ported verbatim from the live fluviaweb.com stylesheet. Theme is set by a `data-theme` attribute on ("light" | "dark"). The brand runs a DUAL accent: amber in light, lime in dark — both under the same --azul-* names, so components never branch on theme. See SKILL.md. Production note: this imports Google Fonts for portability. For real apps, self-host the *variable* faces instead (npm @fontsource-variable/manrope, /golos-text, /jetbrains-mono) and delete the @import below. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Golos+Text:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---- Base tokens (accent = lime; this is also the dark-theme accent) ------ */ :root { /* Neutrals — cool slate ("ink" text, "mist" surfaces) */ --white:#FFFFFF;--canvas-50:#F6F8FC;--mist-100:#EDF1F8;--mist-200:#E2E8F2;--line-200:#DBE2EE;--line-300:#C9D3E3; --ink-300:#A3B0C2;--ink-400:#8494A9;--ink-500:#5D6E83;--ink-600:#46586E;--ink-700:#33455C;--ink-900:#132437;--ink-950:#0B1727; /* Accent scale (lime). Kept under the historical "azul" names so components need no edits. */ --azul-050:#F4FBE0;--azul-100:#E8F7BD;--azul-200:#D6F08C;--azul-300:#BFE94F;--azul-400:#A8E11E;--azul-500:#9BDD00;--azul-600:#9BDD00;--azul-700:#6F9E00;--azul-800:#5A8000;--azul-900:#456200; /* Aqua — secondary "flow" hue (movement, water) */ --aqua-100:#DDF5F8;--aqua-200:#B8EAF1;--aqua-300:#7FD9E6;--aqua-400:#45C3D6;--aqua-500:#19AEC6;--aqua-600:#0E93A9;--aqua-700:#0D7386; /* Semantic — calm, desaturated */ --ok-100:#DFF3E9;--ok-600:#1B8A5A;--ok-700:#16714B; --warn-100:#FCF0DA;--warn-600:#B9770F;--warn-700:#96600C; --err-100:#FBE5E3;--err-600:#CD4437;--err-700:#AC372C; /* WhatsApp (only if the product uses it) */ --whatsapp-500:#25D366;--whatsapp-600:#1DA851;--whatsapp-700:#128C46; /* Semantic aliases — reference these in components, not the raw scales */ --bg-page:var(--canvas-50);--bg-tint:var(--mist-100);--surface-card:var(--white); --text-strong:var(--ink-950);--text-main:var(--ink-700);--text-soft:var(--ink-500);--text-faint:var(--ink-400); --border-soft:var(--line-200);--border-strong:var(--line-300); --accent:var(--azul-600);--accent-hover:var(--azul-700);--accent-ink:#12160c;--accent-soft:var(--azul-050); /* Акцент для тексту, який треба ПРОЧИТАТИ (назва продукту в шапці, ціна): той самий відтінок, темніший до 3.5:1 на світлому тлі. Виміряно на PUBLICA. */ --accent-display:#CDFF29; /* Кольори станів, які НЕ перевертаються разом із темою. --accent у світлій темі стає амбером, а в темній лаймом. Для акценту це правильно, для статусу — ні: «готово», що з зеленого робиться жовтим, перестає бути «готово». Тому власні токени, і в світлому блоці нижче вони свідомо не перевизначаються. */ --state-ok:#9BDD00;--state-warn:#FFBC00; --link:var(--azul-600);--link-hover:var(--azul-700); /* Type */ /* Спершу назва варіативного фейса, потім статичного. Самохостинг через @fontsource-variable реєструє сімейства саме як «… Variable» — і fluviaweb.com просить їх під цією назвою. Якщо лишити тільки коротке ім'я, жоден із трьох брендових шрифтів не застосується, а інтерфейс мовчки поїде на системному: помилка, яку видно лише поруч із головним доменом. */ --font-display:'Manrope Variable','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:'Golos Text Variable','Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'JetBrains Mono Variable','JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --text-hero:clamp(2.7rem,1.9rem + 4vw,4.4rem); --text-h1:clamp(2.2rem,1.7rem + 2.4vw,3.2rem); --text-h2:clamp(1.7rem,1.45rem + 1.4vw,2.3rem); --text-h3:1.35rem; --text-lead:clamp(1.05rem,1rem + .35vw,1.25rem); --text-md:1rem;--text-sm:.875rem;--text-xs:.78rem; --lh-tight:1.07;--lh-heading:1.18;--lh-body:1.65; --ls-display:-.025em;--ls-eyebrow:.14em; /* Spacing */ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px; --container:1600px;--container-narrow:900px; --gutter:clamp(20px,4vw,44px); --section-y:clamp(4.2rem,9vw,7.5rem); /* Accent fills — solid, never blue→purple gradients */ --grad-flow:var(--azul-600); --grad-flow-deep:var(--azul-700); --grad-flow-soft:rgba(155,221,0,.10); --wash-hero:none; /* Liquid glass — the signature surface */ --glass-bg:rgba(255,255,255,.55);--glass-bg-strong:rgba(255,255,255,.78);--glass-bg-soft:rgba(255,255,255,.36); --glass-edge:transparent;--glass-highlight:rgba(255,255,255,.6); --glass-blur:22px;--glass-blur-soft:12px; --shadow-glass:inset 0 1px 0 var(--glass-highlight),0 12px 32px -14px rgba(19,36,55,.18); /* Shadows — soft, low-alpha */ --shadow-1:0 1px 2px rgba(19,36,55,.05),0 2px 10px rgba(19,36,55,.05); --shadow-2:0 6px 20px -6px rgba(19,36,55,.12); --shadow-3:0 18px 48px -16px rgba(19,36,55,.22); --shadow-accent:0 10px 26px -12px rgba(155,221,0,.55); /* Radii */ --r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:28px;--r-pill:999px; /* Focus + motion */ --ring:0 0 0 3px rgba(155,221,0,.35); --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.4,.44,1); --dur-1:140ms;--dur-2:260ms;--dur-3:520ms; color-scheme: light; } /* ---- Light theme: accent flips to AMBER (#FFBC00) ------------------------ */ :root[data-theme="light"] { --azul-050:#FFF6DB;--azul-100:#FFECB3;--azul-200:#FFDF80;--azul-300:#FFD24D; --azul-500:#FFC21A;--azul-600:#FFBC00;--azul-700:#CC8A00;--azul-800:#A66F00; --accent-display:#B37700; --shadow-accent:0 10px 26px -12px rgba(255,188,0,.55); --grad-flow-soft:rgba(255,188,0,.10); --ring:0 0 0 3px rgba(255,188,0,.4); color-scheme: light; } /* ---- Dark theme: graphite surfaces, keeps the LIME accent ---------------- */ :root[data-theme="dark"] { color-scheme: dark; --white:#171e28; /* card surface base */ --canvas-50:#0f141b; /* page background */ --mist-100:#141b24; /* tinted sections */ --mist-200:#1e2732; --line-200:#273140;--line-300:#33404f; --ink-300:#5a6675;--ink-400:#74808f;--ink-500:#93a0b0;--ink-600:#aeb9c7;--ink-700:#c8d2de;--ink-900:#e7edf4;--ink-950:#f5f8fc; --bg-page:var(--canvas-50);--bg-tint:var(--mist-100);--surface-card:#171e28; --accent-soft:rgba(155,221,0,.14); --glass-bg:rgba(255,255,255,.05);--glass-bg-strong:rgba(23,30,40,.72);--glass-bg-soft:rgba(255,255,255,.03); --glass-edge:transparent;--glass-highlight:rgba(255,255,255,.05);--border-strong:rgba(255,255,255,.16); --shadow-glass:inset 0 1px 0 var(--glass-highlight),0 16px 40px -18px rgba(0,0,0,.6); --shadow-1:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.3); --shadow-2:0 8px 24px -8px rgba(0,0,0,.55); --shadow-3:0 24px 56px -18px rgba(0,0,0,.7); } /* ==== Base reset + primitives ============================================= */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--font-body);font-size:var(--text-md);line-height:var(--lh-body); color:var(--text-main);background:var(--bg-page); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);color:var(--text-strong);line-height:var(--lh-heading);letter-spacing:var(--ls-display)} p{margin:0} a{color:var(--link);text-decoration:none} a:hover{color:var(--link-hover)} button{font:inherit} img,svg{max-width:100%;display:block} /* `hidden` мусить ховати. Атрибут виставляє display:none стилем браузера, і будь-яке власне правило з display його перебиває — блок лишається на екрані, хоч у розмітці стоїть hidden. Ловиться це тільки очима й тільки там, де такий блок не мав з'явитися. */ [hidden]{display:none !important} ::selection{background:rgba(155,221,0,.22)} ::placeholder{color:var(--ink-300)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .wrap{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} .wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} /* Liquid-glass surfaces */ .glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);backdrop-filter:blur(var(--glass-blur)) saturate(160%);border:1px solid var(--glass-edge);box-shadow:var(--shadow-glass)} .glass-strong{background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);backdrop-filter:blur(var(--glass-blur)) saturate(180%);border:1px solid var(--glass-edge);box-shadow:var(--shadow-glass)} .glass-soft{background:var(--glass-bg-soft);-webkit-backdrop-filter:blur(var(--glass-blur-soft)) saturate(150%);backdrop-filter:blur(var(--glass-blur-soft)) saturate(150%);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-highlight)} /* Scroll-reveal (add .is-in via IntersectionObserver) */ .fx-reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)} .fx-reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} .fx-reveal{opacity:1;transform:none} }