/* ===========================
COOLBAKES - RESET & VARIABLES
=========================== */
/* Fonts are loaded from a in each page's , not with @import.
An @import here is fetched only after this stylesheet arrives, which delays
first paint. Two families only: Manrope for UI text, Crimson Text for the
serif headings. */
:root {
/* Colors
--primary is the brand brown; --accent is the deep green already used for the
menu section bars, promoted here so prices, links, and calls to action actually
stand out. The old cocoa brown lives on as --brown-accent for gradients and
other decorative fills, which should stay in the brown family. */
--primary: #896D45; /* Warm brown/gold — 4.53:1 on cream, meets WCAG AA */
--primary-dark: #6B4E2D; /* Darker brown */
--primary-light: #D4A574; /* Light tan — decorative only, 2.1:1 (never for text) */
--accent: #1F5B4F; /* Deep green — 7.36:1 on cream. Highlights and actions */
--brown-accent: #8B6B4A; /* Cooler cocoa brown — decorative fills and gradients */
--accent-light: #B08968; /* Muted caramel */
--text-dark: #2C2C2C;
--text-light: #666;
--bg-light: #F9F7F4; /* Cream */
--bg-white: #FFFFFF;
--border: #E8E3D8;
--success: #4CAF50;
--error: #E74C3C;
/* Typography — two families, loaded via in each page head */
--font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Headers */
--font-serif: 'Crimson Text', Georgia, serif; /* Serif accent headers */
--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Body */
--font-mono: 'Courier New', monospace;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.15);
/* Z-index */
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal: 400;
}
/* ===========================
ACCESSIBILITY
=========================== */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--primary);
color: white;
padding: 8px 16px;
z-index: 100;
text-decoration: none;
font-weight: 600;
}
.skip-link:focus {
top: 0;
left: 0;
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Focus visible for better keyboard navigation */
*:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ===========================
GLOBAL STYLES
=========================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
color: var(--text-dark);
background-color: var(--bg-white);
overflow-x: hidden;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--text-dark);
margin: var(--space-md) 0;
font-weight: 600;
line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: var(--space-md);
}
a {
color: var(--primary);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover, a:focus {
color: var(--accent);
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ===========================
BUTTONS & FORMS
=========================== */
button, .btn, input[type="submit"], input[type="button"] {
display: inline-block;
padding: 12px 32px;
background-color: var(--primary);
color: var(--bg-white);
border: 2px solid var(--primary);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 1rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
font-weight: 600;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
button::before, .btn::before,
input[type="submit"]::before, input[type="button"]::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
button:hover::before, .btn:hover::before,
input[type="submit"]:hover::before, input[type="button"]:hover::before {
width: 300px;
height: 300px;
}
button:hover, .btn:hover,
input[type="submit"]:hover, input[type="button"]:hover {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(139, 111, 71, 0.25);
}
button:focus, .btn:focus,
input[type="submit"]:focus, input[type="button"]:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn-secondary {
background-color: var(--accent);
border-color: var(--accent);
}
.btn-secondary:hover {
background-color: #8A5F3F;
border-color: #8A5F3F;
}
/* Form Elements */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"],
textarea,
select {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--border);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background-color: var(--bg-white);
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(139, 111, 71, 0.15);
background-color: var(--bg-white);
}
textarea {
resize: vertical;
min-height: 120px;
font-family: var(--font-sans);
}
select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6F47' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 24px;
padding-right: 40px;
}
/* ===========================
CONTAINER & LAYOUT
=========================== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.container-sm {
max-width: 800px;
margin: 0 auto;
padding: 0 40px;
}
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
}
.row-2 {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
.row-3 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.row-4 {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
section {
padding: var(--space-2xl) 0;
}
section:nth-child(even) {
background-color: var(--bg-light);
}
/* ===========================
HEADER & NAVIGATION
=========================== */
header {
background-color: var(--bg-white);
border-bottom: 2px solid var(--border);
position: sticky;
top: 0;
z-index: var(--z-sticky);
box-shadow: var(--shadow-sm);
}
.header-container {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.3rem 0;
gap: 1rem;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
text-decoration: none;
transition: transform 0.2s ease;
flex-shrink: 0;
width: 118px;
height: 118px;
overflow: visible;
}
.logo:hover {
transform: scale(1.05);
}
.logo-img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
nav {
margin-left: auto;
}
nav ul {
display: flex;
list-style: none;
gap: 0.28rem;
align-items: center;
flex-wrap: nowrap;
}
nav a {
color: var(--text-dark);
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0.75rem 0.72rem;
border-bottom: 3px solid transparent;
text-decoration: none;
position: relative;
display: inline-block;
white-space: nowrap;
font-size: 0.94rem;
}
nav a:focus {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 4px;
}
nav a:focus:not(:focus-visible) {
outline: none;
}
nav a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 4px;
}
nav a::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 3px;
background: var(--accent);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
nav a:hover {
color: var(--accent);
outline: none;
}
nav a:hover::after {
width: 100%;
}
nav a.active {
color: var(--primary);
border-bottom-color: var(--primary);
font-weight: 600;
}
nav a.active::after {
display: none;
}
nav a.btn,
nav a.btn:hover,
nav a.btn:focus,
nav a.btn:focus-visible,
nav a.btn.active,
nav a.btn[aria-current="page"],
nav a.btn:active {
color: var(--bg-white);
border-bottom-color: transparent;
outline: none;
-webkit-text-fill-color: var(--bg-white);
}
nav a.btn::after,
nav a.btn:hover::after,
nav a.btn.active::after,
nav a.btn[aria-current="page"]::after {
display: none;
}
nav a.btn:hover {
transform: translateY(-2px);
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-dark);
padding: 0;
min-width: 40px;
min-height: 40px;
box-shadow: none;
overflow: visible;
flex-shrink: 0;
}
.mobile-menu-btn::before {
display: none;
}
.mobile-menu-btn:hover {
background: none;
border-color: transparent;
transform: none;
box-shadow: none;
}
.mobile-quick-links {
display: none;
}
@media (max-width: 1180px) {
.container,
.container-sm {
padding: 0 24px;
}
.logo-img {
object-fit: contain;
}
.logo {
width: 104px;
height: 104px;
}
nav a {
font-size: 0.9rem;
padding: 0.72rem 0.52rem;
}
}
/* ===========================
HERO SECTION
=========================== */
.hero {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
color: var(--bg-white);
padding: 6rem var(--space-lg);
text-align: center;
position: relative;
overflow: hidden;
}
/* ===========================
TRUST STRIP
Sits directly under the hero. The Smiley kontrolrapport is a Danish
food-safety mark and the strongest local trust signal we have, so it
belongs here rather than buried in the footer.
=========================== */
.trust-strip {
background: var(--bg-white);
border-bottom: 1px solid var(--border);
}
.trust-strip-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 14px 36px;
flex-wrap: wrap;
padding: 16px 0;
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.88rem;
font-weight: 500;
color: var(--text-light);
}
.trust-item svg {
width: 20px;
height: 20px;
color: var(--accent);
flex-shrink: 0;
}
.trust-item-smiley img {
height: 36px;
width: auto;
display: block;
}
@media (max-width: 700px) {
.trust-strip-inner { gap: 10px 20px; padding: 12px 0; }
.trust-item { font-size: 0.78rem; gap: 7px; }
.trust-item svg { width: 17px; height: 17px; }
.trust-item-smiley img { height: 30px; }
}
/* ===========================
STICKY ORDER BAR (phones only)
=========================== */
.mobile-order-bar { display: none; }
@media (max-width: 768px) {
.mobile-order-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-fixed);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(8px);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 18px rgba(57, 37, 16, 0.10);
}
.mobile-order-bar-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mobile-order-bar-text strong { font-size: 0.86rem; color: var(--text-dark); }
.mobile-order-bar-text span { font-size: 0.72rem; color: var(--text-light); }
.mobile-order-bar-btn {
flex-shrink: 0;
background: var(--accent);
color: #fff;
border-radius: 8px;
padding: 10px 26px;
font-weight: 700;
font-size: 0.92rem;
text-decoration: none;
}
.mobile-order-bar-btn:hover,
.mobile-order-bar-btn:focus { background: #17463D; color: #fff; }
/* keep the bar from covering the footer's last line */
body { padding-bottom: 68px; }
}
/* Homepage hero: real photography behind the brand gradient.
The gradient stays opaque enough to keep the headline at accessible contrast. */
.hero--photo {
background-image:
linear-gradient(135deg, rgba(60, 41, 20, 0.86), rgba(107, 78, 45, 0.74)),
url('/image/puff-puff/puff-puff-bowl.webp');
background-size: cover;
background-position: center 55%;
background-repeat: no-repeat;
padding: 7rem var(--space-lg);
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: moveBackground 20s linear infinite;
z-index: 0;
}
@keyframes moveBackground {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.hero .container {
position: relative;
z-index: 1;
}
.hero h1 {
color: var(--bg-white);
font-size: 3rem;
margin-bottom: var(--space-md);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.hero p {
font-size: 1.25rem;
margin-bottom: var(--space-lg);
opacity: 0.95;
}
.hero .cta-button {
margin: 0 var(--space-sm);
}
/* ===========================
CARDS
=========================== */
.card {
background-color: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(160, 113, 79, 0.1), rgba(212, 165, 116, 0.1));
transition: left 0.3s ease;
pointer-events: none;
}
.card:hover::before {
left: 0;
}
.card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
border-color: var(--accent);
}
.card-image {
width: 100%;
height: 250px;
background: linear-gradient(135deg, var(--bg-light), var(--border));
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
font-size: 3rem;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-title {
font-size: 1.25rem;
margin-bottom: var(--space-sm);
color: var(--text-dark);
}
.card-description {
color: var(--text-light);
margin-bottom: var(--space-md);
font-size: 0.95rem;
}
.card-price {
font-size: 1.5rem;
color: var(--accent);
font-weight: bold;
margin-bottom: var(--space-sm);
}
.card-meta {
font-size: 0.85rem;
color: var(--text-light);
margin-bottom: var(--space-md);
}
/* ===========================
PRODUCT CARDS (Homepage)
=========================== */
.product-card {
background-color: var(--bg-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.product-card-image {
width: 100%;
height: 260px;
background: linear-gradient(135deg, rgba(139, 111, 71, 0.08), rgba(160, 113, 79, 0.08));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.product-card:hover .product-card-image img {
transform: scale(1.06);
}
.card-body {
padding: 28px;
}
.card-body h3 {
font-size: 1.25rem;
margin-bottom: 12px;
color: var(--primary);
}
.card-body p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 18px;
}
.card-link {
color: var(--accent);
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.card-link:hover {
color: var(--primary);
}
/* ===========================
FEATURE CARDS
=========================== */
.feature-card {
padding: 32px;
background: var(--bg-white);
border-radius: var(--radius-lg);
border-left: 4px solid var(--accent);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--brown-accent), var(--primary));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.feature-icon svg {
width: 26px;
height: 26px;
color: #fff;
}
.feature-card h3 {
font-size: 1.2rem;
color: var(--primary);
margin-bottom: 12px;
font-weight: 600;
}
.feature-card p {
color: var(--text-light);
line-height: 1.7;
font-size: 0.95rem;
}
/* ===========================
SECTION VARIANTS
=========================== */
.section-featured {
padding: 48px 0;
background-color: var(--bg-light);
}
.section-why {
padding: 48px 0;
}
.section-cta {
padding: 60px 0;
text-align: center;
}
.section-title {
text-align: center;
font-size: 2.2rem;
margin-bottom: var(--space-2xl);
color: var(--primary);
}
/* ===========================
GRID LAYOUTS
=========================== */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 36px;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ===========================
HERO ENHANCEMENTS
=========================== */
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 2rem;
}
.btn-outline {
min-width: 180px;
padding: 12px 28px;
font-size: 1rem;
border: 2px solid var(--primary);
background: rgba(139, 111, 71, 0.08);
color: var(--primary);
font-weight: 700;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.hero .btn-outline {
border-color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: white;
}
.hero .btn-outline:hover {
background: rgba(255, 255, 255, 0.2);
border-color: white;
}
/* ===========================
ANIMATIONS
=========================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-up {
animation: fadeInUp 0.6s ease-out both;
}
.animate-up-delay-1 {
animation: fadeInUp 0.6s ease-out 0.1s both;
}
.animate-up-delay-2 {
animation: fadeInUp 0.6s ease-out 0.2s both;
}
/* Section & grid responsive */
@media (max-width: 768px) {
.section-featured,
.section-why,
.section-cta {
padding: var(--space-xl) 0;
}
.section-title {
font-size: 1.5rem;
margin-bottom: 30px;
}
.product-grid,
.feature-grid {
gap: 24px;
}
.feature-card {
padding: 24px;
}
.hero-buttons {
flex-direction: column;
align-items: stretch;
}
.hero-buttons .btn,
.hero-buttons .btn-outline {
text-align: center;
justify-content: center;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
/* ===========================
FOOTER
=========================== */
footer {
background-color: var(--primary-dark);
color: var(--bg-white);
padding: 60px 0 40px;
margin-top: var(--space-2xl);
border-top: 3px solid var(--accent);
}
footer a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: color 0.3s ease;
}
footer a:hover {
color: var(--accent-light);
}
/* Multi-column footer grid */
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
.footer-col h4 {
color: #fff;
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 1.25rem;
letter-spacing: 0.02em;
}
.footer-col p,
.footer-col li {
font-size: 1rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.7;
}
.footer-col ul {
list-style: none;
padding: 0;
}
.footer-col ul li {
margin-bottom: 0.6rem;
}
.footer-col ul li a {
position: relative;
padding-bottom: 2px;
font-size: 1rem;
}
.footer-col ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: var(--accent-light);
transition: width 0.3s ease;
}
.footer-col ul li a:hover::after {
width: 100%;
}
.footer-social {
display: flex;
gap: 0.85rem;
list-style: none;
align-items: center;
margin-top: 1rem;
}
.footer-social li a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: white;
transition: all 0.3s ease;
}
.footer-social li a svg {
width: 22px;
height: 22px;
display: block;
}
.footer-social li a:hover {
background-color: var(--accent);
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(139, 107, 74, 0.3);
}
.footer-social li a:hover::after {
display: none;
}
.footer-smiley {
display: inline-flex;
align-items: center;
margin-top: 1rem;
}
.footer-smiley a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
opacity: 0.85;
transition: opacity 0.3s ease;
}
.footer-smiley a:hover {
opacity: 1;
}
.footer-smiley img {
height: 40px;
width: auto;
border-radius: 4px;
background-color: #fff;
padding: 3px 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.15);
padding-top: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copyright {
font-size: 1rem;
color: rgba(255, 255, 255, 0.6);
}
/* Footer responsive */
@media (max-width: 768px) {
footer {
padding: 40px 0 30px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.footer-bottom {
justify-content: center;
text-align: center;
}
.footer-copyright {
width: 100%;
}
}
@media (max-width: 480px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* ===========================
UTILITY CLASSES
=========================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.py-lg { padding: var(--space-lg) 0; }
.py-2xl { padding: var(--space-2xl) 0; }
.hidden { display: none !important; }
.visible { display: block !important; }
.screen-reader-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ===========================
RESPONSIVE DESIGN
=========================== */
@media (max-width: 768px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
.container {
padding: 0 var(--space-md);
}
.hero {
padding: 3rem var(--space-md);
}
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.mobile-menu-btn {
display: block;
width: 40px;
min-width: 40px;
min-height: 40px;
margin: 0;
margin-left: 4px;
padding: 0;
align-self: center;
}
.header-container {
position: relative;
gap: 0.5rem;
padding: 0.4rem 0;
}
.logo {
width: 86px;
height: 86px;
}
.mobile-quick-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
gap: 0.35rem;
flex: 1 1 auto;
min-width: 0;
margin-left: auto;
}
.mobile-quick-links a {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 0.45rem 0.25rem;
text-align: center;
font-size: 0.84rem;
font-weight: 600;
color: var(--text-dark);
text-decoration: none;
white-space: nowrap;
}
.mobile-quick-links a:nth-child(-n + 2) {
font-size: calc(0.84rem + 1.5px);
}
.mobile-quick-links a:last-child {
background: var(--primary);
color: #fff;
padding: 0.55rem 0.25rem;
border-radius: var(--radius-md);
font-size: 0.8rem;
}
.nav-desktop-only {
display: none !important;
}
nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
margin-left: 0;
background-color: var(--bg-white);
flex-direction: column;
gap: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
z-index: calc(var(--z-sticky) + 1);
}
nav.active {
max-height: 600px;
padding-bottom: var(--space-sm);
box-shadow: var(--shadow-md);
}
nav .btn-primary {
margin: var(--space-sm) var(--space-md);
text-align: center;
}
nav ul {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
}
nav li {
border-bottom: 1px solid var(--border);
}
nav a {
display: block;
padding: var(--space-md);
}
section {
padding: var(--space-xl) 0;
}
.row {
grid-template-columns: 1fr;
}
.row-2 {
grid-template-columns: 1fr;
}
.row-3 {
grid-template-columns: 1fr;
}
.row-4 {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.header-container {
gap: 0.4rem;
}
.mobile-quick-links {
gap: 0.25rem;
}
.mobile-quick-links a {
font-size: 0.78rem;
padding: 0.42rem 0.2rem;
}
.mobile-quick-links a:nth-child(-n + 2) {
font-size: calc(0.78rem + 1.5px);
}
.mobile-quick-links a:last-child {
padding: 0.5rem 0.2rem;
}
.mobile-menu-btn {
width: 38px;
min-width: 38px;
min-height: 38px;
margin-left: 2px;
}
}
@media (max-width: 480px) {
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
button, .btn {
width: 100%;
margin-top: var(--space-sm);
}
.header-container {
gap: 0.3rem;
}
.logo {
width: 74px;
height: 74px;
}
.mobile-quick-links a {
font-size: 0.75rem;
padding: 0.38rem 0.12rem;
}
.mobile-quick-links a:nth-child(-n + 2) {
font-size: calc(0.75rem + 1.5px);
}
.mobile-quick-links a:last-child {
font-size: 0.76rem;
}
.mobile-menu-btn {
width: 36px;
min-width: 36px;
min-height: 36px;
margin-top: 0;
margin-left: 0;
padding: 0;
}
.mobile-menu-btn svg {
display: block;
margin: 0 auto;
}
}
/* ===========================
GALLERY & TABS
=========================== */
.gallery-container {
margin: var(--space-2xl) 0;
background-color: var(--bg-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.gallery-tabs {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid var(--border);
background-color: var(--bg-light);
}
.gallery-tab-btn {
flex: 1;
min-width: 150px;
padding: var(--space-md);
background: none;
border: none;
border-bottom: 3px solid transparent;
color: var(--text-light);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.gallery-tab-btn:hover {
color: var(--primary);
background-color: rgba(139, 111, 71, 0.05);
}
.gallery-tab-btn.active {
color: var(--bg-white);
background-color: var(--primary);
border-bottom-color: var(--accent);
}
.gallery-content {
display: none;
padding: var(--space-xl);
animation: fadeIn 0.3s ease;
}
.gallery-content.active {
display: block;
}
.gallery-item {
text-align: center;
margin-bottom: var(--space-xl);
}
.gallery-image-placeholder {
width: 100%;
max-width: 500px;
height: 300px;
margin: 0 auto var(--space-lg);
background: linear-gradient(135deg, var(--bg-light), var(--border));
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
font-size: 3rem;
border: 2px dashed var(--border);
}
.gallery-item h3 {
color: var(--primary);
margin-bottom: var(--space-sm);
}
.gallery-item p {
color: var(--text-light);
font-size: 0.95rem;
max-width: 600px;
margin: 0 auto var(--space-md);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.gallery-tab-btn {
min-width: 120px;
padding: var(--space-sm) var(--space-md);
font-size: 0.9rem;
}
.gallery-content {
padding: var(--space-lg);
}
.gallery-image-placeholder {
height: 200px;
font-size: 2rem;
}
}
/* Contact Links */
.contact-links {
display: flex;
gap: var(--space-lg);
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background-color: rgba(139, 111, 71, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
color: var(--primary);
}
.contact-icon:hover,
.contact-icon:focus {
background-color: var(--primary);
transform: translateY(-4px);
}
.contact-icon:hover svg,
.contact-icon:focus svg {
filter: brightness(0) invert(1);
}
/* ── Image Lightbox ─────────────────────────── */
.img-lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.88);
z-index: var(--z-modal);
align-items: center;
justify-content: center;
padding: 24px;
animation: lb-fade 0.2s ease;
}
.img-lightbox.open {
display: flex;
}
.img-lightbox-inner {
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.img-lightbox-photo {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 8px;
cursor: zoom-in;
transition: transform 0.3s ease;
transform-origin: center center;
-webkit-user-select: none;
user-select: none;
}
.img-lightbox-photo.zoomed {
cursor: zoom-out;
transform: scale(2);
}
.img-lightbox-close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: #fff;
font-size: 2.2rem;
line-height: 1;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
z-index: 1;
}
.img-lightbox-close:hover {
opacity: 1;
}
.product-card-image {
cursor: zoom-in;
}
@keyframes lb-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===========================
LANGUAGE SWITCHER
=========================== */
.lang-switch {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg-light);
flex-shrink: 0;
}
.lang-switch .lang-link {
padding: 4px 10px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-light);
text-decoration: none;
line-height: 1.4;
transition: background-color 0.2s ease, color 0.2s ease;
}
.lang-switch .lang-link:hover { color: var(--accent); outline: none; }
.lang-switch .lang-link.active { background: var(--accent); color: #fff; }
@media (max-width: 768px) {
.lang-switch .lang-link { padding: 4px 8px; font-size: 0.72rem; }
}
/* ===========================
HEADER ACTIONS (bakery-template style)
Right cluster: search · language · cart. Injected by main.js. No login.
Desktop: logo left · nav tabs · cluster far right (Order button -> cart).
Mobile: hamburger left · logo centered · language + cart right · search below.
=========================== */
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-search { display: flex; align-items: center; position: relative; }
.header-search-toggle {
background: none; border: none; padding: 6px; cursor: pointer;
color: var(--primary); display: inline-flex; align-items: center;
}
.header-search-toggle:hover, .header-search-toggle:focus { color: var(--accent); outline: none; }
.header-search input {
width: 0; opacity: 0; padding: 0; border: 1.5px solid transparent;
background: #fff; font-family: var(--font-sans); font-size: 0.9rem;
color: var(--text-dark); border-radius: 999px;
transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
header.search-open .header-search input {
width: 190px; opacity: 1; padding: 7px 14px; border-color: var(--border); outline: none;
}
.header-search input::placeholder { color: var(--text-light); }
.header-cart {
position: relative; display: inline-flex; align-items: center;
color: var(--primary); text-decoration: none;
}
.header-cart:hover, .header-cart:focus { color: var(--accent); outline: none; }
.header-cart-count {
position: absolute; top: -4px; right: -7px;
min-width: 16px; height: 16px; padding: 0 4px;
background: var(--accent); color: #fff;
font-size: 0.62rem; font-weight: 700; line-height: 16px;
text-align: center; border-radius: 999px;
}
.header-cart-count[hidden] { display: none; }
.mobile-search { display: none; }
/* Desktop: nav sits next to the logo, the action cluster on the far right. */
@media (min-width: 769px) {
.header-container > nav { margin-left: 1.5rem; margin-right: auto; }
#main-nav a.btn-primary { display: none; } /* Order button replaced by the cart */
}
/* Mobile: hamburger · centered logo · language+cart · full-width search below. */
@media (max-width: 768px) {
.header-container {
flex-wrap: wrap; justify-content: center; align-items: center;
row-gap: 10px; column-gap: 8px;
}
.mobile-quick-links { display: none !important; }
.mobile-menu-btn { order: 1; margin: 0; color: var(--primary); }
.logo { order: 2; margin: 0 auto; }
.header-actions { order: 3; gap: 4px; }
/* Mobile: only the search icon sits in the cluster; the inline input is hidden.
Tapping the icon drops the full-width bar in under the header (below), so the
menu isn't pushed down by a permanent search field. */
.header-actions .header-search input { display: none; }
.mobile-search {
order: 4; flex: 0 0 100%;
display: none; align-items: center; gap: 8px;
background: #fff; border: 1.5px solid var(--border);
border-radius: 999px; padding: 9px 16px; margin: 2px 0 4px;
}
header.search-open .mobile-search { display: flex; }
.mobile-search .hs-icon { color: var(--text-light); flex-shrink: 0; display: inline-flex; }
.mobile-search input {
border: none; outline: none; background: none; width: 100%;
font-family: var(--font-sans); font-size: 0.95rem; color: var(--text-dark); padding: 2px 0;
}
.mobile-search input::placeholder { color: var(--text-light); }
}
/* Respect a reduced-motion preference (WCAG 2.3.3). For visitors whose OS is set
to minimise motion, neutralise the site's fade/slide animations, transitions and
smooth scrolling. No visual change for anyone who hasn't asked for it. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Design polish (from the redesign-skill audit) — low-risk, site-wide refinements.
1) Kill orphaned words in headings/paragraphs. 2) Align prices with tabular
figures so digits sit in even columns. 3) Give buttons a tactile pressed state. */
h1, h2, h3, h4, .section-title { text-wrap: balance; }
p { text-wrap: pretty; }
.pricing-guide td, .flavour-card li { font-variant-numeric: tabular-nums; }
button:active, .btn:active,
input[type="submit"]:active, input[type="button"]:active { transform: translateY(1px); }