/* ========================================================================== ArtChocolat — „Сладко студио“ Палитрата идва от оригиналния сайт; формите са стикерни: дебели заобляния, цветна отместена сянка вместо размита, и много дребно движение. Дисплей шрифтът е ObelixPro (само главни букви), хостван локално. Източник: build/src/site.css → копира се в public/assets/css/ при билд. ========================================================================== */ @font-face { font-family: "ObelixPro"; src: url("../fonts/obelixpro.woff2") format("woff2"), url("../fonts/obelixpro.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "ObelixPro"; src: url("../fonts/obelixpro-bold.woff2") format("woff2"), url("../fonts/obelixpro-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* --- брандови цветове от artchocolat.bg --- */ --sky: #e1f7ff; --sky-deep: #b6e9fa; --pink: #f9b6d5; --pink-deep: #f07fb9; --cream: #fbf6eb; --cream-deep: #f4e9d4; --sage: #ccd7d1; --sage-deep: #a9bdb3; --butter: #ffe6b0; --cocoa: #7a2840; --cocoa-deep: #56172b; --text: #4a4245; --muted: #8b8085; --line: #ecdfcd; --white: #fff; /* --- Google --- */ --g-blue: #4285f4; --g-red: #ea4335; --g-yellow: #fbbc05; --g-green: #34a853; --font-display: "ObelixPro", "Trebuchet MS", Verdana, sans-serif; --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; --r-sm: 14px; --r: 22px; --r-lg: 30px; --r-xl: 42px; /* Стикерна сянка: плътна и отместена, вместо размита. */ --sticker: 4px 4px 0 var(--cocoa); --sticker-lg: 8px 8px 0 var(--cocoa); --soft-lg: 0 24px 54px rgba(122, 40, 64, .16); --edge: 2.5px solid var(--cocoa); --header-h: 76px; --wrap: 1220px; --gutter: clamp(16px, 4vw, 44px); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); } /* --- reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); /* Затвореното чекмедже е position:fixed и стои извън екрана вдясно. overflow на не реже fixed елементи — затова се реже тук. */ overflow-x: clip; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--text); background: var(--cream); overflow-x: clip; } body.is-locked { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--cocoa); text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 3px; border-radius: 8px; } h1, h2, h3, h4, h5, .display { font-family: var(--font-display); font-weight: 400; color: var(--cocoa); /* ObelixPro е шрифт само с главни букви — редовете искат повече въздух. */ line-height: 1.2; margin: 0 0 .5em; overflow-wrap: break-word; } h1 { font-size: clamp(1.85rem, 4.4vw, 3rem); } h2 { font-size: clamp(1.5rem, 3.1vw, 2.2rem); } h3 { font-size: clamp(1.08rem, 1.9vw, 1.35rem); } h4 { font-size: 1.05rem; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } /* ========================================================================== Движение — изключва се наведнъж при prefers-reduced-motion ========================================================================== */ @keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes float-x { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(28px,-22px) scale(1.06); } 66% { transform: translate(-22px,16px) scale(.96); } } @keyframes pop-in { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-11px) rotate(4deg); } } @keyframes confetti-fall { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--cx), 260px) rotate(var(--cr)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js .reveal { opacity: 1 !important; transform: none !important; } .ticker-track, .review-track { animation: none !important; } .announce-rotator ul, .announce { animation: none !important; } } /* ========================================================================== Слой ========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 840px; } .section { position: relative; padding-block: clamp(52px, 8vw, 104px); } .section-sm { position: relative; padding-block: clamp(30px, 5vw, 56px); } .center { text-align: center; } .stack > * + * { margin-top: 1rem; } .bg-white { background: var(--white); } .bg-sky { background: var(--sky); } .bg-pink { background: var(--pink); } .bg-cream { background: var(--cream-deep); } /* Вълнист преход между две секции. */ .wave { display: block; width: 100%; height: clamp(26px, 3.6vw, 48px); } .wave path { fill: currentColor; } .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; padding: .5em 1em; border-radius: 999px; background: var(--white); border: var(--edge); color: var(--cocoa); box-shadow: 3px 3px 0 var(--pink); margin-bottom: 1rem; } .eyebrow::before { content: "✦"; color: var(--pink-deep); } .lead { font-size: 1.1rem; color: var(--muted); } .section-head { max-width: 660px; margin: 0 auto clamp(30px, 5vw, 56px); text-align: center; } .section-head p { color: var(--muted); } /* Маркер зад дума. */ .mark { position: relative; display: inline-block; z-index: 0; padding-inline: .1em; } .mark::after { content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .04em; height: .34em; background: var(--pink); border-radius: 999px; z-index: -1; transform: rotate(-1deg); } .grid { display: grid; gap: clamp(16px, 2.2vw, 26px); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); } /* ========================================================================== Бутони ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-display); font-size: .92rem; padding: .8em 1.5em; border: var(--edge); border-radius: 999px; background: var(--cocoa); color: var(--white); text-align: center; box-shadow: var(--sticker); transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop), background .18s ease; } /* Иконите в бутон нямат собствени размери — без това се разтягат до пълна ширина. */ .btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; } .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--cocoa); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cocoa); } .btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; box-shadow: var(--sticker); } .btn-nowrap { white-space: nowrap; } .btn-pink { background: var(--pink); color: var(--cocoa); } .btn-sky { background: var(--sky); color: var(--cocoa); } .btn-white { background: var(--white); color: var(--cocoa); } .btn-butter { background: var(--butter); color: var(--cocoa); } .btn-ghost { background: transparent; color: var(--cocoa); box-shadow: none; } .btn-ghost:hover { background: var(--white); box-shadow: var(--sticker); } .btn-sm { font-size: .79rem; padding: .55em 1.05em; border-width: 2px; box-shadow: 3px 3px 0 var(--cocoa); } .btn-sm:hover { box-shadow: 5px 5px 0 var(--cocoa); } .btn-lg { font-size: 1rem; padding: .95em 1.8em; box-shadow: var(--sticker-lg); } .btn-lg:hover { box-shadow: 10px 10px 0 var(--cocoa); } .btn-block { width: 100%; } .badge { display: inline-block; font-family: var(--font-display); font-size: .65rem; letter-spacing: .06em; padding: .4em .78em; border-radius: 999px; border: 2px solid var(--cocoa); background: var(--pink); color: var(--cocoa); white-space: nowrap; box-shadow: 2px 2px 0 var(--cocoa); } .badge-sky { background: var(--sky); } .badge-butter { background: var(--butter); } .badge-cocoa { background: var(--cocoa); color: var(--white); box-shadow: 2px 2px 0 var(--pink); } /* ========================================================================== Плаващи петна във фона ========================================================================== */ .blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .blob { position: absolute; border-radius: 50%; filter: blur(58px); opacity: .6; animation: float-x 19s ease-in-out infinite; } .blob-1 { width: 42vw; height: 42vw; background: var(--sky); top: -12vw; right: -10vw; } .blob-2 { width: 34vw; height: 34vw; background: var(--pink); bottom: -14vw; left: -8vw; animation-duration: 24s; animation-direction: reverse; } .blob-3 { width: 24vw; height: 24vw; background: var(--butter); top: 38%; left: 44%; animation-duration: 29s; opacity: .42; } .section > .wrap, .hero > .wrap, .page-hero > .wrap { position: relative; z-index: 1; } /* ========================================================================== Header ========================================================================== */ .announce { position: relative; overflow: hidden; color: #fbe3ea; font-family: var(--font-display); font-size: .78rem; letter-spacing: .05em; /* Фонът бавно се прелива между какао и слива. */ background: linear-gradient(100deg, #56172b, #7a2840, #8d3352, #7a2840, #56172b); background-size: 300% 100%; animation: slide-bg 16s linear infinite; } @keyframes slide-bg { to { background-position: 300% 0; } } .announce-inner { display: flex; align-items: center; justify-content: center; gap: .8em; padding-block: .62em; } /* Пулсиращата точка подсказва, че лентата е жива. */ .announce-dot { position: relative; width: 9px; height: 9px; flex-shrink: 0; } .announce-dot::before, .announce-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pink); } .announce-dot::after { animation: ping 2.2s ease-out infinite; } @keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } } /* Съобщенията се сменят вертикално; последното повтаря първото за плавен цикъл. */ .announce-rotator { height: 1.5em; overflow: hidden; } .announce-rotator ul { list-style: none; margin: 0; padding: 0; animation: rotate-msgs 20s cubic-bezier(.7, 0, .3, 1) infinite; } .announce-rotator li { height: 1.5em; line-height: 1.5em; white-space: nowrap; text-align: center; } @keyframes rotate-msgs { 0%, 16.5% { transform: translateY(0); } 20%, 36.5% { transform: translateY(-16.6667%); } 40%, 56.5% { transform: translateY(-33.3333%); } 60%, 76.5% { transform: translateY(-50%); } 80%, 96.5% { transform: translateY(-66.6667%); } 100% { transform: translateY(-83.3333%); } } @media (max-width: 560px) { .announce { font-size: .68rem; } } .site-header { position: sticky; top: 0; z-index: 60; background: rgba(251, 246, 235, .86); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 2.5px solid var(--cocoa); transition: box-shadow .22s ease; } .site-header.is-stuck { box-shadow: 0 5px 0 rgba(122, 40, 64, .13); } .header-bar { height: var(--header-h); display: flex; align-items: center; gap: 16px; } .brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .brand img { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--cocoa); background: var(--white); transition: transform .4s var(--ease-pop); } .brand:hover img { transform: rotate(-12deg) scale(1.08); } .brand-name { font-family: var(--font-display); font-size: 1.22rem; color: var(--cocoa); line-height: 1; white-space: nowrap; } .brand-name small { display: block; font-family: var(--font-body); font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .nav { margin-left: auto; } .nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav a { position: relative; display: block; font-family: var(--font-display); font-size: .83rem; padding: .55em .78em; border-radius: 999px; color: var(--cocoa); transition: background .18s ease, transform .18s var(--ease-pop); } .nav a::after { content: ""; position: absolute; left: 50%; bottom: .16em; width: 0; height: 3px; border-radius: 999px; background: var(--pink-deep); transform: translateX(-50%); transition: width .22s var(--ease-pop); } .nav a:hover { transform: translateY(-2px); } .nav a:hover::after, .nav a[aria-current="page"]::after { width: 56%; } .nav a[aria-current="page"] { background: var(--sky); } .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .icon-btn { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: var(--edge); border-radius: 50%; background: var(--white); color: var(--cocoa); box-shadow: 3px 3px 0 var(--cocoa); transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop), background .18s ease; } .icon-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--cocoa); background: var(--sky); } .icon-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--cocoa); } .icon-btn svg { width: 21px; height: 21px; } .icon-btn.is-bumped { animation: pop-in .42s var(--ease-pop); } .cart-count { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; font-family: var(--font-display); font-size: .65rem; border-radius: 999px; background: var(--pink-deep); color: var(--white); border: 2px solid var(--cocoa); } .cart-count[hidden] { display: none; } .burger { display: none; } @media (max-width: 1060px) { .nav { position: fixed; inset: var(--header-h) 0 auto 0; margin: 0; background: var(--cream); border-bottom: 2.5px solid var(--cocoa); box-shadow: var(--soft-lg); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; transform: translateY(-14px); opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s var(--ease-pop), visibility .22s; } .nav.is-open { opacity: 1; visibility: visible; transform: none; } .nav ul { flex-direction: column; align-items: stretch; gap: 4px; padding: 16px var(--gutter) 26px; } .nav a { font-size: 1.05rem; padding: .75em 1em; border: 2px solid transparent; } .nav a:hover { background: var(--sky); border-color: var(--cocoa); transform: none; } .nav a::after { display: none; } .burger { display: grid; } } /* ========================================================================== Hero — бенто мрежа ========================================================================== */ .hero { position: relative; padding-block: clamp(30px, 4.5vw, 58px) clamp(42px, 6vw, 78px); overflow: hidden; } .bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(82px, auto); gap: clamp(12px, 1.6vw, 20px); } .bento > * { position: relative; border: var(--edge); border-radius: var(--r-lg); box-shadow: var(--sticker); background: var(--white); overflow: hidden; } .bento-copy { grid-column: span 7; grid-row: span 4; padding: clamp(24px, 3.2vw, 44px); display: flex; flex-direction: column; justify-content: center; } .bento-photo { grid-column: span 5; grid-row: span 6; padding: 0; } .bento-badge { grid-column: span 3; grid-row: span 2; background: var(--sky); padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; } .bento-rating { grid-column: span 4; grid-row: span 2; background: var(--butter); padding: 16px 20px; display: flex; align-items: center; gap: 14px; } .bento-photo img { width: 100%; height: 100%; object-fit: cover; } .bento-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(86, 23, 43, .58)); pointer-events: none; } .bento-caption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: var(--white); font-family: var(--font-display); font-size: 1.05rem; text-shadow: 0 2px 10px rgba(86, 23, 43, .7); } .bento-caption small { display: block; font-family: var(--font-body); font-size: .72rem; opacity: .92; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; } .hero h1 { margin-bottom: .4em; } .hero-sub { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--text); max-width: 44ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.7rem; } .bento-badge b { font-family: var(--font-display); font-size: 1.55rem; color: var(--cocoa); display: block; line-height: 1.05; } .bento-badge span { font-size: .78rem; color: var(--cocoa); opacity: .78; line-height: 1.35; } .hero-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 1.5rem 0 0; list-style: none; padding: 0; } .hero-facts li { display: flex; align-items: center; gap: .45em; font-family: var(--font-display); font-size: .76rem; color: var(--cocoa); } .hero-facts svg { width: 17px; height: 17px; color: var(--pink-deep); flex-shrink: 0; } /* Стикер, който виси над бентото. */ .sticker-note { position: absolute; z-index: 5; right: clamp(-8px, 1vw, 16px); top: -16px; display: grid; place-items: center; width: 106px; height: 106px; border-radius: 50%; border: var(--edge); background: var(--pink); color: var(--cocoa); font-family: var(--font-display); font-size: .72rem; line-height: 1.2; text-align: center; box-shadow: var(--sticker); animation: bob 5s ease-in-out infinite; } .sticker-note b { display: block; font-size: 1.2rem; } @media (max-width: 980px) { .bento-copy { grid-column: span 12; grid-row: auto; } .bento-photo { grid-column: span 12; grid-row: auto; aspect-ratio: 4/3; } .bento-badge { grid-column: span 6; grid-row: auto; } .bento-rating { grid-column: span 6; grid-row: auto; } .sticker-note { display: none; } } @media (max-width: 560px) { .bento-badge, .bento-rating { grid-column: span 12; } .hero-cta .btn { flex: 1 1 100%; } } /* ========================================================================== Лента с вкусове ========================================================================== */ .ticker { border-block: var(--edge); background: var(--pink); overflow: hidden; padding-block: .72em; } .ticker-track { display: flex; width: max-content; animation: marquee 34s linear infinite; } .ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; } .ticker-track > span { display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; white-space: nowrap; } .ticker-track a { font-family: var(--font-display); font-size: clamp(.92rem, 1.9vw, 1.25rem); color: var(--cocoa); display: inline-block; transition: transform .2s var(--ease-pop); } .ticker-track a:hover { transform: scale(1.14) rotate(-3deg); } .ticker-track i { font-style: normal; color: var(--white); } /* ========================================================================== Карти ========================================================================== */ .card { background: var(--white); border: var(--edge); border-radius: var(--r-lg); box-shadow: var(--sticker); padding: clamp(22px, 3vw, 34px); transition: transform .22s var(--ease-pop), box-shadow .22s var(--ease-pop); } .card-hover:hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 8px 8px 0 var(--cocoa); } .card-sky { background: var(--sky); } .card-pink { background: var(--pink); } .card-cream { background: var(--cream-deep); } .card-sage { background: var(--sage); } .card-butter { background: var(--butter); } .card-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; border: var(--edge); background: var(--sky); color: var(--cocoa); margin-bottom: 1rem; box-shadow: 3px 3px 0 var(--cocoa); transition: transform .3s var(--ease-pop); } .card-hover:hover .card-icon { transform: rotate(-10deg) scale(1.06); } .card-pink .card-icon, .card-sky .card-icon, .card-butter .card-icon { background: var(--white); } .card-icon svg { width: 27px; height: 27px; } /* --- карта на кутия („Избери своята кутия“) ---------------------------- */ .box-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .box-media { position: relative; aspect-ratio: 4/3; overflow: hidden; border-bottom: var(--edge); background: var(--cream-deep); } .box-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-pop); } .card-hover:hover .box-media img { transform: scale(1.07); } .box-media .badge { position: absolute; top: 12px; left: 12px; z-index: 2; } .box-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } /* ========================================================================== Продуктова карта ========================================================================== */ .product-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: var(--edge); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sticker); transition: transform .24s var(--ease-pop), box-shadow .24s var(--ease-pop); } .product-card:hover { transform: translate(-3px, -6px) rotate(-.8deg); box-shadow: 9px 9px 0 var(--cocoa); } .product-card:nth-child(even):hover { transform: translate(-3px, -6px) rotate(.8deg); } .product-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--cream-deep); border-bottom: var(--edge); } .product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-pop); } .product-card:hover .product-media img { transform: scale(1.09) rotate(1.5deg); } .product-flags { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } /* Бутонът изскача върху снимката при посочване; на тъч остава видим. */ .product-quick { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translate(-50%, calc(100% + 22px)); opacity: 0; transition: transform .26s var(--ease-pop), opacity .2s ease; } .product-card:hover .product-quick, .product-card:focus-within .product-quick { transform: translate(-50%, 0); opacity: 1; } @media (hover: none) { .product-quick { position: static; transform: none; opacity: 1; } .product-media .product-quick { display: none; } } .product-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: .45rem; } .product-name { font-family: var(--font-display); font-size: 1.06rem; color: var(--cocoa); margin: 0; line-height: 1.25; } .product-name a { color: inherit; } .product-note { font-size: .85rem; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-foot { margin-top: auto; padding-top: .5rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .price { font-family: var(--font-display); font-size: 1.16rem; color: var(--cocoa); white-space: nowrap; } .price small { font-size: .62em; color: var(--muted); } /* ========================================================================== Филтри ========================================================================== */ .filters { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: clamp(26px, 4vw, 42px); } .filter { font-family: var(--font-display); font-size: .79rem; padding: .55em 1.1em; border: var(--edge); border-radius: 999px; background: var(--white); color: var(--cocoa); box-shadow: 3px 3px 0 var(--cocoa); transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop), background .18s ease; } .filter:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--cocoa); background: var(--sky); } .filter[aria-pressed="true"] { background: var(--cocoa); color: var(--white); box-shadow: 3px 3px 0 var(--pink); } .filter-empty { text-align: center; color: var(--muted); padding: 40px 0; } /* ========================================================================== Трохи и заглавна лента ========================================================================== */ .crumbs { font-size: .8rem; color: var(--muted); padding-block: 18px 0; } .crumbs ol { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: 0; padding: 0; } .crumbs li::after { content: "→"; margin-left: .4em; color: var(--pink-deep); } .crumbs li:last-child::after { content: none; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--cocoa); } .page-hero { position: relative; background: var(--sky); border-bottom: var(--edge); padding-block: clamp(38px, 6vw, 74px); text-align: center; overflow: hidden; } .page-hero p { color: var(--cocoa); opacity: .82; max-width: 62ch; margin-inline: auto; } /* ========================================================================== Продуктова страница ========================================================================== */ .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4.5vw, 60px); align-items: start; } .gallery-main { aspect-ratio: 1; border: var(--edge); border-radius: var(--r-xl); overflow: hidden; background: var(--cream-deep); box-shadow: var(--sticker-lg); } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .gallery-thumbs button { width: 78px; height: 78px; padding: 0; border: var(--edge); border-radius: var(--r-sm); overflow: hidden; background: var(--cream-deep); box-shadow: 3px 3px 0 var(--cocoa); transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop); } .gallery-thumbs button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--cocoa); } .gallery-thumbs button[aria-current="true"] { box-shadow: 3px 3px 0 var(--pink-deep); } .gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; } .price-lg { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.3rem); color: var(--cocoa); } .layers { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .layers li { display: flex; gap: .7em; align-items: flex-start; font-size: .95rem; } .layers li::before { content: ""; flex-shrink: 0; width: 12px; height: 12px; margin-top: .48em; border-radius: 50%; background: var(--pink); border: 2px solid var(--cocoa); } .qty { display: inline-flex; align-items: center; border: var(--edge); border-radius: 999px; background: var(--white); overflow: hidden; box-shadow: 3px 3px 0 var(--cocoa); } .qty button { width: 42px; height: 46px; border: none; background: none; font-family: var(--font-display); font-size: 1.2rem; color: var(--cocoa); } .qty button:hover { background: var(--sky); } .qty input { width: 48px; height: 46px; border: none; background: none; text-align: center; font-family: var(--font-display); font-size: 1rem; color: var(--cocoa); -moz-appearance: textfield; appearance: textfield; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .buy-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 1.6rem; } .buy-row .btn { flex: 1 1 200px; } .meta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .88rem; } .meta-list li { display: flex; gap: .7em; align-items: center; color: var(--muted); } .meta-list svg { width: 18px; height: 18px; color: var(--pink-deep); flex-shrink: 0; } @media (max-width: 860px) { .product-detail { grid-template-columns: 1fr; } } /* ========================================================================== Конструктор на сет ========================================================================== */ .builder { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: start; } .slots { display: flex; flex-wrap: wrap; gap: 12px; } .slot { position: relative; flex: 1 1 108px; aspect-ratio: 1; max-width: 152px; border: 2.5px dashed var(--pink-deep); border-radius: var(--r); background: var(--white); overflow: hidden; display: grid; place-items: center; color: var(--muted); font-family: var(--font-display); font-size: .72rem; padding: 0; transition: transform .18s var(--ease-pop), border-color .18s ease, box-shadow .18s var(--ease-pop); } .slot:hover { transform: translate(-2px, -2px); border-color: var(--cocoa); box-shadow: 4px 4px 0 var(--cocoa); } .slot.is-filled { border-style: solid; border-color: var(--cocoa); box-shadow: 4px 4px 0 var(--cocoa); animation: pop-in .32s var(--ease-pop); } .slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .slot .slot-x { position: absolute; top: 5px; right: 5px; z-index: 2; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--cocoa); font-size: .8rem; border: 2px solid var(--cocoa); } .slot-num { position: absolute; bottom: 5px; left: 5px; z-index: 2; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--cocoa); color: var(--white); font-size: .65rem; } .picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 11px; } .pick { padding: 0; border: var(--edge); border-radius: var(--r-sm); background: var(--white); overflow: hidden; box-shadow: 3px 3px 0 var(--cocoa); text-align: center; transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop); } .pick:hover { transform: translate(-2px, -3px) rotate(-2deg); box-shadow: 5px 5px 0 var(--cocoa); } .pick img { aspect-ratio: 1; object-fit: cover; width: 100%; border-bottom: 2px solid var(--cocoa); } .pick span { display: block; font-family: var(--font-display); font-size: .67rem; color: var(--cocoa); padding: 6px 4px 8px; line-height: 1.25; } @media (max-width: 860px) { .builder { grid-template-columns: 1fr; } } /* ========================================================================== Стъпки ========================================================================== */ .steps { counter-reset: step; display: grid; gap: clamp(18px, 2.6vw, 28px); } .step { position: relative; padding-left: 76px; } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: var(--edge); background: var(--pink); color: var(--cocoa); font-family: var(--font-display); font-size: 1.3rem; box-shadow: 3px 3px 0 var(--cocoa); } .step:nth-child(2)::before { background: var(--sky); } .step:nth-child(3)::before { background: var(--butter); } .step:nth-child(4)::before { background: var(--sage); } .step h3 { margin-bottom: .25em; } .step p { color: var(--muted); font-size: .93rem; } /* ========================================================================== Google отзиви ========================================================================== */ .google-panel { border: var(--edge); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--sticker-lg); padding: clamp(22px, 3.2vw, 38px); display: grid; grid-template-columns: auto auto 1fr; gap: clamp(18px, 3vw, 40px); align-items: center; } .g-mark { display: flex; align-items: center; gap: 12px; } .g-mark > svg { width: 42px; height: 42px; flex-shrink: 0; } .g-mark b { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--cocoa); line-height: 1.25; display: block; } .g-mark small { display: block; font-size: .73rem; color: var(--muted); letter-spacing: .04em; } /* Пръстенът се запълва до оценката при влизане в кадър. */ .g-ring { position: relative; width: 112px; height: 112px; flex-shrink: 0; } .g-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .g-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; } .g-ring .track { stroke: var(--cream-deep); } .g-ring .fill { stroke: var(--g-yellow); stroke-dasharray: 308; stroke-dashoffset: 308; transition: stroke-dashoffset 1.5s var(--ease-pop); } .g-ring.is-in .fill { stroke-dashoffset: var(--dash, 0); } .g-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.75rem; color: var(--cocoa); } .g-bars { display: grid; gap: 6px; min-width: 190px; } .g-bar { display: grid; grid-template-columns: 1.4em 1fr 2.6em; align-items: center; gap: 9px; font-size: .76rem; color: var(--muted); } .g-bar-track { height: 9px; border-radius: 999px; background: var(--cream-deep); border: 1.5px solid var(--cocoa); overflow: hidden; } .g-bar-fill { display: block; height: 100%; width: 0; background: var(--g-yellow); transition: width 1.2s var(--ease-pop); } .g-bars.is-in .g-bar-fill { width: var(--w, 0%); } .stars { display: flex; gap: 2px; color: var(--g-yellow); } .stars svg { width: 16px; height: 16px; } .stars-lg svg { width: 21px; height: 21px; } /* --- безкрайна лента с отзиви --- */ .review-rail { position: relative; overflow: hidden; padding-block: 8px; } .review-rail::before, .review-rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(36px, 7vw, 110px); z-index: 2; pointer-events: none; } .review-rail::before { left: 0; background: linear-gradient(90deg, var(--cream), transparent); } .review-rail::after { right: 0; background: linear-gradient(270deg, var(--cream), transparent); } .review-track { display: flex; width: max-content; animation: marquee 64s linear infinite; } .review-track.rev { animation-direction: reverse; animation-duration: 78s; } .review-rail:hover .review-track, .review-rail:focus-within .review-track { animation-play-state: paused; } .review-track > div { display: flex; gap: 18px; padding-right: 18px; } .g-review { width: 340px; flex-shrink: 0; background: var(--white); border: var(--edge); border-radius: var(--r); box-shadow: var(--sticker); padding: 18px 20px; display: flex; flex-direction: column; gap: .65rem; transition: transform .22s var(--ease-pop), box-shadow .22s var(--ease-pop); } .g-review:hover { transform: translate(-3px, -3px) rotate(-.7deg); box-shadow: 8px 8px 0 var(--cocoa); } .g-review-top { display: flex; align-items: center; gap: 11px; } .g-avatar { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--cocoa); font-family: var(--font-display); font-size: 1.02rem; color: var(--white); } .g-avatar.c1 { background: var(--g-blue); } .g-avatar.c2 { background: var(--g-red); } .g-avatar.c3 { background: var(--g-green); } .g-avatar.c4 { background: var(--g-yellow); color: var(--cocoa); } .g-review-who { min-width: 0; flex: 1; } .g-review-who b { display: block; font-family: var(--font-display); font-weight: 400; font-size: .9rem; color: var(--cocoa); line-height: 1.25; } .g-verified { display: inline-flex; align-items: center; gap: .3em; font-size: .69rem; color: var(--muted); } .g-verified svg { width: 13px; height: 13px; color: var(--g-blue); flex-shrink: 0; } .g-review p { font-size: .885rem; margin: 0; flex: 1; } .g-review-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .71rem; color: var(--muted); padding-top: .3rem; border-top: 2px dashed var(--line); } .g-review-foot svg { width: 14px; height: 14px; flex-shrink: 0; } @media (max-width: 980px) { .google-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; } .g-bars { width: 100%; max-width: 320px; } } @media (max-width: 520px) { .g-review { width: 268px; } } /* ========================================================================== Количка (drawer) ========================================================================== */ .scrim { position: fixed; inset: 0; z-index: 90; background: rgba(45, 20, 28, .5); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s; } .scrim.is-open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--cream); border-left: var(--edge); box-shadow: var(--soft-lg); transform: translateX(101%); transition: transform .3s var(--ease-pop); } .drawer.is-open { transform: none; } .drawer-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: var(--edge); background: var(--white); } .drawer-head h2 { margin: 0; font-size: 1.12rem; } .drawer-head > svg { width: 22px; height: 22px; color: var(--cocoa); flex-shrink: 0; } .drawer-head .icon-btn { margin-left: auto; } .drawer-body { flex: 1; overflow-y: auto; padding: 14px 20px; } .drawer-foot { border-top: var(--edge); background: var(--white); padding: 18px 20px; } .line-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 2px dashed var(--line); } .line-item:last-child { border-bottom: none; } .line-item img { width: 70px; height: 70px; border-radius: var(--r-sm); border: 2px solid var(--cocoa); object-fit: cover; flex-shrink: 0; } .line-main { flex: 1; min-width: 0; } .line-name { font-family: var(--font-display); font-size: .93rem; color: var(--cocoa); line-height: 1.3; } .line-note { font-size: .75rem; color: var(--muted); } .line-ctl { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .line-ctl button { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--cocoa); border-radius: 50%; background: var(--white); color: var(--cocoa); font-size: .9rem; } .line-ctl button:hover { background: var(--sky); } .line-qty { font-family: var(--font-display); font-size: .87rem; min-width: 1.5em; text-align: center; } .line-price { font-family: var(--font-display); color: var(--cocoa); white-space: nowrap; } /* По-специфично от `.line-ctl button`, иначе текстът се свива до 28px. */ .line-ctl .line-del { margin-left: auto; background: none; border: none; color: var(--muted); font-size: .75rem; text-decoration: underline; white-space: nowrap; width: auto; height: auto; border-radius: 0; padding: 0; } .line-ctl .line-del:hover { color: var(--cocoa); background: none; } .totals { display: grid; gap: .5rem; margin-bottom: 1rem; font-size: .89rem; } .totals > div { display: flex; justify-content: space-between; gap: 1em; } .totals .grand { font-family: var(--font-display); font-size: 1.18rem; color: var(--cocoa); padding-top: .6rem; border-top: 2px dashed var(--line); } .empty-cart { text-align: center; padding: 42px 12px; color: var(--muted); } .empty-cart svg { width: 62px; height: 62px; margin: 0 auto 1rem; color: var(--sage-deep); animation: float-y 4s ease-in-out infinite; } /* Конфети при добавяне в количката. */ .confetti { position: fixed; z-index: 150; pointer-events: none; width: 10px; height: 10px; border-radius: 2px; animation: confetti-fall .9s ease-out forwards; } /* ========================================================================== Форми ========================================================================== */ .field { display: block; margin-bottom: 1.1rem; } .field > span { display: block; font-family: var(--font-display); font-size: .79rem; color: var(--cocoa); margin-bottom: .4rem; } .field > span .req { color: var(--pink-deep); } .field input, .field textarea, .field select { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--text); padding: .78em 1em; border: var(--edge); border-radius: var(--r-sm); background: var(--white); box-shadow: 3px 3px 0 var(--line); transition: box-shadow .16s var(--ease-pop), transform .16s var(--ease-pop); } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; box-shadow: 3px 3px 0 var(--pink-deep); transform: translate(-1px, -1px); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } @media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } } .help { font-size: .81rem; color: var(--muted); margin-top: .35rem; } .radio-set { display: grid; gap: 10px; } .radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: var(--edge); border-radius: var(--r); background: var(--white); cursor: pointer; box-shadow: 3px 3px 0 var(--line); transition: box-shadow .18s var(--ease-pop), transform .18s var(--ease-pop), background .18s ease; } .radio-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--cocoa); } .radio-card:has(input:checked) { background: var(--sky); box-shadow: 4px 4px 0 var(--cocoa); } .radio-card input { margin-top: .35em; accent-color: var(--cocoa); flex-shrink: 0; } .radio-card b { font-family: var(--font-display); font-weight: 400; color: var(--cocoa); display: block; } .radio-card small { color: var(--muted); } .notice { display: flex; gap: .8em; padding: 14px 18px; border: var(--edge); border-radius: var(--r); background: var(--sky); color: var(--cocoa); font-size: .89rem; margin-bottom: 1.4rem; box-shadow: 3px 3px 0 var(--cocoa); } .notice svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: .2em; } .notice-pink { background: var(--pink); } .notice-butter { background: var(--butter); } /* ========================================================================== Текстови страници ========================================================================== */ .prose { max-width: 78ch; } .prose h2 { font-size: clamp(1.2rem, 2.3vw, 1.55rem); margin-top: 2.2em; padding-top: 1.1em; border-top: 2px dashed var(--line); } .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .prose h3 { font-size: 1.06rem; margin-top: 1.7em; } .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; } .prose ul { list-style: none; padding-left: 0; margin: 0 0 1.2em; } .prose li { margin-bottom: .45em; } .prose ul > li { position: relative; padding-left: 1.6em; } .prose ul > li::before { content: ""; position: absolute; left: .2em; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); border: 1.5px solid var(--cocoa); } /* WordPress обгръща всеки елемент от списък в

— иначе точките се разреждат. */ .prose li > p { margin-bottom: .35em; } .prose li > p:last-child { margin-bottom: 0; } .prose li > ul { margin-top: .45em; margin-bottom: 0; } .prose a { text-decoration: underline; text-decoration-color: var(--pink-deep); text-underline-offset: 3px; } .prose strong { color: var(--cocoa); } .prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: .9rem; } .prose th, .prose td { padding: .7em .9em; border: 2px solid var(--line); text-align: left; } .prose th { background: var(--cream-deep); font-family: var(--font-display); font-weight: 400; color: var(--cocoa); } .table-scroll { overflow-x: auto; } .updated { font-size: .83rem; color: var(--cocoa); opacity: .75; font-style: italic; } .doc-layout { display: grid; grid-template-columns: 252px 1fr; gap: clamp(26px, 5vw, 58px); align-items: start; } .toc { position: sticky; top: calc(var(--header-h) + 20px); } .toc h2 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-family: var(--font-display); margin-bottom: .8rem; } .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .toc a { display: block; font-size: .84rem; padding: .45em .7em; border-radius: var(--r-sm); color: var(--text); border-left: 3px solid transparent; } .toc a:hover { background: var(--white); border-left-color: var(--pink-deep); color: var(--cocoa); } @media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } .toc { position: static; } } /* ========================================================================== CTA банер ========================================================================== */ .cta-band { position: relative; overflow: hidden; background: var(--cocoa); color: #f9e6ec; border: var(--edge); border-radius: var(--r-xl); box-shadow: var(--sticker-lg); padding: clamp(32px, 5vw, 66px); text-align: center; } .cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; filter: blur(52px); opacity: .42; animation: float-x 21s ease-in-out infinite; } .cta-band::before { width: 300px; height: 300px; background: var(--pink); top: -120px; left: -80px; } .cta-band::after { width: 300px; height: 300px; background: var(--sky); bottom: -140px; right: -70px; animation-direction: reverse; } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { color: var(--white); } .cta-band p { max-width: 54ch; margin-inline: auto; opacity: .9; } .cta-band .hero-cta { justify-content: center; } .cta-band .eyebrow { background: var(--pink); border-color: var(--cream); box-shadow: 3px 3px 0 var(--cream); } /* ========================================================================== Footer ========================================================================== */ .site-footer { position: relative; background: var(--white); padding-block: 0 0; overflow: hidden; } /* Назъбен ръб — като хартиена подложка за десерт. */ .footer-scallop { height: 22px; background: radial-gradient(circle at 12px 0, transparent 11px, var(--cocoa) 11px, var(--cocoa) 13.5px, var(--white) 14px) repeat-x; background-size: 24px 22px; } /* Огромният надпис минава бавно и стои като текстура, не като текст. */ .footer-wordmark { overflow: hidden; padding-block: clamp(10px, 2vw, 22px) 0; } .footer-wordmark-track { display: flex; width: max-content; animation: marquee 44s linear infinite; } .footer-wordmark-track > span { display: flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; } .footer-wordmark i { font-family: var(--font-display); font-style: normal; font-size: clamp(2.6rem, 8vw, 6rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--line); white-space: nowrap; transition: color .4s ease, -webkit-text-stroke-color .4s ease; } .footer-wordmark:hover i { color: var(--cream-deep); -webkit-text-stroke-color: var(--pink); } /* Голям призив над колоните. */ .footer-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-block: clamp(18px, 3vw, 34px) clamp(34px, 5vw, 56px); padding: clamp(24px, 3.4vw, 40px); border: var(--edge); border-radius: var(--r-xl); background: var(--sky); box-shadow: var(--sticker-lg); overflow: hidden; } .footer-cta::before { content: ""; position: absolute; width: 260px; height: 260px; right: -70px; top: -110px; border-radius: 50%; background: var(--pink); filter: blur(46px); opacity: .5; animation: float-x 18s ease-in-out infinite; } .footer-cta > * { position: relative; z-index: 1; } .footer-cta h2 { margin-bottom: .25em; } .footer-cta p { color: var(--cocoa); opacity: .8; margin: 0; max-width: 46ch; } .footer-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 44px); } .footer-grid h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-family: var(--font-display); margin-bottom: 1rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .footer-grid a:not(.brand) { font-size: .89rem; color: var(--text); display: inline-block; transition: transform .16s var(--ease-pop), color .16s ease; } .footer-grid a:not(.brand):hover { color: var(--cocoa); transform: translateX(5px); } .footer-about p { font-size: .89rem; color: var(--muted); max-width: 34ch; } .footer-contact { display: grid; gap: .6rem; font-size: .89rem; } .footer-contact div { display: flex; gap: .7em; align-items: flex-start; } .footer-contact svg { width: 18px; height: 18px; color: var(--pink-deep); flex-shrink: 0; margin-top: .25em; } .socials { display: flex; gap: 9px; margin-top: 1.2rem; } .socials a { width: 42px; height: 42px; display: grid; place-items: center; border: var(--edge); border-radius: 50%; background: var(--sky); color: var(--cocoa); box-shadow: 3px 3px 0 var(--cocoa); transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop), background .18s ease; } .socials a:hover { transform: translate(-2px, -4px) rotate(-10deg); box-shadow: 5px 7px 0 var(--cocoa); background: var(--pink); } .socials svg { width: 20px; height: 20px; } .footer-bottom { margin-top: clamp(30px, 5vw, 50px); padding-block: 20px 26px; border-top: 2px dashed var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; font-size: .79rem; color: var(--muted); } .footer-bottom a { color: var(--muted); } .footer-bottom a:hover { color: var(--cocoa); } .footer-love { display: inline-flex; align-items: center; gap: .35em; } .footer-love .beat { display: inline-flex; animation: beat 1.9s ease-in-out infinite; } .footer-love .beat svg { width: 15px; height: 15px; color: var(--pink-deep); } @keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.28); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } } /* Цветна лента най-долу, която бавно се движи. */ .footer-stripe { height: 10px; background: repeating-linear-gradient(135deg, var(--pink) 0 22px, var(--sky) 22px 44px, var(--butter) 44px 66px, var(--sage) 66px 88px); background-size: 124px 10px; animation: stripe-slide 6s linear infinite; border-top: var(--edge); } @keyframes stripe-slide { to { background-position: 124px 0; } } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .footer-cta-btns .btn { flex: 1 1 100%; } } /* ========================================================================== Открояваща се лента („Важно“) ========================================================================== */ .alert-band { position: relative; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 24px); flex-wrap: wrap; padding: clamp(16px, 2.4vw, 24px) clamp(18px, 3vw, 30px); border: var(--edge); border-radius: var(--r-lg); background: var(--butter); box-shadow: var(--sticker-lg); overflow: hidden; } /* Диагоналните ивици се движат бавно и придават „внимание“. */ .alert-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(122,40,64,.07) 0 14px, transparent 14px 34px); background-size: 48px 48px; animation: stripe-slide 3.4s linear infinite; pointer-events: none; } .alert-band > * { position: relative; z-index: 1; } .alert-live { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .alert-live i, .alert-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pink-deep); border: 2px solid var(--cocoa); } .alert-live::after { animation: ping 2s ease-out infinite; border-color: transparent; } .alert-text { flex: 1 1 320px; min-width: 0; } .alert-text b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 2vw, 1.22rem); color: var(--cocoa); line-height: 1.25; margin-bottom: .2rem; } .alert-text span { font-size: .9rem; color: var(--cocoa); opacity: .8; } /* ========================================================================== Toast ========================================================================== */ .toast { position: fixed; left: 50%; bottom: 26px; z-index: 200; transform: translate(-50%, 160%); display: flex; align-items: center; gap: .7em; max-width: calc(100% - 32px); padding: .8em 1.3em; border: var(--edge); border-radius: 999px; background: var(--cocoa); color: var(--white); font-family: var(--font-display); font-size: .85rem; box-shadow: 5px 5px 0 var(--pink); transition: transform .32s var(--ease-pop); } .toast.is-on { transform: translate(-50%, 0); } .toast svg { width: 19px; height: 19px; flex-shrink: 0; } /* ========================================================================== Появяване при скрол (само когато има JavaScript) ========================================================================== */ .js .reveal { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .6s ease, transform .6s var(--ease-pop); } .js .reveal.is-in { opacity: 1; transform: none; } .js .reveal:nth-child(2) { transition-delay: .06s; } .js .reveal:nth-child(3) { transition-delay: .12s; } .js .reveal:nth-child(4) { transition-delay: .18s; } .js .reveal:nth-child(5) { transition-delay: .24s; } .js .reveal:nth-child(6) { transition-delay: .3s; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== Количка — заглавие, лента за доставка, изход ========================================================================== */ .drawer-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .drawer-title > svg { width: 22px; height: 22px; color: var(--cocoa); flex-shrink: 0; } .drawer-pill { font-family: var(--font-display); font-size: .66rem; padding: .3em .7em; border-radius: 999px; border: 2px solid var(--cocoa); background: var(--pink); color: var(--cocoa); white-space: nowrap; } .ship-meter { padding: 12px 20px; background: var(--sky); border-bottom: var(--edge); } .ship-meter-text { font-size: .8rem; color: var(--cocoa); margin-bottom: .45rem; } .ship-meter-text b { font-family: var(--font-display); font-weight: 400; } .ship-meter-track { height: 11px; border: 2px solid var(--cocoa); border-radius: 999px; background: var(--white); overflow: hidden; } .ship-meter-fill { display: block; height: 100%; width: 0; background: repeating-linear-gradient(135deg, var(--pink) 0 10px, var(--pink-deep) 10px 20px); background-size: 28px 11px; animation: stripe-slide 1.4s linear infinite; transition: width .5s var(--ease-pop); } .ship-meter.is-full .ship-meter-fill { background: repeating-linear-gradient(135deg, var(--sage) 0 10px, var(--sage-deep) 10px 20px); } .empty-art { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 1rem; border: 2.5px dashed var(--sage-deep); border-radius: 50%; color: var(--sage-deep); animation: float-y 4s ease-in-out infinite; } .empty-art svg { width: 44px; height: 44px; margin: 0; animation: none; } .empty-cart h3 { margin-bottom: .3rem; } .drawer-keep { display: block; width: 100%; margin-top: .8rem; padding: .4em; background: none; border: none; font-size: .82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .drawer-keep:hover { color: var(--cocoa); } /* Редовете влизат с леко изплуване. */ .line-item { animation: pop-in .26s var(--ease-pop); } /* ========================================================================== Конструктор — активна позиция и напредък ========================================================================== */ .slot-ghost { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px dashed currentColor; font-size: .9rem; } .slot.is-active { border-color: var(--cocoa); background: var(--sky); color: var(--cocoa); box-shadow: 4px 4px 0 var(--cocoa); animation: nudge 1.8s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, -3px); } } [data-builder] .slots { position: relative; }