/* The Wooden Spoon - Main CSS File */ /* This file imports all component CSS files */ /* Base Styles */ @import url('./base/variables.css'); @import url('./base/reset.css'); /* Component Styles */ @import url('./components/navigation.css'); @import url('./components/hero.css'); @import url('./components/quick-links.css'); @import url('./components/back-to-top.css'); @import url('./components/footer.css'); @import url('./components/location-recommendation.css'); /* Layout Styles */ @import url('./layouts/header.css'); @import url('./layouts/grid.css'); /* Page-Specific Styles */ @import url('./pages/home.css'); @import url('./pages/about.css'); @import url('./pages/locations.css'); @import url('./pages/menus.css'); @import url('./pages/breads.css'); @import url('./pages/social.css'); @import url('./pages/bread-order.css'); @import url('./pages/catering-order.css'); @import url('./pages/confirmation.css'); /* Responsive Styles */ @import url('./responsive/mobile.css'); @import url('./responsive/tablet.css'); @import url('./responsive/desktop.css'); /* Accessibility: keyboard focus visibility */ :focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; } /* Accessibility: skip link for keyboard users */ .ws-skip-link { position: absolute; left: 12px; top: -48px; background: #fff; color: var(--primary-color); border: 2px solid var(--primary-color); padding: 8px 12px; z-index: 2000; border-radius: 6px; font-weight: 700; text-decoration: none; } .ws-skip-link:focus, .ws-skip-link:focus-visible { top: 12px; } /* Accessibility: form-level validation feedback */ .ws-error-summary { border: 2px solid #9c1c34; background: #fff3f5; color: #5e1020; border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; } .ws-error-summary p { margin: 0; font-weight: 700; } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #9c1c34 !important; box-shadow: 0 0 0 2px rgba(156, 28, 52, 0.15); } /* Capitalize display chrome only — NOT body text, messages, emails, or names. (A previous blanket `body, body *` rule Title-Cased everything, which mangled email addresses like ".Com" and capitalized every word of chat messages.) */ /* Capitalize headings */ h1, h2, h3, h4, h5, h6 { text-transform: capitalize; } /* Capitalize navigation */ .ws-nav-list a, .ws-footer-nav a { text-transform: capitalize; } /* Capitalize buttons */ .ws-hero-btn, .ws-submit-btn, .ws-add-item-btn { text-transform: capitalize; } /* Capitalize form labels */ label { text-transform: capitalize; } /* Enhanced Mobile Optimizations */ @media (max-width: 768px) { /* Ensure text doesn't cause overflow on mobile */ .ws-location-title, .ws-location-info p, .ws-location-btn { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } /* Prevent iframe overflow on mobile */ iframe { max-width: 100% !important; width: 100% !important; } /* Ensure all content stays within bounds */ .ws-location, .ws-location-map, .ws-location-actions { max-width: 100%; overflow: hidden; } /* Improve touch targets */ button, .ws-btn, .ws-nav-toggle, .ws-back-to-top { min-height: 44px; min-width: 44px; } /* Prevent horizontal scrolling WITHOUT breaking fixed bars on iOS. Any non- visible overflow on makes iOS Safari treat body as the containing block for `position: fixed` children, so the sticky order bar / back-to-top stop tracking the viewport (they slide under the footer, or snap to the top of the page). Clip on the ROOT instead: the root's overflow is propagated to the viewport, killing horizontal scroll while leaving every fixed element pinned to the viewport. Body keeps no overflow constraint. */ html { overflow-x: clip; } body { width: 100%; max-width: 100%; } /* Improve form inputs on mobile */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { font-size: 16px !important; /* Prevents zoom on iOS */ padding: 12px 16px; border-radius: 8px; } /* Better spacing for mobile */ .ws-form-group { margin-bottom: 24px; } /* Improve modal positioning */ .ws-modal { padding: 16px; } .ws-modal-content { width: 100%; max-width: 95%; margin: 20px auto; } } /* Extra small mobile optimizations */ @media (max-width: 480px) { /* Reduce padding for very small screens */ .ws-container, .ws-form-section, .ws-main-card { padding-left: 12px; padding-right: 12px; } /* Stack form elements vertically */ .ws-form-top-section { grid-template-columns: 1fr; gap: 24px; } /* Improve button sizing */ .ws-btn, .ws-hero-btn, .ws-submit-btn { width: 100%; max-width: 100%; padding: 14px 20px; font-size: 1rem; } /* Better image handling */ img { max-width: 100%; height: auto; } /* Improve navigation on very small screens */ .ws-nav { padding: 0 12px; } .ws-nav-list li a { padding: 12px 16px; font-size: 0.95rem; } } /* Landscape orientation fixes */ @media (max-width: 768px) and (orientation: landscape) { .ws-hero { min-height: 40vh; max-height: 50vh; } .ws-hero-title { font-size: 1.6rem; } .ws-hero-tagline { font-size: 1rem; } /* Adjust modal for landscape */ .ws-modal-content { max-height: 90vh; overflow-y: auto; } } /* High DPI display optimizations */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ws-nav-logo img, .ws-hero-logo { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { /* Basic dark mode adjustments */ .ws-modal { background-color: rgba(0, 0, 0, 0.8); } .ws-modal-content { background-color: #2a2a2a; color: #ffffff; } }