/* ========================================================================= Yellow Bowl Bakery — theme.css Single source of truth for all visual styling (Section 10/15.1). ========================================================================= */ /* --------------------------------------------------------------------- 1. TOKENS — Customizer-controlled CSS variables (Section 6/6.1) --------------------------------------------------------------------- */ :root { --color-background: #ffffff; --color-foreground: #173a5c; --color-blue: #084fbb; --color-blue-deep: #0a2d5c; --color-blue-mid: #597cff; --color-yellow: #ffea7b; --color-yellow-soft: #fff2af; --color-cream: #fdf6e3; --color-cream-deep: #f2e6c9; --color-ivory: #faf8f4; --color-nude: #ece1cd; --color-muted-foreground: #4b6078; --logo-height: 64px; --font-display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-label: 'Inter', system-ui, -apple-system, sans-serif; --font-script: 'Dancing Script', 'Brush Script MT', cursive; --shadow-soft: 0 4px 20px color-mix(in srgb, var(--color-blue-deep) 7%, transparent); --shadow-elevated: 0 22px 60px -18px color-mix(in srgb, var(--color-blue-deep) 24%, transparent); --shadow-gold: 0 14px 34px -12px color-mix(in srgb, var(--color-blue) 34%, transparent); --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1); --gradient-cocoa: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-mid) 100%); --gradient-berry: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-mid) 100%); --header-height: 84px; --btn-radius: 999px; --btn-height: 48px; --btn-padding: 0.95rem 1.9rem; --btn-font-size: 14px; --btn-font-weight: 400; --btn-letter-spacing: 0.06em; --btn-text-transform: uppercase; --btn-icon-padding: 0; --card-radius: 1.25rem; --section-padding: 2rem; --checkout-gap: 2rem; } /* --------------------------------------------------------------------- 2. RESET / BASE --------------------------------------------------------------------- */ * { border-color: var(--color-nude); box-sizing: border-box; } [hidden] { display: none !important; } html, body { max-width: 100%; overflow-x: clip; } body { background-color: var(--color-background); color: var(--color-foreground); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5; margin: 0; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; } input, textarea, select { font-family: inherit; } ul { margin: 0; padding: 0; list-style: none; } p { margin: 0; } p, span, a, button, li, label, input, textarea, select, small, time, figcaption, blockquote, cite { font-size: max(0.875rem, 14px); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; font-size: inherit; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.03; color: var(--color-foreground); margin: 0; } /* Global cover-image rule — MUST exclude every fill/cover image class used in this theme (Section 15.1 completeness rule). */ blockquote { margin: 0; } img:not(.cover-img):not(.product-card-img):not(.product-main-img):not(.product-thumb-img):not(.hero-poster-img):not(.hero-video):not(.cart-drawer-item-image img):not(.category-card-img):not(.site-logo-img):not(.footer-logo-img) { max-width: 100%; height: auto; } .cover-img, .product-card-img, .category-card-img, .product-main-img, .product-thumb-img, .hero-poster-img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; } ::selection { background: var(--color-yellow); color: var(--color-blue-deep); } /* --------------------------------------------------------------------- 3. LAYOUT UTILITIES --------------------------------------------------------------------- */ .container-wide { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; position: relative; } @media (min-width: 640px) { .container-wide { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container-wide { padding: 0 2.5rem; } } .theme-no-hero .site-main { padding-top: var(--header-height); } /* --------------------------------------------------------------------- 4. TYPOGRAPHY UTILITIES --------------------------------------------------------------------- */ .cs-label { font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; font-size: 14px; line-height: 1.3; } .cs-display, .font-hero { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.02; } .ybb-script { font-family: var(--font-script); font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.2; } .ybb-measure { max-width: 18ch; } .ybb-measure-lg { max-width: 26ch; } .ybb-measure-quote { max-width: 32ch; margin-left: auto; margin-right: auto; } .cs-body-dark { color: color-mix(in srgb, var(--color-cream) 82%, transparent); font-family: var(--font-body); line-height: 1.75; } .doce-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-size: 14px; color: var(--color-blue); } /* --------------------------------------------------------------------- 5. SECTION SURFACES --------------------------------------------------------------------- */ .cs-section-dark { background-color: var(--color-blue-deep); color: var(--color-cream); } .cs-section-blue { background-color: var(--color-blue); color: var(--color-cream); } .cs-section-cream { background-color: var(--color-cream); color: var(--color-foreground); } .cs-section-cream-alt { background-color: var(--color-ivory); color: var(--color-foreground); } .cs-section-blush { background-color: #ffffff; color: var(--color-foreground); } .texture-linen { position: relative; } .texture-linen::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55; background-image: radial-gradient(color-mix(in srgb, var(--color-blue) 5%, transparent) 1px, transparent 1.4px), radial-gradient(color-mix(in srgb, var(--color-blue) 3.5%, transparent) 1px, transparent 1.4px); background-size: 22px 22px, 37px 37px; background-position: 0 0, 11px 15px; } .texture-marble { position: relative; } .texture-marble::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: radial-gradient(color-mix(in srgb, var(--color-blue) 5.5%, transparent) 1px, transparent 1.5px); background-size: 26px 26px; } /* --------------------------------------------------------------------- 6. BUTTONS (Section 2.2.4 — sentence case unless source is uppercase) --------------------------------------------------------------------- */ .doce-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: var(--btn-padding); border-radius: var(--btn-radius); font-family: var(--font-display); font-weight: var(--btn-font-weight); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); font-size: var(--btn-font-size); line-height: 1; cursor: pointer; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), background-color 320ms ease, color 320ms ease, border-color 320ms ease, box-shadow 380ms ease; border: none; } .doce-btn-primary { background: var(--color-blue); color: var(--color-cream); } .doce-btn-primary:hover { transform: translateY(-3px); background: var(--color-blue-mid); box-shadow: var(--shadow-gold); } .doce-btn-yellow { background: var(--color-yellow); color: var(--color-blue-deep); } .doce-btn-yellow:hover { transform: translateY(-3px); background: var(--color-yellow-soft); box-shadow: var(--shadow-elevated); } .doce-btn-choc { background: var(--color-blue-deep); color: var(--color-cream); } .doce-btn-choc:hover { transform: translateY(-3px); background: var(--color-blue); box-shadow: var(--shadow-elevated); } .doce-btn-ghost { background: transparent; color: var(--color-cream); border: 1.5px solid color-mix(in srgb, var(--color-cream) 55%, transparent); } .doce-btn-ghost:hover { transform: translateY(-3px); background: var(--color-cream); color: var(--color-blue-deep); border-color: var(--color-cream); } /* --------------------------------------------------------------------- 7. NAV LINK UNDERLINE --------------------------------------------------------------------- */ .alta-nav-link { position: relative; display: inline-block; padding-bottom: 3px; transition: color 280ms ease; } .alta-nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--color-yellow); transform: scaleX(0); transform-origin: right center; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .alta-nav-link:hover::after, .alta-nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left center; } /* --------------------------------------------------------------------- 8. CARDS --------------------------------------------------------------------- */ .doce-card, .category-card, .theme-product-card { background: #ffffff; border-radius: var(--card-radius); border: 1px solid var(--color-nude); box-shadow: var(--shadow-soft); overflow: hidden; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms var(--transition-smooth), border-color 400ms; display: flex; flex-direction: column; height: 100%; text-align: left; } .doce-card:hover, .category-card:hover, .theme-product-card-wrap:hover .theme-product-card { transform: translateY(-8px); box-shadow: var(--shadow-elevated); border-color: color-mix(in srgb, var(--color-blue) 35%, transparent); } .ybb-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border-radius: 999px; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 14px; background: var(--color-yellow); color: var(--color-blue-deep); } .ybb-badge-blue { background: var(--color-blue); color: var(--color-cream); } .ybb-field { width: 100%; padding: 0.8rem 1rem; border-radius: 0.75rem; background: #ffffff; border: 1px solid var(--color-nude); color: var(--color-foreground); font-size: max(0.875rem, 14px); transition: box-shadow 240ms ease, border-color 240ms ease; } .ybb-field:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blue) 15%, transparent); } .ybb-field-label { display: block; margin-bottom: 0.4rem; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--color-foreground); } /* --------------------------------------------------------------------- 9. ANIMATIONS (Section 2.1 — ported verbatim from the source) --------------------------------------------------------------------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.6s var(--transition-smooth) forwards; } .animate-slide-up { animation: slideUp 0.5s var(--transition-smooth) forwards; } @keyframes ken-burns { 0% { transform: scale(1.02) translate3d(0, 0, 0); } 50% { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } 100% { transform: scale(1.02) translate3d(0, 0, 0); } } .ken-burns { animation: ken-burns 26s ease-in-out infinite; will-change: transform; } @keyframes alta-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .alta-ticker-viewport { overflow: hidden; } .ticker-bar { background-color: var(--color-blue-deep); } .alta-ticker-track { display: flex; width: max-content; animation: alta-ticker 48s linear infinite; will-change: transform; padding: 0.625rem 0; } .ticker-track-group { display: flex; align-items: center; gap: 2rem; padding-right: 2rem; flex-shrink: 0; } .ticker-track-item { display: flex; align-items: center; gap: 2rem; flex-shrink: 0; } .ticker-item { color: var(--color-cream); white-space: nowrap; } .alta-ticker-viewport:hover .alta-ticker-track { animation-play-state: paused; } .ticker-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--color-yellow); flex-shrink: 0; } @keyframes doce-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .doce-float { animation: doce-float 7s ease-in-out infinite; } @keyframes badge-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } } .badge-pulse { animation: badge-pulse 520ms cubic-bezier(0.22, 1, 0.36, 1); } [data-tilt] { transform-style: preserve-3d; transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .ybb-word { position: absolute; pointer-events: none; user-select: none; font-family: var(--font-script); font-weight: 700; line-height: 0.9; white-space: nowrap; color: color-mix(in srgb, var(--color-blue) 7%, transparent); font-size: clamp(4rem, 10vw, 10rem); } .ybb-word-light { color: color-mix(in srgb, var(--color-cream) 9%, transparent); } .ybb-kraft { position: relative; border-radius: 1.75rem; padding: 1.25rem; } .ybb-kraft::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-color: color-mix(in srgb, #b98a52 35%, transparent); background-image: repeating-linear-gradient(94deg, color-mix(in srgb, #8f6235 6%, transparent) 0 2px, transparent 2px 7px), repeating-linear-gradient(4deg, color-mix(in srgb, #8f6235 5%, transparent) 0 1px, transparent 1px 6px), radial-gradient(color-mix(in srgb, #7a4f28 7%, transparent) 1px, transparent 1.5px); background-size: auto, auto, 19px 19px; border-radius: inherit; } @media (min-width: 640px) { .ybb-kraft { padding: 2rem; } } @media (min-width: 768px) { .ybb-kraft { padding: 2.5rem; } } @keyframes ybb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ybb-marquee-track { display: flex; width: max-content; animation: ybb-marquee 34s linear infinite; will-change: transform; } .ybb-marquee-viewport { position: relative; overflow: hidden; padding: 2rem 0; } @media (min-width: 768px) { .ybb-marquee-viewport { padding: 3rem 0; } } .ybb-marquee-viewport:hover .ybb-marquee-track { animation-play-state: paused; } .ybb-ring { position: absolute; border-radius: 999px; border-style: solid; border-color: var(--color-yellow); pointer-events: none; } .parallax-bg, [data-parallax] { transform: translate3d(0, var(--parallax-y, 0px), 0); } /* Scroll reveal (Section 2.1.5 — global reveal covers ALL contexts) */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } [data-reveal-child] { opacity: 0; transform: translateY(22px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } [data-reveal-child].is-revealed { opacity: 1; transform: translateY(0); } .theme-product-card-wrap.reveal-item { opacity: 0; transform: translateY(22px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1); } .theme-product-card-wrap.reveal-item.is-visible { opacity: 1; transform: translateY(0); } /* Customizer-preview fallback — reveal content MUST be visible in the editor. */ body.is-customizer [data-reveal], body.is-customizer [data-reveal-child], body.is-customizer .reveal-item, body.is-customizer .theme-product-card-wrap.reveal-item { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-child], .reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; } .doce-card, .theme-product-card, .doce-card:hover { transition: none !important; transform: none !important; } .ken-burns, .alta-ticker-track, .ybb-marquee-track, .doce-float, .badge-pulse { animation: none !important; } [data-tilt] { transform: none !important; } } /* ========================================================================= 10. HEADER ========================================================================= */ #theme-cart-overlay { position: fixed; inset: 0; z-index: 49; background-color: color-mix(in srgb, var(--color-blue-deep) 45%, transparent); opacity: 0; pointer-events: none; transition: opacity 300ms ease; backdrop-filter: blur(2px); } body.cart-open #theme-cart-overlay { opacity: 1; pointer-events: auto; } .site-header { position: sticky; top: 0; left: 0; right: 0; z-index: 50; width: 100%; background-color: var(--color-cream); border-bottom: 1px solid transparent; backdrop-filter: blur(10px); transition: all 500ms ease; } .site-header.is-solid { background-color: color-mix(in srgb, var(--color-cream) 97%, transparent); border-bottom-color: var(--color-nude); box-shadow: var(--shadow-soft); } .site-nav { position: relative; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.75rem; height: 4.75rem; transition: height 500ms ease, background-color 500ms ease; } @media (min-width: 768px) { .site-nav { height: 6rem; } } .site-header.is-solid .site-nav { height: 4.25rem; } @media (min-width: 768px) { .site-header.is-solid .site-nav { height: 5rem; } } .site-logo-link { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; cursor: pointer; min-width: 0; } .site-logo-img { height: calc(var(--logo-height) * 0.75); width: auto !important; max-height: none; display: block; transition: transform 500ms ease, height 500ms ease; } @media (min-width: 768px) { .site-logo-img { height: var(--logo-height); } } .site-header.is-solid .site-logo-img { height: calc(var(--logo-height) * 0.6875); } @media (min-width: 768px) { .site-header.is-solid .site-logo-img { height: calc(var(--logo-height) * 0.875); } } .site-logo-link:hover .site-logo-img { transform: scale(1.05); } .site-logo-text { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-blue-deep); line-height: var(--logo-height); display: block; } .site-logo-text-extra { margin-left: 0.5rem; } .site-nav-links { display: none; align-items: center; gap: 1.5rem; flex-wrap: nowrap; min-width: 0; } @media (min-width: 1024px) { .site-nav-links { display: flex; gap: 1.5rem; } } @media (min-width: 1280px) { .site-nav-links { gap: 1.75rem; } } .theme-nav-list { display: flex; align-items: center; gap: 1.5rem; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; } @media (min-width: 1280px) { .theme-nav-list { gap: 1.75rem; } } .theme-nav-list li { flex-shrink: 0; } .theme-nav-link { color: var(--color-blue); font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .site-nav-links .theme-nav-list a, .mobile-menu-panel .theme-nav-list a { color: var(--color-blue); font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; } .theme-wholesale-link { color: var(--color-blue); font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .site-nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .header-cta-btn { display: none; } @media (min-width: 1280px) { .header-cta-btn { display: inline-flex; padding: 0.75rem 1.5rem; } } .cart-toggle-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--color-blue); transition: all 300ms ease; } .cart-toggle-btn:hover { background-color: var(--color-yellow); transform: translateY(-2px); } .theme-cart-count { position: absolute; top: 0; right: 0; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; background-color: var(--color-yellow); color: var(--color-blue-deep); font-family: var(--font-body); } .theme-cart-count:empty { display: none; } .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--color-blue); } .mobile-menu-toggle:hover { background-color: var(--color-yellow); } @media (min-width: 1024px) { .mobile-menu-toggle { display: none; } } .mobile-menu-toggle .icon-close { display: none; } .mobile-menu-toggle.is-open .icon-menu { display: none; } .mobile-menu-toggle.is-open .icon-close { display: block; } .mobile-menu-panel { display: none; padding: 1rem 0; background-color: var(--color-cream); border-top: 1px solid var(--color-nude); margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; } .mobile-menu-panel.is-open { display: block; animation: fadeIn 0.3s var(--transition-smooth); } @media (min-width: 640px) { .mobile-menu-panel { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .mobile-menu-panel { display: none !important; } } .mobile-menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; width: 100%; } .mobile-menu-panel .theme-nav-list, .mobile-menu-panel .theme-nav-list.mobile { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; list-style: none; margin: 0; padding: 0; } .mobile-menu-panel .theme-nav-list li, .mobile-menu-panel .theme-wholesale-link { width: 100%; } .theme-nav-list.mobile { flex-direction: column; align-items: flex-start; gap: 0; flex-wrap: nowrap; } .theme-nav-list.mobile li { width: 100%; } .theme-nav-link.mobile, .theme-nav-list.mobile a, .mobile-menu-panel .theme-wholesale-link { display: block; align-self: flex-start; text-align: left; padding: 0.75rem 0.25rem; color: var(--color-blue); width: 100%; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; } .mobile-cta-btn { width: 100%; margin-top: 0.75rem; } /* ========================================================================= 11. HERO ========================================================================= */ .hero-section { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background-color: var(--color-blue-deep); } .hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; background-color: var(--color-blue-deep); } .hero-video { z-index: 1; } .hero-gradient-1 { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(180deg, color-mix(in srgb, var(--color-blue-deep) 72%, transparent) 0%, color-mix(in srgb, var(--color-blue-deep) 48%, transparent) 45%, color-mix(in srgb, var(--color-blue-deep) 88%, transparent) 100%); } .hero-gradient-2 { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at 15% 65%, color-mix(in srgb, var(--color-blue) 34%, transparent) 0%, transparent 60%); } .hero-ring { display: none; width: 720px; height: 720px; border-width: 40px; right: -220px; top: -180px; opacity: 0.28; z-index: 4; } @media (min-width: 768px) { .hero-ring { display: block; } } .hero-content { position: relative; z-index: 10; padding-top: 7rem; padding-bottom: 5rem; } @media (min-width: 768px) { .hero-content { padding-bottom: 7rem; } } .hero-script { font-size: clamp(1.5rem, 3.4vw, 2.4rem); color: var(--color-yellow); } .hero-title { margin-top: 0.75rem; font-size: clamp(2.6rem, 9vw, 6rem); color: var(--color-cream); } .hero-subtitle { margin-top: 1.5rem; max-width: 36rem; font-size: 15px; } @media (min-width: 768px) { .hero-subtitle { font-size: 16px; } } .hero-cta-row { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .hero-scroll-btn { margin-top: 3rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; font-size: 14px; color: var(--color-yellow); } /* ========================================================================= 12. CATEGORIES ========================================================================= */ .categories-section { padding: 5rem 0; } @media (min-width: 768px) { .categories-section { padding: 7rem 0; } } .categories-heading { margin-top: 1rem; color: var(--color-blue-deep); font-size: clamp(2rem, 5vw, 3.4rem); } .categories-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; } @media (min-width: 640px) { .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .category-card { cursor: pointer; padding: 0; } .category-card__image-wrapper { position: relative; aspect-ratio: 4 / 3; overflow: hidden; width: 100%; } .category-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms ease; } .category-card:hover .category-card-img { transform: scale(1.08); } .category-card__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--color-blue-deep) 72%, transparent) 100%); } .category-card__title { position: absolute; left: 1.25rem; bottom: 1rem; font-family: var(--font-display); font-size: 19px; color: var(--color-cream); text-transform: uppercase; } .category-card__footer { padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex: 1; } .category-card__copy { font-size: 14px; color: var(--color-muted-foreground); min-width: 0; } .category-card__arrow { flex-shrink: 0; color: var(--color-blue); transition: transform 300ms ease; } .category-card:hover .category-card__arrow { transform: translateX(4px); } /* ========================================================================= 13. ABOUT ========================================================================= */ .about-section { padding: 5rem 0; } @media (min-width: 768px) { .about-section { padding: 7rem 0; } } .about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .about-image-col { position: relative; } @media (min-width: 1024px) { .about-image-col { grid-column: span 6; } } .about-main-img { position: relative; width: 100%; border-radius: 1.5rem; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; } .about-bowl-img { display: none; position: absolute; bottom: -2rem; right: -1rem; width: 9rem; border-radius: 1.25rem; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border: 4px solid var(--color-cream); } @media (min-width: 640px) { .about-bowl-img { display: block; } } @media (min-width: 768px) { .about-bowl-img { width: 11rem; } } .about-copy-col { min-width: 0; } @media (min-width: 1024px) { .about-copy-col { grid-column: span 6; } } .about-heading { margin-top: 1rem; color: var(--color-blue-deep); font-size: clamp(2rem, 5vw, 3.4rem); } .about-body { margin-top: 1rem; font-size: 15px; line-height: 1.7; color: var(--color-muted-foreground); } .about-script { margin-top: 1.75rem; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--color-blue); } /* ========================================================================= 14. WHY YELLOW BOWL ========================================================================= */ .why-section { position: relative; padding: 5rem 0; overflow: hidden; } @media (min-width: 768px) { .why-section { padding: 7rem 0; } } .why-bg-video { position: absolute; inset: 0; opacity: 0.3; } .why-bg-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-blue-deep) 86%, transparent), color-mix(in srgb, var(--color-blue-deep) 94%, transparent)); } .why-content { position: relative; } .why-eyebrow { color: var(--color-yellow); } .why-heading { margin-top: 1rem; color: var(--color-cream); font-size: clamp(2rem, 5vw, 3.4rem); } .why-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 2rem 3rem; } @media (min-width: 768px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .why-point { display: flex; gap: 1.25rem; border-radius: 1.25rem; padding: 1.25rem; margin: -0.25rem; transition: all 500ms ease; } .why-point:hover { transform: translateY(-6px); background-color: color-mix(in srgb, white 6%, transparent); } .why-point__number { font-family: var(--font-display); font-size: 22px; flex-shrink: 0; color: var(--color-yellow); transition: transform 500ms ease; } .why-point:hover .why-point__number { transform: scale(1.1); } .why-point__title { font-family: var(--font-display); font-size: 18px; color: var(--color-cream); text-transform: uppercase; } .why-point__body { margin-top: 0.5rem; font-size: 15px; } /* ========================================================================= 15. WEEKLY MENU / STORE (shared section-heading-row + product grid) ========================================================================= */ .menu-section, .store-section { padding: 5rem 0; } @media (min-width: 768px) { .menu-section, .store-section { padding: 7rem 0; } } .section-heading-row { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 768px) { .section-heading-row { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .menu-heading, .store-heading { margin-top: 1rem; color: var(--color-blue-deep); font-size: clamp(2rem, 5vw, 3.4rem); } .section-heading-note { max-width: 24rem; font-size: 14px; color: var(--color-muted-foreground); } .store-note { display: inline-flex; align-items: flex-start; gap: 0.5rem; } .store-note svg { margin-top: 0.15rem; flex-shrink: 0; } .theme-product-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; } @media (min-width: 640px) { .theme-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .theme-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .theme-product-card-wrap { display: flex; height: 100%; width: 100%; min-width: 0; } .theme-product-card-wrap .theme-product-card { width: 100%; flex: 1 1 auto; min-width: 0; } /* ========================================================================= 16. FOCACCIA SPOTLIGHT ========================================================================= */ .focaccia-section { position: relative; padding: 5rem 0; overflow: hidden; } @media (min-width: 768px) { .focaccia-section { padding: 7rem 0; } } .focaccia-watermark { display: none; left: 2%; bottom: 4%; } @media (min-width: 768px) { .focaccia-watermark { display: block; } } .focaccia-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .focaccia-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .focaccia-copy-col { min-width: 0; } @media (min-width: 1024px) { .focaccia-copy-col { grid-column: span 5; } } .focaccia-eyebrow { color: var(--color-yellow); } .focaccia-heading { margin-top: 1rem; color: var(--color-cream); font-size: clamp(2rem, 5vw, 3.4rem); } .focaccia-body { margin-top: 1.5rem; font-size: 15px; } .focaccia-copy-col .doce-btn { margin-top: 2rem; } .focaccia-carousel-col { min-width: 0; } @media (min-width: 1024px) { .focaccia-carousel-col { grid-column: span 7; } } .focaccia-carousel { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 1.5rem; overflow: hidden; } .focaccia-slide { opacity: 0; transition: opacity 1200ms ease-in-out; } .focaccia-slide.is-active { opacity: 1; } .focaccia-carousel-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 2; } .focaccia-dot { height: 6px; width: 10px; border-radius: 999px; background: color-mix(in srgb, white 50%, transparent); transition: all 500ms ease; } .focaccia-dot.is-active { width: 26px; background: var(--color-yellow); } /* ========================================================================= 17. SEASONAL ========================================================================= */ .seasonal-section { position: relative; padding: 5rem 0; overflow: hidden; } @media (min-width: 768px) { .seasonal-section { padding: 7rem 0; } } .seasonal-watermark { display: none; left: 3%; top: 6%; } @media (min-width: 768px) { .seasonal-watermark { display: block; } } .seasonal-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .seasonal-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .seasonal-copy-col { order: 2; min-width: 0; } @media (min-width: 1024px) { .seasonal-copy-col { grid-column: span 6; order: 1; } } .seasonal-heading { margin-top: 1rem; color: var(--color-blue-deep); font-size: clamp(2rem, 5vw, 3.4rem); } .seasonal-body { margin-top: 1.5rem; font-size: 15px; line-height: 1.7; color: var(--color-muted-foreground); } .seasonal-copy-col .doce-btn { margin-top: 2rem; } .seasonal-image-col { order: 1; min-width: 0; } @media (min-width: 1024px) { .seasonal-image-col { grid-column: span 6; order: 2; } } .seasonal-img { position: relative; width: 100%; border-radius: 1.5rem; aspect-ratio: 5 / 4; object-fit: cover; object-position: center; } /* ========================================================================= 18. MARQUEE RIBBON ========================================================================= */ .marquee-section { background-color: var(--color-yellow); } .marquee-group { display: flex; flex-shrink: 0; align-items: center; } .marquee-word-wrap { display: flex; align-items: center; } .marquee-word { font-size: clamp(2.2rem, 7vw, 5.5rem); line-height: 1; color: var(--color-blue-deep); } .marquee-dot { margin: 0 1.5rem; display: inline-block; border-radius: 999px; flex-shrink: 0; width: 14px; height: 14px; background-color: var(--color-blue); } @media (min-width: 768px) { .marquee-dot { margin: 0 2.5rem; } } /* ========================================================================= 19. PHILOSOPHY ========================================================================= */ .philosophy-section { position: relative; padding: 6rem 0; overflow: hidden; background-color: var(--color-blue-deep); } @media (min-width: 768px) { .philosophy-section { padding: 8rem 0; } } .philosophy-bg-img { opacity: 0.35; } .philosophy-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-blue-deep) 78%, transparent), color-mix(in srgb, var(--color-blue-deep) 90%, transparent)); } .philosophy-content { position: relative; text-align: center; } .philosophy-script { font-size: clamp(1.6rem, 4vw, 2.8rem); color: var(--color-yellow); } .philosophy-heading { margin-top: 1.25rem; margin-left: auto; margin-right: auto; color: var(--color-cream); font-size: clamp(1.8rem, 4.6vw, 3.2rem); } .philosophy-body { margin-top: 1.5rem; max-width: 42rem; margin-left: auto; margin-right: auto; font-size: 15px; } /* ========================================================================= 20. TESTIMONIALS ========================================================================= */ .testimonials-section { position: relative; padding: 5rem 0; overflow: hidden; } @media (min-width: 768px) { .testimonials-section { padding: 7rem 0; } } .testimonials-ring { display: none; width: 460px; height: 460px; border-width: 28px; left: -170px; top: -140px; opacity: 0.45; } @media (min-width: 768px) { .testimonials-ring { display: block; } } .testimonials-glow { position: absolute; inset-inline: 0; bottom: 0; height: 50%; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-yellow) 16%, transparent)); } .testimonials-heading { margin-top: 1rem; color: var(--color-blue-deep); font-size: clamp(2rem, 5vw, 3.4rem); } .testimonials-kraft { position: relative; margin-top: 3rem; } .testimonials-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: calc(1.5rem + 2rem); } } .testimonial-card { position: relative; margin: 0; width: 100%; min-width: 0; box-sizing: border-box; border-radius: 1.25rem; padding: 1.75rem 1.75rem 1.75rem; padding-top: 3rem; height: 100%; display: flex; flex-direction: column; transition: all 500ms ease; background-color: var(--color-cream); border: 1px solid var(--color-nude); } .testimonial-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--color-blue-deep) 45%, transparent); } .testimonial-card.is-middle { background-color: var(--color-blue-deep); border-color: var(--color-blue); } @media (min-width: 768px) { .testimonial-card.is-middle { margin-top: 2rem; } } .testimonial-quote-mark { position: absolute; left: 1.5rem; top: 0.5rem; font-family: var(--font-display); line-height: 1; user-select: none; font-size: 78px; color: color-mix(in srgb, var(--color-yellow) 75%, transparent); } .testimonial-card.is-middle .testimonial-quote-mark { color: color-mix(in srgb, var(--color-yellow) 50%, transparent); } .testimonial-quote { position: relative; font-size: 16px; line-height: 1.7; color: var(--color-blue-deep); } .testimonial-card.is-middle .testimonial-quote { color: var(--color-cream); } .testimonial-role { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-nude); color: var(--color-blue); } .testimonial-card.is-middle .testimonial-role { color: var(--color-yellow); border-top-color: color-mix(in srgb, var(--color-yellow) 28%, transparent); } /* ========================================================================= 21. INSTAGRAM ========================================================================= */ .instagram-section { padding: 5rem 0; } @media (min-width: 768px) { .instagram-section { padding: 7rem 0; } } .instagram-heading-row { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .instagram-heading-row { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .instagram-heading { margin-top: 1rem; color: var(--color-blue-deep); font-size: clamp(1.8rem, 4.4vw, 3rem); } .instagram-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 768px) { .instagram-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } } .instagram-photo { position: relative; display: block; overflow: hidden; border-radius: 1rem; aspect-ratio: 1 / 1; } .instagram-photo-img { transition: transform 700ms ease; } .instagram-photo:hover .instagram-photo-img { transform: scale(1.1); } /* ========================================================================= 22. FAQ ========================================================================= */ .faq-section { padding: 5rem 0; } @media (min-width: 768px) { .faq-section { padding: 7rem 0; } } .faq-layout { display: grid; gap: 2.5rem; align-items: stretch; } @media (min-width: 1024px) { .faq-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 3.5rem; } } .faq-copy-col { max-width: 48rem; } .faq-heading { margin-top: 1rem; color: var(--color-blue-deep); font-size: clamp(2rem, 5vw, 3.4rem); } .faq-list { margin-top: 2.5rem; } .faq-item { border-top: 1px solid var(--color-nude); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 0; text-align: left; } .faq-question-text { font-family: var(--font-display); font-size: 16px; color: var(--color-blue-deep); text-transform: uppercase; } @media (min-width: 768px) { .faq-question-text { font-size: 17px; } } .faq-icon-circle { width: 2.25rem; height: 2.25rem; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background-color: var(--color-yellow); color: var(--color-blue-deep); transition: transform 300ms ease; } .faq-icon-circle .icon-minus { display: none; } .faq-question[aria-expanded="true"] .icon-plus { display: none; } .faq-question[aria-expanded="true"] .icon-minus { display: block; } .faq-answer-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; transition: all 400ms ease-out; } .faq-answer-wrap.is-open { grid-template-rows: 1fr; opacity: 1; } .faq-answer-inner { overflow: hidden; } .faq-answer { padding-bottom: 1.5rem; padding-right: 3rem; font-size: 15px; line-height: 1.7; color: var(--color-muted-foreground); } .faq-image-col { position: relative; display: none; border-radius: 2px; overflow: hidden; } @media (min-width: 1024px) { .faq-image-col { display: block; } } .faq-img { position: relative; } /* ========================================================================= 23. SPECIAL ORDERS ========================================================================= */ .special-section { position: relative; padding: 5rem 0; overflow: hidden; } @media (min-width: 768px) { .special-section { padding: 7rem 0; } } .special-bg-img { opacity: 0.18; } .special-bg-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-cream) 86%, transparent), color-mix(in srgb, var(--color-cream) 94%, transparent)); } .special-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .special-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .special-copy-col { min-width: 0; } @media (min-width: 1024px) { .special-copy-col { grid-column: span 5; } } .special-heading { margin-top: 1rem; color: var(--color-blue-deep); font-size: clamp(2rem, 5vw, 3.4rem); } .special-body { margin-top: 1.5rem; font-size: 15px; line-height: 1.7; color: var(--color-muted-foreground); } .special-form-col { min-width: 0; } @media (min-width: 1024px) { .special-form-col { grid-column: span 7; } } .special-form, .special-success { border-radius: 1.25rem; padding: 1.5rem; background-color: var(--color-ivory); border: 1px solid var(--color-nude); } @media (min-width: 768px) { .special-form, .special-success { padding: 2.25rem; } } .special-form { display: flex; flex-direction: column; gap: 1.25rem; } .special-success { text-align: center; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .special-success-icon { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background-color: var(--color-yellow); color: var(--color-blue-deep); } .special-success-title { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--color-blue-deep); text-transform: uppercase; } .special-success-body { margin-top: 0.5rem; font-size: 15px; max-width: 24rem; color: var(--color-muted-foreground); } .special-submit-btn { width: 100%; } @media (min-width: 640px) { .special-submit-btn { width: auto; } } .form-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================= 24. CONTACT ========================================================================= */ .contact-section { padding: 5rem 0; } @media (min-width: 768px) { .contact-section { padding: 7rem 0; } } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .contact-image-col { min-width: 0; } @media (min-width: 1024px) { .contact-image-col { grid-column: span 6; } } .contact-img { position: relative; width: 100%; border-radius: 1.5rem; aspect-ratio: 5 / 4; object-fit: cover; object-position: center; } .contact-copy-col { min-width: 0; } @media (min-width: 1024px) { .contact-copy-col { grid-column: span 6; } } .contact-eyebrow { color: var(--color-yellow); } .contact-heading { margin-top: 1rem; color: var(--color-cream); font-size: clamp(2rem, 5vw, 3.4rem); } .contact-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; font-size: 15px; } .contact-link, .contact-address-item, .contact-hours-item { display: inline-flex; align-items: flex-start; gap: 0.75rem; color: var(--color-cream); } .contact-link { align-items: center; } .contact-link-email { word-break: break-all; } .contact-address-item svg, .contact-hours-item svg { flex-shrink: 0; margin-top: 0.2rem; } .contact-cta-row { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ========================================================================= 25. FOOTER ========================================================================= */ .site-footer { position: relative; overflow: hidden; background-color: var(--color-cream); color: var(--color-blue-deep); border-top: 1px solid var(--color-nude); } .footer-ring { display: none; width: 420px; height: 420px; border-width: 26px; right: -140px; bottom: -160px; opacity: 0.5; } @media (min-width: 768px) { .footer-ring { display: block; } } .footer-inner { position: relative; padding-top: 4rem; padding-bottom: 2rem; } @media (min-width: 1024px) { .footer-inner { padding-top: 5rem; padding-bottom: 2.5rem; } } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.5rem; } } .footer-col-brand { min-width: 0; } @media (min-width: 768px) { .footer-col-brand { grid-column: span 5; } } .footer-logo-img { height: calc(var(--logo-height) * 1.25); } @media (min-width: 768px) { .footer-logo-img { height: calc(var(--logo-height) * 1.5); } } .footer-tagline { margin-top: 1.5rem; max-width: 26rem; font-size: 15px; line-height: 1.7; color: var(--color-muted-foreground); } .footer-ig-link { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-blue); font-size: 14px; } .footer-col-explore { min-width: 0; } @media (min-width: 768px) { .footer-col-explore { grid-column: span 3; } } .footer-col-contact { min-width: 0; } @media (min-width: 768px) { .footer-col-contact { grid-column: span 4; } } .footer-col-title { margin-bottom: 1.25rem; color: var(--color-blue); } .footer-nav-list { display: flex; flex-direction: column; gap: 0.75rem; } .footer-nav-list a, .footer-nav-link { font-family: var(--font-body); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; white-space: normal; text-align: left; display: inline-block; color: var(--color-muted-foreground); } .footer-nav-list a:hover, .footer-nav-link:hover { color: var(--color-blue); } .footer-contact-list { display: flex; flex-direction: column; gap: 0.75rem; font-size: 14px; } .footer-contact-list li { display: inline-flex; align-items: flex-start; gap: 0.5rem; color: var(--color-muted-foreground); } .footer-contact-list a { display: inline-flex; align-items: center; gap: 0.5rem; } .footer-tel-link, .footer-mail-link { align-items: center; } .footer-mail-link { word-break: break-all; } .footer-address svg { margin-top: 0.15rem; flex-shrink: 0; } .footer-cta-btn { margin-top: 1.5rem; padding: 0.75rem 1.5rem; } .footer-bottom { margin-top: 3.5rem; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid var(--color-nude); } @media (min-width: 640px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } } .footer-copy, .footer-credit { font-size: 14px; color: var(--color-muted-foreground); } .footer-credit a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-foreground) 30%, transparent); text-underline-offset: 4px; transition: color 200ms ease; } .footer-credit a:hover { color: var(--color-blue); } .back-to-top-btn { position: fixed; bottom: 2rem; right: 2rem; z-index: 40; width: 2.75rem; height: 2.75rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-gold); background: var(--gradient-berry); color: var(--color-cream); opacity: 0; pointer-events: none; transition: all 300ms ease; } @media (min-width: 768px) { .back-to-top-btn { width: 3rem; height: 3rem; } } .back-to-top-btn.is-visible { opacity: 1; pointer-events: auto; } .back-to-top-btn:hover { transform: translateY(-4px) scale(1.1); } /* ========================================================================= 26. PRODUCT CARD (Section 31.3 Pattern A — hit-area overlay) ========================================================================= */ .theme-product-card { position: relative; cursor: pointer; } .theme-product-card > .theme-card-link { position: absolute; inset: 0; z-index: 1; pointer-events: auto; } .theme-product-card *:not(.theme-card-link) { pointer-events: none; } .theme-product-card__quick-add, .theme-product-card .add_to_cart_button, .theme-product-card button.add_to_cart_button, .theme-product-card .quick-add-btn, .theme-product-card .quick-add-link, .theme-product-card__view { pointer-events: auto; } .theme-product-card__image-wrapper { position: relative; aspect-ratio: 4 / 5; width: 100%; overflow: hidden; background-color: var(--color-cream); } .theme-product-card__image-fade { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--color-blue-deep) 60%, transparent) 100%); } .theme-product-card:hover .theme-product-card__image-fade { opacity: 1; } .theme-product-card:hover .product-card-img { transform: scale(1.08); } .product-card-img { transition: transform 1100ms ease-out; } .theme-product-card__badges { position: absolute; top: 0.875rem; left: 0.875rem; z-index: 3; display: flex; flex-wrap: wrap; gap: 0.5rem; pointer-events: none; } .theme-product-card__quick-add { position: absolute; bottom: 0.875rem; right: 0.875rem; z-index: 4; opacity: 0; transform: translateY(0.5rem); transition: all 300ms ease; pointer-events: auto; } .theme-product-card:hover .theme-product-card__quick-add { opacity: 1; transform: translateY(0); } .quick-add-btn { width: 3rem; height: 3rem; min-width: 3rem; max-width: 3rem; min-height: 3rem; max-height: 3rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-yellow) !important; color: var(--color-blue-deep) !important; box-shadow: var(--shadow-gold); transition: transform 300ms ease; padding: 0 !important; border: none !important; font-size: 0 !important; line-height: 0 !important; text-decoration: none !important; letter-spacing: 0 !important; text-transform: none !important; flex: none !important; cursor: pointer; } .quick-add-btn:hover { transform: scale(1.1); background-color: var(--color-yellow) !important; color: var(--color-blue-deep) !important; } .quick-add-btn .icon-plus, .quick-add-btn .icon-check { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .quick-add-btn .icon-check { display: none; } .quick-add-btn.added .icon-plus { display: none; } .quick-add-btn.added .icon-check { display: block; } .theme-product-card__info { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; } .theme-product-card__title { font-family: var(--font-display); font-size: 16px; line-height: 1.4; min-height: 2.6rem; color: var(--color-blue-deep); text-transform: uppercase; } @media (min-width: 768px) { .theme-product-card__title { font-size: 17px; } } .theme-product-card__desc { margin-top: 0.5rem; font-size: 14px; color: var(--color-muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6rem; } .theme-product-card__footer { margin-top: 1rem; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-top: 1px solid var(--color-nude); min-width: 0; } .theme-product-card__price { font-family: var(--font-display); font-size: 18px; color: var(--color-blue); font-variant-numeric: tabular-nums; min-width: 0; } .theme-product-card__price .price { display: block; margin: 0; font-size: inherit; color: inherit; } .theme-product-card__price .woocommerce-Price-amount { font-family: var(--font-display); } .theme-product-card__price-note { color: var(--color-muted-foreground); } .theme-product-card__view { font-size: 14px; color: var(--color-blue-mid); flex-shrink: 0; } .theme-product-card__view.is-muted { color: var(--color-muted-foreground); } /* ========================================================================= 27. SINGLE PRODUCT (Section 11.13 responsive layout) ========================================================================= */ .single-product-main { padding-top: 2rem; padding-bottom: 6rem; } .single-product-breadcrumb { padding: 1.5rem 0; font-family: var(--font-label); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted-foreground); } .single-product-breadcrumb a:hover { color: var(--color-blue); } .crumb-sep { margin: 0 0.5rem; opacity: 0.5; } .crumb-current { color: var(--color-foreground); } .single-product .theme-product-layout, body.single-product div.product.theme-product-layout, .woocommerce.single-product div.product.theme-product-layout, .woocommerce div.product.theme-product-layout, .theme-product-layout { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-bottom: 1rem; min-width: 0; width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; } @media (min-width: 1024px) { .single-product .theme-product-layout, body.single-product div.product.theme-product-layout, .woocommerce.single-product div.product.theme-product-layout, .woocommerce div.product.theme-product-layout, .theme-product-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; align-items: start; } } .theme-product-gallery { min-width: 0; max-width: 100%; width: 100%; overflow: hidden; isolation: isolate; } @media (min-width: 1024px) { .theme-product-gallery { grid-column: 1 / span 7; } } .product-main-img-btn { display: block; width: 100%; position: relative; aspect-ratio: 4 / 5; overflow: hidden; cursor: zoom-in; border-radius: 2rem; box-shadow: var(--shadow-elevated); background-color: var(--color-nude); padding: 0; border: 0; } .product-main-img-btn .product-main-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .theme-product-thumbnails { margin-top: 1rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; flex-wrap: wrap; max-width: 100%; } .product-thumb-btn { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0.75rem; background-color: var(--color-nude); transition: transform 300ms ease; box-shadow: 0 0 0 1px var(--color-nude); padding: 0; border: 0; width: 100%; } .product-thumb-btn .product-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; pointer-events: none; } .product-thumb-btn:hover { transform: translateY(-2px); } .product-thumb-btn.is-active { box-shadow: 0 0 0 2px var(--color-blue); } .theme-product-info { min-width: 0; max-width: 100%; width: 100%; } @media (min-width: 1024px) { .theme-product-info { grid-column: 8 / span 5; position: sticky; top: 7rem; } } .product-title { font-size: 1.9rem; line-height: 1.05; margin-top: 1.25rem; margin-bottom: 1.25rem; color: var(--color-foreground); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; } @media (min-width: 768px) { .product-title { font-size: 2.5rem; } } @media (min-width: 1024px) { .product-title { font-size: 2.9rem; } } .single-product-price-row { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .single-product-price { font-family: var(--font-display); font-size: 2.25rem; color: var(--color-blue); } .single-product-price .woocommerce-Price-amount { font-family: var(--font-display); } .single-product-price-note { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted-foreground); } .stock.out-of-stock { display: inline-flex; margin-bottom: 1rem; padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: var(--color-blue); color: var(--color-cream); } .woocommerce-product-details__description { margin-bottom: 1.5rem; color: color-mix(in srgb, var(--color-foreground) 65%, transparent); line-height: 1.7; font-size: 15px; overflow-wrap: break-word; word-break: break-word; } .woocommerce-product-details__description p { margin-bottom: 1rem; } .theme-add-to-cart-area { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; } .theme-quantity-block { margin-bottom: 0.25rem; } .theme-quantity-label { margin-bottom: 0.75rem; color: var(--color-muted-foreground); } .theme-add-to-cart-buttons { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 640px) { .theme-add-to-cart-buttons { flex-direction: row; } } .theme-add-to-cart-buttons .single_add_to_cart_button.button, .theme-add-to-cart-buttons .doce-btn-choc { flex: 1 1 auto; min-width: 0; } .theme-quantity-wrapper { display: inline-flex; align-items: center; border-radius: 999px; background-color: var(--color-cream); border: 1px solid var(--color-nude); overflow: hidden; margin-bottom: 0.25rem; } .theme-qty-minus, .theme-qty-plus { padding: 0.75rem 1rem; transition: background-color 200ms ease; } .theme-qty-minus:hover, .theme-qty-plus:hover { background-color: color-mix(in srgb, var(--color-yellow) 40%, transparent); } .theme-qty-input { width: 3rem; padding: 0.75rem 0; text-align: center; background: transparent; border: none; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .theme-qty-input::-webkit-outer-spin-button, .theme-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .single_add_to_cart_button.button, .add_to_cart_button.button, a.single_add_to_cart_button, a.add_to_cart_button { background-color: var(--color-blue) !important; color: var(--color-cream) !important; border: none !important; border-radius: var(--btn-radius) !important; min-height: var(--btn-height) !important; padding: var(--btn-padding) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-display) !important; font-size: var(--btn-font-size) !important; font-weight: var(--btn-font-weight) !important; letter-spacing: var(--btn-letter-spacing) !important; text-transform: var(--btn-text-transform) !important; cursor: pointer !important; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), background-color 320ms ease, box-shadow 380ms ease, opacity 200ms ease !important; flex: 1 1 auto; min-width: 160px; } .single_add_to_cart_button.button:hover:not(:disabled):not(.disabled), .add_to_cart_button.button:hover:not(:disabled):not(.disabled) { transform: translateY(-3px) !important; background-color: var(--color-blue-mid) !important; color: var(--color-cream) !important; box-shadow: var(--shadow-gold) !important; opacity: 1 !important; } .single_add_to_cart_button.button:disabled, .single_add_to_cart_button.button.disabled, .add_to_cart_button.button:disabled, .add_to_cart_button.button.disabled { cursor: not-allowed !important; opacity: 0.4 !important; pointer-events: none !important; } .single_add_to_cart_button.button:disabled:hover, .single_add_to_cart_button.button.disabled:hover, .add_to_cart_button.button:disabled:hover, .add_to_cart_button.button.disabled:hover { opacity: 0.4 !important; background-color: var(--color-blue) !important; } .single-product .single_add_to_cart_button.loading::after, .ajax_add_to_cart.loading::after { display: none !important; } .ajax_add_to_cart.theme-btn-loading { opacity: 0.6 !important; pointer-events: none !important; cursor: wait !important; } /* Card compact quick-add button — overrides the global rules above. */ .theme-product-card .add_to_cart_button.ajax_add_to_cart, .theme-product-card .quick-add-btn, .theme-product-card .quick-add-link { min-height: 3rem !important; max-height: 3rem !important; padding: 0 !important; border-radius: 999px !important; width: 3rem !important; height: 3rem !important; flex: none !important; background-color: var(--color-yellow) !important; color: var(--color-blue-deep) !important; box-shadow: var(--shadow-gold) !important; } /* Hide "View cart" injected by WooCommerce after AJAX add-to-cart. */ .woocommerce-page a.added_to_cart.wc-forward, .single-product a.added_to_cart.wc-forward, body a.added_to_cart.wc-forward { display: none !important; } /* Variable product attribute pills */ /* Neutralize legacy WooCommerce float layout on single product pages. */ .woocommerce div.product, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary { float: none !important; width: 100% !important; max-width: 100% !important; } .woocommerce div.product::before, .woocommerce div.product::after { display: none !important; content: none !important; } .variations_form.cart { width: 100%; margin-bottom: 0; } .variations_form .variations.theme-variations, .theme-variations { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.5rem; width: 100%; border: 0; margin-left: 0; padding: 0; } .woocommerce div.product .woocommerce-tabs { display: none; } .theme-variation-row { position: relative; } .theme-variation-label { margin-bottom: 0.75rem; color: var(--color-muted-foreground); } .theme-variation-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .theme-variation-pill { padding: 0.55rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--color-nude); background: #ffffff; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--color-foreground); transition: border-color 280ms ease, background-color 280ms ease, color 280ms ease, transform 280ms ease; } .theme-variation-pill:hover { border-color: var(--color-blue); color: var(--color-blue); transform: translateY(-1px); } .theme-variation-pill.is-selected { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-cream); } .theme-variation-pill.is-unavailable, .theme-variation-pill:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .theme-variation-select-wrap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .theme-variable-form .reset_variations { display: none !important; } .theme-variable-form .single_variation_wrap { display: block !important; } .theme-variable-form .woocommerce-variation-add-to-cart, .theme-variable-form .variations_button { display: block !important; visibility: visible !important; } .theme-variable-form .woocommerce-variation.single_variation { margin-bottom: 0.5rem; } .theme-variable-form .woocommerce-variation-price { display: none; } .theme-variable-form .woocommerce-variation-availability { font-size: 14px; margin-top: 0.25rem; } .single-product-shipping-note { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 14px; border-radius: 1rem; padding: 0.75rem 1rem; background-color: var(--color-cream-deep); color: var(--color-blue-mid); margin-bottom: 1.25rem; } .single-product-coming-soon-note { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 1.5rem; } .single-product-details-toggle-wrap { margin-top: 2.5rem; border-top: 1px solid var(--color-nude); } .single-product-details-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; text-align: left; } .single-product-details-toggle:hover .cs-label { color: var(--color-blue); } .toggle-chevron { transition: transform 300ms ease; } .single-product-details-toggle[aria-expanded="true"] .toggle-chevron { transform: rotate(180deg); } .single-product-details-panel { max-height: 0; overflow: hidden; opacity: 0; transition: all 350ms ease; overflow-wrap: break-word; word-break: break-word; } .single-product-details-panel.is-open { max-height: 1200px; opacity: 1; padding-bottom: 1.5rem; } .single-product-details-panel ul { display: flex; flex-direction: column; gap: 0.75rem; } .single-product-details-panel li { position: relative; padding-left: 1.25rem; font-size: 15px; color: var(--color-muted-foreground); } .single-product-details-panel li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 6px; height: 6px; border-radius: 999px; background-color: var(--color-blue); } .posted_in { overflow-wrap: break-word; word-break: break-word; } /* Related products */ .related-products-section { padding: 5rem 0; border-top: 1px solid var(--color-nude); } .related-products-heading { margin-bottom: 2.5rem; } .related-products-title { margin-top: 1rem; font-size: 1.8rem; color: var(--color-foreground); } @media (min-width: 768px) { .related-products-title { font-size: 2.75rem; } } /* ========================================================================= 28. SIDE CART DRAWER (Section 12) ========================================================================= */ #theme-cart-drawer { position: fixed; right: -100%; top: 0; height: 100%; width: 100%; max-width: 28rem; z-index: 51; box-shadow: var(--shadow-elevated); display: flex; flex-direction: column; background-color: var(--color-cream); transition: right 420ms cubic-bezier(0.22, 1, 0.36, 1); } body.cart-open #theme-cart-drawer { right: 0; } #theme-cart-drawer.is-updating { opacity: 0.6; pointer-events: none; } .cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--color-nude); } .cart-drawer-title { font-size: 1.5rem; color: var(--color-foreground); } .cart-drawer-close { width: 2.5rem; height: 2.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: all 300ms ease; } .cart-drawer-close:hover { background-color: color-mix(in srgb, black 5%, transparent); transform: rotate(90deg); } .cart-drawer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; } .cart-drawer-empty-icon { width: 5rem; height: 5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; background-color: #ffffff; color: var(--color-blue); } .cart-drawer-empty-text { color: var(--color-muted-foreground); margin-bottom: 1.5rem; } .cart-drawer-items { flex: 1; overflow: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .cart-drawer-item { display: flex; gap: 1rem; padding: 0.75rem; border-radius: 1rem; transition: background-color 200ms ease; } .cart-drawer-item:hover { background-color: var(--color-cream-deep); } .cart-drawer-item-image { width: 5rem; height: 6rem; overflow: hidden; flex-shrink: 0; border-radius: 0.75rem; background-color: var(--color-nude); position: relative; } .cart-drawer-item-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 500ms ease; } .cart-drawer-item-image:hover img { transform: scale(1.05); } .cart-drawer-item-body { flex: 1; min-width: 0; } .cart-drawer-item-name { font-size: 15px; font-family: var(--font-display); line-height: 1.3; display: block; transition: color 200ms ease; color: var(--color-foreground); text-transform: uppercase; } .cart-drawer-item-name:hover { color: var(--color-blue); } .cart-drawer-item-price { font-size: 14px; font-weight: 600; margin-top: 0.25rem; color: var(--color-blue); } .cart-drawer-item-variation { font-size: 13px; color: var(--color-muted-foreground); margin-top: 0.25rem; } .cart-drawer-item-controls { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; } .cart-qty-btn { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-nude); transition: background-color 200ms ease; } .cart-qty-btn:hover { background-color: var(--color-cream-deep); } .cart-qty-value { font-size: 14px; width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; } .cart-remove-btn { margin-left: auto; font-size: 14px; color: var(--color-muted-foreground); transition: color 200ms ease; } .cart-remove-btn:hover { color: var(--color-blue); } .cart-drawer-footer { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid var(--color-nude); } .cart-drawer-subtotal-row { display: flex; justify-content: space-between; align-items: baseline; } .cart-drawer-subtotal-label { color: var(--color-foreground); } .cart-drawer-subtotal-value { font-family: var(--font-display); font-size: 1.75rem; color: var(--color-blue); } .cart-drawer-checkout-btn { width: 100%; } .cart-drawer-empty-btn { width: 100%; text-align: center; padding: 0.6rem 0; font-size: 14px; color: var(--color-muted-foreground); transition: color 200ms ease; } .cart-drawer-empty-btn:hover { color: var(--color-blue); } /* ========================================================================= 29. CONTACT MODAL ========================================================================= */ .theme-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 1rem; } .theme-modal.is-open { display: flex; } .theme-modal-overlay { position: absolute; inset: 0; background-color: color-mix(in srgb, var(--color-blue-deep) 55%, transparent); backdrop-filter: blur(4px); animation: fadeIn 0.25s ease; } .theme-modal-panel { position: relative; z-index: 1; width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto; border-radius: 1.5rem; padding: 2rem; background-color: var(--color-cream); border: 1px solid var(--color-nude); animation: slideUp 0.3s var(--transition-smooth); } .theme-modal-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: background-color 200ms ease; } .theme-modal-close:hover { background-color: color-mix(in srgb, black 6%, transparent); } .theme-modal-title { font-size: 1.5rem; color: var(--color-blue-deep); } @media (min-width: 768px) { .theme-modal-title { font-size: 1.75rem; } } .theme-modal-desc { font-size: 14px; color: var(--color-muted-foreground); margin-top: 0.5rem; } .theme-modal-contacts { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; font-size: 14px; margin-top: 1rem; color: var(--color-muted-foreground); } .theme-modal-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; } .theme-modal-submit { width: 100%; } .theme-modal-success { padding: 2rem 0; text-align: center; } .theme-modal-success-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto; border-radius: 999px; display: flex; align-items: center; justify-content: center; background-color: var(--color-yellow); color: var(--color-blue-deep); } .theme-modal-success-title { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--color-blue-deep); text-transform: uppercase; } .theme-modal-success-body { margin-top: 0.5rem; font-size: 14px; color: var(--color-muted-foreground); } body.modal-open { overflow: hidden; } /* ========================================================================= 30. WHOLESALE PAGE ========================================================================= */ .wholesale-hero-section { position: relative; overflow: hidden; background-color: var(--color-blue-deep); } .wholesale-hero-img { opacity: 0.45; } .wholesale-hero-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-blue-deep) 70%, transparent), color-mix(in srgb, var(--color-blue-deep) 90%, transparent)); } .wholesale-hero-content { position: relative; padding: 6rem 0; } @media (min-width: 768px) { .wholesale-hero-content { padding: 8rem 0; } } .wholesale-eyebrow { color: var(--color-yellow); } .wholesale-hero-title { margin-top: 1.25rem; color: var(--color-cream); font-size: clamp(2.4rem, 7vw, 4.6rem); } .wholesale-hero-body { margin-top: 1.5rem; max-width: 36rem; font-size: 15px; } .wholesale-hero-cta-row { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .wholesale-points-section { padding: 5rem 0; } @media (min-width: 768px) { .wholesale-points-section { padding: 7rem 0; } } .wholesale-points-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .wholesale-points-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .wholesale-points-copy { min-width: 0; } @media (min-width: 1024px) { .wholesale-points-copy { grid-column: span 6; } } .wholesale-points-heading { color: var(--color-blue-deep); font-size: clamp(1.9rem, 4.4vw, 3rem); } .wholesale-points-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.75rem; } .wholesale-point { display: flex; gap: 1rem; } .wholesale-point-icon { width: 2.75rem; height: 2.75rem; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background-color: var(--color-yellow); color: var(--color-blue-deep); } .wholesale-point-title { font-size: 17px; color: var(--color-blue-deep); } .wholesale-point-body { margin-top: 0.4rem; font-size: 15px; line-height: 1.7; color: var(--color-muted-foreground); } .wholesale-points-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; min-width: 0; } @media (min-width: 1024px) { .wholesale-points-images { grid-column: span 6; } } .wholesale-img-1, .wholesale-img-2 { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 1.25rem; aspect-ratio: 3 / 4; } .wholesale-img-2 { margin-top: 2rem; } .wholesale-form-section { padding: 5rem 0; } @media (min-width: 768px) { .wholesale-form-section { padding: 7rem 0; } } .wholesale-form-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: stretch; } @media (min-width: 1024px) { .wholesale-form-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .wholesale-form-image { min-width: 0; } @media (min-width: 1024px) { .wholesale-form-image { grid-column: span 5; } } .wholesale-form-image img { width: 100%; height: 16rem; object-fit: cover; object-position: center; border-radius: 1.25rem; } .wholesale-form-side-img { width: 100%; height: 16rem; object-fit: cover; object-position: center; border-radius: 1.25rem; } @media (min-width: 640px) { .wholesale-form-image img { height: 20rem; } } @media (min-width: 1024px) { .wholesale-form-image img { height: 100%; } } .wholesale-form-copy { min-width: 0; } @media (min-width: 1024px) { .wholesale-form-copy { grid-column: span 7; } } .wholesale-form-heading { margin-top: 1rem; color: var(--color-blue-deep); font-size: clamp(1.9rem, 4.4vw, 3rem); } .wholesale-form-note { margin-top: 1rem; font-size: 15px; color: var(--color-muted-foreground); } .wholesale-form, .wholesale-success { margin-top: 2.5rem; border-radius: 1.25rem; padding: 1.5rem; background-color: var(--color-cream); border: 1px solid var(--color-nude); } @media (min-width: 768px) { .wholesale-form, .wholesale-success { padding: 2.25rem; } } .wholesale-form { display: flex; flex-direction: column; gap: 1.25rem; } .wholesale-success { text-align: center; } .wholesale-success-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto; border-radius: 999px; display: flex; align-items: center; justify-content: center; background-color: var(--color-yellow); color: var(--color-blue-deep); } .wholesale-success-title { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--color-blue-deep); text-transform: uppercase; } .wholesale-success-body { margin-top: 0.5rem; font-size: 15px; color: var(--color-muted-foreground); } .wholesale-success .doce-btn { margin-top: 1.75rem; } .wholesale-submit-btn { width: 100%; } @media (min-width: 640px) { .wholesale-submit-btn { width: auto; } } /* ========================================================================= 31. GENERIC PAGES / 404 / SHOP ARCHIVE ========================================================================= */ .generic-page-main, .not-found-main, .shop-archive-main { padding-top: 2rem; padding-bottom: 5rem; min-height: 50vh; } .page-title { font-size: 2rem; margin-bottom: 1.5rem; color: var(--color-blue-deep); } @media (min-width: 768px) { .page-title { font-size: 2.75rem; } } .entry-content { font-size: 15px; line-height: 1.7; color: color-mix(in srgb, var(--color-foreground) 65%, transparent); } .not-found-container { text-align: center; padding: 6rem 0; } .not-found-title { font-size: 4rem; color: var(--color-blue-deep); } .not-found-text { font-size: 1.25rem; margin: 1rem 0 1.75rem; color: var(--color-muted-foreground); } .shop-archive-title { padding-top: 1rem; } .shop-empty-state { padding: 4rem 0; text-align: center; font-size: 1.1rem; color: var(--color-muted-foreground); } /* ========================================================================= 32. WOOCOMMERCE GLOBAL STYLE OVERRIDE (Section 14) ========================================================================= */ .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; padding: 1rem 1.5rem; border-radius: 0.75rem; margin-bottom: 1.5rem; font-size: 14px; background-color: var(--color-cream-deep); color: var(--color-foreground); border-left: 4px solid var(--color-blue); } .woocommerce-error { border-left-color: var(--color-blue-deep); } .single-product .woocommerce-message, .single-product .woocommerce-info { display: none; } #theme-cart-drawer .woocommerce-message { display: none; } .woocommerce-notices-wrapper { margin-bottom: 1.5rem; } /* ========================================================================= 33. WOOCOMMERCE CHECKOUT BLOCK (Section 13) ========================================================================= */ body.woocommerce-checkout .site-main { padding-top: calc(var(--header-height) + 2rem); padding-bottom: 4rem; } body.woocommerce-checkout .page-container { max-width: 80rem; } body.woocommerce-checkout .wc-block-checkout { display: block; } @media (min-width: 768px) { body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout.is-large, body.woocommerce-checkout .wc-block-checkout__main-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--checkout-gap); align-items: start; } } body.woocommerce-checkout .wc-block-checkout__main, body.woocommerce-checkout .wc-block-checkout__sidebar { min-width: 0; width: 100%; max-width: none; } body.woocommerce-checkout .wc-block-components-notice-banner { grid-column: 1 / -1; } body.woocommerce-checkout .wc-block-components-text-input input, body.woocommerce-checkout .wc-block-components-select select, body.woocommerce-checkout .wc-block-components-textarea textarea { font-family: var(--font-body); color: var(--color-foreground); border: 1px solid var(--color-nude); border-radius: 0.75rem; background-color: #ffffff; width: 100% !important; max-width: none !important; padding: revert; } body.woocommerce-checkout .wc-block-components-text-input input:focus, body.woocommerce-checkout .wc-block-components-select select:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blue) 15%, transparent); } body.woocommerce-checkout .wc-block-components-text-input input::placeholder { color: color-mix(in srgb, var(--color-foreground) 45%, transparent); } body.woocommerce-checkout .wc-block-components-checkout-place-order-button { background-color: var(--color-blue) !important; color: var(--color-cream) !important; border-radius: var(--btn-radius) !important; font-family: var(--font-display) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border: none !important; font-weight: 400 !important; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover { opacity: 0.85; } body.woocommerce-checkout .wc-block-checkout__sidebar { background-color: var(--color-cream-deep); border-radius: var(--card-radius); padding: var(--section-padding); } body.woocommerce-checkout .wc-block-components-notice-banner { border-radius: 0.75rem; } body.woocommerce-checkout .site-header { position: sticky; } /* ========================================================================= 34. CART / MY ACCOUNT PAGES (Section 13.7 width & alignment parity) ========================================================================= */ body.woocommerce-cart .site-main, body.woocommerce-account .site-main { padding-top: 2rem; padding-bottom: 4rem; } body.woocommerce-cart table.shop_table, body.woocommerce-account table.shop_table { width: 100%; border-collapse: collapse; font-size: 14px; } body.woocommerce-cart table.shop_table th, body.woocommerce-cart table.shop_table td { padding: 0.85rem; border-bottom: 1px solid var(--color-nude); } body.woocommerce-cart .button, body.woocommerce-account .button { background-color: var(--color-blue); color: var(--color-cream); border-radius: var(--btn-radius); font-family: var(--font-display); text-transform: uppercase; padding: 0.75rem 1.5rem; display: inline-flex; } /* ========================================================================= 35. THANK YOU PAGE (Section 22.8) ========================================================================= */ body.theme-thankyou-page { overflow-x: hidden; } body.theme-thankyou-page .theme-thankyou-content { padding: 2rem 0 4rem; } .thankyou-icon { width: 4rem; height: 4rem; margin: 0 auto 1.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--gradient-berry); color: var(--color-cream); } body.theme-thankyou-page .woocommerce-order h2, body.theme-thankyou-page .woocommerce-order-details__title { font-size: 1.6rem; color: var(--color-blue-deep); padding: 0 0 1rem 0; } body.theme-thankyou-page .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; padding: 0; margin: 1.5rem 0 2rem; text-align: center; } body.theme-thankyou-page .woocommerce-order-overview li { flex: 1 1 10rem; padding: 1rem; border-radius: 0.75rem; background-color: var(--color-cream-deep); font-size: 14px; } body.theme-thankyou-page .woocommerce-order-details table, body.theme-thankyou-page .woocommerce-order-details__title + table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 2rem; font-size: 14px; } body.theme-thankyou-page .woocommerce-order-details table th, body.theme-thankyou-page .woocommerce-order-details table td { padding: 0.75rem; border-bottom: 1px solid var(--color-nude); } body.theme-thankyou-page .woocommerce-order-details tfoot th { text-align: left; } body.theme-thankyou-page .woocommerce-order-details tfoot td { text-align: right; } body.theme-thankyou-page .woocommerce-customer-details { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; } body.theme-thankyou-page .woocommerce-customer-details address { max-width: 30rem; overflow-wrap: break-word; font-size: 14px; line-height: 1.7; font-style: normal; } /* ========================================================================= 36. RESPONSIVE FIXES ========================================================================= */ @media (max-width: 480px) { .theme-modal-panel { padding: 1.5rem; } }