/* ============================================================ Atelier by Adelina Iancu — Design System Paletă: ivoriu „frișcă & pergament” + maro cacao + auriu șampanie + roșu accent (ca trandafirii de pe tort) Fonturi: Fraunces (display) · Figtree (text) · Pacifico (accente) · IBM Plex Mono (prețuri) ============================================================ */ :root { --bg: #FBF6EC; --bg-warm: #F3E8D3; --card: #FFFDF8; --ink: #33241C; --ink-soft: #6E5A4B; --ink-faint: #9C8877; --choco: #4A342A; --caramel: #B9945E; --caramel-deep: #8F6D3B; --butter: #B5976B; --butter-soft: #D6BC90; --butter-tint: #F3E7D0; --dark: #1E1712; --dark-2: #2A2019; --dark-line: rgba(243, 233, 218, .12); --dark-text: #F6EDDD; --dark-muted: #C3B09C; --oxblood: #622626; --green: #4E7A3A; --red: #BE3A2B; --line: #EBDFC9; --line-soft: #E3D6BE; --shadow: 0 10px 30px -12px rgba(91, 62, 54, .22); --shadow-lg: 0 24px 50px -20px rgba(91, 62, 54, .3); --radius: 20px; --font-display: "Fraunces", Georgia, serif; --font-body: "Figtree", -apple-system, sans-serif; --font-hand: "Pacifico", cursive; --font-mono: "IBM Plex Mono", ui-monospace, monospace; } /* ---------- Reset & bază ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } /* Zero derulare laterală. Sertarul coșului stă „parcat” în afara ecranului (translateX) și lățea zona de layout — pe iOS asta făcea pagina mai lată decât ecranul, browserul dădea zoom-out și rămânea o bandă goală în dreapta. Taie pe , nu doar pe : propagarea de pe body nu ține pe iOS. `clip` (nu `hidden`) nu creează container de derulare → sticky rămâne intact. */ html { overflow-x: clip; } body { overflow-x: clip; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } body.no-scroll { overflow: hidden; } img, svg { max-width: 100%; display: block; } a { color: var(--caramel-deep); text-decoration: none; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } ::selection { background: var(--butter-soft); color: var(--ink); } :focus-visible { outline: 3px solid var(--butter); outline-offset: 2px; border-radius: 4px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 560; line-height: 1.12; letter-spacing: -.01em; } h1 { font-size: clamp(2.5rem, 5.6vw, 4rem); line-height: 1.04; } h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); } h3 { font-size: 1.15rem; } h1 em, h2 em { font-style: italic; color: var(--red); } .container { width: min(1180px, 92%); margin-inline: auto; } .container-narrow { max-width: 780px; } .section { padding-block: clamp(3.2rem, 6vw, 5rem); } .eyebrow { font-family: var(--font-hand); font-size: 1.12rem; font-weight: 400; color: var(--caramel); margin-bottom: .5rem; } .eyebrow.light { color: var(--butter-soft); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.2rem; flex-wrap: wrap; } .section-head.center { flex-direction: column; align-items: center; text-align: center; } .section-side-note { color: var(--ink-soft); font-size: .92rem; max-width: 270px; text-align: right; } /* ---------- Butoane ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: .95rem; line-height: 1.2; border: 1.5px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--butter); color: #FFFDF8; box-shadow: 0 6px 18px -8px rgba(154, 118, 66, .55); } .btn-primary:hover { background: #A3855A; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(154, 118, 66, .6); } .btn-ghost { border-color: rgba(51, 36, 28, .4); color: var(--ink); } .btn-ghost:hover { background: var(--card); border-color: rgba(51, 36, 28, .6); transform: translateY(-2px); } .btn-light { background: var(--bg); color: var(--ink); } .btn-light:hover { background: #fff; transform: translateY(-2px); } .btn-ghost-light { border-color: rgba(250, 243, 227, .45); color: var(--bg); } .btn-ghost-light:hover { background: rgba(250, 243, 227, .12); } .btn-lg { padding: .95rem 1.8rem; font-size: 1.04rem; } .btn-sm { padding: .45rem .9rem; font-size: .85rem; } /* Butoanele pe toată lățimea: textul lung trebuie să poată trece pe rândul următor. `white-space: nowrap` (de pe .btn) le impunea o lățime minimă egală cu textul pe un rând — pe telefon butonul ieșea din formular și era tăiat. */ .btn-block { width: 100%; white-space: normal; min-width: 0; } /* ---------- Header ---------- */ #site-header { position: sticky; top: 0; z-index: 100; } .open-dot { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; } .open-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; } .open-dot.is-open::before { background: #6FBF4E; box-shadow: 0 0 0 3px rgba(111, 191, 78, .25); } .open-dot.is-open { color: inherit; } .header-main { background: rgba(253, 250, 243, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .header-in { display: flex; align-items: center; gap: 1.6rem; height: 78px; } .logo { display: flex; align-items: center; gap: .6rem; color: var(--ink); } .logo-img { display: block; height: 54px; width: auto; } .nav { display: flex; gap: 1.5rem; margin-inline: auto; } .nav a { color: var(--ink-soft); font-weight: 600; font-size: .95rem; padding-block: .3rem; position: relative; } .nav a:hover { color: var(--ink); } .nav a.is-active { color: var(--ink); } .nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 3px; background: var(--caramel); } .header-actions { display: flex; align-items: center; gap: .9rem; margin-left: auto; } .header-phone { display: flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 700; font-size: .92rem; } .header-phone:hover { color: var(--caramel-deep); } .cart-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--card); border: 1px solid var(--line-soft); transition: transform .2s; } .cart-btn:hover { transform: translateY(-2px); border-color: var(--caramel); } .cart-count { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding-inline: 5px; background: var(--red); color: #FFFDF8; font-weight: 800; font-size: .74rem; border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--card); } .cart-count[hidden] { display: none; } .cart-count.pop { animation: pop .35s ease; } @keyframes pop { 40% { transform: scale(1.35); } } .burger { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .burger span { width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: .3s; } .burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ---------- Hero (luminos, crem-auriu) ---------- */ .hero { position: relative; background: linear-gradient(105deg, #FBF6EB 0%, #F7EDD9 48%, #EFDFC0 100%); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 500px at 74% 40%, rgba(202, 162, 92, .26), transparent 68%); pointer-events: none; } .hero-in { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 7vw, 6rem); } .hero h1 { color: var(--ink); } .hero-sub { color: var(--ink-soft); font-size: 1.12rem; max-width: 34rem; margin-top: 1.1rem; } .hero-sub strong { color: var(--ink); } .hero-sub .hl { color: var(--caramel-deep); } .hero-sub .hl-red { color: var(--red); } .hero .eyebrow { font-size: 1.3rem; } .hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.7rem; } .hero-trust { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; color: #8D7A64; font-size: .86rem; } .hero-trust strong { color: var(--ink); } .stars { color: var(--caramel); letter-spacing: 2px; font-size: .95rem; } .trust-sep { width: 5px; height: 5px; border-radius: 50%; background: #D8C7A8; } .hero-photo { position: relative; display: grid; place-items: center; min-height: 420px; } .hero-photo img { position: relative; width: min(400px, 88%); height: auto; filter: drop-shadow(0 30px 38px rgba(122, 86, 40, .32)); animation: floaty 7s ease-in-out infinite; } .hero-glow { position: absolute; width: 100%; max-width: 560px; aspect-ratio: 1.05; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 176, 106, .5), rgba(214, 176, 106, .18) 55%, transparent 78%); filter: blur(12px); } @keyframes floaty { 50% { transform: translateY(-12px); } } .hero-wave { position: absolute; bottom: -1px; left: 0; right: 0; line-height: 0; } .hero-wave svg { width: 100%; height: 46px; } /* ---------- Marquee ---------- */ .marquee { background: var(--ink); color: var(--bg); overflow: hidden; padding-block: .9rem; } .marquee-track { display: flex; white-space: nowrap; width: max-content; animation: marquee 30s linear infinite; } .marquee-track span { font-family: var(--font-display); font-style: italic; font-weight: 560; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .05em; padding-right: .5rem; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee:hover .marquee-track { animation-play-state: paused; } /* ---------- USP ---------- */ .usp { padding-block: clamp(3rem, 5vw, 4.2rem); } .usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; } .usp-3 { grid-template-columns: repeat(3, 1fr); } .usp-item { text-align: center; padding: .5rem; } .usp-ico { width: 60px; height: 60px; margin: 0 auto .8rem; border-radius: 50%; background: var(--butter-tint); display: grid; place-items: center; font-size: 1.6rem; } .usp-item h3 { margin-bottom: .35rem; } .usp-item p { color: var(--ink-soft); font-size: .92rem; } /* ---------- Carduri produs ---------- */ .p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 1.4rem; } .p-grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .p-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; } .p-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .p-art { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; } .p-art svg { width: 60%; transition: transform .4s cubic-bezier(.16, 1, .3, 1); } .p-card:hover .p-art svg { transform: scale(1.09) rotate(-2.5deg); } /* Poze reale de produs: umplu cadrul, cu zoom fin la hover */ .p-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.16, 1, .3, 1); } .p-card:hover .p-art img { transform: scale(1.05); } .mc-art img, .co-art img, .xs-art img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .mc-art:has(img), .co-art:has(img), .xs-art:has(img) { padding: 0; overflow: hidden; } .p-badge { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--butter); color: #FFFDF8; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .3rem .65rem; border-radius: 999px; } .p-badge.is-new { background: var(--ink); color: var(--butter-soft); } .p-badge.is-green { background: var(--green); color: #fff; } .p-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.2rem; } .p-name { font-size: 1.14rem; margin-bottom: .3rem; } .p-desc { color: var(--ink-soft); font-size: .87rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .p-alerg { color: var(--ink-faint); font-size: .72rem; font-style: italic; margin-top: .35rem; } .p-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .9rem; } .p-price { font-family: var(--font-mono); font-weight: 600; font-size: 1.02rem; } .p-price span { display: block; font-family: var(--font-body); font-weight: 500; font-size: .72rem; color: var(--ink-faint); } .btn-add { background: var(--butter); color: var(--ink); padding: .55rem 1.05rem; border-radius: 999px; font-weight: 700; font-size: .9rem; display: inline-flex; gap: .35rem; transition: transform .2s, background .2s, box-shadow .2s; } .btn-add:hover { background: #ECA71C; transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(154, 118, 66, .6); } .btn-add-plus { font-weight: 800; } .btn-add.is-soldout { background: transparent; border: 1.5px dashed var(--line-soft); color: var(--ink-faint); cursor: not-allowed; font-size: .8rem; } .btn-add.is-soldout:hover { transform: none; box-shadow: none; } /* ---------- Tile-uri categorii ---------- */ .cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } .cat-tile { background: var(--tint, var(--butter-tint)); border-radius: var(--radius); padding: 1.3rem 1rem 1.1rem; text-align: center; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: .15rem; transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; } .cat-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .cat-tile-art { width: 74px; margin-bottom: .4rem; transition: transform .35s; } .cat-tile:hover .cat-tile-art { transform: rotate(-6deg) scale(1.08); } .cat-tile-name { font-family: var(--font-display); font-weight: 600; font-size: .98rem; line-height: 1.25; } .cat-tile-n { font-size: .76rem; font-weight: 600; color: var(--caramel-deep); } /* ---------- Pași ---------- */ .steps { background: var(--bg-warm); padding-block: clamp(3.2rem, 6vw, 5rem); } .steps-alt { background: transparent; } .steps-grid { display: flex; align-items: stretch; justify-content: center; gap: 1.2rem; flex-wrap: wrap; } .step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.6rem; max-width: 300px; text-align: center; flex: 1 1 240px; } .step-n { width: 44px; height: 44px; margin: 0 auto .9rem; border-radius: 50%; background: var(--butter); color: #FFFDF8; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; display: grid; place-items: center; } .step h3 { margin-bottom: .4rem; } .step p { color: var(--ink-soft); font-size: .92rem; } .step-arrow { align-self: center; font-family: var(--font-display); font-size: 1.9rem; color: var(--caramel); } .steps-cta { text-align: center; margin-top: 2.2rem; } /* ---------- Banner promo ---------- */ .promo-banner { position: relative; overflow: hidden; background: linear-gradient(135deg, #55251E 0%, var(--oxblood) 55%, #7A3A2B 100%); color: var(--bg); border-radius: 26px; display: grid; grid-template-columns: .42fr 1fr; align-items: center; gap: 1.5rem; padding: clamp(1.8rem, 4vw, 3rem); } .promo-banner h2 { color: #FFF7E8; margin-bottom: .6rem; } .promo-banner p { color: rgba(250, 243, 227, .85); max-width: 42rem; margin-bottom: 1.4rem; } .promo-art { width: min(230px, 80%); margin: 0 auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .3)); } .promo-slim { grid-template-columns: 1fr auto; background: linear-gradient(135deg, #241811, #3A281E); } .promo-slim h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } .promo-slim p { margin-bottom: 0; } .promo-actions { display: flex; gap: .8rem; flex-wrap: wrap; } /* ---------- Poveste ---------- */ .story-in { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: center; } .story-art { position: relative; width: min(360px, 100%); aspect-ratio: 1; margin-inline: auto; background: var(--butter-tint); border-radius: 50%; display: grid; place-items: center; } .story-art svg { width: 62%; } .story-art::after { content: ""; position: absolute; inset: -14px; border: 2px dashed var(--caramel); border-radius: 50%; opacity: .5; animation: spin 40s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .story-copy h2 { margin-bottom: .8rem; } .story-copy > p { color: var(--ink-soft); } .story-points { list-style: none; margin: 1.2rem 0 1.6rem; display: grid; gap: .6rem; } .story-points li { display: flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .95rem; } .story-points li::before { content: "✓"; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--butter); display: grid; place-items: center; font-size: .8rem; font-weight: 800; } /* ---------- Testimoniale ---------- */ .rating-line { margin-top: .5rem; color: var(--ink-soft); font-size: .95rem; } .t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .t-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; } .t-card blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.04rem; line-height: 1.5; margin: .7rem 0 1.1rem; } .t-card figcaption { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .88rem; } .t-card figcaption span:last-child { color: var(--ink-faint); font-weight: 500; } .t-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--choco); } /* ---------- Vizită ---------- */ .visit-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; } .visit-card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: clamp(1.8rem, 4vw, 2.6rem); } .visit-addr { font-weight: 700; margin: .6rem 0 1.2rem; } .visit-hours { display: grid; gap: .45rem; margin-bottom: 1.6rem; } .visit-hours p { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line-soft); padding-bottom: .45rem; font-size: .95rem; } .visit-hours span { color: var(--ink-soft); } .visit-ctas { display: flex; gap: .8rem; flex-wrap: wrap; } .visit-art { width: min(320px, 80%); margin-inline: auto; animation: floaty 7s ease-in-out infinite; } /* ---------- Footer ---------- */ .footer-cta { padding-bottom: clamp(3rem, 5vw, 4rem); } .footer-cta-in { background: linear-gradient(135deg, var(--caramel) 0%, var(--caramel-deep) 100%); color: #FFF7E8; border-radius: 26px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: clamp(1.8rem, 4vw, 2.8rem); } .footer-cta h2 { margin-bottom: .4rem; } .footer-cta p { color: rgba(255, 247, 232, .9); max-width: 36rem; } .footer-main { background: #14100D; color: #C9B39D; padding-top: clamp(2.8rem, 5vw, 4rem); font-size: .93rem; } .footer-brand .logo-img { height: 64px; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 2.4rem; padding-bottom: 2.5rem; } .footer-col h3 { color: var(--butter-soft); font-size: 1.05rem; margin-bottom: .9rem; } .footer-col a { display: block; color: #C9B39D; padding-block: .22rem; } .footer-col a:hover { color: var(--bg); } .footer-brand p { margin: .9rem 0 1.1rem; line-height: 1.6; } .socials { display: flex; gap: .7rem; } .socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201, 179, 157, .3); display: grid; place-items: center; transition: .25s; } .socials a:hover { border-color: var(--butter-soft); color: var(--butter-soft); transform: translateY(-2px); } .hours { display: flex; justify-content: space-between; gap: 1rem; padding-block: .22rem; } .hours span { color: #9A8574; } .newsletter { margin-top: 1.1rem; } .newsletter label { font-family: var(--font-hand); font-size: 1.02rem; color: var(--butter-soft); display: block; margin-bottom: .5rem; } .newsletter-row { display: flex; gap: .5rem; } .newsletter input { flex: 1; min-width: 0; background: #3A281E; border: 1px solid rgba(201, 179, 157, .3); border-radius: 999px; padding: .6rem 1rem; color: var(--bg); font: inherit; font-size: .9rem; } .newsletter input::placeholder { color: #9A8574; } .newsletter input:focus { outline: none; border-color: var(--butter); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(201, 179, 157, .18); padding-block: 1.3rem; font-size: .82rem; color: #9A8574; } .footer-credit a { color: var(--butter-soft); font-weight: 600; } /* ---------- WhatsApp float ---------- */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(37, 211, 102, .6); transition: transform .25s; } .wa-float:hover { transform: scale(1.1) rotate(6deg); } /* ---------- Mini-coș ---------- */ .minicart-backdrop { position: fixed; inset: 0; background: rgba(43, 29, 22, .45); z-index: 110; animation: fade .25s ease; } @keyframes fade { from { opacity: 0; } } .minicart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(430px, 94vw); background: var(--bg); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .35s cubic-bezier(.16, 1, .3, 1); box-shadow: -20px 0 50px rgba(43, 29, 22, .25); } .minicart.is-open { transform: none; } .minicart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); } .minicart-head h2 { font-size: 1.3rem; } .minicart-head h2 span { font-family: var(--font-body); font-size: .85rem; color: var(--ink-faint); font-weight: 500; } .minicart-close { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; background: var(--card); border: 1px solid var(--line); } .minicart-close:hover { border-color: var(--caramel); } .freebar { padding: 0 1.4rem; } .freebar:not(:empty) { padding-top: 1rem; } .freebar-msg { font-size: .85rem; margin-bottom: .45rem; } .freebar-msg.is-done { color: var(--green); font-weight: 600; } .freebar-track { height: 8px; border-radius: 999px; background: var(--butter-tint); overflow: hidden; } .freebar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--butter), var(--caramel)); transition: width .5s cubic-bezier(.16, 1, .3, 1); } .minicart-items { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; } .mc-item { display: flex; gap: .9rem; padding-block: .9rem; border-bottom: 1px solid var(--line); } .mc-art { width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; padding: 7px; } .mc-info { flex: 1; min-width: 0; } .mc-name { font-weight: 700; font-size: .93rem; line-height: 1.3; } .mc-price { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-soft); margin: .15rem 0 .4rem; } .mc-price span { font-family: var(--font-body); color: var(--ink-faint); } .mc-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } .mc-right strong { font-family: var(--font-mono); font-size: .95rem; } .mc-remove { font-size: .75rem; color: var(--ink-faint); text-decoration: underline; } .mc-remove:hover { color: var(--red); } .minicart-empty { text-align: center; padding: 3rem 1rem; display: grid; gap: 1rem; justify-items: center; color: var(--ink-soft); } .minicart-empty-art { width: 110px; opacity: .9; } .minicart-foot { border-top: 1px solid var(--line); padding: 1.2rem 1.4rem; background: var(--card); } .minicart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; font-size: 1.02rem; } .minicart-total strong { font-family: var(--font-mono); font-size: 1.25rem; } .minicart-continue { display: block; text-align: center; margin-top: .8rem; font-size: .88rem; font-weight: 600; } .qty { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--card); } .qty button { width: 30px; height: 30px; border-radius: 50%; font-size: 1.05rem; font-weight: 700; display: grid; place-items: center; transition: background .2s; } .qty button:hover { background: var(--butter-tint); } .qty span { min-width: 26px; text-align: center; font-family: var(--font-mono); font-weight: 600; font-size: .9rem; } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: 28px; z-index: 130; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--bg); font-weight: 600; font-size: .92rem; padding: .8rem 1.4rem; border-radius: 999px; box-shadow: var(--shadow-lg); transition: .35s cubic-bezier(.16, 1, .3, 1); max-width: 92vw; text-align: center; } .toast.is-visible { transform: translate(-50%, 0); opacity: 1; } /* ---------- Popup newsletter ---------- */ .popup-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(43, 29, 22, .55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity .3s; } .popup-backdrop.is-visible { opacity: 1; } .popup { position: relative; background: var(--bg); border-radius: 26px; padding: 2.4rem 2.2rem 2rem; max-width: 430px; width: 100%; text-align: center; transform: scale(.94); transition: transform .3s cubic-bezier(.16, 1, .3, 1); box-shadow: var(--shadow-lg); } .popup-backdrop.is-visible .popup { transform: scale(1); } .popup-art { width: 110px; margin: 0 auto .6rem; } .popup h2 { font-size: 1.7rem; margin-bottom: .5rem; } .popup p { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1.2rem; } .popup-form { display: flex; gap: .5rem; } .popup-form input { flex: 1; min-width: 0; border: 1px solid var(--line-soft); border-radius: 999px; padding: .7rem 1.1rem; font: inherit; font-size: .92rem; background: #fff; } .popup-form input:focus { outline: none; border-color: var(--caramel); box-shadow: 0 0 0 3px rgba(185, 148, 94, .3); } .popup-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--butter-tint); display: grid; place-items: center; font-size: .9rem; } .popup-skip { margin-top: 1rem; font-size: .82rem; color: var(--ink-faint); text-decoration: underline; } /* ---------- Cookie bar ---------- */ .cookie-bar { position: fixed; left: 20px; bottom: 20px; z-index: 95; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.2rem; max-width: 360px; box-shadow: var(--shadow-lg); font-size: .88rem; animation: rise .5s cubic-bezier(.16, 1, .3, 1); } @keyframes rise { from { transform: translateY(30px); opacity: 0; } } .cookie-bar p { margin-bottom: .8rem; } .cookie-actions { display: flex; gap: .6rem; } /* ---------- Bară sticky mobil ---------- */ .sticky-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(250, 243, 227, .95); backdrop-filter: blur(10px); border-top: 1px solid var(--line); } /* ---------- Page hero ---------- */ .page-hero { background: linear-gradient(180deg, #F8EDD6, var(--bg)); padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(1.8rem, 3vw, 2.6rem); } .page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); max-width: 18ch; } .page-hero p { color: var(--ink-soft); font-size: 1.08rem; max-width: 42rem; margin-top: .9rem; } .page-hero-slim { padding-bottom: 1.2rem; } .crumbs { font-size: .84rem; color: var(--ink-faint); margin-bottom: 1rem; } .crumbs a { color: var(--caramel-deep); font-weight: 600; } /* ---------- Meniu ---------- */ .menu-week { padding-top: .6rem; } .week-banner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: linear-gradient(120deg, #F0E1C4, var(--butter-soft)); border-radius: 18px; padding: 1rem 1.4rem; } .week-ico { font-size: 1.7rem; } .week-banner p { flex: 1; min-width: 220px; font-size: .95rem; } .week-banner .btn-light { background: #fff; } .menu-tools { position: sticky; top: 73px; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line); padding-block: .9rem; } .tools-row { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; } .search-box { flex: 1; min-width: 230px; display: flex; align-items: center; gap: .6rem; background: var(--card); border: 1px solid var(--line-soft); border-radius: 999px; padding: .55rem 1.1rem; color: var(--ink-faint); } .search-box input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: .95rem; color: var(--ink); } .search-box input:focus { outline: none; } .search-box:focus-within { border-color: var(--caramel); box-shadow: 0 0 0 3px rgba(185, 148, 94, .25); } .sort-box { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-soft); } .sort-box select { background: var(--card); border: 1px solid var(--line-soft); border-radius: 999px; padding: .5rem .9rem; font: inherit; font-size: .88rem; color: var(--ink); } .cat-tabs { display: flex; gap: .55rem; flex-wrap: wrap; } .cat-tab { display: inline-flex; align-items: center; gap: .4rem; background: var(--card); border: 1px solid var(--line-soft); border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .88rem; color: var(--ink-soft); transition: .22s; } .cat-tab:hover { border-color: var(--caramel); color: var(--ink); transform: translateY(-1px); } .cat-tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); } .cat-n { background: rgba(43, 29, 22, .08); border-radius: 999px; padding: .05rem .45rem; font-size: .74rem; } .cat-tab.is-active .cat-n { background: rgba(250, 243, 227, .18); } .menu-section { padding-top: 2rem; } .menu-count-line { color: var(--ink-faint); font-size: .86rem; margin-bottom: 1.2rem; } .menu-count-line span { font-weight: 700; color: var(--ink-soft); } .menu-empty { text-align: center; padding: 3.5rem 1rem; color: var(--ink-soft); } .menu-empty-art::before { content: "🧁"; font-size: 3.4rem; display: block; margin-bottom: .8rem; } .menu-empty h2 { margin-bottom: .4rem; } /* ---------- Checkout ---------- */ .checkout-grid { display: grid; grid-template-columns: 1fr 390px; gap: 2.2rem; align-items: start; } .co-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; margin-bottom: 1.3rem; } .co-title { display: flex; align-items: center; gap: .7rem; font-size: 1.28rem; margin-bottom: 1.2rem; } .co-step { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--butter); color: #FFFDF8; font-family: var(--font-mono); font-weight: 600; font-size: .88rem; display: grid; place-items: center; } .co-item { display: grid; grid-template-columns: 60px 1fr auto auto auto; gap: .9rem; align-items: center; padding-block: .85rem; border-bottom: 1px solid var(--line); } .co-item:last-of-type { border-bottom: none; } .co-art { width: 60px; height: 60px; border-radius: 13px; display: grid; place-items: center; padding: 6px; } .co-name { font-weight: 700; font-size: .95rem; line-height: 1.3; } .co-lead { display: inline-block; background: var(--butter-tint); color: var(--caramel-deep); font-size: .68rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; margin-left: .3rem; } .co-unit { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); } .co-line { font-family: var(--font-mono); font-size: .95rem; } .co-remove { color: var(--ink-faint); font-size: .85rem; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; } .co-remove:hover { background: #F9E3DE; color: var(--red); } .co-xsell { margin-top: 1.2rem; border-top: 1px dashed var(--line-soft); padding-top: 1.1rem; } .co-xsell-title { font-family: var(--font-hand); font-size: 1.02rem; color: var(--caramel); margin-bottom: .7rem; } .co-xsell-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .7rem; } .xs-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: .8rem .5rem; transition: .25s; } .xs-card:hover { transform: translateY(-3px); border-color: var(--caramel); box-shadow: var(--shadow); } .xs-art { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; padding: 6px; } .xs-name { font-weight: 600; font-size: .78rem; line-height: 1.25; } .xs-price { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--caramel-deep); } .mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } .mode-btn { display: flex; align-items: center; gap: .8rem; text-align: left; background: var(--bg); border: 2px solid var(--line); border-radius: 16px; padding: .95rem 1.1rem; transition: .22s; } .mode-btn:hover { border-color: var(--caramel); } .mode-btn.is-active { border-color: var(--caramel); background: var(--butter-tint); box-shadow: 0 6px 16px -10px rgba(154, 118, 66, .5); } .mode-ico { font-size: 1.5rem; } .mode-t strong { display: block; font-size: .95rem; } .mode-t small { color: var(--ink-soft); font-size: .8rem; } .chip-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; } .chip { display: flex; flex-direction: column; align-items: center; min-width: 86px; background: var(--bg); border: 1.5px solid var(--line-soft); border-radius: 14px; padding: .55rem .9rem; transition: .2s; } .chip strong { font-size: .9rem; } .chip span { font-size: .74rem; color: var(--ink-soft); } .chip:hover { border-color: var(--caramel); } .chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); } .chip.is-active span { color: rgba(250, 243, 227, .7); } .chip-sm { flex-direction: row; min-width: 0; font-family: var(--font-mono); font-size: .8rem; padding: .5rem .8rem; } .co-label { font-weight: 600; font-size: .88rem; margin-bottom: .5rem; } .co-note { background: var(--butter-tint); border-radius: 12px; padding: .7rem 1rem; font-size: .88rem; margin-bottom: 1rem; } .co-warn { background: #F9E3DE; color: #8E2823; border-radius: 12px; padding: .7rem 1rem; font-size: .9rem; font-weight: 600; margin-top: 1rem; } .field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; } .field label { font-weight: 600; font-size: .88rem; } .field .opt { color: var(--ink-faint); font-weight: 400; font-size: .8rem; } .field input, .field select, .field textarea { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: .72rem 1rem; font: inherit; font-size: .95rem; color: var(--ink); width: 100%; } .field textarea { resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--caramel); box-shadow: 0 0 0 3px rgba(185, 148, 94, .28); } .field input[type="file"] { padding: .55rem; background: var(--bg); } /* Câmpurile nu au voie să lățească pagina: input[type=file] și [type=date] au lățime intrinsecă mare, iar `min-width: auto` (implicit la copiii de grid) împiedica coloana să se strângă sub ea → formularul ieșea din ecran. */ .field { min-width: 0; } .field input, .field select, .field textarea { max-width: 100%; min-width: 0; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; } .field-grid > *, .cake-grid > *, .map-form-grid > *, .checkout-grid > * { min-width: 0; } .field-full { grid-column: 1 / -1; } .gdpr { display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; color: var(--ink-soft); margin: 1.1rem 0; cursor: pointer; } .gdpr input { width: 17px; height: 17px; margin-top: .15rem; accent-color: var(--caramel); flex-shrink: 0; } .co-secure { text-align: center; font-size: .82rem; color: var(--ink-faint); margin-top: .8rem; } .checkout-side { position: sticky; top: 100px; } .sum-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; } .sum-card h2 { font-size: 1.3rem; margin-bottom: 1rem; } .sum-row { display: flex; justify-content: space-between; align-items: center; padding-block: .55rem; border-bottom: 1px solid var(--line); font-size: .95rem; } .sum-row strong { font-family: var(--font-mono); font-weight: 600; } .sum-disc strong { color: var(--green); } .sum-total { border-bottom: none; padding-top: .9rem; font-size: 1.05rem; font-weight: 700; } .sum-total strong { font-size: 1.45rem; color: var(--caramel-deep); } .free { color: var(--green); font-weight: 700; } #sum-freebar:not(:empty) { margin-bottom: .9rem; } .promo-row { display: flex; gap: .5rem; margin-top: 1rem; } .promo-row input { flex: 1; min-width: 0; border: 1px solid var(--line-soft); border-radius: 999px; padding: .55rem 1rem; font: inherit; font-size: .88rem; text-transform: uppercase; background: #fff; } .promo-row input:focus { outline: none; border-color: var(--caramel); } .promo-msg { font-size: .82rem; margin-top: .5rem; min-height: 1.1em; } .promo-msg.is-ok { color: var(--green); font-weight: 600; } .promo-msg.is-err { color: var(--red); } .sum-trust { margin-top: 1.1rem; border-top: 1px dashed var(--line-soft); padding-top: 1rem; display: grid; gap: .4rem; font-size: .86rem; color: var(--ink-soft); } /* Coș gol + confirmare */ .cart-empty-in, .order-ok-in { text-align: center; max-width: 620px; margin-inline: auto; display: grid; justify-items: center; gap: .9rem; } .cart-empty-art { width: 130px; } .ok-badge { width: 74px; height: 74px; border-radius: 50%; background: var(--green); color: #fff; font-size: 2.1rem; display: grid; place-items: center; animation: okpop .5s cubic-bezier(.16, 1, .3, 1); } @keyframes okpop { from { transform: scale(.4); opacity: 0; } } .ok-sub { color: var(--ink-soft); } .ok-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; width: 100%; text-align: left; } .ok-card p { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; border-bottom: 1px solid var(--line); font-size: .93rem; } .ok-card p span { font-family: var(--font-mono); } .ok-card .ok-total { font-weight: 700; font-size: 1.02rem; } .ok-card .ok-meta { display: block; border-bottom: none; color: var(--ink-soft); font-size: .87rem; line-height: 1.6; } .ok-actions { display: grid; gap: .7rem; justify-items: center; margin-top: .5rem; } .ok-note { font-size: .84rem; color: var(--ink-faint); } /* ---------- Torturi ---------- */ .cake-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.6rem; align-items: start; } .cake-side { position: sticky; top: 100px; } .cake-art { width: min(300px, 80%); margin: 0 auto 1.4rem; background: var(--butter-tint); border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; padding: 2.2rem; } .cake-facts { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; display: grid; gap: .7rem; font-size: .93rem; } .cake-form { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: clamp(1.6rem, 3vw, 2.4rem); } .cake-form h2 { font-size: 1.6rem; margin-bottom: 1.4rem; } /* ---------- Listă arome + tile-uri cu emoji ---------- */ .flavour-list { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1.6rem; } .flavour-list a { display: inline-block; background: var(--card); border: 1px solid var(--line-soft); border-radius: 999px; padding: .5rem 1.1rem; font-weight: 600; font-size: .95rem; color: var(--ink); transition: .22s; } .flavour-list a:hover { border-color: var(--caramel); color: var(--caramel-deep); transform: translateY(-2px); } .cat-tile-emoji { font-size: 2.2rem; line-height: 1; width: auto; } /* ---------- Intro de secțiune ---------- */ .section-lead { color: var(--ink-soft); max-width: 46rem; margin: -1rem 0 1.8rem; font-size: 1.02rem; } /* ---------- Card „social proof" (cifre reale de pe Facebook) ---------- */ .social-card { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: clamp(1.8rem, 4vw, 2.8rem); } .social-card h2 { margin-bottom: .6rem; } .social-card p { color: var(--ink-soft); } .social-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; } .social-stats .btn { grid-column: 1 / -1; justify-self: start; } .social-stat { text-align: center; background: var(--bg-warm); border-radius: 16px; padding: 1rem .6rem; } .social-stat strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--caramel-deep); line-height: 1.1; } .social-stat span { font-size: .8rem; color: var(--ink-soft); } @media (max-width: 940px) { .social-card { grid-template-columns: 1fr; } .social-stats .btn { justify-self: stretch; text-align: center; } } /* ---------- Detalii footer & listă ---------- */ .footer-phone { font-family: var(--font-mono); font-weight: 600; font-size: 1.02rem; color: var(--butter-soft) !important; } .footer-note { color: #9A8574; font-size: .88rem; padding-block: .22rem; line-height: 1.6; } .footer-note strong { color: var(--butter-soft); } .minicart-hint { font-size: .84rem; color: var(--ink-soft); margin-bottom: .8rem; text-align: center; } /* ---------- Pagină produs ---------- */ .pd-section { padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(2.2rem, 4vw, 3rem); } .pd-grid { display: grid; grid-template-columns: minmax(0, 500px) 1fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start; margin-top: 1.2rem; } .pd-art { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; box-shadow: var(--shadow); } .pd-art img { width: 100%; height: 100%; object-fit: cover; } .pd-art.is-contain img { object-fit: contain; padding: 7%; } .pd-art svg { width: 55%; } .pd-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(62% 58% at 50% 38%, rgba(255, 252, 244, .45), transparent 72%); mix-blend-mode: soft-light; } .pd-info .p-badge { position: static; display: inline-block; margin-bottom: .9rem; } .pd-info .p-badge[hidden] { display: none; } .pd-info h1 { font-size: clamp(2rem, 3.6vw, 2.7rem); margin-bottom: .5rem; } .pd-price { font-family: var(--font-mono); font-weight: 600; font-size: 1.55rem; margin-bottom: 1.1rem; line-height: 1.25; } .pd-price .pd-unit { display: block; font-family: var(--font-body); font-weight: 500; font-size: .95rem; color: var(--ink-faint); } .pd-price .pd-unit:empty { display: none; } .pd-desc { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.7; max-width: 46rem; } .pd-alerg { color: var(--ink-faint); font-size: .85rem; font-style: italic; margin-top: .7rem; } .pd-note { background: var(--butter-tint); border-radius: 12px; padding: .7rem 1rem; font-size: .9rem; margin-top: 1.1rem; } .pd-buy { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.5rem; } .pd-buy .qty button { width: 44px; height: 44px; font-size: 1.2rem; } .pd-buy .qty span { min-width: 36px; font-size: 1.02rem; } .pd-buy .btn.is-soldout { background: transparent; border: 1.5px dashed var(--line-soft); color: var(--ink-faint); cursor: not-allowed; box-shadow: none; } .pd-trust { list-style: none; margin-top: 1.6rem; display: grid; gap: .5rem; color: var(--ink-soft); font-size: .93rem; } .pd-trust li::before { content: "✓ "; color: var(--caramel-deep); font-weight: 800; } .pd-custom { margin-top: 1.2rem; font-size: .95rem; color: var(--ink-soft); } @media (max-width: 940px) { .pd-grid { grid-template-columns: 1fr; gap: 1.4rem; } .pd-art { width: 100%; max-width: 500px; margin-inline: auto; } .pd-buy .btn { flex: 1; } } /* Carduri clickabile către pagina de produs */ .p-name a { color: inherit; } .p-name a:hover { color: var(--caramel-deep); } .mc-name a { color: inherit; } .mc-name a:hover { color: var(--caramel-deep); } /* ---------- FAQ ---------- */ .faq { display: grid; gap: .8rem; } .faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 1.4rem; font-weight: 600; font-size: .98rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; color: var(--caramel); transition: transform .25s; flex-shrink: 0; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 1.4rem 1.2rem; color: var(--ink-soft); font-size: .93rem; } /* ---------- Despre ---------- */ .stats-band { background: var(--ink); color: #C9B39D; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; text-align: center; } .stat strong { display: block; font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 600; color: var(--butter-soft); line-height: 1.1; } .stat span { font-size: .9rem; } .timeline { position: relative; display: grid; gap: 1.4rem; } .timeline::before { content: ""; position: absolute; left: 44px; top: 10px; bottom: 10px; border-left: 2px dashed var(--caramel); opacity: .4; } .tl-item { display: grid; grid-template-columns: 92px 1fr; gap: 1.2rem; align-items: start; } .tl-year { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; color: var(--caramel-deep); background: var(--butter-tint); border-radius: 999px; padding: .4rem .2rem; text-align: center; position: relative; z-index: 1; } .tl-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; } .tl-card h3 { margin-bottom: .35rem; } .tl-card p { color: var(--ink-soft); font-size: .93rem; } .values-band { background: var(--bg-warm); } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .team-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; text-align: center; } .team-avatar { width: 84px; height: 84px; margin: 0 auto .9rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.3rem; } .team-role { font-family: var(--font-hand); font-size: 1rem; color: var(--caramel); margin: .1rem 0 .5rem; } .team-card p:last-child { color: var(--ink-soft); font-size: .9rem; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .contact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.3rem; text-align: center; color: var(--ink); display: block; transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s, border-color .3s; } a.contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--caramel); } .contact-ico { width: 58px; height: 58px; margin: 0 auto .7rem; border-radius: 50%; background: var(--butter-tint); display: grid; place-items: center; font-size: 1.5rem; } .contact-main { font-weight: 700; margin-top: .2rem; } .contact-card p:last-child { color: var(--ink-faint); font-size: .84rem; } .map-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } .map-card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; } .map-art svg { width: 100%; height: auto; } .map-info { padding: 1.4rem 1.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .map-info h3 { margin-bottom: .4rem; } .map-info .hours { font-size: .9rem; gap: 1.4rem; } .map-info .hours span { color: var(--ink-soft); } .contact-form { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: clamp(1.6rem, 3vw, 2.2rem); } .contact-form h2 { font-size: 1.6rem; margin-bottom: .3rem; } .form-sub { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1.4rem; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--d, 0ms), transform .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms); } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .nav { gap: 1rem; } .header-phone { display: none; } } @media (max-width: 940px) { .hero-in { grid-template-columns: 1fr; text-align: center; } .hero-sub, .page-hero p { margin-inline: auto; } .hero-cta, .hero-trust { justify-content: center; } .hero-photo { min-height: 320px; margin-top: 1rem; } .story-in, .visit-in, .cake-grid, .map-form-grid { grid-template-columns: 1fr; } .cake-side { position: static; } .cats-grid { grid-template-columns: repeat(3, 1fr); } .usp-grid { grid-template-columns: repeat(2, 1fr); } .t-grid, .team-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: repeat(2, 1fr); } .checkout-grid { grid-template-columns: 1fr; } .checkout-side { position: static; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .promo-banner { grid-template-columns: 1fr; text-align: center; } .promo-art { width: 170px; } .promo-actions { justify-content: center; } .promo-slim { text-align: left; } .footer-grid { grid-template-columns: 1fr 1fr; } .section-side-note { text-align: left; } } @media (max-width: 840px) { .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--line); flex-direction: column; gap: 0; padding: .6rem 4%; box-shadow: var(--shadow-lg); } .nav.is-open { display: flex; } .nav a { padding: .85rem .2rem; border-bottom: 1px solid var(--line); font-size: 1.02rem; } .nav a:last-child { border-bottom: none; } .nav a.is-active::after { display: none; } .nav a.is-active { color: var(--caramel-deep); } .burger { display: flex; } .header-cta { display: none; } .sticky-bar.is-visible { display: block; } body.has-sticky .wa-float { bottom: 84px; } body.has-sticky .cookie-bar { bottom: 84px; } .cookie-bar { left: 12px; right: 12px; max-width: none; } body.has-sticky .toast { bottom: 96px; } .marquee-track span { font-size: 1.05rem; } } @media (max-width: 560px) { body { font-size: 15.5px; } .header-in { height: 66px; gap: .8rem; } .cats-grid { grid-template-columns: repeat(2, 1fr); } .usp-grid, .field-grid, .mode-row, .contact-grid { grid-template-columns: 1fr; } .steps-grid { flex-direction: column; align-items: stretch; } .step { max-width: none; } .step-arrow { transform: rotate(90deg); text-align: center; } .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; } .footer-cta-in { flex-direction: column; align-items: flex-start; } .co-item { grid-template-columns: 52px 1fr auto; grid-template-rows: auto auto; } .co-art { width: 52px; height: 52px; grid-row: span 2; } .co-line { grid-column: 2; } .co-remove { grid-column: 3; } .menu-tools { top: 65px; } .hero-photo { min-height: 240px; } .logo-img { height: 44px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } .marquee-track { animation: none; } .reveal { opacity: 1; transform: none; } } /* ============================================================ OPTIMIZĂRI — polish vizual + mobil Stilul „imaginii din hero": fundal cald, glow caramel, lumină moale peste produse. Aplicat coerent pe tot site-ul. ============================================================ */ /* — Sheen cald peste ilustrațiile de produs (ca lumina din hero) — */ .p-art { overflow: hidden; } .p-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(62% 58% at 50% 38%, rgba(255, 252, 244, .6), transparent 72%); mix-blend-mode: soft-light; } .p-art svg, .p-badge { position: relative; z-index: 1; } /* — Carduri produs: umbră mai fină în repaus, lift mai catifelat — */ .p-card { box-shadow: 0 2px 12px -8px rgba(91, 62, 54, .18); } .p-card:hover { transform: translateY(-7px); box-shadow: 0 26px 52px -22px rgba(91, 62, 54, .34); } /* — Tile categorii: glow cald la hover, în spiritul imaginii — */ .cat-tile { position: relative; overflow: hidden; isolation: isolate; } .cat-tile::before { content: ""; position: absolute; top: -34%; left: 50%; transform: translateX(-50%); width: 128%; aspect-ratio: 1; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(224, 138, 46, .18), transparent 70%); opacity: 0; transition: opacity .35s ease; } .cat-tile:hover::before { opacity: 1; } /* — Buton principal: auriu șampanie cu volum + margine de lumină — */ .btn-primary { background: linear-gradient(180deg, #C2A379 0%, #AC8D5F 100%); box-shadow: 0 8px 20px -10px rgba(154, 118, 66, .6), inset 0 1px 0 rgba(255, 255, 255, .32); } .btn-primary:hover { background: linear-gradient(180deg, #C9AB80 0%, #A28455 100%); box-shadow: 0 14px 28px -12px rgba(154, 118, 66, .62), inset 0 1px 0 rgba(255, 255, 255, .35); } .btn-add { background: linear-gradient(180deg, #C2A379 0%, #AC8D5F 100%); color: #FFFDF8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); } .btn-add:hover { background: linear-gradient(180deg, #C9AB80 0%, #A28455 100%); } /* — Banner torturi: glow caramel ca în hero — */ .promo-banner::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px 320px at 80% 28%, rgba(240, 169, 60, .2), transparent 66%); } .promo-copy, .promo-art { position: relative; z-index: 1; } /* — Iconițe USP: cerc cu ușoară adâncime, glow la hover pe card — */ .usp-ico { box-shadow: inset 0 0 0 1px rgba(224, 138, 46, .12); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; } .usp-item:hover .usp-ico { transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(154, 118, 66, .45); } /* — Testimoniale: ridicare fină la hover — */ .t-card { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; } .t-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } /* — Number-badge pași: lumină de sus — */ .step-n { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -8px rgba(154,118,66,.5); } /* ============================================================ MOBIL — ținte de atingere mai mari + ritm mai aerisit ============================================================ */ @media (max-width: 640px) { /* Ținte de atingere ≥ 44px */ .qty button { width: 40px; height: 40px; font-size: 1.15rem; } .qty span { min-width: 30px; } .minicart-close, .popup-close { width: 44px; height: 44px; } .mc-remove { padding: .35rem 0; font-size: .82rem; } .cat-tab { padding: .62rem 1.05rem; } .co-remove { width: 40px; height: 40px; } .cart-btn { width: 48px; height: 48px; } /* Butoane mai generoase la deget */ .btn { padding: .82rem 1.4rem; } .btn-add { padding: .62rem 1.15rem; } .btn-sm { padding: .55rem 1rem; } } @media (max-width: 560px) { /* Hero mai compact și mai citibil pe telefon */ .hero-in { gap: 1.4rem; padding-block: 2rem 2.8rem; } .hero .eyebrow { font-size: 1.12rem; } .hero-sub { font-size: 1.02rem; } .hero-cta { gap: .7rem; width: 100%; } .hero-cta .btn { flex: 1 1 100%; } .hero-photo img { width: min(270px, 70%); } .hero-trust { font-size: .82rem; justify-content: center; } /* CTA-uri de secțiune pe toată lățimea */ .visit-ctas .btn, .promo-copy .btn { width: 100%; } .visit-ctas { flex-direction: column; } /* Ritm vertical puțin mai strâns între secțiuni */ .section { padding-block: clamp(2.6rem, 8vw, 3.4rem); } } @media (max-width: 400px) { h1 { font-size: 2.1rem; } .cats-grid { grid-template-columns: 1fr 1fr; gap: .8rem; } .cat-tile { padding: 1.1rem .7rem .95rem; } .cat-tile-art { width: 60px; } .marquee-track span { font-size: .95rem; } } /* ============================================================ MOBIL — pagina Meniu: unelte compacte, produse 2 pe rând Bara de căutare/sortare/categorii ocupa ~300px pe verticală și împingea produsele sub linia de plutire. ============================================================ */ @media (max-width: 640px) { /* — Căutare + sortare pe același rând — */ .menu-tools { padding-block: .65rem; } .tools-row { flex-wrap: nowrap; gap: .5rem; margin-bottom: .6rem; } .search-box { min-width: 0; padding: .5rem .85rem; } .search-box input { font-size: .9rem; } .sort-box { flex-shrink: 0; } .sort-box > span { display: none; } /* eticheta „Sortează:” */ .sort-box select { padding: .5rem .7rem; font-size: .82rem; max-width: 8.4rem; } /* — Categorii: un singur rând, derulabil orizontal până în marginea ecranului — */ .cat-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } .cat-tabs::-webkit-scrollbar { display: none; } .cat-tab { flex: 0 0 auto; scroll-snap-align: start; } .menu-section { padding-top: 1.2rem; } .menu-count-line { margin-bottom: .8rem; } /* — Produse: 2 pe rând, ca să intre 4 pe ecran — */ .p-grid, .p-grid-3 { grid-template-columns: 1fr 1fr; gap: .75rem; } .p-body { padding: .75rem .8rem .85rem; } .p-name { font-size: .92rem; line-height: 1.3; } .p-desc { font-size: .76rem; line-height: 1.45; } .p-alerg { display: none; } .p-badge { top: 8px; left: 8px; font-size: .6rem; padding: .25rem .5rem; } .p-foot { flex-direction: column; align-items: stretch; gap: .5rem; padding-top: .7rem; } .p-price { font-size: .95rem; } .p-price span { font-size: .68rem; } /* rămâne pe rândul lui: carduri de înălțime egală */ .btn-add { width: 100%; } }