/* base.css — токени, скидання, типографіка, кнопки. Вантажиться першим. Кольори й розміри задаються ТІЛЬКИ тут. */ :root{ /* Колір. Дві фірмові фарби з логотипу — олива й вершкове — і більше нічого: саме тому сайт упізнається як Barvinok, а не як «якась квіткарня». Ті самі значення живуть у застосунку Barvinok. */ --brand:#737745; /* олива з логотипу: акценти, іконки */ --brand-dark:#5A5E33; /* кнопки й підвал: на ньому вершкове читається */ --brand-deep:#454826; /* наведення */ --cream:#FAF3A3; /* вершкове з логотипу: текст на оливі */ --metal:#22221F; /* корпус квятомату на схемі — темний, як сам автомат */ --metal-2:#1A1A17; /* заглиблення: вивіска, ніша дверцят */ --metal-line:#3A3A33; /* волосина, якою корпус ділиться на частини */ --glass:#2E2E29; /* скло порожньої комірки за ним */ --glass-hi:rgba(250,248,238,.07); /* відблиск на склі */ --paper:#FAF8EE; /* тло сторінки — теплий папір, не білий */ /* Текст на оливковому тлі — кнопки, підвал, смуга квятомату. Окремий токен, бо він мусить лишатися СВІТЛИМ в обох темах: раніше тут стояв --paper, і в темній темі заголовок на смузі, підвал і кнопка ставали темними на темному. */ --on-brand:#FAF8EE; /* Те саме навпаки: текст на вершковому — цінник у комірці, ярлик на знімку, кнопка на оливковій смузі. Мусить лишатися ТЕМНИМ в обох темах. */ --on-cream:#262915; --paper-2:#F1EEDC; /* тло секції, що має відступити назад */ --ink:#262915; /* основний текст — темна олива, не чорний */ --ink-soft:#6A6D53; /* другорядний текст */ --line:#DFDAC0; /* тонкі лінії */ /* Типографіка. Антиква для заголовків, гротеск для тексту. */ --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --t-hero:clamp(2.75rem, 7vw, 6rem); --t-h2:clamp(2rem, 4.2vw, 3.4rem); --t-h3:clamp(1.25rem, 2vw, 1.6rem); --t-lead:clamp(1.05rem, 1.5vw, 1.25rem); --t-body:1rem; --t-small:.875rem; --t-eyebrow:.75rem; /* надзаголовок врозрядку */ /* Ритм. Один крок — 8 px, усі відступи кратні йому. */ --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem; --s8:9rem; --wrap:78rem; /* ширина контенту */ --wrap-text:38rem; /* ширина суцільного тексту: ~70 знаків */ --r:2px; /* радіус: майже прямий кут, це навмисне */ --r-photo:4px; /* фото — єдине, чому дозволено бути м'якшим за 2px */ --ease:cubic-bezier(.22,.61,.36,1); /* Тінь під великим фото. Не чорна, а в кольорі тексту: чорна на теплому папері виглядає брудно. Два шари — контактний і глибокий розсіяний. */ --shadow-photo:0 1px 2px rgba(38,41,21,.10), 0 28px 56px -20px rgba(38,41,21,.34); } /* ── Темна тема ────────────────────────────────────────────────────────────── Не «інвертований сайт», а вечірня версія тієї самої вітрини: фон іде в глибоку оливу, а вершкове з логотипу нарешті світиться так, як воно світиться на самому квятоматі вночі. Дві фірмові фарби ті самі — міняється лише те, що з чим. Одного блоку досить, бо тему ставить скрипт у : він читає вибір із localStorage або системну настройку і пише data-theme на ще до першого малювання. Тому ані @media (prefers-color-scheme), ані дубля токенів тут немає — і сторінка не встигає блимнути світлим, перш ніж стати темною. */ :root[data-theme="dark"]{ --brand:#9EA46A; /* олива світлішає: на темному вона мусить читатись як акцент */ --brand-dark:#1E2013; /* смуга квятомату й підвал — тепер найглибше місце сторінки */ --brand-deep:#2A2D19; /* --cream лишається тим самим: вершкове з логотипу — це і є світло цієї теми */ --paper:#12130D; /* тло — глибока олива, не чорний: чорний із кремовим гуде */ --paper-2:#191B12; /* секція, що має відступити назад — трохи ближче до ока */ --ink:#EDEBD9; /* текст: те саме тепле молоко, що й --paper світлої теми */ /* Другорядний текст світліший, ніж проста інверсія світлої теми. На папері сіре читається легко, на темному — гасне: ліди, підписи, посилання в шапці й нотатки під календарем ішли 6.6:1 і виглядали як вимкнені. Тепер 9.3:1 — усе ще тихіше за основний текст (15.5:1), але вже видно. */ --ink-soft:#B7B99B; --line:#3A3D2B; /* волосини теж: 1.35:1 до тла — це вже не лінія, а здогад */ /* Корпус автомата йде ще глибше. Інакше він зрівнявся б із оливковою смугою, на якій стоїть, — а вона в темній темі сама майже чорна. */ --metal:#0E0F0A; --metal-2:#080906; --metal-line:#26281C; --glass:#1A1B14; /* Тінь на темному працює навпаки: розсіяна пляма не читається, тому лишається контактна — вона відриває фото від тла, і цього досить. */ --shadow-photo:0 1px 2px rgba(0,0,0,.5), 0 20px 44px -22px rgba(0,0,0,.75); } /* Атрибут hidden ховає елемент лише доти, доки хтось не задасть йому display — тоді власне правило перемагає, бо в браузера hidden — це звичайний display:none найнижчої ваги. На це вже наступали з картками каталогу, а потім зі смугою свята, де display:flex показав усі п'ять дат одразу. Тому одне правило на весь сайт: hidden означає hidden, і жодне оформлення його не скасовує. */ [hidden]{display:none!important} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important}} body{ margin:0;background:var(--paper);color:var(--ink); font:400 var(--t-body)/1.65 var(--sans); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } /* video тут не для краси: атрибут height у