/* ========================================================================== MeBaby — БРАНД ЦВЕТОВЕ И ТИПОГРАФИЯ -------------------------------------------------------------------------- ЕДИНСТВЕНОТО МЯСТО, КОЕТО СЕ ПИПА ПРИ СМЯНА НА БРАНД ИДЕНТИЧНОСТТА. Всичко останало (main.css, шаблоните) чете само тези променливи. Палитрата е снета директно от логото: „me” — коралово розово #ee8189 „baby” — тюркоазено синьо #6cc7d4 ========================================================================== */ :root { /* --- 1. Тюркоазено (основен брандов цвят, от „baby”) ------------------ */ --brand-primary: #6cc7d4; /* чистият цвят от логото */ --brand-primary-dark: #45a9b8; /* hover на плоскости */ --brand-primary-deep: #1f6f7d; /* ТЕКСТ и бутони — контраст ≥ 4.5:1 */ --brand-primary-soft: #d6eff3; /* меки фонове, рамки, badge-ове */ --brand-primary-tint: #f0fafb; /* най-светъл фон на секция */ /* --- 2. Коралово (акцент, от „me”) ----------------------------------- */ --brand-accent: #ee8189; --brand-accent-dark: #dd626b; --brand-accent-deep: #a8444c; /* ТЕКСТ върху светло — контраст ≥ 4.5:1 */ --brand-accent-soft: #fce4e6; --brand-accent-tint: #fef5f6; /* --- 3. Неутрални ----------------------------------------------------- */ --brand-ink: #2c4a52; /* заглавия и основен текст */ --brand-ink-soft: #56757e; /* второстепенен текст */ --brand-muted: #869da4; /* помощен текст, плейсхолдъри */ --brand-line: #e3edef; /* граници и разделители */ --brand-line-strong: #c9dde1; --brand-cream: #fdfbf9; /* топъл фон на страницата */ --brand-paper: #ffffff; /* картички, полета, модали */ --brand-warm: #f4f1ed; /* топлата лента между белите секции */ --brand-warm-deep: #ebe6e0; /* същата лента, една степен по-плътна */ /* --- 4. Игрива палитра (цветове по секции) ---------------------------- */ /* Логото дава двата водещи цвята; тези шест разширяват гамата, за да има всяка секция и всяка тема на картичката собствен характер. Всеки цвят идва в три степени: base — плоскости и илюстрации soft — фонове и рамки deep — ТЕКСТ върху светло (контраст ≥ 4.5:1) */ --c-sky: #6cc7d4; --c-sky-soft: #d6eff3; --c-sky-deep: #1f6f7d; --c-coral: #ee8189; --c-coral-soft: #fce4e6; --c-coral-deep: #a8444c; --c-sun: #f7b955; --c-sun-soft: #fdefd4; --c-sun-deep: #8a5c12; --c-mint: #6cc39a; --c-mint-soft: #d8f0e4; --c-mint-deep: #1f6b4d; --c-lilac: #9b86d9; --c-lilac-soft: #e8e2f8; --c-lilac-deep: #4d3a8a; --c-peach: #f59a72; --c-peach-soft: #fde5da; --c-peach-deep: #94441f; --c-rose: #e987b3; --c-rose-soft: #fbdfec; --c-rose-deep: #963a67; /* Активният акцент. Секциите го предефинират чрез data-accent="…", а компонентите вътре четат само --sec / --sec-soft / --sec-deep. */ --sec: var(--c-sky); --sec-soft: var(--c-sky-soft); --sec-deep: var(--c-sky-deep); /* --- 5. Служебни ------------------------------------------------------ */ --brand-success: #3f9d6d; --brand-danger: #c0503f; --brand-sale: var(--brand-accent-deep); /* --- 6. Типография ---------------------------------------------------- */ /* Rubik е геометричен с леко заоблени ъгли — кимва към формите на логото, без да е толкова изразен; Nunito е текстовият шрифт. И двата имат кирилица — задължително условие, магазинът е изцяло на български. (Quicksand, който стоеше тук преди, няма кирилица и заглавията всъщност падаха към резервния шрифт.) */ --font-display: "Rubik", "Trebuchet MS", "Segoe UI", "DejaVu Sans", sans-serif; --font-body: "Nunito", "Segoe UI", "Helvetica Neue", "DejaVu Sans", Arial, sans-serif; --fw-body: 400; --fw-medium: 600; --fw-bold: 700; /* Quicksand свършва на 700 — по-висока стойност кара браузъра да удебелява изкуствено. Затова „тежко“ тук е 700, а не 800. */ --fw-heavy: 700; /* Редакционна мярка за заглавията: широки, спокойни, с лек разряд — обратното на стегнатото „лендинг" изписване. */ --lh-display: 1.24; --tracking-display: .005em; --tracking-eyebrow: .22em; /* --- 7. Форма --------------------------------------------------------- */ /* Логото е изцяло заоблено — радиусите са нарочно щедри. */ --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(44, 74, 82, .05), 0 2px 8px rgba(44, 74, 82, .05); --shadow: 0 6px 24px rgba(44, 74, 82, .08); --shadow-lg: 0 18px 50px rgba(44, 74, 82, .13); --shadow-brand: 0 10px 28px rgba(108, 199, 212, .32); /* --- 8. Ритъм --------------------------------------------------------- */ --wrap: 1180px; --wrap-narrow: 780px; --gutter: clamp(20px, 5vw, 48px); /* Три стъпки на вертикалния ритъм: широка лента, средна и тясна. Големите секции дишат — оттам идва спокойният, редакционен вид. */ --section-y: clamp(64px, 9vw, 110px); --section-y-md: clamp(44px, 6vw, 64px); --section-y-sm: clamp(28px, 4vw, 40px); /* --- 9. Движение ------------------------------------------------------ */ /* Вградените криви на браузъра са твърде слаби и всичко изглежда мудно. Тези три вършат цялата работа: out — за влизане и излизане (започва бързо, спира меко) in-out — за местене по екрана drawer — за чекмеджета, кривата на iOS ЕЙЗ-ИН НЕ СЕ ПОЛЗВА в интерфейс: започва бавно точно в мига, в който потребителят гледа, и 200 ms изглеждат като 400. */ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); /* Интерфейсът стои под 300 ms. По-дълго е позволено само на входа на началната страница, която се гледа веднъж на посещение. */ --dur-press: 140ms; --dur-ui: 220ms; --dur-panel: 280ms; --dur-enter: 520ms; --stagger: 65ms; /* --- 10. Скъсан лист -------------------------------------------------- */ /* Двата ръба са начертани за темата (генератор със зададено зърно), не са взети от чужд сайт. Използват се като маска: пластът се оцветява с цвета на своята лента и се изрязва по формата на скъсана хартия. */ --torn-h: 26px; --torn-top: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%2228%22%20viewBox%3D%220%200%201200%2028%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C28%20L0%2C3.1%20L46.3%2C8.9%20L85.3%2C20.3%20L118.6%2C10.9%20L135.5%2C19.2%20L166.5%2C3.1%20L193.7%2C5.9%20L230.5%2C6%20L258.4%2C9.4%20L283.3%2C6.6%20L301.7%2C6.9%20L330.9%2C7.2%20L358.9%2C8.1%20L398.7%2C5.6%20L423.9%2C23.3%20L443.8%2C9%20L486.7%2C8.2%20L502.3%2C21.4%20L549.1%2C3.9%20L570.7%2C4.3%20L612.8%2C7.7%20L660.2%2C5.8%20L703.7%2C6.4%20L726.8%2C10%20L762.6%2C21.9%20L781.8%2C19.7%20L824.1%2C4.9%20L860.6%2C22.7%20L903.6%2C22.8%20L942.2%2C22.4%20L965.4%2C10.5%20L1007.5%2C3.2%20L1023.9%2C9.2%20L1065.1%2C5.1%20L1110.2%2C3.2%20L1154.5%2C6.9%20L1200%2C6.1%20L1200%2C28%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); --torn-bottom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%2228%22%20viewBox%3D%220%200%201200%2028%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C28%20L0%2C4.0%20L16.1%2C16.8%20L30.1%2C15.7%20L50.4%2C5.5%20L69.1%2C4.6%20L90.5%2C5.5%20L116.8%2C4.1%20L158.1%2C21.9%20L175.4%2C6.9%20L194.5%2C6.5%20L231.7%2C9.3%20L271%2C22.8%20L299%2C3.5%20L343.6%2C16%20L364.4%2C3.6%20L382.5%2C4%20L408.4%2C9%20L431.1%2C18.7%20L456.4%2C6.6%20L471.2%2C4.3%20L503.5%2C3.7%20L525.5%2C5%20L539.8%2C4.9%20L562.8%2C3.2%20L604.1%2C8.4%20L633.3%2C6.4%20L652.6%2C5.2%20L700.5%2C17.5%20L726%2C8.7%20L745.6%2C7.5%20L764.8%2C23.2%20L794.7%2C3.2%20L837.4%2C3.5%20L872.4%2C5.5%20L914.2%2C7.2%20L939.8%2C5.8%20L957.4%2C4%20L995.9%2C15.1%20L1015.5%2C5.2%20L1045.7%2C6.7%20L1076.3%2C5.1%20L1107.2%2C9.2%20L1148.3%2C23.5%20L1195.6%2C6.9%20L1200%2C5.3%20L1200%2C28%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }