/* Joy Cakes shared block design system. */ @font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cutive"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cutive-regular.ttf") format("truetype"); } :root, .editor-styles-wrapper { --joy-color-text: #261306; --joy-color-base: #f2efe8; --joy-color-soft: #f7f5f4; --joy-color-dark-chocolate: #3e2c20; --joy-color-brown: #8b5e3e; --joy-color-warm-panel: #9f6c47; --joy-color-cocoa: #6a391b; --joy-color-line: #b9a08c; --joy-color-white: #fff; --joy-font-heading: "Outfit", var(--wd-title-font, var(--wd-text-font, system-ui, sans-serif)); --joy-font-body: "Outfit", var(--wd-text-font, system-ui, sans-serif); --joy-font-accent: "Cutive", var(--joy-font-body); --joy-weight-regular: 400; --joy-weight-medium: 500; --joy-weight-semibold: 600; --joy-weight-bold: 700; --joy-weight-light: 300; --joy-text-display: clamp(1.875rem, 1.55rem + 1.9vw, 3.5rem); --joy-text-title-xl: clamp(2rem, 1.55rem + 1.2vw, 2.75rem); --joy-text-title-lg: clamp(1.875rem, 1.446rem + 1.19vw, 2.5rem); --joy-text-title-md: clamp(1.5rem, 1.157rem + 0.952vw, 2rem); --joy-text-title-sm: clamp(1.25rem, 1.079rem + 0.476vw, 1.5rem); --joy-text-section-lead: clamp(1.5rem, 1.329rem + 0.476vw, 1.75rem); --joy-text-section-lead-mobile: 1rem; --joy-text-lead: clamp(1rem, 0.914rem + 0.238vw, 1.125rem); --joy-text-body: clamp(0.9375rem, 0.895rem + 0.119vw, 1rem); --joy-text-label: clamp(0.75rem, 0.664rem + 0.238vw, 0.875rem); --joy-text-button: clamp(1rem, 0.829rem + 0.476vw, 1.25rem); --joy-leading-display: 1.25; --joy-leading-title: 1.25; --joy-leading-section-lead: 1.36; --joy-leading-section-lead-mobile: 1.42; --joy-leading-body: 1.5625; --joy-leading-tight: 1; --joy-tracking-tight: -0.02em; --joy-tracking-label: 0.06em; --joy-space-section-y: clamp(48px, 4.72vw, 68px); --joy-space-container-x: clamp(1.25rem, -0.223rem + 4.091vw, 3.9375rem); --joy-width-wide: 1440px; --joy-width-content: 1200px; --joy-radius-sm: 8px; --joy-radius-md: 16px; --joy-radius-pill: 999px; /* Motion — scroll-reveal entrance */ --joy-reveal-duration: 600ms; --joy-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --joy-reveal-shift: 24px; --joy-reveal-shift-x: 20px; --joy-reveal-stagger: 90ms; } .joy-align-full { position: relative; left: 50%; width: 100vw; max-width: 100vw !important; margin-right: -50vw !important; margin-left: -50vw !important; box-sizing: border-box; } .joy-container { box-sizing: border-box; width: 100%; max-width: var(--wd-container-w, var(--joy-width-content)); margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } .joy-text-reset { margin: 0; } /* --------------------------------------------------------------------------- Scroll-reveal entrance animations. - Hidden initial state applies ONLY after JS adds `joy-reveal-on` to , so content stays visible if JS is off or fails (no stuck-hidden content). - Gated by prefers-reduced-motion, so reduced-motion users never see the hidden state (content shows instantly, no animation). - Animates transform/opacity only: no layout shift (CLS-safe), GPU-composited (no main-thread cost). Used below the fold only, so LCP is untouched. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .joy-reveal-on [data-joy-reveal], .joy-reveal-on .joy-reveal-group .wd-product { opacity: 0; transform: translateY(var(--joy-reveal-shift)); transition: opacity var(--joy-reveal-duration) var(--joy-reveal-ease), transform var(--joy-reveal-duration) var(--joy-reveal-ease); } .joy-reveal-on [data-joy-reveal].is-revealed, .joy-reveal-on .joy-reveal-group.is-revealed .wd-product { opacity: 1; transform: none; } /* Stagger the product cards as the grid scrolls into view. */ .joy-reveal-on .joy-reveal-group.is-revealed .wd-product:nth-child(1) { transition-delay: 0ms; } .joy-reveal-on .joy-reveal-group.is-revealed .wd-product:nth-child(2) { transition-delay: calc(var(--joy-reveal-stagger) * 1); } .joy-reveal-on .joy-reveal-group.is-revealed .wd-product:nth-child(3) { transition-delay: calc(var(--joy-reveal-stagger) * 2); } .joy-reveal-on .joy-reveal-group.is-revealed .wd-product:nth-child(4) { transition-delay: calc(var(--joy-reveal-stagger) * 3); } .joy-reveal-on .joy-reveal-group.is-revealed .wd-product:nth-child(5) { transition-delay: calc(var(--joy-reveal-stagger) * 4); } .joy-reveal-on .joy-reveal-group.is-revealed .wd-product:nth-child(6) { transition-delay: calc(var(--joy-reveal-stagger) * 5); } .joy-reveal-on .joy-reveal-group.is-revealed .wd-product:nth-child(7) { transition-delay: calc(var(--joy-reveal-stagger) * 6); } .joy-reveal-on .joy-reveal-group.is-revealed .wd-product:nth-child(8) { transition-delay: calc(var(--joy-reveal-stagger) * 7); } } /* Directional reveal — drift in from the element's own side, used on two-column sections so each half enters toward its place. Stacked (mobile) layouts drop the horizontal drift to a plain fade-up below. */ @media (prefers-reduced-motion: no-preference) { .joy-reveal-on [data-joy-reveal="left"] { transform: translateX(calc(-1 * var(--joy-reveal-shift-x))); } .joy-reveal-on [data-joy-reveal="right"] { transform: translateX(var(--joy-reveal-shift-x)); } /* Opacity-only reveal for elements that use transform for their OWN layout (e.g. a full-bleed image with translateX(-50%)) — it never sets transform, so it can't clobber the element's positioning. */ .joy-reveal-on [data-joy-reveal-fade] { opacity: 0; transition: opacity var(--joy-reveal-duration) var(--joy-reveal-ease); } .joy-reveal-on [data-joy-reveal-fade].is-revealed { opacity: 1; } /* Above-the-fold entrance: transform ONLY (no opacity fade) so the element — and any LCP image/heading inside it — is painted immediately and just slides into place, leaving LCP unaffected. Use on first/hero sections. */ .joy-reveal-on [data-joy-reveal-slide] { transform: translateY(var(--joy-reveal-shift)); transition: transform var(--joy-reveal-duration) var(--joy-reveal-ease); } .joy-reveal-on [data-joy-reveal-slide="left"] { transform: translateX(calc(-1 * var(--joy-reveal-shift-x))); } .joy-reveal-on [data-joy-reveal-slide="right"] { transform: translateX(var(--joy-reveal-shift-x)); } .joy-reveal-on [data-joy-reveal-slide].is-revealed { transform: none; } /* Generic stagger — a group's DIRECT children cascade in (cards/steps/cols). */ .joy-reveal-on [data-joy-reveal-stagger] > * { opacity: 0; transform: translateY(var(--joy-reveal-shift)); transition: opacity var(--joy-reveal-duration) var(--joy-reveal-ease), transform var(--joy-reveal-duration) var(--joy-reveal-ease); } .joy-reveal-on [data-joy-reveal-stagger].is-revealed > * { opacity: 1; transform: none; } .joy-reveal-on [data-joy-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; } .joy-reveal-on [data-joy-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: calc(var(--joy-reveal-stagger) * 1); } .joy-reveal-on [data-joy-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: calc(var(--joy-reveal-stagger) * 2); } .joy-reveal-on [data-joy-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: calc(var(--joy-reveal-stagger) * 3); } .joy-reveal-on [data-joy-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: calc(var(--joy-reveal-stagger) * 4); } .joy-reveal-on [data-joy-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: calc(var(--joy-reveal-stagger) * 5); } .joy-reveal-on [data-joy-reveal-stagger].is-revealed > *:nth-child(n + 7) { transition-delay: calc(var(--joy-reveal-stagger) * 6); } } /* Stacked layouts: directional drift collapses to a plain fade-up. */ @media (prefers-reduced-motion: no-preference) and (max-width: 768px) { .joy-reveal-on [data-joy-reveal="left"], .joy-reveal-on [data-joy-reveal="right"], .joy-reveal-on [data-joy-reveal-slide="left"], .joy-reveal-on [data-joy-reveal-slide="right"] { transform: translateY(var(--joy-reveal-shift)); } } .joy-section-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--joy-section-header-gap, 32px); color: var(--joy-color-text); } .joy-section-header--center { align-items: center; text-align: center; } .joy-section-header__eyebrow { color: var(--joy-color-text); opacity: 0.88; } .joy-section-header__title { color: var(--joy-color-text); font-family: var(--joy-font-heading); font-size: var(--joy-section-header-title-size, var(--joy-text-title-xl)); font-weight: var(--joy-section-header-title-weight, var(--joy-weight-medium)); line-height: var( --joy-section-header-title-leading, var(--joy-leading-title) ); letter-spacing: 0; text-transform: var(--joy-section-header-title-transform, none); } .joy-slider-dots { display: flex; align-items: center; gap: 8px; pointer-events: auto; } .joy-slider-dots .joy-slider-dot { appearance: none; -webkit-appearance: none; display: block; flex: 0 0 24px; width: 24px; min-width: 0; height: 4px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--joy-radius-pill); box-shadow: none; background: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2); color: transparent; cursor: pointer; font-size: 0; line-height: 0; text-indent: -9999px; } .joy-slider-dots .joy-slider-dot.is-active { background: var(--joy-color-white); background-color: var(--joy-color-white); } .joy-slider-dots .joy-slider-dot:focus-visible { outline: 2px solid var(--joy-color-white); outline-offset: 4px; } .joy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 16px; box-sizing: border-box; border: 0; border-radius: var(--joy-radius-md); font-family: var(--joy-font-body); font-size: var(--joy-text-button); font-weight: var(--joy-weight-bold); line-height: var(--joy-leading-tight); text-decoration: none; transition: transform 180ms ease, background-color 180ms ease, color 180ms ease; } .joy-btn.joy-btn--split { justify-content: space-between; gap: 0; } .joy-btn__label, .joy-btn__icon { flex: 0 0 auto; } .joy-btn__icon { display: block; } .joy-btn:hover { text-decoration: none; transform: translateY(-1px); } .joy-btn--light { color: var(--joy-color-brown); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(5px); } .joy-btn--light:hover { color: var(--joy-color-brown); background: var(--joy-color-white); } .joy-btn--solid { color: var(--joy-color-white); background: var(--joy-color-cocoa); backdrop-filter: blur(5px); } .joy-btn--solid:hover { color: var(--joy-color-white); background: var(--joy-color-cocoa); } .joy-btn--outline { border: 1px solid var(--joy-color-cocoa); color: var(--joy-color-cocoa); background: transparent; backdrop-filter: none; } .joy-btn--outline:hover { color: var(--joy-color-cocoa); background: transparent; } .joy-btn--pill { border-radius: var(--joy-radius-pill); } .joy-eyebrow { margin: 0; color: var(--joy-color-text); font-family: var(--joy-font-body); font-size: var(--joy-text-label); font-weight: var(--joy-weight-medium); letter-spacing: var(--joy-tracking-label); text-transform: uppercase; } @media (max-width: 760px) { :root { --joy-text-title-xl: 1.5rem; } }