— иначе точките се разреждат. */ .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(--gold); 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: linear-gradient(150deg, var(--plum), var(--cocoa-deep)); color: #f7e9ee; border: var(--edge); border-radius: var(--r-xl); box-shadow: var(--sticker-lg); padding: clamp(26px, 4vw, 52px); 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: transparent; border-color: var(--gold); color: var(--gold-pale); box-shadow: 3px 3px 0 rgba(201, 164, 76, .35); } .cta-band .eyebrow::before { color: var(--gold); } /* Златна нишка по вътрешния ръб на банера. */ .cta-band::after { z-index: 0; } .cta-band > .band-edge { position: absolute; inset: 8px; border: 1px solid rgba(201, 164, 76, .4); border-radius: calc(var(--r-xl) - 8px); pointer-events: none; z-index: 1; } /* ========================================================================== Footer ========================================================================== */ .site-footer { position: relative; background: var(--white); 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.5fr 1fr 1.2fr; 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):not(.socials a) { font-size: .89rem; color: var(--text); display: inline-block; transition: transform .16s var(--ease-pop), color .16s ease; } .footer-grid a:not(.brand):not(.socials a):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 !important; place-items: center; line-height: 0; 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(--gold) 22px 44px, var(--gold-pale) 44px 66px, var(--sky) 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; } /* ========================================================================== TikTok — лента с вертикални видеа ========================================================================== */ .tt-section { overflow: hidden; } .tt-rail { display: flex; gap: clamp(12px, 1.6vw, 18px); padding-inline: var(--gutter); padding-block: 6px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .tt-rail::-webkit-scrollbar { display: none; } .tt-card { position: relative; flex: 0 0 auto; width: clamp(200px, 22vw, 260px); aspect-ratio: 9 / 16; scroll-snap-align: center; border: var(--edge); border-radius: var(--r-lg); overflow: hidden; background: var(--cocoa-deep); box-shadow: var(--sticker); transition: transform .22s var(--ease-pop), box-shadow .22s var(--ease-pop); } .tt-card:hover { transform: translate(-3px, -4px); box-shadow: 8px 8px 0 var(--cocoa); } .tt-card > img { width: 100%; height: 100%; object-fit: cover; } .tt-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; opacity: 0; transition: opacity .45s ease; } /* Плеърът се показва чак когато се зареди; дотогава се вижда кадърът. */ .tt-card.is-playing iframe { opacity: 1; } .tt-card.is-playing .tt-play { opacity: 0; } .tt-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; transition: opacity .3s ease; } .tt-play svg { width: 34px; height: 34px; padding: 14px; box-sizing: content-box; border-radius: 50%; border: 2.5px solid var(--white); background: rgba(86, 23, 43, .55); color: var(--white); backdrop-filter: blur(3px); } /* Връзката стои над плеъра, за да води към TikTok. */ .tt-open { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; padding: .5em .8em; border-radius: 999px; border: 2px solid var(--cocoa); background: var(--white); color: var(--cocoa); font-family: var(--font-display); font-size: .7rem; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s var(--ease-pop); } .tt-card:hover .tt-open, .tt-card:focus-within .tt-open { opacity: 1; transform: none; } @media (hover: none) { .tt-open { opacity: 1; transform: none; } } /* ========================================================================== Телефон — по-сбито и центрирано hero ========================================================================== */ @media (max-width: 720px) { body { font-size: 16px; } .section { padding-block: 30px; } .section-sm { padding-block: 18px; } .section-head { margin-bottom: 20px; } /* Началният екран се чете като една центрирана колона. */ .hero { padding-block: 16px 24px; } /* Четири реда главни букви заемат половин екран — тук слизаме едно стъпало. */ .hero h1 { font-size: clamp(1.5rem, 7.4vw, 1.95rem); } .hero h1 br { display: none; } .hero-sub { font-size: .95rem; } .bento-copy { text-align: center; align-items: center; padding: 22px 18px; } .bento-copy .hero-sub { margin-inline: auto; } .bento-copy .eyebrow { align-self: center; } .hero-facts { justify-content: center; } .hero-cta { justify-content: center; width: 100%; } .bento-rating { justify-content: center; text-align: center; } .bento-badge { align-items: center; text-align: center; } .bento-photo { aspect-ratio: 1; } .card { padding: 18px; } .box-body { padding: 16px 18px 18px; } .grid-4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .product-body { padding: 12px 13px 14px; gap: .3rem; } .product-name { font-size: .95rem; } .product-note { font-size: .78rem; -webkit-line-clamp: 2; } .price { font-size: 1.02rem; } .btn-sm { font-size: .72rem; padding: .5em .85em; } .steps { gap: 14px; } .step { padding-left: 58px; } .step::before { width: 42px; height: 42px; font-size: 1.05rem; } .cta-band { padding: 26px 20px; } .footer-cta { padding: 22px 18px; text-align: center; justify-content: center; } .footer-cta p { margin-inline: auto; } .footer-cta-btns { width: 100%; justify-content: center; } .tt-card { width: 62vw; } .g-review { width: 76vw; max-width: 320px; } /* --- конструкторът на сет --------------------------------------------- Кутията, всички десерти и бутонът трябва да се виждат наведнъж, без да се скролва нагоре-надолу по време на избора. */ .slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .slot { max-width: none; flex: none; } /* Двете колони се сливат в един поток, за да може редът да се пренареди: `order` не действа през различни родители, а подробностите иначе сядат между кутията и десертите. */ /* align-items: start от макета за компютър свиваше всеки ред до текста си и заглавието оставаше залепено вляво въпреки text-align: center. */ .builder { display: flex; flex-direction: column; gap: 7px; align-items: stretch; } .builder > div { display: contents; } .builder .eyebrow { order: 1; align-self: center; } .builder h1 { order: 2; text-align: center; } .builder .lead { order: 3; text-align: center; } .builder .box-preview { order: 4; } .builder [data-builder-status] { order: 5; } .builder .picker-title { order: 6; } .builder .picker { order: 7; } .builder .builder-buy { order: 8; } .builder .builder-meta { order: 9; } .builder .picker + .help { order: 10; } /* Конструкторът трябва да се вижда цял още при отваряне на страницата, затова уводът и трохите отстъпват — изборът е сам по себе си ясен. */ .page-builder .crumbs { display: none; } .builder .lead { display: none; } .builder h1 { font-size: 1.3rem; margin: 0; text-align: center; } .builder-hint { display: none; } .builder-meta { margin-top: .8rem !important; font-size: .8rem; } .box-preview { width: min(46vw, 21vh); max-width: none; padding: 9px; margin: 0 auto; } .box-preview .slots { gap: 7px; } .box-preview .box-tag { display: none; } /* Цената и бутонът стоят на един ред, за да не крадат височина. */ [data-builder] .price-lg { font-size: 1.5rem; margin: 0 !important; } .builder-buy { display: flex; align-items: center; gap: 10px; } /* Етикетът трябва да остане на един ред до цената. */ .builder-buy .btn { flex: 1; font-size: .82rem; padding: .8em .9em; white-space: nowrap; } [data-builder-status] { margin: 0 !important; font-size: .72rem; line-height: 1.25; text-align: center; } /* Единайсетте десерта се събират в три реда. */ /* Заглавието на избора е излишно — плочките са точно под кутията. */ .builder .picker-title { display: none; } .picker { grid-template-columns: repeat(4, 1fr); gap: 7px; } .pick img { aspect-ratio: 1; } .pick span { font-size: .56rem; padding: 3px 2px 4px; line-height: 1.2; } .builder .picker + .help { display: none; } /* Безкрайната лента е твърде тежка за телефон — там се плъзга с пръст. */ .review-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .review-rail::-webkit-scrollbar { display: none; } .review-rail::before, .review-rail::after { display: none; } .review-track { animation: none !important; width: max-content; } .review-track > div { gap: 12px; padding-inline: var(--gutter); } .g-review { scroll-snap-align: center; } /* Лентата с вкусове също спира — движение + скрол на телефон се бие. */ .ticker-track { animation-duration: 46s; } /* Футърът се свива. */ .footer-wordmark { padding-block: 6px 0; } .footer-wordmark i { font-size: 2.2rem; -webkit-text-stroke-width: 1.5px; } .footer-cta { margin-block: 14px 26px; padding: 20px 16px; } .footer-cta h2 { font-size: 1.3rem; } .footer-cta p { font-size: .88rem; } .footer-grid { gap: 22px; } .footer-grid h3 { margin-bottom: .6rem; } .footer-grid ul { gap: .35rem; } .footer-about p { font-size: .85rem; } .footer-bottom { margin-top: 22px; padding-block: 14px 18px; font-size: .72rem; gap: 6px; } .socials { margin-top: .9rem; } .footer-scallop { height: 16px; background-size: 20px 16px; } } /* ========================================================================== Проследяване на поръчка ========================================================================== */ .track-wrap { max-width: 760px; margin-inline: auto; } .track-form { display: grid; gap: 12px; grid-template-columns: 1.4fr 1fr auto; align-items: end; } @media (max-width: 640px) { .track-form { grid-template-columns: 1fr; } } .track-form .field { margin: 0; } .track-card { border: var(--edge); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--sticker-lg); padding: clamp(20px, 3vw, 34px); animation: track-in .5s var(--ease-pop) both; } @keyframes track-in { from { opacity: 0; transform: translateY(18px) scale(.985); } } .track-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1.4rem; } .track-ref { font-family: var(--font-display); font-size: 1.15rem; color: var(--cocoa); } .track-ref small { display: block; font-family: var(--font-body); font-size: .78rem; color: var(--muted); letter-spacing: .04em; } /* --- стъпките ----------------------------------------------------------- */ .steps-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-block: 1.2rem 1.6rem; } /* Линията минава зад кръгчетата и се запълва до текущата стъпка. */ .steps-track::before, .steps-track::after { content: ""; position: absolute; top: 27px; height: 5px; border-radius: 999px; left: 12.5%; right: 12.5%; } .steps-track::before { background: var(--cream-deep); border: 2px solid var(--cocoa); box-sizing: content-box; top: 25px; } .steps-track::after { background: var(--pink); left: 12.5%; width: 0; transition: width 1.1s var(--ease-pop); z-index: 1; } .steps-track[data-fill="0"]::after { width: 0; } .steps-track[data-fill="1"]::after { width: 25%; } .steps-track[data-fill="2"]::after { width: 50%; } .steps-track[data-fill="3"]::after { width: 75%; } .step-node { position: relative; z-index: 2; text-align: center; } .step-dot { width: 56px; height: 56px; margin: 0 auto 8px; display: grid; place-items: center; border-radius: 50%; border: var(--edge); background: var(--white); color: var(--muted); box-shadow: 3px 3px 0 var(--cocoa); transition: background .4s var(--ease-pop), color .4s, transform .4s var(--ease-pop); } .step-dot svg { width: 24px; height: 24px; } .step-node.done .step-dot { background: var(--sage); color: var(--cocoa); } .step-node.on .step-dot { background: var(--pink); color: var(--cocoa); transform: scale(1.1); animation: step-pulse 2.2s ease-in-out infinite; } @keyframes step-pulse { 0%, 100% { box-shadow: 3px 3px 0 var(--cocoa), 0 0 0 0 rgba(240, 127, 185, .55); } 50% { box-shadow: 3px 3px 0 var(--cocoa), 0 0 0 12px rgba(240, 127, 185, 0); } } .step-node b { display: block; font-family: var(--font-display); font-weight: 400; font-size: .8rem; color: var(--cocoa); line-height: 1.2; } .step-node small { display: block; font-size: .7rem; color: var(--muted); margin-top: 2px; } .step-node:not(.done):not(.on) .step-dot { opacity: .55; } @media (max-width: 560px) { .steps-track { grid-template-columns: 1fr; gap: 0; } .steps-track::before, .steps-track::after { display: none; } .step-node { display: grid; grid-template-columns: 56px 1fr; gap: 12px; text-align: left; align-items: center; padding-block: 8px; position: relative; } .step-dot { margin: 0; } /* Вертикална връзка между кръгчетата. */ .step-node:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 64px; bottom: -8px; width: 3px; background: var(--cream-deep); border-radius: 999px; } .step-node.done:not(:last-child)::after { background: var(--pink); } } /* --- редове на поръчката ------------------------------------------------- */ .track-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(16px, 3vw, 30px); align-items: start; } @media (max-width: 640px) { .track-grid { grid-template-columns: 1fr; } } .track-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .track-items li { display: flex; gap: .7em; align-items: baseline; font-size: .93rem; } .track-items b { font-family: var(--font-display); font-weight: 400; color: var(--pink-deep); flex-shrink: 0; } .track-items i { display: block; font-style: normal; font-size: .78rem; color: var(--muted); } .track-sum { display: grid; gap: .45rem; font-size: .9rem; } .track-sum > div { display: flex; justify-content: space-between; gap: 1em; } .track-sum .big { font-family: var(--font-display); font-size: 1.2rem; color: var(--cocoa); padding-top: .5rem; border-top: 2px dashed var(--line); } .track-when { display: inline-flex; align-items: center; gap: .5em; padding: .5em .9em; border-radius: 999px; border: var(--edge); background: var(--sky); font-family: var(--font-display); font-size: .85rem; color: var(--cocoa); box-shadow: 3px 3px 0 var(--cocoa); } .track-when svg { width: 16px; height: 16px; flex-shrink: 0; } .track-note { margin-top: 1.2rem; padding: 14px 16px; border: var(--edge); border-radius: var(--r); background: var(--butter); color: var(--cocoa); box-shadow: 3px 3px 0 var(--cocoa); font-size: .92rem; } .track-note b { font-family: var(--font-display); font-weight: 400; display: block; margin-bottom: .2rem; } .track-cancel { text-align: center; padding: clamp(24px, 4vw, 40px); border: var(--edge); border-radius: var(--r-xl); background: var(--pink); box-shadow: var(--sticker-lg); } .track-live { display: inline-flex; align-items: center; gap: .45em; font-size: .76rem; color: var(--muted); } .track-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-deep); animation: track-beacon 2.4s infinite; } @keyframes track-beacon { 0% { box-shadow: 0 0 0 0 rgba(169, 189, 179, .7); } 70% { box-shadow: 0 0 0 8px rgba(169, 189, 179, 0); } 100% { box-shadow: 0 0 0 0 rgba(169, 189, 179, 0); } } /* ========================================================================== Тъмна секция — редуването светло/тъмно е това, което дърпа усещането нагоре ========================================================================== */ .section-dark { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--plum) 0%, var(--cocoa-deep) 55%, #35101f 100%); color: #efe2e7; border-block: 2px solid var(--gold-deep); } /* Едва доловима златна мрежа във фона. */ .section-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 18%, rgba(201, 164, 76, .16), transparent 45%), radial-gradient(circle at 88% 82%, rgba(246, 181, 207, .12), transparent 48%); } .section-dark > * { position: relative; z-index: 1; } .section-dark h2, .section-dark h3 { color: #fff; } .section-dark p { color: #d9c6ce; } .section-dark .section-head p { color: #cdb6c0; } .section-dark .eyebrow { background: transparent; border-color: var(--gold); color: var(--gold-pale); box-shadow: 3px 3px 0 rgba(201, 164, 76, .3); } .section-dark .eyebrow::before { color: var(--gold); } .section-dark .rule::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* Стъпките: златни цифри в кръг с тънък кант. */ .section-dark .step::before { background: transparent; border: 1.5px solid var(--gold); color: var(--gold-pale); box-shadow: none; font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; } .section-dark .step:nth-child(2)::before, .section-dark .step:nth-child(3)::before, .section-dark .step:nth-child(4)::before { background: transparent; } .section-dark .step p { color: #cbb4bd; } /* Тънка златна нишка между стъпките. */ .section-dark .step:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 60px; bottom: -14px; width: 1px; background: linear-gradient(180deg, rgba(201,164,76,.55), transparent); } .section-dark .steps { position: relative; } .section-dark .btn { --sh-col: var(--gold); } .section-dark .btn-ghost { color: var(--gold-pale); border-color: var(--gold); } .section-dark .btn-ghost:hover { background: var(--gold); color: var(--cocoa-deep); box-shadow: 4px 4px 0 var(--gold-deep); } /* Метален надпис — само върху тъмно, където златото има контраст. */ .gold-text { background: var(--gold-grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gold-sheen 7s linear infinite; } @keyframes gold-sheen { to { background-position: 220% 0; } } @media (prefers-reduced-motion: reduce) { .gold-text { animation: none; } } /* Златна нишка по вътрешния ръб на снимката в hero. */ .bento-photo::before { content: ""; position: absolute; inset: 7px; z-index: 3; border: 1px solid rgba(243, 228, 187, .5); border-radius: calc(var(--r-lg) - 8px); pointer-events: none; } /* Начален екран без снимка: картата е широка и празна, затова се облича — златна нишка по ръба, топли петна светлина и пръски отстрани. */ .bento-nophoto .bento-copy { grid-column: span 12; grid-row: auto; align-items: center; text-align: center; padding: clamp(30px, 4vw, 52px) clamp(20px, 4vw, 56px); background: radial-gradient(60% 70% at 12% 0%, rgba(243, 228, 187, .55), transparent 70%), radial-gradient(55% 65% at 90% 100%, rgba(246, 181, 207, .38), transparent 72%), var(--white); } /* Нишката стои над фона, но под текста. */ .bento-nophoto .bento-copy::before { content: ""; position: absolute; inset: 9px; z-index: 1; border: 1px solid var(--gold); opacity: .34; border-radius: calc(var(--r-lg) - 10px); pointer-events: none; } /* Бавно минаващ златен отблясък — картата да не стои мъртва. */ .bento-nophoto .bento-copy::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .72) 48%, rgba(243, 228, 187, .5) 53%, transparent 62%); background-size: 260% 100%; animation: hero-sheen 9s ease-in-out infinite; pointer-events: none; } @keyframes hero-sheen { 0%, 62% { background-position: 160% 0; } 100% { background-position: -60% 0; } } .bento-copy-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .bento-nophoto .hero-sub { margin-inline: auto; } .bento-nophoto .hero-cta, .bento-nophoto .hero-facts { justify-content: center; } /* Пръски по празните полета вляво и вдясно от текста. */ .sprinkles { position: absolute; top: 0; bottom: 0; width: clamp(90px, 13vw, 190px); z-index: 1; pointer-events: none; } .sprinkles.s-l { left: 0; } .sprinkles.s-r { right: 0; } .sprinkles i { position: absolute; width: 7px; height: 20px; border-radius: 4px; background: var(--pink); box-shadow: 0 1px 0 rgba(86, 23, 43, .12); animation: sprinkle-float 7s ease-in-out infinite; } .sprinkles i:nth-child(1) { top: 14%; left: 34%; transform: rotate(-22deg); background: var(--gold); animation-delay: -.4s; } .sprinkles i:nth-child(2) { top: 29%; left: 62%; transform: rotate(38deg); animation-delay: -1.7s; } .sprinkles i:nth-child(3) { top: 47%; left: 18%; transform: rotate(12deg); background: var(--gold-pale); animation-delay: -3.1s; } .sprinkles i:nth-child(4) { top: 62%; left: 55%; transform: rotate(-48deg); background: var(--gold); animation-delay: -2.2s; } .sprinkles i:nth-child(5) { top: 78%; left: 28%; transform: rotate(26deg); animation-delay: -5s; } .sprinkles i:nth-child(6) { top: 88%; left: 66%; transform: rotate(-8deg); background: var(--gold-pale); animation-delay: -6.2s; } .sprinkles.s-r i:nth-child(odd) { background: var(--pink); } .sprinkles.s-r i:nth-child(even) { background: var(--gold); } @keyframes sprinkle-float { 0%, 100% { translate: 0 0; opacity: .72; } 50% { translate: 0 -11px; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sprinkles i, .bento-nophoto .bento-copy::after { animation: none; } } /* -------------------------------------------------------------------------- Трите показателя под началния екран Нисък ред: знак вляво, число и обяснение вдясно. Еднакъв строеж и за трите — цветът идва само от акцента. -------------------------------------------------------------------------- */ .stat-card { --accent: var(--gold); --accent-soft: rgba(201, 164, 76, .16); grid-column: span 4; grid-row: auto; padding: 11px 16px 13px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(70% 140% at 50% 50%, var(--accent-soft), transparent 70%), var(--white); /* Повдигането е през translate, а не през transform: правилото за „показване при скрол“ нулира transform и изяждаше ефекта. */ transition: translate .35s var(--ease-pop), box-shadow .35s ease; } .stat-card:hover { translate: 0 -4px; box-shadow: 7px 8px 0 var(--cocoa); } /* Светъл лъч, който минава по картата при посочване. */ .stat-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .8) 50%, transparent 60%); background-size: 260% 100%; background-position: 160% 0; opacity: 0; } .stat-card:hover::after { opacity: 1; animation: stat-sheen .9s ease-out; } @keyframes stat-sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } } .stat-ico { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--cocoa); background: var(--accent-soft); color: var(--cocoa); box-shadow: 2px 2px 0 var(--cocoa); animation: stat-bob 4.5s ease-in-out infinite; transition: rotate .35s var(--ease-pop); } .stat-ico svg { width: 18px; height: 18px; } .stat-card:hover .stat-ico { rotate: -8deg; } @keyframes stat-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } } .sc-rating .stat-ico { animation-delay: -1.5s; } .sc-ship .stat-ico { animation-delay: -3s; } /* Числото и надписът се центрират един спрямо друг — иначе трите карти започват на различно място и редът изглежда разкъсан. */ .stat-text { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; } .stat-top { display: flex; align-items: center; justify-content: center; gap: 9px; } .stat-num { font-family: var(--font-serif); font-weight: 600; font-size: 1.8rem; line-height: 1.05; color: var(--gold-text); font-variant-numeric: tabular-nums; } .stat-num .cur { font-size: .66em; margin-right: .04em; } .stat-cap { font-size: .74rem; color: var(--cocoa); opacity: .8; line-height: 1.3; text-wrap: balance; } /* Чертата отдолу се изтегля, когато картата се появи. */ .stat-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold-grad); transform-origin: left; transition: transform .8s var(--ease-pop) .25s; } /* Без JavaScript чертата просто си стои изтеглена. */ .js .reveal:not(.is-in) .stat-bar { transform: scaleX(0); } /* Звездите изскачат една след друга. */ .sc-rating .stars { gap: 2px; } .sc-rating .stars svg { width: 15px; height: 15px; } .js .sc-rating .stars svg { opacity: 0; scale: .4; } .js .sc-rating.is-in .stars svg { animation: star-pop .45s var(--ease-pop) forwards; } .sc-rating.is-in .stars svg:nth-child(1) { animation-delay: .20s; } .sc-rating.is-in .stars svg:nth-child(2) { animation-delay: .29s; } .sc-rating.is-in .stars svg:nth-child(3) { animation-delay: .38s; } .sc-rating.is-in .stars svg:nth-child(4) { animation-delay: .47s; } .sc-rating.is-in .stars svg:nth-child(5) { animation-delay: .56s; } @keyframes star-pop { 0% { opacity: 0; scale: .4; rotate: -35deg; } 70% { opacity: 1; scale: 1.25; rotate: 8deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } } .sc-rating .stat-ico svg { width: 19px; height: 19px; } /* Акцентите: каталог — розово, Google — злато, доставка — слива. */ .sc-catalog { --accent: var(--pink-deep); --accent-soft: rgba(221, 123, 166, .16); } .sc-catalog .stat-bar { background: linear-gradient(90deg, var(--pink), var(--pink-deep)); } .sc-ship { --accent: var(--plum); --accent-soft: rgba(94, 32, 57, .1); } @media (prefers-reduced-motion: reduce) { .stat-ico { animation: none; } .stat-card:hover::after { animation: none; opacity: 0; } .js .sc-rating .stars svg { opacity: 1; scale: 1; } } @media (max-width: 880px) { .stat-card { grid-column: span 6; } .sc-ship { grid-column: span 12; } } @media (max-width: 640px) { /* Тесен екран — всеки показател заема цял ред, но остава нисък. */ .stat-card { grid-column: span 12; padding: 9px 14px 11px; gap: 10px; } .stat-num { font-size: 1.62rem; } .stat-cap { font-size: .72rem; } .stat-ico { width: 31px; height: 31px; } .stat-ico svg { width: 16px; height: 16px; } } /* ========================================================================== „За кога е?“ в количката ========================================================================== */ .when-pick { padding: 12px 20px; background: var(--butter); border-bottom: var(--edge); } .when-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; } .when-head svg { width: 16px; height: 16px; color: var(--cocoa); flex-shrink: 0; } .when-head b { font-family: var(--font-display); font-weight: 400; font-size: .88rem; color: var(--cocoa); } /* Избраната дата се вижда и когато редът е свит. */ .when-say { margin-left: auto; font-size: .76rem; color: var(--cocoa); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .when-chev { display: none; flex-shrink: 0; transition: rotate .2s ease; } .when-chev svg { width: 15px; height: 15px; } .is-closed .when-body { display: none; } .is-closed .when-head { margin-bottom: 0; } .is-closed .when-chev { rotate: -90deg; } /* Стрелката и свиването имат смисъл само там, където мястото е малко. */ @media (max-width: 720px) { .when-chev { display: block; } } @media (min-width: 721px) { .when-head { cursor: default; } } .when-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; } .when-row label { display: block; } .when-row span { display: block; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cocoa); opacity: .7; margin-bottom: 3px; } .when-row input, .when-row select { width: 100%; padding: .45em .6em; border: 2px solid var(--cocoa); border-radius: 10px; background: var(--white); color: var(--cocoa); font: inherit; font-size: .85rem; /* Часът е списък по работно време — стрелката я рисуваме сами, за да изглежда еднакво с полето за дата. */ appearance: none; -webkit-appearance: none; height: calc(1.7em + 4px); } .when-row select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236d2440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6em center; background-size: 11px 8px; padding-right: 1.9em; } .when-row input:focus, .when-row select:focus { outline: none; box-shadow: 0 0 0 3px rgba(221, 123, 166, .35); } /* --- редът с правилото ---------------------------------------------------- Досега стоеше като дребен шрифт върху кремавото на количката и се четеше трудно. Носи правило, по което поръчката може да бъде отказана, затова вече е в своя бяла табелка: датата отговаря на въпроса, ограничението е в тъмно розово, а не в сиво. */ .when-hint { margin: 9px 0 0; padding: 7px 11px; border: 2px solid var(--cocoa); border-radius: var(--r-sm); background: var(--white); box-shadow: 3px 3px 0 var(--cocoa); color: var(--cocoa); font-size: .76rem; font-weight: 600; line-height: 1.45; } /* Датата е отговорът — маркирана е като с текстоотбелязващ маркер. */ .when-hint b { font-weight: 800; color: var(--cocoa-deep); white-space: nowrap; box-shadow: inset 0 -.42em 0 var(--pink); padding: 0 .12em; } /* Ограничението: достатъчно тъмно, за да се чете върху бяло. */ .when-rule { color: #a8324f; font-weight: 700; } /* Същото изречение в страницата за поръчка. Там фонът вече е бял, затова вместо табелка се ползва чертичка отстрани. */ .help[data-when-hint] { display: block; margin-top: .5rem; padding: 4px 0 4px 10px; border-left: 3px solid var(--pink-deep); color: var(--cocoa); font-size: .82rem; font-weight: 600; line-height: 1.45; } .help[data-when-hint] b { font-weight: 800; color: var(--cocoa-deep); white-space: nowrap; } /* ========================================================================== Макет на кутията — пълни се, докато клиентът избира ========================================================================== */ .box-preview { position: relative; aspect-ratio: 1; max-width: 420px; margin-inline: auto; padding: clamp(13px, 2.4vw, 22px); border: var(--edge); border-radius: var(--r-lg); /* Вътрешността на кутия: топъл картон с меко осветление от горния ъгъл. */ background: radial-gradient(circle at 26% 18%, rgba(255,255,255,.85), transparent 58%), linear-gradient(150deg, var(--cream) 0%, var(--cream-deep) 62%, #e8dcc4 100%); box-shadow: var(--sticker-lg), inset 0 3px 14px rgba(74, 21, 40, .12); overflow: hidden; } .box-tag { /* Печатът стои под десертите: полето около тях се стесни и иначе надписът ляга върху долното кръгче. */ position: absolute; z-index: 0; right: 10px; bottom: 7px; font-family: var(--font-serif); font-weight: 600; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); opacity: .55; pointer-events: none; } /* Позициите заемат кутията в мрежа — 2×2 за четири, 1×2 за два. */ .box-preview .slots { position: relative; z-index: 1; display: grid; gap: clamp(8px, 1.4vw, 12px); height: 100%; grid-template-columns: repeat(2, 1fr); align-content: center; } .box-preview[data-slots-count="2"] .slots { grid-template-rows: 1fr; align-content: center; } .box-preview .slot { position: relative; width: 100%; max-width: none; flex: none; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--sage-deep); background: radial-gradient(circle at 50% 50%, #fff 62%, rgba(255,255,255,0) 63%), var(--cream); box-shadow: inset 0 2px 8px rgba(74, 21, 40, .1); display: grid; place-items: center; overflow: hidden; transition: transform .24s var(--ease-pop), border-color .24s ease, box-shadow .24s ease; } .box-preview .slot:hover { transform: scale(1.04); border-color: var(--cocoa); box-shadow: none; } .box-preview .slot.is-active { border-color: var(--pink-deep); border-style: solid; background: var(--sky); animation: pad-wait 2s ease-in-out infinite; } @keyframes pad-wait { 0%, 100% { box-shadow: 0 0 0 0 rgba(221, 123, 166, .45); } 60% { box-shadow: 0 0 0 10px rgba(221, 123, 166, 0); } } .box-preview .slot.is-filled { border: 2px solid var(--cocoa); border-style: solid; box-shadow: 0 6px 14px rgba(74, 21, 40, .22); animation: pad-drop .4s var(--ease-pop); } @keyframes pad-drop { 0% { transform: translateY(-16px) scale(.86); opacity: .2; } 100% { transform: none; opacity: 1; } } .box-preview .slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Самата подложка вече е пунктирен кръг — втори кръг около цифрата само я смаляваше и я правеше да изглежда изместена. Остава чиста цифра. */ .box-preview .slot .slot-ghost { width: 100%; height: 100%; border: 0; background: none; color: var(--sage-deep); display: flex; align-items: center; justify-content: center; /* Текстовият шрифт има нормални мерки; ObelixPro сяда под центъра. */ font-family: var(--font-body); font-weight: 800; line-height: 1; font-size: 1.05rem; /* резервен размер за стари браузъри */ /* Цифрите нямат опашка, затова мастилото им сяда с 3% от кегела над средата на реда. Поправката е в em, за да важи при всеки размер. */ position: relative; top: .03em; } /* Цифрата се мери спрямо самата подложка, а не спрямо шрифта на родителя. */ .box-preview .slot { container-type: inline-size; } @supports (font-size: 1cqw) { .box-preview .slot .slot-ghost { font-size: 40cqw; } } .box-preview .slot.is-active .slot-ghost { color: var(--pink-deep); } .box-preview .slot .slot-x { top: 6px; right: 6px; width: 22px; height: 22px; font-size: .72rem; } .box-preview .slot .slot-num { bottom: 6px; left: 6px; width: 20px; height: 20px; font-family: var(--font-body); font-weight: 800; font-size: .62rem; line-height: 1; } @media (max-width: 720px) { .box-preview { max-width: 320px; padding: 16px; } /* Мрежата на макета важи и тук — старото подреждане в редица отпада. */ .builder .box-preview .slots { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* Мозайка в количката: показва кои десерти са в сглобената кутия. */ .line-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 88px; height: 88px; flex-shrink: 0; padding: 3px; border: 2px solid var(--cocoa); border-radius: var(--r-sm); background: var(--cream-deep); overflow: hidden; } .line-mosaic img, .line-mosaic span { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: var(--cream); border: 1px solid var(--line); display: block; } /* Два десерта заемат цялата височина, не половин квадрат. */ .line-mosaic:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } /* Две парчета стоят едно до друго, не в квадрат. */ .line-mosaic:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; } .line-mosaic:has(> :nth-child(3)) { grid-template-rows: 1fr 1fr; } /* На широк екран цената и бутонът остават един под друг. */ @media (min-width: 721px) { .builder-buy { display: grid; gap: 12px; } .builder-buy .btn { width: 100%; } } /* Ниските телефони: плочките на избора стават по-плоски, за да се събере всичко на един екран, без надписите да станат нечетими. */ @media (max-width: 720px) and (max-height: 780px) { .box-preview { width: min(46vw, 20vh); } .builder .pick img { aspect-ratio: 4 / 3; } .builder .picker { gap: 6px; } .builder .builder-meta { font-size: .76rem; } } /* Съвсем ниски екрани: изборът минава на пет колони с плоски плочки, за да остане всичко на един екран без превъртане. */ @media (max-width: 720px) and (max-height: 640px) { .builder .box-preview { width: min(40vw, 19vh); padding: 7px; } .builder .picker { grid-template-columns: repeat(5, 1fr); gap: 5px; } .builder .pick img { aspect-ratio: 4 / 3; } .builder .pick span { font-size: .5rem; padding: 2px 1px 3px; } .builder h1 { font-size: 1.15rem; } .builder .builder-buy .btn { font-size: .76rem; padding: .7em .7em; } } /* ========================================================================== Дребните подложки на телефон Блокът стои най-накрая нарочно: базовите правила за макета са по-долу в файла и иначе надделяват над мобилните въпреки медийната заявка. ========================================================================== */ @media (max-width: 720px) { /* Номерът на запълнена позиция само закрива десерта — редът ѝ се вижда. */ .box-preview .slot.is-filled .slot-num { display: none; } .box-preview .slot .slot-x { top: 1px; right: 1px; width: 15px; height: 15px; font-size: .55rem; line-height: 1; border-width: 1.5px; background: rgba(255, 255, 255, .94); } .box-preview .box-tag { display: none; } /* При дребен кегел браузърът закръгля реда до цял пиксел и цифрата пак се качва; тук се добавя останалото. */ /* На телефон цифрата седеше около 2% под средата на кръгчето. Вече важи същата поправка като на компютър — по-голямата я избутваше надолу и цифрата увисваше. */ .box-preview .slot .slot-ghost { top: .03em; } } /* ========================================================================== Количката на телефон Горната и долната част изяждаха почти целия екран и от списъка оставаше един ред. Тук всичко се свива, за да остане място за продуктите. ========================================================================== */ @media (max-width: 720px) { .drawer-head { padding: 8px 16px; } .drawer-head h2 { font-size: 1rem; } .drawer-pill { font-size: .6rem; padding: .25em .55em; } .drawer-head .icon-btn { width: 34px; height: 34px; } .drawer-head .icon-btn svg { width: 17px; height: 17px; } .when-pick { padding: 8px 16px; } .when-head { margin-bottom: 5px; gap: 6px; } .when-head b { font-size: .8rem; } .when-row { gap: 6px; } .when-row span { font-size: .6rem; margin-bottom: 2px; } .when-row input, .when-row select { padding: .3em .5em; font-size: .8rem; border-width: 1.5px; height: calc(1.65em + 3px); } .when-hint { margin-top: 6px; padding: 6px 9px; font-size: .71rem; line-height: 1.38; } .ship-meter { padding: 6px 16px; } .ship-meter-text { font-size: .69rem; margin-bottom: .25rem; } .ship-meter-track { height: 6px; } .drawer-body { padding: 6px 16px; } .line-item { padding: 6px 0; gap: 9px; } .line-item img, .line-mosaic { width: 50px; height: 50px; } .line-name { font-size: .87rem; } .line-note { font-size: .7rem; } .line-ctl { margin-top: 4px; gap: 6px; } .line-ctl button { width: 25px; height: 25px; } .line-price { font-size: .88rem; } .drawer-foot { padding: 8px 16px 9px; } .totals { gap: .12rem; margin-bottom: .42rem; font-size: .78rem; } .totals .grand { font-size: .98rem; padding-top: .28rem; } .totals .help { font-size: .66rem; line-height: 1.25; } .drawer-foot .btn-lg { font-size: .86rem; padding: .62em 1.1em; box-shadow: 3px 3px 0 var(--sh-col); } /* Кръстчето горе вече затваря количката — връзката отдолу само краде място. */ .drawer-keep { display: none; } .when-hint { margin-top: 5px; padding: 5px 8px; } } /* ========================================================================== Телефон — началният екран да се побира при отваряне Блокът стои най-накрая, защото базовите правила за .bento-nophoto са по-надолу от общата мобилна секция и иначе ги надписват. ========================================================================== */ @media (max-width: 720px) { .bento-nophoto .bento-copy { padding: 18px 16px 20px; } /* Съседните две картички са центрирани на телефон — и тази. */ .bento-ship { justify-content: center; text-align: center; } /* Надписът над заглавието се събира на един ред. */ .hero .eyebrow { font-size: .62rem; letter-spacing: .14em; padding: 5px 12px; margin-bottom: 10px; } .hero h1 { line-height: 1.2; margin-bottom: .3em; } .hero-sub { font-size: .9rem; line-height: 1.5; margin-bottom: 0; max-width: 34ch; } .hero-cta { margin-top: 1.05rem; gap: 9px; } .hero-cta .btn-lg { padding: .72em 1.1em; font-size: .92rem; } .hero-facts { margin-top: .95rem; gap: 5px 14px; } .hero-facts li { font-size: .68rem; } .hero-facts svg { width: 14px; height: 14px; } } /* ========================================================================== Макетът на кутията на телефон Кръгчетата с избраните десерти бяха дребни, защото общото правило по-долу в файла връщаше широко поле около тях. Блокът стои най-накрая, за да надделее, и смалява полето, вместо да вдига височината на кутията. ========================================================================== */ @media (max-width: 720px) { .builder .box-preview { width: min(52vw, 23vh); max-width: none; padding: 9px; } .builder .box-preview .slots { gap: 7px; } } /* Ниските телефони нямат височина за по-голяма кутия — там растат само кръгчетата, за сметка на полето. */ @media (max-width: 720px) and (max-height: 780px) { .builder .box-preview { width: min(46vw, 20vh); padding: 7px; } .builder .box-preview .slots { gap: 6px; } } @media (max-width: 720px) and (max-height: 640px) { .builder .box-preview { width: min(40vw, 19vh); padding: 5px; } .builder .box-preview .slots { gap: 5px; } } /* ========================================================================== Етикет на десерта: тегло, бележка и сгъваемите секции ========================================================================== */ .product-specs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -.4rem 0 1.2rem; } .spec-weight, .spec-note { display: inline-flex; align-items: center; gap: .4em; padding: .34em .8em; border: 2px solid var(--cocoa); border-radius: 999px; font-family: var(--font-display); font-size: .72rem; line-height: 1.2; color: var(--cocoa); background: var(--white); box-shadow: 2px 2px 0 var(--cocoa); } .spec-weight svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--gold-deep); } /* Бележката е отличие („Без добавена захар“), затова е в злато. */ .spec-note { background: var(--gold-pale); color: var(--gold-text); border-color: var(--gold-deep); box-shadow: 2px 2px 0 var(--gold-deep); } .accordion { margin-top: 1.8rem; border: var(--edge); border-radius: var(--r); background: var(--white); box-shadow: var(--sticker); overflow: hidden; } .acc-item + .acc-item { border-top: 2px solid var(--line); } .acc-head { display: flex; align-items: center; gap: 11px; width: 100%; padding: 14px 16px; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; color: var(--cocoa); transition: background .2s ease; } .acc-head:hover { background: var(--cream); } .acc-head:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: -3px; } .acc-ico { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--cocoa); background: var(--gold-pale); transition: rotate .3s var(--ease-pop), background .2s ease; } .acc-ico svg { width: 16px; height: 16px; color: var(--cocoa); } .acc-head[aria-expanded="true"] .acc-ico { background: var(--pink); rotate: -8deg; } .acc-title { font-family: var(--font-display); font-size: .92rem; line-height: 1.25; flex: 1; } .acc-chev { display: grid; place-items: center; flex-shrink: 0; transition: rotate .3s var(--ease-pop); } .acc-chev svg { width: 17px; height: 17px; color: var(--cocoa); } .acc-head[aria-expanded="true"] .acc-chev { rotate: 180deg; } /* Разгъването се движи през grid-template-rows — работи с текст с неизвестна височина, за разлика от max-height на око. */ .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease-pop); } .acc-item.is-open .acc-body { grid-template-rows: 1fr; } .acc-inner { overflow: hidden; } .acc-item.is-open .acc-inner { overflow: visible; } .acc-inner > :first-child { margin-top: 0; } .acc-inner > :last-child { margin-bottom: 0; } /* Подложката е в отделен слой, за да не се вижда при затворена секция. */ .acc-inner { padding-inline: 16px; } .acc-item.is-open .acc-inner { padding-block: 2px 16px; } .acc-inner p { font-size: .92rem; line-height: 1.65; } .acc-inner p + p { margin-top: .7rem; } .care-sub { margin-top: .8rem !important; } .care-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .care-list li { position: relative; padding-left: 16px; font-size: .88rem; line-height: 1.55; color: var(--text); } .care-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); border: 1px solid var(--gold-deep); } /* Заглавието на реда е с шрифта на текста: с дисплейния става главни букви и изяжда изречението след него. */ .care-list b { color: var(--cocoa); font-weight: 800; } .allergens { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; } .allergens li { padding: .3em .75em; border: 2px solid var(--pink-deep); border-radius: 999px; background: #fdeaf2; color: var(--cocoa); font-family: var(--font-display); font-size: .7rem; line-height: 1.2; } @media (max-width: 720px) { .accordion { margin-top: 1.4rem; } .acc-head { padding: 11px 13px; gap: 9px; } .acc-ico { width: 28px; height: 28px; } .acc-ico svg { width: 14px; height: 14px; } .acc-title { font-size: .84rem; } .acc-inner { padding-inline: 13px; } .acc-item.is-open .acc-inner { padding-block: 2px 13px; } .acc-inner p { font-size: .88rem; } .product-specs { margin: -.2rem 0 1rem; gap: 7px; } .spec-weight, .spec-note { font-size: .68rem; padding: .3em .7em; } } /* ========================================================================== Значка „Ново“ Златна, полюшва се и по нея минава отблясък — трябва да се забелязва, без да крещи повече от името на десерта. ========================================================================== */ .badge-new { position: relative; overflow: hidden; border-color: var(--gold-deep); background: var(--gold-grad); background-size: 220% 100%; color: var(--cocoa-deep); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); box-shadow: 2px 2px 0 var(--gold-deep); animation: badge-new-shine 3.4s linear infinite, badge-new-bob 2.6s ease-in-out infinite; } /* Искрата отгоре вляво — дребен знак, че е прясно. */ .badge-new::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%); background-size: 260% 100%; animation: badge-new-sweep 3.4s ease-in-out infinite; pointer-events: none; } @keyframes badge-new-shine { to { background-position: 220% 0; } } @keyframes badge-new-sweep { 0%, 55% { background-position: 170% 0; } 100% { background-position: -70% 0; } } @keyframes badge-new-bob { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -3px; rotate: 2deg; } } @media (prefers-reduced-motion: reduce) { .badge-new { animation: none; background: var(--gold-pale); } .badge-new::after { animation: none; opacity: 0; } } /* Значката „Ново“ върху плочките в конструктора. Плочките са дребни, затова тук е лента в ъгъла, а не кръгче — иначе изяжда снимката. */ .pick { position: relative; } .pick-new { position: absolute; z-index: 2; top: 4px; left: 4px; padding: .18em .5em; border: 1.5px solid var(--gold-deep); border-radius: 999px; background: var(--gold-grad); background-size: 220% 100%; color: var(--cocoa-deep); font-family: var(--font-display); font-style: normal; font-size: .52rem; letter-spacing: .04em; line-height: 1.3; box-shadow: 1px 1px 0 var(--gold-deep); animation: badge-new-shine 3.4s linear infinite, pick-new-bob 2.6s ease-in-out infinite; pointer-events: none; } @keyframes pick-new-bob { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -2px; rotate: 3deg; } } @media (prefers-reduced-motion: reduce) { .pick-new { animation: none; background: var(--gold-pale); } } /* На съвсем тесни екрани плочката е под 70px — лентата се смалява с нея. */ @media (max-width: 720px) { .pick-new { top: 3px; left: 3px; font-size: .4rem; padding: .12em .36em; border-width: 1.2px; } } /* ========================================================================== Как се получава поръчката — в количката ========================================================================== */ .how-pick { padding: 10px 20px 12px; background: var(--cream); border-bottom: var(--edge); } .how-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .how-opt { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 2px solid var(--cocoa); border-radius: 12px; background: var(--white); color: var(--cocoa); font: inherit; text-align: left; cursor: pointer; transition: background .18s ease, box-shadow .18s ease, translate .18s var(--ease-pop); } .how-opt svg { width: 19px; height: 19px; flex-shrink: 0; } .how-opt span { display: block; font-family: var(--font-display); font-size: .78rem; line-height: 1.15; } .how-opt small { display: block; font-family: var(--font-body); font-size: .66rem; opacity: .72; margin-top: 2px; } .how-opt:hover { background: var(--gold-pale); } .how-opt.is-on { background: var(--pink); box-shadow: 3px 3px 0 var(--cocoa); translate: -1px -1px; } .how-place { display: block; margin-top: 9px; } .how-place > span { display: block; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cocoa); opacity: .7; margin-bottom: 3px; } .how-place select { width: 100%; padding: .45em .6em; border: 2px solid var(--cocoa); border-radius: 10px; background: var(--white); color: var(--cocoa); font: inherit; font-size: .85rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236d2440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6em center; background-size: 11px 8px; padding-right: 1.9em; } .how-place select:focus { outline: none; box-shadow: 0 0 0 3px rgba(221, 123, 166, .35); } /* Бележка, че данните са попълнени от предишна поръчка. */ .known-note { display: flex; align-items: center; flex-wrap: wrap; gap: .45em; margin: 0 0 1.1rem; padding: .6em .9em; border: 2px solid var(--gold-deep); border-radius: 12px; background: var(--gold-pale); font-size: .82rem; color: var(--cocoa); } .known-note svg { width: 16px; height: 16px; color: var(--gold-deep); flex-shrink: 0; } .linkish { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; color: var(--cocoa); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 720px) { .how-pick { padding: 8px 16px 9px; } .how-row { gap: 6px; } .how-opt { padding: 7px 8px; gap: 6px; } .how-opt svg { width: 17px; height: 17px; } .how-opt span { font-size: .72rem; } .how-opt small { font-size: .6rem; } .how-place { margin-top: 7px; } .how-place > span { font-size: .6rem; margin-bottom: 2px; } .how-place select { padding: .3em .5em; font-size: .8rem; border-width: 1.5px; } .known-note { font-size: .76rem; margin-bottom: .9rem; } } /* В страницата на количката блокът е вътре в карта — без свой фон и рамка. */ .how-plain { padding: 0; margin-bottom: 1rem; background: none; border-bottom: 0; }