/* ========================================================================== Gray Area Clothing DC — theme.css Theme by The Free Website Guys. ========================================================================== */ /* --------------------------------------------------------------------------- 0. FONTS Source fonts match tailwind.config.ts (Lovable): --font-display = Cormorant Garamond (headings), --font-body = Jost (UI/body). --------------------------------------------------------------------------- */ :root { --font-display: 'Cormorant Garamond', 'Sundays', serif; --font-body: 'Jost', 'Optima', 'Optima LT Std', sans-serif; --radius: 0.125rem; --shadow-soft: 0 6px 24px -8px rgb(0 0 0 / 0.5); --shadow-elevated: 0 18px 48px -14px rgb(0 0 0 / 0.7); --transition-smooth: cubic-bezier(0.25, 0.4, 0.25, 1); --btn-radius: 0; --btn-height: 3rem; --btn-padding: 0 1.75rem; --btn-font-size: 0.75rem; --btn-font-weight: 500; --btn-letter-spacing: 0.24em; --btn-text-transform: uppercase; --btn-icon-padding: 0.5rem; --header-height: 96px; --checkout-gap: 2rem; } /* --------------------------------------------------------------------------- 1. RESET / BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; max-width: 100%; } body { margin: 0; background: var(--color-background); color: var(--color-foreground); font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; position: relative; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.005em; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; } img { max-width: 100%; height: auto; display: block; } img:not(.cover-img):not(.hero-slide):not(.theme-product-card__image):not(.theme-product-main-image):not(.category-tile img):not(.theme-cart-item-image img):not(.featured-card-image img) { max-width: 100%; height: auto; } .cover-img, .hero-slide, .theme-product-card__image, .theme-product-main-image, .category-tile img, .featured-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } ul { margin: 0; padding: 0; list-style: none; } input, textarea, select { font: inherit; color: inherit; } /* --------------------------------------------------------------------------- 2. LAYOUT UTILITIES --------------------------------------------------------------------------- */ .container-wide { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; } .container-editorial { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 1024px) { .container-wide, .container-editorial { padding: 0 2.5rem; } } .label-eyebrow { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; color: var(--color-muted-foreground); display: block; } .nav-link { font-family: var(--font-body); font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; transition: color 0.3s; } .text-highlight { color: var(--color-highlight); } .btn-primary, .btn-outline, .btn-brand { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 3rem; padding: 0 1.75rem; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; border-radius: 0; transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .btn-primary { background: var(--color-primary); color: var(--color-primary-foreground); border: 1px solid var(--color-primary); } .btn-primary:hover { opacity: 0.9; } .btn-brand { background: var(--color-primary); color: var(--color-primary-foreground); border: 1px solid var(--color-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent); } .btn-brand:hover { background: var(--color-background); color: var(--color-primary); } .btn-outline { background: transparent; border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent); color: var(--color-foreground); } .btn-outline:hover { background: var(--color-primary); color: var(--color-primary-foreground); } .hairline-gold { height: 1px; border: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-primary) 35%, transparent) 18%, color-mix(in srgb, var(--color-accent) 90%, transparent) 50%, color-mix(in srgb, var(--color-primary) 35%, transparent) 82%, transparent 100%); } .hairline-gold-edge { height: 1px; border: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 55%, transparent) 0%, color-mix(in srgb, var(--color-accent) 75%, transparent) 50%, color-mix(in srgb, var(--color-primary) 15%, transparent) 100%); } .ornament-gold { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; } .ornament-gold::before, .ornament-gold::after { content: ''; width: 3rem; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 85%, transparent)); } .ornament-gold::after { background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 85%, transparent), transparent); } .ornament-diamond { width: 6px; height: 6px; transform: rotate(45deg); background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); display: inline-block; } .frame-gold { position: relative; } .frame-gold::after { content: ''; position: absolute; inset: 0; pointer-events: none; padding: 1px; background: linear-gradient(140deg, color-mix(in srgb, var(--color-accent) 85%, transparent), color-mix(in srgb, var(--color-primary) 15%, transparent) 45%, color-mix(in srgb, var(--color-accent) 60%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .scrim-editorial { background: linear-gradient(to top, rgb(20 15 10 / 0.88) 0%, rgb(20 15 10 / 0.62) 35%, rgb(20 15 10 / 0.22) 65%, rgb(20 15 10 / 0.1) 100%); } /* --------------------------------------------------------------------------- 3. ANIMATIONS (Section 2.1) --------------------------------------------------------------------------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounceX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .animate-fade-in { animation: fadeIn 0.8s var(--transition-smooth) forwards; } .animate-slide-up { animation: slideUp 0.8s var(--transition-smooth) forwards; } .animate-bounce-x { animation: bounceX 1.2s ease-in-out infinite; } .reveal-item { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--transition-smooth), transform 0.9s var(--transition-smooth); } .reveal-item.is-visible { opacity: 1; transform: translateY(0); } .theme-product-card-wrap.reveal-item { transform: none; transition: opacity 0.6s var(--transition-smooth); } body.is-customizer .reveal-item { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .reveal-item { transition: none !important; opacity: 1 !important; transform: none !important; } .animate-marquee, .marquee-track { animation: none !important; } } /* --------------------------------------------------------------------------- 4. SCROLL PROGRESS + HEADER --------------------------------------------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--color-primary); z-index: 70; pointer-events: none; transition: width 0.1s linear; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color 0.5s, backdrop-filter 0.5s; background: transparent; } .site-header.is-solid { background: color-mix(in srgb, var(--color-background) 90%, transparent); backdrop-filter: blur(12px); } .site-nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 7rem; transition: height 0.5s; } .site-header.is-solid .site-nav, .site-nav.is-compact { height: 4.75rem; } @media (min-width: 1024px) { .site-nav { height: 8rem; } .site-header.is-solid .site-nav, .site-nav.is-compact { height: 5.25rem; } } .mobile-menu-toggle-wrap { display: flex; align-items: center; } @media (min-width: 1024px) { .mobile-menu-toggle-wrap { display: none; } } #mobile-menu-toggle { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.25rem; color: var(--color-foreground); } .site-header:not(.is-solid) #mobile-menu-toggle { color: #fff; } .mobile-menu-toggle-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; } .hamburger { position: relative; display: block; height: 1rem; width: 1.5rem; } .hamburger span { position: absolute; left: 0; top: 50%; height: 1px; width: 1.5rem; background: currentColor; transition: transform 0.3s ease-out; transform: translateY(-5px); } .hamburger span:last-child { width: 0.875rem; transform: translateY(4px); } #mobile-menu-toggle[aria-expanded="true"] .hamburger span:first-child { transform: translateY(0) rotate(45deg); } #mobile-menu-toggle[aria-expanded="true"] .hamburger span:last-child { width: 1.5rem; transform: translateY(0) rotate(-45deg); } .site-logo-link { display: flex; align-items: center; height: var(--logo-height-compact, 3.25rem); position: absolute; left: 50%; transform: translateX(-50%); transition: height 0.5s; } @media (min-width: 1024px) { .site-logo-link { position: static; transform: none; height: var(--logo-height-compact-lg, 3.9rem); } } .site-header:not(.is-solid) .site-logo-link { height: var(--logo-height, 5.85rem); } @media (min-width: 1024px) { .site-header:not(.is-solid) .site-logo-link { height: var(--logo-height-lg, 6.825rem); } } .site-logo-img { height: 100%; width: auto; max-height: 100%; object-fit: contain; transition: height 0.5s; } .site-logo-text { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; text-transform: uppercase; } .site-brand-name { margin-left: 0.5rem; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; } .site-nav-desktop { display: none; } @media (min-width: 1024px) { .site-nav-desktop { display: flex; align-items: center; gap: 2.25rem; position: absolute; left: 50%; transform: translateX(-50%); } } .theme-nav-list { display: flex; align-items: center; gap: 2.25rem; } .theme-nav-list a, .theme-nav-list button { color: var(--color-foreground); } .site-header:not(.is-solid) .theme-nav-list a, .site-header:not(.is-solid) .theme-nav-list button { color: #fff; } .theme-nav-list a:hover, .theme-nav-list button:hover { opacity: 0.8; } .theme-nav-item { position: relative; } .theme-nav-item > button { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; } .theme-nav-item.is-open > button { color: var(--color-primary); } .site-header:not(.is-solid) .theme-nav-item.is-open > button { color: var(--color-primary); } .theme-nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 1rem; z-index: 40; display: none; } .theme-nav-item.is-open .theme-nav-dropdown { display: block; animation: fadeIn 0.3s var(--transition-smooth); } .theme-nav-dropdown-inner { background: var(--color-background); border: 1px solid var(--color-border); box-shadow: var(--shadow-elevated); min-width: 16rem; max-width: 20rem; padding: 1.25rem 1.5rem; } .theme-nav-dropdown ul { display: flex; flex-direction: column; gap: 0.625rem; } .theme-nav-dropdown button { width: 100%; text-align: left; font-size: 0.875rem; font-family: var(--font-body); color: color-mix(in srgb, var(--color-foreground) 85%, transparent); transition: color 0.2s; } .theme-nav-dropdown button:hover { color: var(--color-primary); } .site-nav-actions { display: flex; align-items: center; gap: 0.25rem; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0.5rem; color: var(--color-foreground); transition: opacity 0.3s, transform 0.3s; } .site-header:not(.is-solid) .icon-btn { color: #fff; } .icon-btn:hover { opacity: 0.7; } .cart-btn { position: relative; } .cart-btn:hover { transform: rotate(-6deg); } .theme-cart-count { position: absolute; top: -2px; right: -2px; width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 500; background: var(--color-primary); color: var(--color-primary-foreground); border-radius: 999px; } .theme-cart-count:empty { display: none; } /* Mobile menu */ .mobile-menu { position: fixed; inset-inline: 0; bottom: 0; top: var(--header-height, 96px); z-index: 40; background: var(--color-background); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.3s ease-out, transform 0.3s ease-out; overflow-y: auto; } .mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (min-width: 1024px) { .mobile-menu { display: none; } } .mobile-menu-nav { padding: 2rem 1.5rem; display: flex; flex-direction: column; min-height: 100%; } .mobile-menu-list { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .mobile-menu-list li { border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent); } .mobile-menu-section-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; text-align: left; } .mobile-menu-section-toggle span:first-child { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; letter-spacing: -0.02em; text-transform: lowercase; } .mobile-menu-section-toggle:hover span:first-child { color: var(--color-primary); } .mobile-menu-section-toggle svg { transition: transform 0.3s; flex-shrink: 0; } .mobile-menu-section-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .mobile-menu-sublist { padding-bottom: 1rem; padding-left: 0.25rem; display: none; } .mobile-menu-sublist.is-open { display: block; animation: fadeIn 0.3s var(--transition-smooth); } .mobile-menu-sublist button { width: 100%; text-align: left; padding: 0.625rem 0; font-size: 0.875rem; font-family: var(--font-body); color: color-mix(in srgb, var(--color-foreground) 80%, transparent); } .mobile-menu-sublist button:hover { color: var(--color-primary); } .mobile-menu-link { display: block; width: 100%; padding: 1rem 0; font-family: var(--font-display); font-size: 2.25rem; line-height: 1; letter-spacing: -0.02em; text-transform: lowercase; } .mobile-menu-link:hover { color: var(--color-primary); } .mobile-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .mobile-menu-action-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 0; border: 1px solid var(--color-border); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; font-family: var(--font-body); transition: background-color 0.2s, color 0.2s; } .mobile-menu-action-btn:hover { background: var(--color-primary); color: var(--color-primary-foreground); } .mobile-menu-footer { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); display: flex; flex-direction: column; gap: 1rem; } .mobile-menu-email { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: color-mix(in srgb, var(--color-foreground) 75%, transparent); } .mobile-contact-btn { width: 100%; height: 3rem; background: var(--color-primary); color: var(--color-primary-foreground); font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; } /* --------------------------------------------------------------------------- 5. SEARCH DIALOG + COLOR SEARCH DIALOG + CONTACT MODAL --------------------------------------------------------------------------- */ .search-dialog, .color-search-dialog, .contact-modal { position: fixed; inset: 0; z-index: 80; display: none; } .search-dialog.is-open, .color-search-dialog.is-open, .contact-modal.is-open { display: block; animation: fadeIn 0.3s var(--transition-smooth); } .search-dialog-overlay, .color-search-overlay, .contact-modal-overlay { position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); backdrop-filter: blur(4px); border: 0; } .search-dialog-panel { position: relative; background: var(--color-background); width: 100%; max-height: 92vh; overflow-y: auto; border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-elevated); } .search-dialog-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 10; padding: 0.5rem; opacity: 0.7; } .search-dialog-close:hover { opacity: 1; } .search-dialog-inner { padding-block: 2.5rem; } .search-dialog-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .search-dialog-grid { grid-template-columns: 260px 1fr; gap: 4rem; } } .search-dialog-categories h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 1.5rem; } .search-dialog-categories ul { display: flex; flex-direction: column; gap: 0.875rem; } .search-dialog-categories a { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; } .search-dialog-categories a:hover { color: var(--color-primary); } .search-input-wrap { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 30%, transparent); padding-bottom: 0.75rem; } .search-input-wrap svg { opacity: 0.6; } #search-input { flex: 1; background: transparent; border: 0; outline: none; font-family: var(--font-display); font-size: 1.5rem; } .search-results-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (min-width: 768px) { .search-results-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .search-results-grid { grid-template-columns: repeat(4, 1fr); } } .search-result-item { text-align: left; } .search-result-image { aspect-ratio: 1/1; overflow: hidden; background: var(--color-secondary); position: relative; } .search-result-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .search-result-title { margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; } .search-result-price { margin-top: 0.25rem; font-size: 0.75rem; opacity: 0.7; } .search-color-link-wrap { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } .search-color-link { display: inline-flex; align-items: center; gap: 0.75rem; } .search-color-swatch { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: conic-gradient(from 0deg, #c44569, #c9a24c, #9fae8c, #2a3a6b, #6b2c4a, #c44569); flex-shrink: 0; } .search-color-link-title { display: block; font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; } .search-color-link-sub { display: block; font-size: 0.75rem; opacity: 0.55; margin-top: 0.15rem; } .color-search-panel { position: relative; background: var(--color-background); width: 100%; height: 100dvh; overflow-y: auto; } @media (min-width: 768px) { .color-search-panel { height: auto; max-height: 94vh; } } .color-search-topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--color-background) 95%, transparent); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } .color-search-label { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; } .color-search-topbar-actions { display: flex; align-items: center; gap: 1rem; } .color-search-body { padding: 2rem 1.5rem; } .color-search-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .color-search-grid { grid-template-columns: 260px 1fr; } } @media (min-width: 1024px) { .color-search-grid { grid-template-columns: 320px 1fr; } } .color-search-active-name { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.75rem; } .color-search-chips { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .color-chip { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent); position: relative; } .color-chip.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent); } .color-chip-remove { position: absolute; top: -4px; right: -4px; width: 1rem; height: 1rem; background: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent); border-radius: 999px; display: flex; align-items: center; justify-content: center; } .color-chip-add { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0 0.75rem; height: 2.5rem; border: 1px dashed color-mix(in srgb, var(--color-foreground) 30%, transparent); border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; } .color-search-wheel-wrap { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; } #color-wheel-canvas { border-radius: 999px; cursor: crosshair; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-foreground) 10%, transparent); } #color-wheel-lightness { writing-mode: vertical-lr; direction: rtl; width: 4px; height: 11rem; } .color-search-presets-label { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.5; margin-bottom: 0.75rem; } .color-search-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.625rem; max-width: 260px; } .color-preset-swatch { aspect-ratio: 1/1; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); transition: transform 0.2s; } .color-preset-swatch:hover { transform: scale(1.1); } .color-search-hint { margin-top: 1.5rem; font-size: 0.75rem; opacity: 0.55; line-height: 1.6; } .color-search-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 1024px) { .color-search-results { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .color-search-results { grid-template-columns: repeat(4, 1fr); } } .color-search-no-results { grid-column: 1 / -1; text-align: center; padding: 6rem 0; } .contact-modal-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto; background: var(--color-background); border: 1px solid var(--color-border); padding: 1.5rem; } .contact-modal-close { position: absolute; top: 1rem; right: 1rem; opacity: 0.7; } .contact-modal-close:hover { opacity: 1; } .contact-modal-title { font-family: var(--font-display); font-size: 1.5rem; margin: 0.5rem 0; } .contact-modal-desc { font-size: 0.9375rem; line-height: 1.6; color: color-mix(in srgb, var(--color-foreground) 80%, transparent); } .contact-modal-links { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--color-muted-foreground); border-top: 1px solid var(--color-border); padding-top: 1rem; margin-top: 0.5rem; } .contact-modal-links a { display: inline-flex; align-items: center; gap: 0.5rem; } .contact-modal-links a:hover { color: var(--color-foreground); } .contact-modal-social { display: flex; gap: 1rem; padding-top: 0.25rem; } .contact-modal-form { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; } .contact-modal-form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .contact-modal-form-row { grid-template-columns: 1fr 1fr; } } .contact-modal-form input, .contact-modal-form textarea { width: 100%; padding: 0.625rem 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); font-size: 0.875rem; font-family: var(--font-body); } .contact-modal-form input::placeholder, .contact-modal-form textarea::placeholder { color: var(--color-muted-foreground); } .contact-modal-form input:focus, .contact-modal-form textarea:focus { outline: none; border-color: var(--color-primary); } .contact-modal-form-footer { display: flex; justify-content: flex-end; } .contact-modal-form-footer button { height: 2.75rem; padding: 0 1.5rem; background: var(--color-primary); color: var(--color-primary-foreground); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.5rem; } .contact-modal-success { text-align: center; padding: 2rem 0; } .contact-modal-success-icon { width: 3.5rem; height: 3.5rem; background: var(--color-primary); color: var(--color-primary-foreground); border-radius: 999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .contact-modal-success h3 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.5rem; } /* --------------------------------------------------------------------------- 6. HERO --------------------------------------------------------------------------- */ .hero-section { position: relative; width: 100%; height: 100svh; overflow: hidden; } body.theme-no-hero .hero-section { display: none; } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--transition-smooth), transform 1.4s var(--transition-smooth); transform: scale(1.04); } .hero-slide.is-active { opacity: 1; transform: scale(1); z-index: 1; } .hero-gradient-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.8)); z-index: 2; } .hero-radial-overlay { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 58%, rgb(0 0 0 / 0.55), transparent 70%); z-index: 2; } .hero-hairline-top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; } .hero-hairline-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; } .hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; padding: 0.75rem; color: rgb(255 255 255 / 0.8); transition: color 0.2s; } .hero-nav:hover { color: #fff; } .hero-nav-prev { left: 1rem; } .hero-nav-next { right: 1rem; } @media (min-width: 768px) { .hero-nav-prev { left: 2rem; } .hero-nav-next { right: 2rem; } } .hero-content-wrap { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; z-index: 10; } @media (min-width: 768px) { .hero-content-wrap { align-items: center; } } .hero-content-inner { padding-bottom: 5rem; display: flex; justify-content: center; } @media (min-width: 768px) { .hero-content-inner { padding-bottom: 0; } } .hero-content { max-width: 42rem; text-align: center; display: flex; flex-direction: column; align-items: center; animation: heroFadeUp 1.2s var(--transition-smooth) 0.4s both; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-eyebrow { color: #fff !important; margin-bottom: 1.25rem; text-shadow: 0 2px 12px rgb(0 0 0 / 0.95); font-size: 0.8125rem; letter-spacing: 0.3em; } @media (min-width: 768px) { .hero-eyebrow { font-size: 0.875rem; } } .hero-title { font-family: var(--font-display); text-transform: uppercase; color: #fff; font-size: 3rem; line-height: 1.02; margin-bottom: 1.5rem; text-shadow: 0 4px 32px rgb(0 0 0 / 0.9), 0 1px 4px rgb(0 0 0 / 0.8); } @media (min-width: 768px) { .hero-title { font-size: 3.75rem; } } @media (min-width: 1024px) { .hero-title { font-size: 4.5rem; } } .hero-title-hairline { width: 10rem; margin-bottom: 2rem; } .hero-cta { padding: 0 2.5rem; height: 3rem; box-shadow: var(--shadow-elevated); } .hero-cta-arrow { display: inline-flex; margin-left: 0.25rem; animation: heroArrowBounce 1.8s ease-in-out infinite; } @keyframes heroArrowBounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } .hero-indicators { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 0.5rem; } .hero-indicator { height: 2px; width: 1.25rem; background: rgb(var(--color-background-rgb) / 0.4); transition: all 0.5s; } .hero-indicator.is-active { width: 2.5rem; background: var(--color-background); } /* --------------------------------------------------------------------------- 7. MARQUEE --------------------------------------------------------------------------- */ .marquee-strip { position: relative; overflow: hidden; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-primary); color: var(--color-primary-foreground); padding: 0.75rem 0; } .marquee-track { display: flex; width: max-content; animation: marqueeScroll 28s linear infinite; } .marquee-item { display: flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; } @media (min-width: 768px) { .marquee-item { font-size: 0.875rem; } } .marquee-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-primary-foreground) 60%, transparent); } /* --------------------------------------------------------------------------- 8. CAPTION STRIP --------------------------------------------------------------------------- */ .caption-strip { position: relative; border-bottom: 1px solid transparent; } .caption-strip::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 85%, transparent), transparent); } .caption-strip-inner { padding-block: 3rem; display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 768px) { .caption-strip-inner { flex-direction: row; align-items: center; justify-content: space-between; } } .caption-strip-text { font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; line-height: 1.35; max-width: 48rem; } @media (min-width: 768px) { .caption-strip-text { font-size: 1.5rem; } } @media (min-width: 1024px) { .caption-strip-text { font-size: 1.875rem; } } .caption-strip-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; flex-shrink: 0; transition: color 0.3s; } .caption-strip-cta:hover { color: var(--color-primary); } /* --------------------------------------------------------------------------- 9. FEATURED PIECES --------------------------------------------------------------------------- */ .featured-section { background: color-mix(in srgb, var(--color-blush) 60%, transparent); padding: 5rem 0; } @media (min-width: 1024px) { .featured-section { padding: 7rem 0; } } .featured-heading { margin-bottom: 3rem; } @media (min-width: 1024px) { .featured-heading { margin-bottom: 4rem; } } .featured-title { font-family: var(--font-display); text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; font-size: clamp(3.25rem, 11vw, 10rem); padding-bottom: 1.5rem; font-weight: inherit; } @media (min-width: 1024px) { .featured-title { padding-bottom: 2rem; } } .featured-eyebrow { margin-top: 0.5rem; } @media (min-width: 1024px) { .featured-eyebrow { margin-top: 1rem; } } .featured-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 768px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .featured-grid { grid-template-columns: repeat(12, 1fr); gap: 2rem; } } .featured-card { display: block; } @media (min-width: 1024px) { .featured-card { grid-column: span 4; } .featured-card-1 { margin-top: 4rem; } .featured-card-3 { margin-top: 8rem; } } .featured-card-image { position: relative; overflow: hidden; background: var(--color-background); aspect-ratio: 3/4; } .featured-card-2 .featured-card-image { aspect-ratio: 3/4.4; } .featured-card-image img { transition: transform 1.2s ease-out; } .featured-card:hover .featured-card-image img { transform: scale(1.03); } .featured-card-title { margin-top: 1.5rem; font-family: var(--font-display); font-style: italic; font-size: 1.125rem; line-height: 1.35; max-width: 20rem; } @media (min-width: 1024px) { .featured-card-title { font-size: 1.25rem; } } .featured-card-cta { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 80%, transparent); transition: color 0.3s; } .featured-card:hover .featured-card-cta { color: var(--color-primary); } /* --------------------------------------------------------------------------- 10. BRAND / ABOUT --------------------------------------------------------------------------- */ .brand-section { background: color-mix(in srgb, var(--color-blush) 35%, transparent); padding: 5rem 0; } @media (min-width: 1024px) { .brand-section { padding: 7rem 0; } } .brand-story { position: relative; margin-bottom: 6rem; } @media (min-width: 1024px) { .brand-story { margin-bottom: 9rem; } } .brand-glyph { position: absolute; top: -5rem; right: 0; font-family: var(--font-display); font-size: 22rem; line-height: 1; color: color-mix(in srgb, var(--color-foreground) 4%, transparent); pointer-events: none; display: none; user-select: none; } @media (min-width: 1024px) { .brand-glyph { display: block; } } .brand-story-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 1024px) { .brand-story-grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; } } .brand-portrait { min-width: 0; } @media (min-width: 1024px) { .brand-portrait { grid-column: 1 / span 5; } } .brand-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top; } .brand-portrait figcaption { margin-top: 1rem; font-size: 0.8125rem; color: var(--color-muted-foreground); text-align: center; } @media (min-width: 1024px) { .brand-portrait figcaption { text-align: left; } } .brand-copy { min-width: 0; } @media (min-width: 1024px) { .brand-copy { grid-column: 7 / span 6; padding-top: 2rem; } } .brand-title { font-family: var(--font-display); text-transform: uppercase; font-size: 2.25rem; line-height: 1.05; margin: 1.5rem 0 2rem; font-weight: inherit; } @media (min-width: 768px) { .brand-title { font-size: 3rem; } } @media (min-width: 1024px) { .brand-title { font-size: 3.75rem; } } .brand-paragraphs { display: flex; flex-direction: column; gap: 1.25rem; max-width: 52ch; color: color-mix(in srgb, var(--color-foreground) 85%, transparent); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.75; margin-bottom: 2rem; } @media (min-width: 1024px) { .brand-paragraphs { font-size: 1.125rem; } } .brand-quote { border-left: 2px solid color-mix(in srgb, var(--color-primary) 60%, transparent); padding: 0.5rem 1rem 0.5rem 1.5rem; margin-bottom: 2rem; } @media (min-width: 640px) { .brand-quote { padding-left: 1.5rem; } } .brand-quote p { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1.35; font-weight: inherit; } @media (min-width: 1024px) { .brand-quote p { font-size: 1.875rem; } } .brand-signoff { font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; font-weight: inherit; } .brand-palette { text-align: center; } .brand-palette-heading { margin-bottom: 2.5rem; } .brand-palette-heading h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.875rem; line-height: 1.1; margin-top: 1rem; font-weight: inherit; } @media (min-width: 768px) { .brand-palette-heading h2 { font-size: 2.25rem; } } @media (min-width: 1024px) { .brand-palette-heading h2 { font-size: 3rem; } } .brand-palette-paragraph { max-width: 42rem; margin: 0 auto 2.5rem; color: color-mix(in srgb, var(--color-foreground) 85%, transparent); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; } /* --------------------------------------------------------------------------- 11. CATEGORY SCROLLER --------------------------------------------------------------------------- */ .category-scroller-section { background: linear-gradient(to bottom, var(--color-background), color-mix(in srgb, var(--color-blush) 20%, transparent), var(--color-background)); } .category-scroller-heading { padding-block: 4rem 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } @media (min-width: 1024px) { .category-scroller-heading { padding-top: 5rem; } } .category-scroller-heading h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1.2; margin-top: 0.5rem; font-weight: inherit; } @media (min-width: 768px) { .category-scroller-heading h2 { font-size: 1.875rem; } } .category-swipe-hint { margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: color-mix(in srgb, var(--color-primary) 80%, transparent); transition: opacity 0.5s; } @media (min-width: 1280px) { .category-swipe-hint { display: none; } } .category-clear-btn { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary); } .category-scroller { display: flex; gap: 0.75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 1.5rem; margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; scrollbar-width: none; } .category-scroller::-webkit-scrollbar { display: none; } @media (min-width: 1280px) { .category-scroller { flex-wrap: nowrap; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0 0 5rem; justify-content: center; gap: 3px; } } .category-tile-wrap { flex-shrink: 0; width: 82vw; scroll-snap-align: center; } @media (min-width: 640px) { .category-tile-wrap { width: 58vw; } } @media (min-width: 768px) { .category-tile-wrap { width: 44vw; } } @media (min-width: 1024px) { .category-tile-wrap { width: 32vw; } } @media (min-width: 1280px) { .category-tile-wrap { width: auto; flex: 1 1 0; } } .category-tile-wrap.is-filter-active .category-tile { box-shadow: inset 0 0 0 2px var(--color-primary); } .category-tile { position: relative; display: block; width: 100%; min-height: 320px; overflow: hidden; background: var(--color-secondary); text-align: left; } @media (min-width: 768px) { .category-tile { min-height: 400px; } } @media (min-width: 1024px) { .category-tile { min-height: 460px; } } .category-tile img { transition: transform 1.6s var(--transition-smooth); } .category-tile:hover img { transform: scale(1.05); } .category-tile-scrim { position: absolute; inset-inline: 0; bottom: 0; height: 70%; background: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.35), transparent); pointer-events: none; } .category-tile-copy { position: absolute; bottom: 1.75rem; left: 1.75rem; right: 1.75rem; transition: transform 0.5s; } @media (min-width: 768px) { .category-tile-copy { bottom: 2.5rem; left: 2.5rem; right: 2.5rem; } } .category-tile:hover .category-tile-copy { transform: translateY(-4px); } .category-tile-eyebrow { display: block; font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: #fff; margin-bottom: 1.25rem; text-shadow: 0 2px 10px rgb(0 0 0 / 0.75); } .category-tile-copy h3 { font-family: var(--font-display); color: #fff; font-size: 1.5rem; line-height: 1.15; text-shadow: 0 2px 18px rgb(0 0 0 / 0.75); font-weight: inherit; } @media (min-width: 768px) { .category-tile-copy h3 { font-size: 1.875rem; } } @media (min-width: 1024px) { .category-tile-copy h3 { font-size: 2.125rem; } } .category-tile-cta { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: #fff; border-bottom: 1px solid rgb(255 255 255 / 0.8); padding-bottom: 0.25rem; text-shadow: 0 2px 10px rgb(0 0 0 / 0.7); } .category-scroll-indicator-wrap { display: block; padding-top: 0.25rem; padding-bottom: 3.5rem; } @media (min-width: 1280px) { .category-scroll-indicator-wrap { display: none; } } .category-scroll-track { height: 1px; width: 100%; background: color-mix(in srgb, var(--color-border) 70%, transparent); overflow: hidden; } .category-scroll-thumb { height: 1px; background: var(--color-primary); transition: width 0.15s ease-out, margin-left 0.15s ease-out; width: 25%; } .category-scroll-dots { margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .category-scroll-dot { height: 6px; width: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-foreground) 25%, transparent); transition: all 0.3s; } .category-scroll-dot.is-active { width: 1.5rem; background: var(--color-primary); } /* --------------------------------------------------------------------------- 12. SHOP / PRODUCT GRID + FILTERS --------------------------------------------------------------------------- */ .shop-section { background: color-mix(in srgb, var(--color-blush) 25%, transparent); } .shop-heading-wrap { padding: 5rem 0 3rem; text-align: center; } @media (min-width: 1024px) { .shop-heading-wrap { padding-top: 7rem; } } .shop-heading h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 2.25rem; line-height: 1.05; margin-top: 0.75rem; font-weight: inherit; } @media (min-width: 768px) { .shop-heading h2 { font-size: 3rem; } } @media (min-width: 1024px) { .shop-heading h2 { font-size: 3.75rem; } } .shop-body { padding-bottom: 5rem; } @media (min-width: 1024px) { .shop-body { padding-bottom: 7rem; } } .shop-filters { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2.5rem; justify-content: center; } @media (min-width: 640px) { .shop-filters { flex-direction: row; gap: 1rem; } } .shop-filter-dropdown { position: relative; flex: 1; max-width: 20rem; } .shop-filter-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border: 1px solid var(--color-border); background: var(--color-background); transition: border-color 0.2s; } .shop-filter-btn:hover { border-color: var(--color-primary); } .shop-filter-btn-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .shop-filter-label { font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 50%, transparent); } .shop-filter-value { font-size: 0.875rem; margin-top: 0.125rem; display: flex; align-items: center; gap: 0.5rem; } .shop-filter-btn svg { transition: transform 0.2s; flex-shrink: 0; } .shop-filter-dropdown.is-open .shop-filter-btn svg { transform: rotate(180deg); } .shop-filter-list { position: absolute; left: 0; right: 0; top: 100%; margin-top: 0.25rem; z-index: 30; background: var(--color-background); border: 1px solid var(--color-border); box-shadow: var(--shadow-elevated); max-height: 20rem; overflow-y: auto; display: none; } .shop-filter-dropdown.is-open .shop-filter-list { display: block; animation: fadeIn 0.3s var(--transition-smooth); } .shop-filter-list li button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; text-align: left; font-size: 0.875rem; } .shop-filter-list li button:hover { background: color-mix(in srgb, var(--color-secondary) 60%, transparent); } .shop-filter-list li button.is-active { color: var(--color-primary); } .shop-filter-list li button svg { opacity: 0; } .shop-filter-list li button.is-active svg { opacity: 1; } .shop-filter-color-search-item { border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } .shop-filter-color-search-item button { color: var(--color-primary); display: flex; align-items: center; gap: 0.625rem; } .shop-color-swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); } .shop-filter-clear-all { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary); align-self: center; } @media (min-width: 640px) { .shop-filter-clear-all { align-self: flex-end; padding-bottom: 0.75rem; } } .product-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem 0.5rem; row-gap: 0.75rem; } @media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } } .theme-product-card-wrap.is-extra-hidden { display: none; } .theme-product-card-wrap.is-filtered-out { display: none; } .theme-product-card { display: block; } .theme-product-card__image-wrapper { position: relative; aspect-ratio: 4/5; background: color-mix(in srgb, var(--color-blush) 60%, transparent); overflow: hidden; box-shadow: 0 0 0 1px transparent; transition: box-shadow 0.5s; } .theme-product-card:hover .theme-product-card__image-wrapper { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-blush-deep) 60%, transparent); } .theme-product-card__image { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: transform 1s cubic-bezier(0.25,0.4,0.25,1); } .theme-product-card__image.is-sold-out { opacity: 0.6; } .theme-product-card:hover .theme-product-card__image { transform: scale(1.04); } .theme-product-card__info { position: absolute; right: 1rem; top: 100%; transform: translateY(calc(-100% - 1rem)); max-width: 58%; background: color-mix(in srgb, var(--color-background) 95%, transparent); backdrop-filter: blur(4px); padding: 1rem; border-left: 2px solid var(--color-blush-deep); box-shadow: var(--shadow-soft); transition: top 0.9s cubic-bezier(0.22,0.61,0.36,1), transform 0.9s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.9s; z-index: 3; pointer-events: none; } .theme-product-card:hover .theme-product-card__info { top: 0; transform: translateY(1rem); box-shadow: var(--shadow-elevated); } .theme-product-card__brand { display: block; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 0.375rem; } .theme-product-card__title { font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; line-height: 1.2; margin-bottom: 0.375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s; font-weight: inherit; position: relative; } .theme-product-card__title::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: var(--color-primary); transform-origin: left; transform: scaleX(0); transition: transform 0.5s var(--transition-smooth); } .theme-product-card:hover .theme-product-card__title::after { transform: scaleX(1); } .theme-product-card:hover .theme-product-card__title { color: var(--color-primary); } .theme-product-card__price { font-family: var(--font-body); font-size: 0.8125rem; } .theme-product-card__price .woocommerce-Price-amount { font-family: var(--font-body); } .theme-product-card__badge { position: absolute; top: 1rem; right: 1rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; background: var(--color-foreground); color: var(--color-background); z-index: 3; } .shop-show-more-wrap { display: flex; justify-content: center; margin-top: 2.5rem; } #shop-show-more-btn { padding: 0.75rem 2rem; border: 1px solid var(--color-primary); color: var(--color-primary); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; transition: background-color 0.2s, color 0.2s; } #shop-show-more-btn:hover { background: var(--color-primary); color: var(--color-background); } .shop-empty-state { padding: 5rem 0; text-align: center; border: 1px dashed var(--color-border); } .shop-empty-title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; margin-bottom: 0.5rem; font-weight: inherit; } .shop-empty-text { font-size: 0.875rem; color: var(--color-muted-foreground); font-family: var(--font-body); } /* --------------------------------------------------------------------------- 13. RESOURCES BANNER --------------------------------------------------------------------------- */ .resources-section { padding-top: 5rem; } @media (min-width: 1024px) { .resources-section { padding-top: 7rem; } } .resources-banner { display: block; position: relative; width: 100%; overflow: hidden; } .resources-banner-media { position: relative; width: 100%; aspect-ratio: 16/9; } @media (min-width: 768px) { .resources-banner-media { aspect-ratio: 21/9; } } .resources-banner-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease-out; } .resources-banner:hover .resources-banner-media img { transform: scale(1.03); } .resources-banner-media .scrim-editorial { position: absolute; inset: 0; } .resources-banner-content { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 2.5rem; color: var(--color-foreground); } @media (min-width: 768px) { .resources-banner-content { padding-bottom: 4rem; } } .resources-banner-content .label-eyebrow { color: var(--color-foreground) !important; margin-bottom: 1rem; text-shadow: 0 2px 10px rgb(0 0 0 / 0.8); } .resources-banner-hairline { width: 6rem; margin-bottom: 1.25rem; } .resources-banner-title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.875rem; line-height: 1.05; max-width: 42rem; color: #fff; text-shadow: 0 3px 24px rgb(0 0 0 / 0.75); font-weight: inherit; } @media (min-width: 768px) { .resources-banner-title { font-size: 3rem; } } @media (min-width: 1024px) { .resources-banner-title { font-size: 3.75rem; } } .resources-banner-cta { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-foreground); text-shadow: 0 2px 10px rgb(0 0 0 / 0.8); } /* --------------------------------------------------------------------------- 14. FAQ --------------------------------------------------------------------------- */ .faq-section { margin-top: 6rem; } .faq-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .faq-grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; } } .faq-heading-col { grid-column: 1 / -1; } @media (min-width: 1024px) { .faq-heading-col { grid-column: 1 / span 4; } } .faq-heading-col h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 2.25rem; line-height: 1.05; margin-top: 1rem; font-weight: inherit; } @media (min-width: 768px) { .faq-heading-col h2 { font-size: 3rem; } } .faq-accordion { grid-column: 1 / -1; border-top: 1px solid var(--color-border); } @media (min-width: 1024px) { .faq-accordion { grid-column: 5 / span 8; } } .faq-item { border-bottom: 1px solid var(--color-border); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; text-align: left; } .faq-question-inner { display: flex; align-items: center; gap: 1rem; padding-right: 1rem; min-width: 0; } .faq-icon { flex-shrink: 0; color: var(--color-primary); transition: color 0.5s, transform 0.5s; display: inline-flex; } .faq-item.is-open .faq-icon { color: var(--color-accent); transform: rotate(8deg); } .faq-q-text { font-family: var(--font-display); font-size: 1.125rem; } @media (min-width: 768px) { .faq-q-text { font-size: 1.25rem; } } .faq-question:hover .faq-q-text { color: var(--color-primary); } .faq-toggle-icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 999px; transition: border-color 0.2s; } .faq-question:hover .faq-toggle-icon { border-color: var(--color-primary); } .faq-icon-minus { display: none; } .faq-item.is-open .faq-icon-plus { display: none; } .faq-item.is-open .faq-icon-minus { display: block; } .faq-answer-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.4s var(--transition-smooth), opacity 0.4s var(--transition-smooth); } .faq-item.is-open .faq-answer-wrap { opacity: 1; } .faq-answer { padding-bottom: 1.5rem; padding-right: 3rem; color: var(--color-muted-foreground); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; } /* --------------------------------------------------------------------------- 15. CONTACT CTA BAND --------------------------------------------------------------------------- */ .cta-gradient { background: radial-gradient(60% 80% at 15% 20%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 65%), radial-gradient(55% 75% at 85% 85%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%), radial-gradient(65% 70% at 50% 110%, color-mix(in srgb, var(--color-blush) 70%, transparent), transparent 70%), linear-gradient(140deg, color-mix(in srgb, var(--color-blush) 55%, transparent) 0%, var(--color-background) 55%, color-mix(in srgb, var(--color-highlight) 55%, transparent) 100%); } .contact-cta-band { position: relative; overflow: hidden; margin-top: 6rem; padding: 6rem 0; border-radius: 2px; } @media (min-width: 768px) { .contact-cta-band { padding: 8rem 0; } } .contact-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .contact-cta-band .scrim-editorial { position: absolute; inset: 0; } .contact-cta-inner { position: relative; z-index: 10; text-align: center; color: var(--color-foreground); } .contact-cta-inner .label-eyebrow { color: #fff !important; margin-bottom: 1.25rem; } .contact-cta-title { font-family: var(--font-display); text-transform: uppercase; font-size: 2.25rem; line-height: 1.05; margin-bottom: 2rem; color: #fff; text-shadow: 0 3px 24px rgb(0 0 0 / 0.65); font-weight: inherit; } @media (min-width: 768px) { .contact-cta-title { font-size: 3rem; } } @media (min-width: 1024px) { .contact-cta-title { font-size: 3.75rem; } } .contact-cta-paragraph { max-width: 32rem; margin: 0 auto 2.5rem; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; color: color-mix(in srgb, var(--color-foreground) 85%, transparent); text-shadow: 0 2px 12px rgb(0 0 0 / 0.6); } .contact-cta-btn { display: inline-flex; } /* --------------------------------------------------------------------------- 16. FLOATING SHOP BADGE --------------------------------------------------------------------------- */ .floating-shop-badge { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40; display: flex; align-items: center; gap: 0.75rem; opacity: 0; transform: translateY(20px) scale(0.8); transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth); } .floating-shop-badge.is-visible { opacity: 1; transform: translateY(0) scale(1); } .floating-shop-badge-tooltip { pointer-events: none; opacity: 0; transform: translateX(8px); transition: all 0.3s; background: var(--color-background); border: 1px solid var(--color-border); padding: 0.375rem 0.75rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; box-shadow: var(--shadow-elevated); white-space: nowrap; } .floating-shop-badge:hover .floating-shop-badge-tooltip { opacity: 1; transform: translateX(0); } .floating-shop-badge-circle { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--color-background); border: 1px solid var(--color-border); box-shadow: var(--shadow-elevated); overflow: hidden; display: flex; align-items: center; justify-content: center; transition: transform 0.7s ease-in-out; } .floating-shop-badge:hover .floating-shop-badge-circle { transform: rotate(360deg); } .floating-shop-badge-circle img { width: 100%; height: 100%; object-fit: contain; } /* --------------------------------------------------------------------------- 17. FOOTER --------------------------------------------------------------------------- */ .site-footer { background: var(--color-primary); color: var(--color-primary-foreground); } .site-footer .label-eyebrow, .site-footer .theme-cart-shipping-note { color: color-mix(in srgb, var(--color-primary-foreground) 70%, transparent); } .site-footer-inner { padding-block: 4rem 1.5rem; } @media (min-width: 1024px) { .site-footer-inner { padding-top: 5rem; } } .site-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 768px) { .site-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 4rem; } } .site-footer-logo-link { display: flex; flex-direction: column; align-items: flex-start; } .site-footer-logo-circle { display: inline-flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; border-radius: 999px; background: var(--color-background); padding: 0.75rem; overflow: hidden; } .site-footer-logo-circle img { width: 100%; height: 100%; object-fit: contain; } .site-footer-tagline { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; margin-top: 0.75rem; } .site-footer-nav h4, .site-footer-contact h4 { margin-bottom: 1.25rem; } .site-footer-nav-list, .site-footer-contact ul { display: flex; flex-direction: column; gap: 0.75rem; } .site-footer-nav-list a, .site-footer-contact a, .site-footer-contact li { font-size: 0.875rem; color: color-mix(in srgb, var(--color-primary-foreground) 70%, transparent); font-family: var(--font-body); position: relative; display: inline-block; } .site-footer-nav-list a:hover, .site-footer-contact a:hover { color: var(--color-primary-foreground); } .site-footer-nav-list a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s; } .site-footer-nav-list a:hover::after { transform: scaleX(1); } .site-footer-contact li { display: flex; align-items: center; gap: 0.5rem; } .site-footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--color-primary-foreground) 15%, transparent); display: flex; flex-direction: column; align-items: center; gap: 1rem; } @media (min-width: 640px) { .site-footer-bottom { flex-direction: row; justify-content: space-between; } } .site-footer-copyright, .site-footer-credit { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--color-primary-foreground) 70%, transparent); } .site-footer-credit a { text-decoration: underline; text-underline-offset: 4px; } .site-footer-credit a:hover { color: var(--color-primary-foreground); } /* --------------------------------------------------------------------------- 18. CART DRAWER + OVERLAY --------------------------------------------------------------------------- */ #theme-cart-overlay { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--color-foreground) 30%, transparent); display: none; } body.cart-open #theme-cart-overlay { display: block; animation: fadeIn 0.3s var(--transition-smooth); } #theme-cart-drawer { position: fixed; right: -100%; top: 0; height: 100%; width: 100%; max-width: 32rem; background: var(--color-background); z-index: 51; box-shadow: var(--shadow-elevated); display: flex; flex-direction: column; transition: right 0.4s var(--transition-smooth); } body.cart-open #theme-cart-drawer { right: 0; } #theme-cart-drawer.is-updating { opacity: 0.6; pointer-events: none; } .theme-cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 2rem 2rem 1.25rem; border-bottom: 1px solid var(--color-border); } .theme-cart-drawer-title { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; font-weight: inherit; } .theme-cart-drawer-close { padding: 0.25rem; } .theme-cart-drawer-close:hover { opacity: 0.6; } .theme-cart-drawer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; } .theme-cart-drawer-empty svg { color: var(--color-muted-foreground); margin-bottom: 1.25rem; } .theme-cart-drawer-empty p { color: var(--color-muted-foreground); margin-bottom: 1.5rem; font-family: var(--font-body); } .theme-cart-drawer-items { flex: 1; overflow: auto; padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 2rem; } .theme-cart-item { display: flex; gap: 1.25rem; } .theme-cart-item-image { width: 6rem; height: 8rem; background: var(--color-secondary); overflow: hidden; flex-shrink: 0; display: block; } .theme-cart-item-image img { width: 100%; height: 100%; object-fit: cover; } .theme-cart-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .theme-cart-item-name { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .theme-cart-item-name:hover { opacity: 0.7; } .theme-cart-item-variation { font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.375rem; font-style: italic; } .theme-cart-item-price { font-size: 0.875rem; margin-top: 0.375rem; } .theme-cart-item-controls { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; } .theme-cart-qty { display: flex; align-items: center; border: 1px solid var(--color-border); } .theme-cart-qty button { padding: 0.375rem 0.625rem; } .theme-cart-qty button:hover { background: var(--color-secondary); } .theme-cart-qty-value { padding: 0 0.75rem; font-size: 0.875rem; min-width: 28px; text-align: center; } .theme-cart-remove { font-size: 0.75rem; color: var(--color-muted-foreground); text-decoration: underline; text-underline-offset: 4px; } .theme-cart-remove:hover { color: var(--color-foreground); } .theme-cart-drawer-footer { padding: 1.5rem 2rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 1rem; } .theme-cart-subtotal-row { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-display); font-size: 1.25rem; font-weight: inherit; } .theme-cart-shipping-note { font-size: 0.75rem; color: var(--color-muted-foreground); } .theme-cart-checkout-btn { width: 100%; } /* 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; } /* --------------------------------------------------------------------------- 19. WOOCOMMERCE BUTTON OVERRIDES (Section 11.4.1) --------------------------------------------------------------------------- */ .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-foreground) !important; color: var(--color-background) !important; border: 1px solid var(--color-foreground) !important; border-radius: 0 !important; min-height: 3.5rem !important; padding: 0 1.75rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-body) !important; font-size: 0.75rem !important; font-weight: 500 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; cursor: pointer !important; transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease !important; width: 100%; } .single_add_to_cart_button.button:hover, .add_to_cart_button.button:hover { background-color: var(--color-primary) !important; color: var(--color-primary-foreground) !important; border-color: var(--color-primary) !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-foreground) !important; } .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; } /* --------------------------------------------------------------------------- 20. SINGLE PRODUCT PAGE --------------------------------------------------------------------------- */ .single-product-main { padding: 7rem 0 4rem; } @media (min-width: 1024px) { .single-product-main { padding: 8rem 0 6rem; } } .single-product-breadcrumb { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 1.5rem; } .single-product-breadcrumb a:hover { color: var(--color-foreground); } .single-product-breadcrumb span { margin: 0 0.5rem; } .theme-product-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; min-width: 0; } @media (min-width: 1024px) { .theme-product-layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 3rem; } } @media (min-width: 1280px) { .theme-product-layout { grid-template-columns: minmax(0, 1fr) 480px; } } .theme-product-gallery, .theme-product-info { min-width: 0; max-width: 100%; } .theme-product-main-image-wrap { position: relative; aspect-ratio: 4/5; overflow: hidden; background: color-mix(in srgb, var(--color-secondary) 30%, transparent); } .theme-product-zoom-hint { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 5; display: flex; align-items: center; gap: 0.375rem; background: color-mix(in srgb, var(--color-foreground) 70%, transparent); color: var(--color-background); padding: 0.375rem 0.75rem; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; transition: opacity 0.2s; } .theme-product-main-image { height: 100% !important; } .theme-product-main-image-wrap:hover .theme-product-zoom-hint { opacity: 0; } .theme-product-thumbnails { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; max-width: 100%; } .theme-product-thumb { width: calc(25% - 0.375rem); aspect-ratio: 1/1; overflow: hidden; border: 1px solid transparent; opacity: 0.6; position: relative; transition: all 0.2s; } .theme-product-thumb.is-active { border-color: var(--color-foreground); opacity: 1; } .theme-product-thumb:hover { opacity: 1; } .theme-product-categories { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 0.5rem; } .theme-product-categories a { color: inherit; } .theme-product-title { font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.5; } @media (min-width: 768px) { .theme-product-title { font-size: 1rem; } } .theme-product-sku { margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-muted-foreground); } .theme-product-hairline { margin: 1.75rem 0; } .theme-product-price { font-family: var(--font-body); font-size: 1.125rem; } .theme-stock-status.out-of-stock { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--color-destructive, #d33); font-family: var(--font-body); } .theme-product-note { margin-top: 1.75rem; background: color-mix(in srgb, var(--color-secondary) 70%, transparent); padding: 1rem 1.25rem; font-size: 0.8125rem; font-family: var(--font-body); color: color-mix(in srgb, var(--color-foreground) 85%, transparent); line-height: 1.6; overflow-wrap: break-word; } .theme-product-description { margin-top: 1.75rem; font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.55; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); overflow-wrap: break-word; } .theme-product-description p { margin-bottom: 1rem; } .theme-add-to-cart-area { margin-top: 2rem; display: flex; align-items: stretch; flex-wrap: wrap; gap: 0.75rem; } .theme-quantity-wrapper { display: flex; align-items: center; border: 1px solid var(--color-border); } .theme-quantity-wrapper button { padding: 0 1rem; height: 3.5rem; } .theme-quantity-wrapper button:hover { background: var(--color-secondary); } .theme-qty-input { width: 3rem; text-align: center; border: 0; background: transparent; -moz-appearance: textfield; } .theme-qty-input::-webkit-outer-spin-button, .theme-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .single-product .single_add_to_cart_button { flex: 1 1 auto; min-width: 160px; } .theme-attribute-pills-group { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; } .theme-attribute-label { display: block; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 0.75rem; } .theme-attribute-pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .theme-attribute-pill { min-width: 56px; padding: 0.625rem 1rem; font-size: 0.75rem; letter-spacing: 0.05em; font-family: var(--font-body); border: 1px solid var(--color-border); transition: all 0.2s; } .theme-attribute-pill:hover { border-color: var(--color-foreground); } .theme-attribute-pill.is-selected { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); } .theme-variations-table-hidden, .theme-attr-select-hidden { display: none !important; } .single-product .variations.shop_attributes tbody, .single-product .variations tbody tr, .single-product .variations tbody td { display: block; width: 100%; } .single-product .variations tbody td.label { padding-bottom: 0.25rem; } .single-product .variations tbody td.value { padding-top: 0; } .theme-product-details { margin-top: 2.5rem; } .theme-product-details h2 { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 1.25rem; } .theme-product-details ul { list-style: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; } .theme-product-details li { color: color-mix(in srgb, var(--color-foreground) 80%, transparent); font-family: var(--font-body); font-size: 0.875rem; line-height: 1.6; } .theme-product-details li::marker { color: var(--color-primary); } .single-product .woocommerce-product-details__short-description, .single-product .woocommerce-variation-description, .single-product .posted_in { overflow-wrap: break-word; word-break: break-word; } .related-products-section { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--color-border); } .related-products-heading { font-family: var(--font-display); text-transform: uppercase; font-size: 1.75rem; margin-bottom: 2rem; text-align: center; font-weight: inherit; } .related-products-list { display: grid; } .related-products-list li { list-style: none; } /* --------------------------------------------------------------------------- 21. SHOP ARCHIVE PAGE --------------------------------------------------------------------------- */ .shop-archive-main { padding: 8rem 0 5rem; } .shop-archive-wrap .page-title { font-family: var(--font-display); text-transform: uppercase; font-size: 2.25rem; margin-bottom: 2rem; font-weight: inherit; } .woocommerce-pagination { margin-top: 3rem; text-align: center; } /* --------------------------------------------------------------------------- 22. WOOCOMMERCE NOTICES (Section 14.1) --------------------------------------------------------------------------- */ .single-product .woocommerce-message, .single-product .woocommerce-info { display: none; } #theme-cart-drawer .woocommerce-message { display: none; } .woocommerce-error { background: color-mix(in srgb, var(--color-destructive, #d33) 10%, var(--color-background)); border: 1px solid var(--color-destructive, #d33); padding: 1rem 1.25rem; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.875rem; margin-bottom: 1.5rem; list-style: none; } /* --------------------------------------------------------------------------- 23. GENERIC PAGES / 404 --------------------------------------------------------------------------- */ .generic-page-wrap, .generic-content-main .container-wide { padding-top: 8rem; padding-bottom: 4rem; } .page-title { font-family: var(--font-display); text-transform: uppercase; font-size: 2rem; margin-bottom: 1.5rem; font-weight: inherit; } .error-404-main { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding-top: 6rem; } .error-404-inner { text-align: center; } .error-404-inner h1 { font-size: 2.5rem; margin-bottom: 1rem; } .error-404-inner p { margin-bottom: 1.5rem; color: var(--color-muted-foreground); } .error-404-inner .btn-primary { display: inline-flex; } /* --------------------------------------------------------------------------- 24. CHECKOUT BLOCK (Section 13) --------------------------------------------------------------------------- */ body.woocommerce-checkout .site-main { padding-top: 5rem; padding-bottom: 4rem; } @media (min-width: 1024px) { body.woocommerce-checkout .site-main { padding-top: 5.5rem; } } body.woocommerce-checkout .wc-block-checkout__title, body.woocommerce-checkout .wp-block-woocommerce-checkout-title-block h1 { margin-top: 0 !important; margin-bottom: 0 !important; } body.woocommerce-checkout .wp-block-woocommerce-checkout-title-block { margin-bottom: 0 !important; padding-top: 0 !important; } body.woocommerce-checkout .entry-content, body.woocommerce-cart .entry-content, body.woocommerce-account .entry-content { max-width: 100%; } body.woocommerce-checkout .wc-block-checkout, body.woocommerce-cart .wc-block-cart { font-family: var(--font-body); color: var(--color-foreground); } 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 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--checkout-gap, 2rem); 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-text-input input[type="text"], body.woocommerce-checkout .wc-block-components-text-input input[type="email"], body.woocommerce-checkout .wc-block-components-text-input input[type="tel"], body.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input, body.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control button, body.woocommerce-checkout .wc-block-components-textarea textarea { font-family: var(--font-body) !important; font-size: 0.875rem !important; font-weight: 400 !important; color: var(--color-foreground) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important; background-color: var(--color-background) !important; width: 100% !important; max-width: none !important; box-shadow: none !important; appearance: auto !important; -webkit-appearance: auto !important; padding: revert; } body.woocommerce-checkout .wc-block-components-select { width: 100% !important; max-width: none !important; } body.woocommerce-checkout .wc-block-components-select .wc-block-components-select__container { border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 0 !important; line-height: normal !important; padding: 0 !important; margin: 0 !important; } body.woocommerce-checkout .wc-block-components-select select, body.woocommerce-checkout .wc-block-components-select .wc-block-components-select__select { font-family: var(--font-body) !important; font-size: 0.875rem !important; font-weight: 400 !important; color: var(--color-foreground) !important; background-color: var(--color-background) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important; width: 100% !important; max-width: none !important; box-shadow: none !important; margin: 0 !important; padding: revert !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: none !important; } body.woocommerce-checkout .wc-block-components-select .wc-block-components-select__label { font-family: var(--font-body) !important; font-size: 0.8125rem !important; font-weight: 400 !important; color: var(--color-muted-foreground) !important; } body.woocommerce-checkout .wc-block-components-select .wc-block-components-select__expand { color: var(--color-foreground) !important; fill: currentColor !important; opacity: 0.7 !important; pointer-events: none !important; } body.woocommerce-checkout .wc-block-components-text-input input:focus, body.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input:focus { border-color: var(--color-primary) !important; outline: none !important; box-shadow: 0 0 0 1px var(--color-primary) !important; } body.woocommerce-checkout .wc-block-components-select select:focus, body.woocommerce-checkout .wc-block-components-select .wc-block-components-select__select:focus { border-color: var(--color-primary) !important; border-width: 1px !important; outline: none !important; box-shadow: 0 0 0 1px var(--color-primary) !important; padding: revert !important; } body.woocommerce-checkout .wc-block-components-select .wc-block-components-select__container:focus-within { border: none !important; box-shadow: none !important; outline: none !important; } body.woocommerce-checkout .wc-block-components-text-input input::placeholder { color: var(--color-muted-foreground); } body.woocommerce-checkout .wc-block-components-checkout-place-order-button { background-color: var(--color-primary) !important; color: var(--color-primary-foreground) !important; border-radius: 0 !important; font-family: var(--font-body) !important; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8125rem !important; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover { opacity: 0.9; } body.woocommerce-checkout .wc-block-checkout__sidebar { background-color: color-mix(in srgb, var(--color-secondary) 60%, transparent); border-radius: var(--radius); padding: 2rem; } body.woocommerce-checkout .wc-block-components-notice-banner { border-radius: var(--radius); } /* --------------------------------------------------------------------------- 25. THANK YOU PAGE (Section 22.8) --------------------------------------------------------------------------- */ body.theme-thankyou-page { overflow-x: hidden; } body.theme-thankyou-page .woocommerce-order h2, body.theme-thankyou-page .woocommerce-order-details__title { padding: 0 0 1rem 0; font-family: var(--font-display); font-weight: inherit; display: block; } body.theme-thankyou-page .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; padding: 0; margin: 1.5rem 0; } body.theme-thankyou-page .woocommerce-order-overview li { border: 1px solid var(--color-border); padding: 0.75rem 1.25rem; font-size: 0.8125rem; } body.theme-thankyou-page .woocommerce-order-details table { width: 100%; table-layout: fixed; margin: 1.5rem 0; } 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: 480px; overflow-wrap: break-word; } @media (min-width: 768px) { body.theme-thankyou-page .woocommerce-customer-details { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } body.theme-thankyou-page .woocommerce-customer-details address { min-width: 0; } } /* --------------------------------------------------------------------------- 26. GRID HEIGHT UNIFORMITY / MISC SAFETY (Section 31.9, 15.1) --------------------------------------------------------------------------- */ .theme-product-card-wrap { display: flex; flex-direction: column; height: 100%; } .theme-product-card { display: flex; flex-direction: column; height: 100%; } .faq-question-inner .faq-q-text { min-width: 0; }