/* ========================================================= DÉESSES Bakery — multi-branch static demo Warm golden bakery base + pink/purple "goddess" gift accent Scroll-driven warm theme via [data-theme] on ========================================================= */ :root { /* Warm bakery palette */ --crust: #7a4a21; --amber: #c8821f; --honey: #e7a93c; --butter: #f4d58a; --cream: #fbf3e4; --linen: #fdf8ef; --espresso:#3a2614; /* Goddess gift accent (pink / purple) */ --rose: #c93278; --plum: #8a4f9e; --blush: #f6d6e6; --lilac: #efe2f6; /* Brand channels */ --whatsapp:#25d366; /* Theme tokens (default / "dawn") */ --bg: var(--linen); --surface: #ffffff; --text: var(--espresso); --muted: #836b4d; --accent: var(--amber); --accent-2:var(--rose); --hairline: rgba(58, 38, 20, 0.10); --glass: rgba(253, 248, 239, 0.72); --radius: 20px; --radius-sm: 14px; --maxw: 1160px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---- Scroll themes ---- */ body[data-theme="dawn"] { --bg: var(--linen); --surface: #fff; --text: var(--espresso); --muted: #836b4d; --accent: var(--amber); --glass: rgba(253,248,239,0.72); --hairline: rgba(58,38,20,0.10); } body[data-theme="midday"] { --bg: var(--cream); --surface: #fffaf0; --text: var(--espresso); --muted: #8a6f4d; --accent: var(--amber); --glass: rgba(251,243,228,0.72); --hairline: rgba(58,38,20,0.12); } body[data-theme="golden"] { --bg: #f9ecdc; --surface: #fff5e6; --text: #4a2f15; --muted: #8a6336; --accent: var(--crust); --glass: rgba(249,236,220,0.74); --hairline: rgba(74,47,21,0.14); } body[data-theme="dusk"] { --bg: #2a1a0e; --surface: #36230f; --text: #f6e4c2; --muted: #cba36a; --accent: var(--honey); --glass: rgba(42,26,14,0.66); --hairline: rgba(246,228,194,0.14); } /* ---- Reset / base ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.8s var(--ease), color 0.8s var(--ease); } ::selection { background: rgba(201, 50, 120, 0.18); color: var(--espresso); } body.modal-open { overflow: hidden; } h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } section { padding: clamp(64px, 11vw, 132px) clamp(20px, 6vw, 64px); } /* ---- Instagram glyph ---- */ .ig-mark { display: inline-block; width: 18px; height: 18px; border-radius: 6px; border: 2px solid currentColor; position: relative; flex: none; } .ig-mark::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid currentColor; } .ig-mark::after { content: ""; position: absolute; top: 2.5px; right: 2.5px; width: 2.5px; height: 2.5px; border-radius: 50%; background: currentColor; } .ig-mark--lg { width: 30px; height: 30px; border-radius: 9px; } .ig-mark--lg::after { width: 3.5px; height: 3.5px; top: 4px; right: 4px; } /* ---- Shared bits ---- */ .eyebrow { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--accent-2); margin-bottom: 14px; } .eyebrow--light { color: var(--blush); } .section__head { max-width: 760px; margin: 0 auto clamp(34px, 5vw, 64px); text-align: center; } .section__head h2 { font-size: clamp(2rem, 5vw, 3.4rem); } .section__sub { margin: 18px auto 0; color: var(--muted); font-size: 1.06rem; max-width: 62ch; } .section__sub strong, .section__sub em { color: var(--text); } .reveal-on-scroll { opacity: 0; transform: translateY(34px) scale(0.985); filter: blur(8px); transition: opacity 0.85s ease var(--reveal-delay, 0ms), transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay, 0ms), filter 0.85s ease var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } .product.reveal-on-scroll, .branch-card.reveal-on-scroll, .social-tile.reveal-on-scroll, .footer-branch.reveal-on-scroll { transform: translateY(42px) scale(0.96); } .product.reveal-on-scroll.is-visible, .branch-card.reveal-on-scroll.is-visible, .social-tile.reveal-on-scroll.is-visible, .footer-branch.reveal-on-scroll.is-visible { transform: translateY(0) scale(1); } .product.reveal-on-scroll.is-visible:hover, .branch-card.reveal-on-scroll.is-visible:hover { transform: translateY(-6px) scale(1); } .social-tile.reveal-on-scroll.is-visible:hover { transform: translateY(-4px) scale(1); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 0.98rem; border: none; cursor: pointer; font-family: inherit; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--primary { background: linear-gradient(120deg, var(--rose), var(--plum)); color: #fff; box-shadow: 0 14px 32px -14px var(--plum); } .btn--ghost { border: 1px solid var(--hairline); color: var(--text); background: transparent; } .btn--ghost:hover { border-color: var(--accent-2); } .btn--lg { padding: 16px 32px; font-size: 1.02rem; } .note { text-align: center; margin: 40px auto 0; max-width: 780px; font-size: 0.84rem; color: var(--muted); font-style: italic; } /* ---- Navigation ---- */ .nav { position: sticky; top: 0; z-index: 100; padding: 14px clamp(16px, 5vw, 48px); transition: padding 0.4s var(--ease), background 0.6s var(--ease), box-shadow 0.4s var(--ease); } .nav--scrolled { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 1px 0 var(--hairline); } .nav__inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 24px; } .nav__brand { display: flex; align-items: center; gap: 12px; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.18rem; letter-spacing: 0.04em; } .nav__name small { display: block; font-size: 0.62rem; letter-spacing: 0.32em; color: var(--muted); font-family: "Inter", sans-serif; font-weight: 600; } .nav__mark { color: var(--accent-2); font-size: 1.25rem; } .nav__logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; flex: none; padding: 3px; background: linear-gradient(#fffaf4, #fffaf4) padding-box, linear-gradient(135deg, var(--rose), var(--plum), var(--honey)) border-box; border: 2px solid transparent; box-shadow: 0 12px 30px -13px rgba(138, 79, 158, 0.95), 0 0 0 5px rgba(246, 214, 230, 0.34); } .nav__links { display: flex; gap: 26px; list-style: none; margin: 0 auto 0 18px; padding: 0; font-size: 0.92rem; font-weight: 500; } .nav__links a { color: var(--muted); transition: color 0.25s var(--ease); } .nav__links a:hover { color: var(--accent-2); } .social-float { position: fixed; right: clamp(10px, 2vw, 22px); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 95; } .social-trigger { border: 0; cursor: pointer; min-width: 104px; height: 48px; padding: 0 18px 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; isolation: isolate; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #5b2a86 0%, #c13584 38%, #e1306c 68%, #f77737 100%); box-shadow: 0 16px 38px rgba(193,53,132,0.24), inset 0 1px 0 rgba(255,255,255,0.32); font: inherit; font-weight: 850; letter-spacing: -0.01em; opacity: 0.94; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), opacity 0.18s var(--ease); } .social-trigger::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,0.42) 0 13%, transparent 28%); } .social-trigger__ig { width: 21px; height: 21px; flex: none; display: block; color: currentColor; filter: drop-shadow(0 1px 8px rgba(63, 18, 65, 0.22)); } .social-trigger__ig rect, .social-trigger__ig circle, .social-menu__ig svg rect, .social-menu__ig svg circle { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .social-trigger__ig .social-trigger__ig-dot, .social-menu__ig svg circle:last-child { fill: currentColor; stroke: none; } .social-trigger__label { position: relative; text-shadow: 0 1px 12px rgba(62,22,58,0.26); } .social-menu { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(314px, calc(100vw - 32px)); padding: 10px; border-radius: 26px; background: rgba(255,250,244,0.92); border: 1px solid rgba(138,79,158,0.15); box-shadow: 0 26px 80px rgba(83,49,75,0.22); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none; transform-origin: bottom right; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); } .social-float:hover .social-menu, .social-float:focus-within .social-menu, .social-float.social-float--open .social-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .social-float:hover .social-trigger, .social-float:focus-within .social-trigger, .social-float.social-float--open .social-trigger { transform: translateY(-1px); box-shadow: 0 20px 52px rgba(138,79,158,0.32); } .social-menu a { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 18px; color: var(--text); } .social-menu a:hover, .social-menu a:focus { background: rgba(246,214,230,0.24); outline: none; } .social-menu .ig-mark, .social-menu__ig, .social-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--rose), var(--plum)); color: #fff; box-shadow: 0 10px 22px rgba(138,79,158,0.16); } .social-menu__ig { background: linear-gradient(135deg, #5b2a86, #c13584 42%, #f77737); } .social-menu__ig svg { width: 19px; height: 19px; display: block; } .social-menu span { display: grid; gap: 2px; } .social-menu strong { font-size: 0.95rem; } .social-menu small { color: var(--muted); font-weight: 700; line-height: 1.25; } .language-switch { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(255,255,255,0.68); box-shadow: 0 12px 30px rgba(83,49,75,0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); flex: none; } .language-switch button { border: 0; cursor: pointer; min-width: 38px; height: 34px; border-radius: 999px; color: var(--muted); background: transparent; font: inherit; font-size: 0.8rem; font-weight: 800; letter-spacing: -0.01em; transition: color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease); } .language-switch button:hover { color: var(--text); } .language-switch button.active { color: #fff; background: linear-gradient(120deg, var(--rose), var(--plum)); box-shadow: 0 8px 20px rgba(138,79,158,0.18); } .nav__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(120deg, var(--rose), var(--plum)); color: #fff; font-weight: 600; font-size: 0.88rem; transition: transform 0.3s var(--ease); } .nav__cta:hover { transform: translateY(-2px); } .nav__toggle { display: none; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; position: relative; flex: none; } .nav__toggle span[aria-hidden="true"], .nav__toggle span[aria-hidden="true"]::before, .nav__toggle span[aria-hidden="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); } .nav__toggle span[aria-hidden="true"] { top: 21px; } .nav__toggle span[aria-hidden="true"]::before { top: -7px; left: 0; right: 0; } .nav__toggle span[aria-hidden="true"]::after { top: 7px; left: 0; right: 0; } body[data-nav-open="true"] .nav__toggle span[aria-hidden="true"] { transform: rotate(45deg); } body[data-nav-open="true"] .nav__toggle span[aria-hidden="true"]::before { transform: translateY(7px) rotate(90deg); } body[data-nav-open="true"] .nav__toggle span[aria-hidden="true"]::after { opacity: 0; } /* ---- Hero ---- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hero { position: relative; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); display: grid; place-items: center; overflow: hidden; padding: clamp(72px, 12vh, 118px) clamp(18px, 5vw, 56px) clamp(52px, 9vh, 92px); background: linear-gradient(180deg, #fff6ee 0%, #fdebf4 48%, #fffaf4 100%); } .hero::after { content: ""; position: absolute; inset: auto -12% -22% -12%; height: 42%; z-index: 1; background: radial-gradient(closest-side at 50% 100%, rgba(255, 255, 255, 0.78), rgba(255, 214, 230, 0.2) 54%, transparent 74%); pointer-events: none; } .hero--gallery::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(90% 80% at 50% 28%, rgba(255, 250, 244, 0.46), transparent 58%), linear-gradient(180deg, rgba(255, 246, 238, 0.08), rgba(83, 49, 75, 0.24)); pointer-events: none; } .hero-gallery { position: absolute; inset: 0; display: grid; grid-template-columns: 1.04fr 0.9fr 1.12fr 0.9fr 1.04fr; gap: clamp(8px, 1.1vw, 16px); padding: clamp(12px, 2vw, 26px); transform: scale(1.02); } .hero-gallery__tile { position: relative; overflow: hidden; border-radius: clamp(22px, 3vw, 42px); min-height: 58vh; box-shadow: 0 34px 90px -54px rgba(67, 33, 58, 0.68); isolation: isolate; } .hero-gallery__tile--one, .hero-gallery__tile--five { transform: translateY(6vh); } .hero-gallery__tile--two, .hero-gallery__tile--four { transform: translateY(-2vh); } .hero-gallery__tile--three { transform: translateY(3vh); } .hero-gallery__tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(0.98) brightness(1.18); } .hero-gallery__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,246,238,0.04), rgba(48,21,43,0.28)); z-index: 1; } .hero-gallery__tile span { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; color: #fff8ee; text-shadow: 0 2px 18px rgba(0,0,0,0.45); } .hero-gallery__tile strong { display: block; font-family: "Fraunces", Georgia, serif; font-size: clamp(1.02rem, 1.65vw, 1.46rem); line-height: 1.08; } .hero-gallery__tile small { display: block; margin-top: 4px; font-size: 0.72rem; letter-spacing: 0.06em; opacity: 0.86; } .hero-center { position: relative; z-index: 2; width: min(860px, 100%); text-align: center; padding: clamp(10px, 2.4vw, 22px); } .hero-center .eyebrow { margin-bottom: 12px; color: #6f2e61; font-size: clamp(0.78rem, 1vw, 0.95rem); font-weight: 800; text-shadow: 0 1px 0 rgba(255,250,244,0.88), 0 8px 26px rgba(255,250,244,0.92); } .hero__title { font-size: clamp(3.15rem, 9vw, 6.55rem); font-weight: 700; line-height: 0.9; color: #2f1d12; text-shadow: 0 1px 0 rgba(255,250,244,0.92), 0 6px 24px rgba(255,250,244,0.88), 0 18px 58px rgba(255,250,244,0.74); } .hero__zh { margin-top: 18px; font-family: "Noto Sans TC", serif; font-size: clamp(1.12rem, 2.4vw, 1.55rem); letter-spacing: 0.16em; color: #5a351f; font-weight: 800; text-shadow: 0 1px 0 rgba(255,250,244,0.86), 0 8px 28px rgba(255,250,244,0.92); } .hero-search { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; width: min(720px, 100%); margin: clamp(28px, 4vw, 42px) auto 0; padding: 9px; border-radius: 999px; background: rgba(255,255,255,0.76); border: 1px solid rgba(255,255,255,0.54); box-shadow: 0 16px 42px -32px rgba(58,38,20,0.58), inset 0 1px 0 rgba(255,255,255,0.62); } .hero-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--espresso); padding: 14px 10px 14px 20px; font: inherit; font-size: 1.02rem; font-weight: 700; } .hero-search input::placeholder { color: rgba(58,38,20,0.54); } .hero-search button { border: 0; cursor: pointer; border-radius: 999px; padding: 14px 22px; color: #fff; font: inherit; font-size: 1.02rem; font-weight: 800; background: linear-gradient(120deg, var(--rose), var(--plum)); } .hero-category-nav { margin: 18px auto 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; } .hero-category-nav a { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.32); color: #352113; font-size: 0.94rem; font-weight: 800; text-shadow: 0 1px 0 rgba(255,250,244,0.68); transition: transform 0.22s var(--ease), background 0.22s var(--ease); } .hero-category-nav a:hover { transform: translateY(-2px); background: #fff; } .hero__fine { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(720px, calc(100% - 30px)); text-align: center; color: rgba(58,38,20,0.64); font-size: 0.78rem; letter-spacing: 0.01em; text-shadow: 0 1px 12px rgba(255,250,244,0.58); } @media (min-width: 1024px) { .hero-center { width: min(940px, 100%); } .hero__title { font-size: clamp(5.7rem, 9.8vw, 7.75rem); letter-spacing: -0.045em; } .hero__zh { font-size: clamp(1.24rem, 1.55vw, 1.64rem); } } /* ---- Branches ---- */ .branch-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 20px; } .branch-card { position: relative; text-align: left; cursor: pointer; font-family: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.96), var(--surface)); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 4px; color: var(--text); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease), background 0.6s var(--ease); } .branch-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--rose), var(--plum)); opacity: 0; transition: opacity 0.3s var(--ease); } .branch-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -30px rgba(138, 79, 158, 0.5); border-color: rgba(138, 79, 158, 0.22); } .branch-card--on { border-color: var(--plum); box-shadow: 0 26px 54px -28px rgba(138, 79, 158, 0.6); } .branch-card--on::before { opacity: 1; } .branch-card__heart { font-size: 1.5rem; } .branch-card__name { font-size: 1.32rem; margin: 4px 0 0; } .branch-card__sub { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; } .branch-card__addr { font-size: 0.92rem; color: var(--text); margin-top: 10px; } .branch-card__addr--en { color: var(--muted); font-size: 0.84rem; margin-top: 2px; } .branch-card__note { font-size: 0.85rem; color: var(--muted); margin-top: 10px; line-height: 1.5; } .branch-card__phone { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 0.92rem; color: var(--plum); } .branch-card__phone--none { color: var(--muted); font-weight: 500; font-size: 0.82rem; } .branch-card__cta { margin-top: 16px; font: inherit; font-size: 0.82rem; font-weight: 800; color: var(--accent); letter-spacing: 0.02em; align-self: flex-start; border: 0; background: transparent; padding: 0; cursor: pointer; } .branch-card__cta:hover, .branch-card__cta:focus-visible { color: var(--accent-2); text-decoration: underline; outline: none; } /* ---- Filters ---- */ .filters { max-width: var(--maxw); margin: 0 auto clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 14px; } .filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .filters__label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-right: 4px; min-width: 92px; } .chip { font-family: inherit; cursor: pointer; font-size: 0.86rem; font-weight: 500; padding: 9px 16px; border-radius: 999px; color: var(--text); background: var(--surface); border: 1px solid var(--hairline); transition: transform 0.2s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .chip:hover { transform: translateY(-2px); border-color: var(--accent-2); } .chip--on { background: linear-gradient(120deg, var(--rose), var(--plum)); color: #fff; border-color: transparent; } /* ---- Menu / products ---- */ .menu__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); gap: 24px; } .menu__empty { text-align: center; color: var(--muted); margin: 20px auto 0; font-style: italic; } .product { background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--surface)); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-align: left; width: 100%; padding: 0; color: inherit; font: inherit; cursor: pointer; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.6s var(--ease); } .product:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -30px rgba(138, 79, 158, 0.5); border-color: rgba(138, 79, 158, 0.2); outline: none; } .product:focus-visible { border-color: var(--plum); box-shadow: 0 26px 52px -30px rgba(138, 79, 158, 0.5); outline: 3px solid rgba(138, 79, 158, 0.35); outline-offset: 4px; } .product:focus-within { border-color: var(--plum); box-shadow: 0 26px 52px -30px rgba(138, 79, 158, 0.5); } .product--spotlight { border-color: var(--plum); box-shadow: 0 0 0 5px rgba(138, 79, 158, 0.16), 0 28px 58px -30px rgba(138, 79, 158, 0.7); animation: productSpotlight 1.25s ease-in-out 1; } @keyframes productSpotlight { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-8px) scale(1.018); } } .product__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--lilac); cursor: pointer; border: 0; padding: 0; width: 100%; display: block; color: inherit; font: inherit; } .product__media::after { content: "Tap for details"; position: absolute; left: 12px; top: 12px; z-index: 2; padding: 6px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; color: var(--espresso); background: rgba(255,255,255,0.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(-4px); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; } .product:hover .product__media::after, .product:focus-visible .product__media::after, .product:focus-within .product__media::after { opacity: 1; transform: translateY(0); } .product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.75s var(--ease), filter 0.75s var(--ease); } .product:hover .product__media img { transform: scale(1.05); } .product__cat { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: 0.72rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,0.86); color: var(--crust); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .product__badge { position: absolute; right: 12px; top: 12px; z-index: 2; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 6px 11px; border-radius: 999px; color: #fff; } .product__badge--sig { background: linear-gradient(120deg, var(--rose), var(--plum)); } .product__badge--season { background: linear-gradient(120deg, var(--amber), var(--crust)); } .product__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; } .product__head h3 { font-size: 1.12rem; } .product__desc { color: var(--muted); font-size: 0.92rem; margin-top: 8px; flex: 1; } .product__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 8px; } .product__price { align-self: flex-start; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; color: var(--crust); padding: 5px 11px; border-radius: 999px; background: rgba(231, 169, 60, 0.16); border: 1px solid rgba(122, 74, 33, 0.14); } .product__avail { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; } .product__avail-all { color: var(--plum); font-weight: 600; } .product__avail-some span { font-size: 0.95rem; } .product__open { margin-top: 4px; font-size: 0.82rem; font-weight: 800; color: var(--accent-2); width: fit-content; min-height: 44px; display: inline-flex; align-items: center; } .product__order-hint { display: inline-flex; width: fit-content; margin-top: 8px; padding: 7px 11px; border-radius: 999px; background: rgba(37,211,102,0.12); color: #168346; font-size: 0.76rem; font-weight: 800; } /* ---- Product detail modal ---- */ .product-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(14px, 3vw, 34px); pointer-events: none; opacity: 0; transition: opacity 0.28s var(--ease); } .product-modal--open { opacity: 1; pointer-events: auto; } .product-modal__backdrop { position: absolute; inset: 0; background: rgba(36, 19, 38, 0.46); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); } .product-modal__panel { position: relative; width: min(100%, 1040px); max-height: min(92vh, 780px); max-height: min(92dvh, 780px); overflow: auto; border-radius: 32px; background: rgba(255, 250, 244, 0.94); color: var(--espresso); border: 1px solid rgba(255,255,255,0.72); box-shadow: 0 42px 110px -34px rgba(36, 19, 38, 0.62); transform: translateY(18px) scale(0.98); transition: transform 0.32s var(--ease); } .product-modal--open .product-modal__panel { transform: translateY(0) scale(1); } .product-modal__close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(58,38,20,0.12); background: rgba(255,255,255,0.82); color: var(--espresso); font-size: 1.65rem; line-height: 1; cursor: pointer; box-shadow: 0 14px 28px -20px rgba(58,38,20,0.45); } .product-modal__content { display: grid; grid-template-columns: minmax(280px, 0.86fr) 1.14fr; height: min(76vh, 640px); min-height: 520px; } .product-modal__image { position: relative; background: var(--lilac); overflow: hidden; min-height: 0; } .product-modal__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(36,19,38,0.18)); pointer-events: none; } .product-modal__image img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; } .product-modal__details { padding: clamp(28px, 5vw, 56px); display: flex; flex-direction: column; justify-content: flex-start; overflow: auto; } .product-modal__details h2 { font-size: clamp(2rem, 5vw, 3.65rem); margin-bottom: 16px; } .product-modal__desc { color: #6f5536; font-size: 1.03rem; margin-bottom: 22px; } .product-modal__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 22px; } .product-modal__specs div { padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,0.68); border: 1px solid rgba(58,38,20,0.08); } .product-modal__specs span, .product-modal__section > span { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8a6f4d; font-weight: 700; margin-bottom: 5px; } .product-modal__specs strong { font-size: 0.95rem; line-height: 1.35; } .product-modal__section { margin-top: 14px; } .product-modal__pickup { margin-top: 4px; } .product-modal__pills, .product-modal__branches, .product-modal__branch-choices, .product-modal__addon-grid { display: flex; flex-wrap: wrap; gap: 8px; } .product-modal__pill, .product-modal__branch, .product-modal__branch-choice, .product-modal__addon { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 12px; font-size: 0.82rem; font-weight: 600; background: rgba(246,214,230,0.7); color: var(--plum); border: 1px solid rgba(138,79,158,0.12); } .product-modal__branch { background: rgba(231,169,60,0.16); color: var(--crust); } .product-modal__addon { background: rgba(37,211,102,0.10); color: #15723f; border-color: rgba(37,211,102,0.16); } .product-modal__addon input { accent-color: var(--whatsapp); margin-right: 5px; } .product-modal__config { padding: 14px; border-radius: 22px; background: rgba(255,255,255,0.62); border: 1px solid rgba(138,79,158,0.13); } .product-modal__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .product-modal__control { display: grid; gap: 6px; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8a6f4d; font-weight: 800; } .product-modal__control select, .product-modal__control input, .product-modal__field { width: 100%; border-radius: 18px; border: 1px solid rgba(58,38,20,0.1); background: rgba(255,255,255,0.78); padding: 12px 14px; color: var(--espresso); font: inherit; text-transform: none; letter-spacing: 0; font-weight: 600; } .product-modal__field { margin-top: 10px; } .product-modal__branch-choice { -webkit-appearance: none; appearance: none; font-family: inherit; cursor: pointer; background: rgba(255,255,255,0.76); color: #6f5536; -webkit-text-fill-color: #6f5536; transition: transform 0.2s var(--ease), background 0.25s var(--ease); } .product-modal__branch-choice:hover { transform: translateY(-1px); color: var(--plum); -webkit-text-fill-color: var(--plum); } .product-modal__branch-choice:focus-visible { outline: 3px solid rgba(138, 79, 158, 0.28); outline-offset: 2px; } .product-modal__branch-choice--on { background: linear-gradient(120deg, var(--rose), var(--plum)); color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: transparent; } .product-modal__branch-choice--on:hover, .product-modal__branch-choice--on:focus, .product-modal__branch-choice--on:focus-visible, .product-modal__branch-choice--on:active { color: #fff !important; -webkit-text-fill-color: #fff !important; } .product-modal__branch-note { margin-top: 18px; color: #6f5536; font-size: 0.92rem; } .product-modal__specs--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-modal__toggle { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 8px; border-radius: 999px; padding: 9px 13px; background: rgba(246,214,230,0.7); color: var(--plum); font-weight: 800; font-size: 0.86rem; } .product-modal__toggle input { accent-color: var(--plum); } .product-modal__review { padding: 14px; border-radius: 22px; background: rgba(58,38,20,0.045); border: 1px solid rgba(58,38,20,0.08); } .product-modal__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .product-modal__summary div { padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,0.72); border: 1px solid rgba(58,38,20,0.07); } .product-modal__summary span { display: block; color: #8a6f4d; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; } .product-modal__summary strong { font-size: 0.9rem; line-height: 1.25; } .product-modal__order { margin-top: 14px; width: 100%; justify-content: center; } .product-modal__fine { margin-top: 12px; color: #8a6f4d; font-size: 0.8rem; line-height: 1.5; } /* ---- Signature (dusk-toned) ---- */ .signature { background: radial-gradient(100% 100% at 80% 0%, rgba(231, 99, 155, 0.28), transparent 55%), radial-gradient(90% 90% at 10% 100%, rgba(138, 79, 158, 0.34), transparent 55%), #241326; color: #f6e4f0; } .signature__inner, .craft__inner, .social__inner { isolation: isolate; } .signature__inner { max-width: 820px; margin: 0 auto; text-align: center; } .signature h2 { font-size: clamp(2.4rem, 6vw, 4rem); color: #fff; } .signature__by { color: var(--blush); font-style: italic; font-weight: 400; } .signature__lead { margin: 22px auto 0; max-width: 640px; color: #e9cfe0; font-size: 1.08rem; } .signature__lead strong { color: #fff; } .signature__list { list-style: none; margin: 34px auto 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 720px; text-align: left; } .signature__list li { min-width: 0; } .signature__product { width: 100%; min-height: 100%; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(246, 214, 230, 0.2); border-radius: var(--radius-sm); padding: 16px 18px; background: rgba(246, 214, 230, 0.05); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .signature__product:hover, .signature__product:focus-visible { transform: translateY(-2px); border-color: rgba(246, 214, 230, 0.55); background: rgba(246, 214, 230, 0.12); outline: none; } .signature__product span { font-size: 1.4rem; } .signature__product em { margin-left: auto; font-style: normal; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blush); font-weight: 700; } /* ---- Cake craft / Dribbble-inspired motion panel ---- */ .craft { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 18%, rgba(255,255,255,0.92) 0 9%, transparent 10%), radial-gradient(circle at 84% 18%, rgba(255,214,102,0.36) 0 10%, transparent 11%), radial-gradient(circle at 76% 82%, rgba(186,229,255,0.42) 0 12%, transparent 13%), linear-gradient(135deg, #fff2f8, #f5edff 48%, #fff9e8); } .craft::before { content: ""; position: absolute; inset: 24px; border: 1px dashed rgba(201, 50, 120, 0.2); border-radius: 38px; pointer-events: none; } .craft__inner { position: relative; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1.15fr); gap: clamp(28px, 6vw, 72px); align-items: center; } .craft__copy h2 { font-size: clamp(2.2rem, 6vw, 4.2rem); max-width: 560px; } .craft__copy .section__sub { text-align: left; max-width: 610px; } .craft__controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .craft__controls .btn[disabled] { opacity: 0.56; cursor: not-allowed; transform: none; } .craft__status { margin-top: 14px; color: var(--muted); font-size: 0.9rem; font-weight: 700; } .craft__panel { position: relative; min-height: clamp(420px, 52vw, 620px); display: grid; place-items: center; padding: clamp(18px, 4vw, 34px); border-radius: 36px; background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.82); box-shadow: 0 30px 80px rgba(96,57,92,0.17), inset 0 1px 0 rgba(255,255,255,0.76); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); overflow: hidden; } .craft__shot-meta { position: absolute; left: 18px; right: 18px; top: 18px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; } .craft__shot-meta span { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,0.76); border: 1px solid rgba(255,255,255,0.9); color: #7b4a66; font-size: 0.78rem; font-weight: 800; box-shadow: 0 10px 24px rgba(124,73,101,0.09); } .cake-assembly { width: min(100%, 620px); max-height: 620px; overflow: visible; user-select: none; } .cake-piece { transform-box: fill-box; transform-origin: center; transition: transform 0.9s var(--ease), filter 0.9s var(--ease); filter: drop-shadow(0 16px 22px rgba(88,40,62,0.12)); } .cake-shadow { opacity: 0.22; filter: blur(8px); transition: transform 0.9s var(--ease), opacity 0.9s var(--ease); } .cake-guide line { opacity: 0; stroke: rgba(146,80,117,0.34); stroke-width: 2; stroke-dasharray: 8 8; stroke-linecap: round; transition: opacity 0.45s var(--ease); } .cake-labels text { opacity: 0; fill: #8b4663; font: 800 18px "Inter", "Noto Sans TC", sans-serif; letter-spacing: 0.02em; paint-order: stroke; stroke: rgba(255,255,255,0.92); stroke-width: 7px; stroke-linejoin: round; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .craft[data-cake-mode="exploded"] .cake-candle { transform: translate(94px, -86px) rotate(10deg) scale(1.03); } .craft[data-cake-mode="exploded"] .cake-berries { transform: translate(-118px, -76px) rotate(-12deg) scale(1.06); } .craft[data-cake-mode="exploded"] .cake-frosting { transform: translate(98px, -48px) rotate(4deg) scale(1.02); } .craft[data-cake-mode="exploded"] .cake-sponge--top { transform: translate(-34px, -12px) rotate(-1deg); } .craft[data-cake-mode="exploded"] .cake-cream { transform: translate(-116px, 28px) rotate(-5deg) scale(1.02); } .craft[data-cake-mode="exploded"] .cake-sponge--bottom { transform: translate(92px, 58px) rotate(3deg); } .craft[data-cake-mode="exploded"] .cake-plate { transform: translate(-96px, 72px) rotate(-2deg) scale(0.98); } .craft[data-cake-mode="exploded"] .cake-shadow { opacity: 0.14; transform: scaleX(1.24); } .craft[data-cake-mode="exploded"] .cake-guide line, .craft[data-cake-mode="exploded"] .cake-labels text { opacity: 1; } .craft[data-cake-mode="exploded"] .cake-labels text { transform: translateY(5px); } .craft[data-cake-mode="replaying"] .cake-piece { animation: cakePulse 2.8s var(--ease) infinite; } @keyframes cakePulse { 0%, 100% { filter: drop-shadow(0 16px 22px rgba(88,40,62,0.12)); } 50% { filter: drop-shadow(0 22px 34px rgba(201,50,120,0.2)); } } /* ---- Order ---- */ .order__cards { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .order-card { position: relative; text-align: center; padding: 36px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hairline); display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease); } .order-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -30px rgba(138, 79, 158, 0.5); } .order-card h3 { font-size: 1.3rem; } .order-card p { font-size: 1.08rem; font-weight: 600; color: var(--text); } .order-card__hint { font-size: 0.84rem; color: var(--muted); } .order-card__icon { margin-bottom: 6px; color: var(--plum); } .order-card--ig:hover { border-color: var(--rose); } .order-card--wa:hover { border-color: var(--whatsapp); } .order-card__icon--wa { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--whatsapp); color: #fff; font-size: 1.4rem; } .order-card--ig .order-card__icon { color: var(--rose); } /* ---- Social ---- */ .social { background: linear-gradient(180deg, transparent, rgba(246, 214, 230, 0.18)); } .social__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 64px); align-items: center; } .social__text h2 { font-size: clamp(2rem, 5vw, 3rem); } .social__lead { margin-top: 18px; color: var(--muted); font-size: 1.05rem; } .social__lead strong { color: var(--text); } .social__counts { margin: 16px 0 24px; color: var(--muted); font-size: 0.95rem; } .social__counts strong { color: var(--accent-2); } .social__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .social-tile { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--lilac); } .social-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.65s var(--ease), filter 0.65s var(--ease); } .social-tile:hover img { transform: scale(1.08); } /* ---- Footer ---- */ .footer { background: #241326; color: var(--blush); padding: 56px clamp(20px, 6vw, 64px); } .footer__inner { max-width: var(--maxw); margin: 0 auto; } .footer__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; } .footer__brand { font-family: "Fraunces", serif; font-size: 1.5rem; color: #fff; letter-spacing: 0.04em; } .footer__tag { font-size: 0.82rem; color: rgba(246, 214, 230, 0.7); margin-top: 4px; } .footer__ig { display: inline-flex; align-items: center; gap: 9px; font-size: 0.92rem; font-weight: 600; color: var(--blush); padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(246, 214, 230, 0.28); transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .footer__ig:hover { border-color: var(--rose); background: rgba(231, 99, 155, 0.12); } .footer__branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; padding: 26px 0; margin-bottom: 8px; border-top: 1px solid rgba(246, 214, 230, 0.14); border-bottom: 1px solid rgba(246, 214, 230, 0.14); } .footer-branch__name { font-weight: 700; color: #fff; font-size: 0.96rem; } .footer-branch__addr { font-size: 0.82rem; color: rgba(246, 214, 230, 0.66); margin-top: 4px; line-height: 1.5; } .footer-branch__phone { font-size: 0.82rem; color: var(--blush); margin-top: 6px; } .footer__fine { font-size: 0.8rem; color: rgba(246, 214, 230, 0.6); max-width: 880px; line-height: 1.7; margin-top: 24px; } .footer__fine strong { color: rgba(246, 214, 230, 0.85); } /* ---- Responsive ---- */ @media (max-width: 920px) { .hero-gallery { grid-template-columns: 1fr 1fr; opacity: 0.74; } .hero-gallery__tile { min-height: 28vh; } .hero-gallery__tile--three { grid-column: span 2; } .social__inner { grid-template-columns: 1fr; } .craft__inner { grid-template-columns: 1fr; } } @media (max-width: 760px) { .nav { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); } .nav__inner { position: relative; max-width: 100%; gap: 8px; min-width: 0; } .nav__brand { min-width: 0; flex: 1 1 auto; gap: 8px; font-size: clamp(0.88rem, 4vw, 1.05rem); letter-spacing: 0.025em; order: 1; } .nav__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav__name small { font-size: 0.54rem; letter-spacing: 0.22em; } .nav__logo { width: 40px; height: 40px; padding: 2px; box-shadow: 0 10px 24px -14px rgba(138,79,158,0.95), 0 0 0 4px rgba(246,214,230,0.30); } .language-switch { padding: 3px; gap: 2px; order: 2; } .language-switch button { min-width: 34px; height: 32px; font-size: 0.76rem; } .nav__cta { display: none; } .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: 0; order: 3; } .nav__links { position: absolute; left: 0; right: 0; top: calc(100% + 12px); display: none; flex-direction: column; gap: 4px; margin: 0; padding: 12px; border-radius: 22px; background: var(--surface); border: 1px solid var(--hairline); box-shadow: 0 24px 54px -32px rgba(58,38,20,0.52); } body[data-nav-open="true"] .nav__links, .nav__links--open { display: flex; } .nav__links a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; } .nav__links a:hover { background: rgba(246,214,230,0.28); } .social-float { right: 10px; bottom: max(8px, env(safe-area-inset-bottom)); } .social-trigger { min-width: 48px; width: 48px; height: 48px; padding: 0; opacity: 0.94; } .social-trigger > span:last-child { display: none; } .social-menu { width: min(292px, calc(100vw - 28px)); } .hero { min-height: 86vh; min-height: 86svh; padding-top: 76px; } .craft::before { inset: 10px; border-radius: 24px; } .craft__panel { min-height: 420px; border-radius: 26px; } .craft__shot-meta { position: static; margin-bottom: 8px; } .cake-assembly { width: min(112%, 520px); } .hero-search { grid-template-columns: 1fr; border-radius: 24px; } .hero-search button { width: 100%; } .hero-gallery { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; } .hero-gallery__tile { min-height: 24vh; border-radius: 22px; } .hero-gallery__tile--five { display: none; } .filters__label { min-width: 100%; } .product-modal { padding: 10px; align-items: end; } .product-modal__panel { max-height: 94vh; border-radius: 26px 26px 0 0; } .product-modal__content { grid-template-columns: 1fr; height: auto; min-height: 0; } .product-modal__image { max-height: 340px; } .product-modal__specs { grid-template-columns: 1fr; } .product-modal__order { width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .reveal-on-scroll { opacity: 1; transform: none !important; filter: none; } .craft[data-cake-mode="replaying"] .cake-piece { animation: none; } }