/* ============================================= Wild Valley Coffee - Theme Base System Shared across all themes. DO NOT modify - structure is permanently fixed. ============================================= */ /* ============================================= 1. CSS RESET ============================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; } /* ============================================= 2. THEME CLASS SYSTEM Root class selector for CSS-only theming. Add class to : theme-pure-white | theme-coffee-wood | theme-dark-gentleman ============================================= */ /* ============================================= 3. CSS CUSTOM PROPERTIES (Theme-Defined) Each theme file defines these on its root class. ============================================= */ /* ============================================= 4. GLOBAL TRANSITIONS & ANIMATIONS ============================================= */ html { --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); --transition-bounce: 600ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* All interactive elements get consistent transitions */ a, button, input, select, textarea, .wv-btn, .wv-card, .wv-nav-link, .wv-footer-link, .wv-product-card, .wv-value-icon, .wv-testimonial, .wv-blog-card, .wv-modal-close, .wv-cart-remove, .wv-badge, .wv-pagination a, .wv-tab, [class*="hover\:"] { transition: var(--transition-base); } /* ============================================= 5. SECTION ENTRANCE ANIMATIONS ============================================= */ main > section { animation: sectionFadeIn 0.6s ease-out both; } main > section:nth-child(2) { animation-delay: 0.1s; } main > section:nth-child(3) { animation-delay: 0.2s; } main > section:nth-child(4) { animation-delay: 0.3s; } main > section:nth-child(5) { animation-delay: 0.4s; } @keyframes sectionFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ============================================= 6. NAVIGATION - DUAL STATE Default state + scroll sticky state ============================================= */ nav.wv-nav, nav[class*="sticky"] { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } /* Scroll state - applied by JS when scrolling */ nav.wv-nav--scrolled, nav[class*="sticky"].wv-nav--scrolled { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ============================================= 7. NAVIGATION - DROPDOWN ============================================= */ nav [x-show="shopOpen"] { border-radius: var(--radius-sm, 4px); box-shadow: var(--shadow-elevated, 0 4px 20px rgba(0,0,0,0.1)); } /* ============================================= 8. MOBILE HAMBURGER MENU ============================================= */ /* Hamburger button states */ nav button[x-data*="mobileOpen"] svg { transition: transform var(--transition-base), opacity var(--transition-base); } /* Mobile menu slide-in */ nav [x-show="mobileOpen"][x-cloak] { display: none; } nav [x-show="mobileOpen"]:not([x-cloak]) { animation: mobileMenuSlideIn 0.3s ease-out both; } @keyframes mobileMenuSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================= 9. BUTTONS - FULL STATE COVERAGE ============================================= */ /* Base button transition */ .wv-btn { position: relative; overflow: hidden; transition: all var(--transition-base); } /* Loading state */ .wv-btn--loading { pointer-events: none; opacity: 0.8; } .wv-btn--loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btnSpin 0.6s linear infinite; margin-left: 8px; vertical-align: middle; } @keyframes btnSpin { to { transform: rotate(360deg); } } /* Button press effect */ .wv-btn:active:not(.wv-btn--disabled):not(.wv-btn--loading) { transform: scale(0.97); } /* Text link button */ .wv-btn--text { background: none !important; border: none !important; padding: 0 !important; color: inherit; } .wv-btn--text:hover { opacity: 0.8; } /* ============================================= 10. PRODUCT CARDS - FULL STYLING ============================================= */ .wv-product-card { position: relative; overflow: hidden; } .wv-product-card-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 10; } /* Badge variants */ .wv-badge--new, .wv-badge--hot, .wv-badge--sale, .wv-badge--limited, .wv-badge--bestseller { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--radius-sm, 3px); line-height: 1.4; } /* Card hover lift effect */ .wv-card, .wv-product-card { transition: transform var(--transition-base), box-shadow var(--transition-base); } .wv-card:hover, .wv-product-card:hover { transform: translateY(-3px); } .wv-card--no-lift:hover { transform: none; } /* Product image zoom on hover */ .wv-product-card-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .wv-product-card:hover .wv-product-card-image img, .group:hover .wv-product-card-image img { transform: scale(1.05); } /* Text truncation for product cards */ .wv-product-card-name, .wv-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================= 11. SECTION HEADERS ============================================= */ .wv-section-header { position: relative; } /* Decorative accent bar on section titles */ .wv-section-header::before { content: ''; display: block; width: 40px; height: 3px; border-radius: 2px; margin: 0 auto 16px; background: var(--brand-gold, #B8922E); } .wv-section-header--left::before { margin: 0 0 16px 0; } /* Remove for newsletter and hero sections */ .wv-hero-full .wv-section-header::before, .wv-newsletter .wv-section-header::before { display: none; } /* ============================================= 12. DIVIDERS ============================================= */ /* Solid divider */ .wv-divider--solid { border: none; border-top: 1px solid var(--border-light, #E5E7EB); margin: 0; } /* Gradient divider */ .wv-divider--gradient { border: none; height: 1px; background: linear-gradient(to right, transparent, var(--brand-gold, #B8922E), transparent); margin: 0; } /* Dashed divider */ .wv-divider--dashed { border: none; border-top: 1px dashed var(--border-medium, #D1D5DB); margin: 0; } /* Section spacing */ .wv-section, .wv-section--sm, .wv-section--lg, .wv-section--alt { position: relative; } /* ============================================= 13. FORMS & INPUTS - FULL STATE COVERAGE ============================================= */ .wv-input { transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } /* Focus state */ .wv-input:focus { box-shadow: 0 0 0 3px var(--brand-gold-transparent, rgba(184, 146, 46, 0.15)); } /* Read-only state */ .wv-input[readonly] { opacity: 0.7; cursor: default; } /* Disabled state */ .wv-input:disabled { opacity: 0.5; cursor: not-allowed; } /* Error state */ .wv-input--error { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2); } /* Search box */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; } /* ============================================= 14. FOOTER ============================================= */ .wv-footer { position: relative; } /* Footer top decorative bar */ .wv-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--brand-coffee, #6F4E37), var(--brand-gold, #B8922E), var(--brand-coffee, #6F4E37)); } /* Footer social icon hover */ .wv-footer-social a { transition: all var(--transition-base); border-radius: var(--radius-sm, 6px); } .wv-footer-social a:hover { transform: translateY(-2px); } /* Footer link underline effect */ .wv-footer-link { position: relative; display: inline-block; } .wv-footer-link::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 0; height: 1px; background: currentColor; transition: width var(--transition-base); } .wv-footer-link:hover::after { width: 100%; } /* ============================================= 15. MODAL / OVERLAY ============================================= */ .wv-overlay { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .wv-modal-panel { border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-modal, 0 20px 60px rgba(0,0,0,0.3)); } .wv-modal-close:hover { transform: rotate(90deg) scale(1.1); } /* ============================================= 16. GLOBAL STATUS COLORS ============================================= */ /* Success */ .wv-alert--success { background: var(--color-success-bg, #F0FDF4); border-color: var(--color-success-border, #BBF7D0); color: var(--color-success-text, #166534); } /* Warning */ .wv-alert--warning { background: var(--color-warning-bg, #FFFBEB); border-color: var(--color-warning-border, #FDE68A); color: var(--color-warning-text, #92400E); } /* Info */ .wv-alert--info { background: var(--color-info-bg, #EFF6FF); border-color: var(--color-info-border, #BFDBFE); color: var(--color-info-text, #1E40AF); } /* Error */ .wv-alert--error { background: var(--color-error-bg, #FEF2F2); border-color: var(--color-error-border, #FECACA); color: var(--color-error-text, #991B1B); } /* Status dot indicators */ .wv-status-dot--success { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success-text, #166534); } .wv-status-dot--warning { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning-text, #92400E); } .wv-status-dot--error { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-error-text, #991B1B); } .wv-status-dot--info { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-info-text, #1E40AF); } /* ============================================= 17. LINKS ============================================= */ a:not(.wv-btn):not(.wv-footer-link):not(.wv-nav-link):not(.wv-blog-card-title):not(.wv-sidebar-link) { transition: color var(--transition-fast); } a:hover { text-decoration: none; } /* ============================================= 18. TEXT LAYER SYSTEM Primary / Regular / Muted ============================================= */ .wv-text--primary { color: var(--text-primary, #1A1A1A); } .wv-text--regular { color: var(--text-secondary, #6B7280); } .wv-text--muted { color: var(--text-muted, #9CA3AF); } /* ============================================= 19. ICON SYSTEM ============================================= */ .wv-icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex-shrink: 0; transition: transform var(--transition-fast); } .wv-icon--hover:hover { transform: scale(1.15); } /* ============================================= 20. SCROLLBAR ============================================= */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { cursor: pointer; } /* ============================================= 21. SELECTION ============================================= */ ::selection { background: var(--brand-gold, #B8922E); color: white; } /* ============================================= 22. LIST STYLING ============================================= */ /* Regular list items hover */ .wv-list-item { transition: background var(--transition-fast), padding-left var(--transition-fast); } .wv-list-item:hover { padding-left: 4px; } /* ============================================= 23. RESPONSIVE - Mobile adjustments ============================================= */ @media (max-width: 1023px) { /* Tablet grid adjustments */ .wv-grid-4 { grid-template-columns: repeat(2, 1fr) !important; } .wv-grid-5 { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 639px) { /* Single column on mobile */ .wv-grid-2, .wv-grid-3, .wv-grid-4, .wv-grid-5 { grid-template-columns: 1fr !important; } /* Mobile padding adjustments */ .wv-section, .wv-section--sm, .wv-section--lg, .wv-section--alt { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* Hero text scaling */ .wv-hero-full-title { font-size: 2.25rem !important; line-height: 1.2 !important; } /* Section title scaling */ .wv-section-title { font-size: 1.75rem !important; } /* Ensure buttons are full-width on mobile */ .wv-btn--lg { width: 100%; } /* Product card image stays proportional */ .wv-product-card-image { aspect-ratio: 4/3 !important; } /* Footer mobile colapse */ .wv-footer-grid { gap: 2rem !important; } /* Modal full width on mobile */ .wv-modal-panel { max-width: calc(100vw - 32px) !important; margin: 0 16px; } /* Newsletter form stack */ .wv-newsletter-form { flex-direction: column; } .wv-newsletter-input { width: 100%; } /* Mobile nav adjustments */ nav [x-show="mobileOpen"] { max-height: calc(100vh - 64px); overflow-y: auto; } /* Cart sidebar full width */ .wv-cart-sidebar { max-width: 100% !important; } } /* ============================================= 24. FOCUS VISIBLE ============================================= */ :focus-visible { outline: 2px solid var(--brand-gold, #B8922E); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* ============================================= 25. PRINT ============================================= */ @media print { nav, .wv-footer, .wv-cart-sidebar, .wv-cookie-bar, .wv-newsletter, .wv-live-chat { display: none !important; } }