/* ============================================================ Pizza Mia — sandypizzas.com Caribbean New York pizza · La Savane, Saint Martin ============================================================ */ /* Fonts: DM Sans (display/headings) + Inter (body) Loaded via in from Google Fonts */ :root { /* ===== Pizza Mia 2026 Pantone palette ===== Cloud Dancer 11-4201 TCX · main page background Mango Mojito 15-0960 TCX · primary accent (buttons, hovers, menu highlights, Pick-your-pizzas) Tea 16-0213 TCX · footer block Papaya 15-1243 TCX · pizza-name text on imagery Cocoa Crème 18-1020 TCX · brown accent / "we'll do the rest" block Iced Coffee, Caramel, Pink Lemonade kept as supporting tones ============================================ */ --cloud: #F0EEE9; /* Cloud Dancer */ --cloud-deep: #E5E2DA; --mango: #D9A02B; /* Mango Mojito */ --mango-dark: #B88322; --mango-soft: #E8BC5C; --tea: #A2A282; /* Tea — sage olive */ --tea-dark: #7F7F63; --tea-deep: #5E5E45; --papaya: #F5A267; /* Papaya */ --papaya-dark: #E0884A; --cocoa: #7E6354; /* Cocoa Crème */ --cocoa-dark: #5F4838; --iced-coffee: #B8956C; --caramel: #B8835A; --pink-lemonade: #E96E94; /* Legacy token aliases — remap to the new palette so existing selectors keep working without a full rewrite. */ --terracotta: var(--mango); /* primary accent */ --terracotta-dark: var(--mango-dark); --terracotta-soft: var(--mango-soft); --teal: var(--cocoa); /* secondary accent → brown */ --teal-dark: var(--cocoa-dark); --teal-light: var(--iced-coffee); --gold: var(--mango); /* gold now reads as Mango Mojito */ --cream: var(--cloud); /* page surfaces */ --cream-deep: var(--cloud-deep); --ink: #1F1B17; --ink-soft: #4A433B; --muted: #6D6557; --rule: #D8D3C6; --bg: var(--cloud); --white: #ffffff; /* Type */ --font-display: 'DM Sans', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif; --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif; /* Spacing scale */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; /* Layout */ --container: 1180px; --radius: 14px; --radius-lg: 22px; /* Shadows */ --shadow-1: 0 1px 2px rgba(31,27,23,.05), 0 2px 6px rgba(31,27,23,.06); --shadow-2: 0 6px 20px rgba(31,27,23,.08), 0 2px 6px rgba(31,27,23,.05); --shadow-3: 0 18px 40px rgba(31,27,23,.14); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } a { color: var(--terracotta); text-decoration: none; } a:hover { color: var(--terracotta-dark); } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.015em; color: var(--ink); margin: 0 0 var(--s-4); line-height: 1.15; font-weight: 700; } h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); } h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); } h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); } p { margin: 0 0 var(--s-4); } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); } .section { padding: clamp(3rem, 8vw, 6rem) 0; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 241, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.25rem; letter-spacing: -0.01em; } .brand:hover { color: var(--terracotta); } .brand .logo-mark { width: 36px; height: 36px; } .nav-links { display: flex; gap: var(--s-6); align-items: center; } .nav-links a { color: var(--ink-soft); font-weight: 500; font-size: .95rem; position: relative; padding: var(--s-2) 0; } .nav-links a:hover { color: var(--terracotta); } .nav-links a.active { color: var(--terracotta); } .nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--terracotta); border-radius: 2px; } .nav-cta { background: var(--terracotta); color: var(--white) !important; padding: var(--s-2) var(--s-5) !important; border-radius: 999px; font-weight: 600; transition: background .2s, transform .2s; } .nav-cta:hover { background: var(--terracotta-dark); transform: translateY(-1px); } .nav-cta.active::after { display: none; } .nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; color: var(--ink); } .nav-toggle svg { width: 28px; height: 28px; } @media (max-width: 820px) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .nav-links { position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--rule); padding: var(--s-4) var(--s-6); transform: translateY(-110%); transition: transform .25s ease; } .nav-links.open { transform: translateY(0); box-shadow: var(--shadow-2); } .nav-links a { padding: var(--s-4) 0; width: 100%; border-bottom: 1px solid var(--rule); } .nav-links a:last-child { border-bottom: 0; } .nav-cta { display: inline-flex; align-self: flex-start; margin-top: var(--s-2); } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-6); border-radius: 999px; font-weight: 600; font-size: 1rem; border: 1.5px solid transparent; transition: all .2s ease; text-decoration: none; cursor: pointer; } .btn--primary { background: var(--terracotta); color: var(--white); box-shadow: 0 6px 18px rgba(168, 75, 47, 0.28); } .btn--primary:hover { background: var(--terracotta-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(168, 75, 47, 0.32); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); } .btn--teal { background: var(--teal); color: var(--white); } .btn--teal:hover { background: var(--teal-dark); color: var(--white); transform: translateY(-2px); } .btn--lg { padding: var(--s-4) var(--s-8); font-size: 1.05rem; } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 8vw, 6rem); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(232, 175, 52, 0.15), transparent 50%), radial-gradient(ellipse at bottom left, rgba(1, 105, 111, 0.08), transparent 50%); pointer-events: none; z-index: 0; } .hero .container { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(var(--s-8), 5vw, var(--s-16)); align-items: center; } @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } } .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--teal); font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-4); } .eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--teal); } .hero h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); letter-spacing: -0.025em; margin-bottom: var(--s-5); } .hero h1 .accent { color: var(--terracotta); font-style: italic; font-weight: 700; } .hero-lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 540px; margin-bottom: var(--s-8); line-height: 1.55; } .hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; } .hero-meta { display: flex; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-8); color: var(--ink-soft); font-size: .95rem; } .hero-meta strong { color: var(--ink); display: block; font-size: 1.05rem; font-family: var(--font-display); } /* Hero visual — stacked SVG illustration */ .hero-visual { position: relative; aspect-ratio: 1 / 1; max-width: 520px; justify-self: end; width: 100%; } @media (max-width: 820px) { .hero-visual { justify-self: center; max-width: 380px; } } /* ---------- Sections ---------- */ .section-eyebrow { display: inline-block; color: var(--terracotta); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-3); } .section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: var(--s-4); } .section-lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 640px; margin-bottom: var(--s-10); } /* ---------- Signature pizzas (cards) ---------- */ .pizza-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-6); } .pizza-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-6); position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .pizza-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--terracotta-soft); } .pizza-card .pizza-mark { width: 56px; height: 56px; margin-bottom: var(--s-4); background: var(--cream-deep); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--terracotta); } .pizza-card h3 { margin-bottom: var(--s-2); font-size: 1.3rem; } .pizza-card .price { color: var(--teal); font-weight: 700; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: var(--s-3); } .pizza-card .desc { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; margin: 0; } .pizza-card .tag { position: absolute; top: var(--s-5); right: var(--s-5); background: var(--gold); color: var(--ink); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; } .pizza-card .tag--spice { background: var(--terracotta); color: var(--white); } .pizza-card .tag--sea { background: var(--teal); color: var(--white); } /* ---------- Three-feature row ---------- */ .feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-8); } .feature { display: flex; flex-direction: column; gap: var(--s-3); } .feature .icon { width: 48px; height: 48px; border-radius: 12px; background: var(--cream-deep); color: var(--terracotta); display: grid; place-items: center; } .feature .icon svg { width: 26px; height: 26px; } .feature h3 { font-size: 1.2rem; margin: 0; } .feature p { color: var(--ink-soft); margin: 0; font-size: .98rem; } /* ---------- Delivery zones strip ---------- */ .zones-strip { background: var(--ink); color: var(--white); padding: var(--s-16) 0; } .zones-strip h2 { color: var(--white); } .zones-strip .section-eyebrow { color: var(--gold); } .zones-strip .section-lede { color: rgba(255,255,255,0.7); } .zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); } .zone-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius); padding: var(--s-6); } .zone-card .zone-label { color: var(--gold); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-2); } .zone-card h3 { color: var(--white); margin: 0 0 var(--s-3); font-size: 1.15rem; } .zone-card .zone-areas { color: rgba(255,255,255,0.75); font-size: .92rem; margin-bottom: var(--s-4); line-height: 1.5; } .zone-card .zone-meta { display: flex; justify-content: space-between; padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,0.10); } .zone-card .zone-meta strong { color: var(--white); font-family: var(--font-display); font-size: 1.1rem; } .zone-card .zone-meta span { color: rgba(255,255,255,0.65); font-size: .85rem; } /* ---------- Story / image-text split ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-6), 4vw, var(--s-12)); align-items: center; } @media (max-width: 820px) { .split { grid-template-columns: 1fr; } } .split-visual { aspect-ratio: 4 / 5; background: var(--cream-deep); border-radius: var(--radius-lg); display: grid; place-items: center; overflow: hidden; position: relative; } /* ---------- CTA banner ---------- */ .cta-banner { background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-dark) 100%); color: var(--white); border-radius: var(--radius-lg); padding: clamp(var(--s-8), 6vw, var(--s-16)); text-align: center; } .cta-banner h2 { color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.4rem); } .cta-banner p { color: rgba(255,255,255,0.85); max-width: 540px; margin: 0 auto var(--s-8); font-size: 1.1rem; } .cta-banner .btn--primary { background: var(--white); color: var(--terracotta); box-shadow: 0 6px 20px rgba(0,0,0,0.18); } .cta-banner .btn--primary:hover { background: var(--cream); color: var(--terracotta-dark); } .cta-banner .btn--ghost { border-color: rgba(255,255,255,0.5); color: var(--white); } .cta-banner .btn--ghost:hover { background: var(--white); color: var(--terracotta); border-color: var(--white); } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: rgba(255,255,255,0.65); padding: var(--s-16) 0 var(--s-8); margin-top: var(--s-20); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-10); } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand .brand { color: var(--white); margin-bottom: var(--s-4); } .footer-brand p { color: rgba(255,255,255,0.55); font-size: .95rem; max-width: 320px; } .footer h4 { color: var(--white); font-size: 1rem; margin-bottom: var(--s-4); letter-spacing: .02em; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin-bottom: var(--s-2); } .footer a { color: rgba(255,255,255,0.65); font-size: .92rem; } .footer a:hover { color: var(--gold); } .footer-bottom { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,0.10); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-4); color: rgba(255,255,255,0.45); font-size: .85rem; } /* ---------- Page intro (interior pages) ---------- */ .page-intro { padding: clamp(2rem, 6vw, 4rem) 0 clamp(1rem, 3vw, 2rem); } .page-intro h1 { margin-bottom: var(--s-3); } .page-intro .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 640px; } /* ---------- Menu page ---------- */ .menu-section { padding: var(--s-12) 0; } .menu-tabs { display: inline-flex; background: var(--white); border: 1px solid var(--rule); border-radius: 999px; padding: 4px; margin-bottom: var(--s-10); gap: 4px; box-shadow: var(--shadow-1); } .menu-tab { background: transparent; border: 0; padding: var(--s-2) var(--s-5); border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--ink-soft); transition: all .2s; } .menu-tab.active { background: var(--terracotta); color: var(--white); } .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); } .menu-item { display: flex; gap: var(--s-4); background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-5); } .menu-item .menu-thumb { width: 80px; height: 80px; flex-shrink: 0; border-radius: 50%; background: var(--cream-deep); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--terracotta); font-size: 1.6rem; } .menu-item .menu-body { flex: 1; } .menu-item .menu-name { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-1); } .menu-item .menu-name h3 { margin: 0; font-size: 1.1rem; } .menu-item .menu-price { color: var(--teal); font-weight: 700; font-family: var(--font-display); font-size: 1.05rem; white-space: nowrap; } .menu-item .menu-desc { color: var(--ink-soft); font-size: .9rem; margin: 0; line-height: 1.5; } .menu-item .menu-badge { display: inline-block; margin-top: var(--s-2); padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .badge-classic { background: var(--cream-deep); color: var(--terracotta-dark); } .badge-caribbean { background: rgba(1, 105, 111, 0.10); color: var(--teal-dark); } .badge-vegetarian{ background: rgba(67, 122, 34, 0.12); color: #2b5a14; } .badge-spicy { background: var(--terracotta); color: var(--white); } .badge-premium { background: var(--gold); color: var(--ink); } /* ---------- Order / delivery app ---------- */ .order-shell { padding: var(--s-8) 0 var(--s-16); } .order-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-8); align-items: start; } @media (max-width: 980px) { .order-layout { grid-template-columns: 1fr; } } .order-step { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-6); margin-bottom: var(--s-5); } .step-header { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); } .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--terracotta); color: var(--white); font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; font-size: .95rem; } .step-header h2 { margin: 0; font-size: 1.4rem; } .step-hint { color: var(--muted); font-size: .85rem; margin-left: auto; } .zone-select { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); } .zone-option { border: 1.5px solid var(--rule); background: var(--bg); border-radius: var(--radius); padding: var(--s-4); cursor: pointer; transition: all .15s; text-align: left; } .zone-option:hover { border-color: var(--terracotta-soft); } .zone-option.selected { border-color: var(--terracotta); background: rgba(168, 75, 47, 0.06); } .zone-option .zone-tag { display: inline-block; background: var(--terracotta); color: var(--white); font-size: .7rem; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; margin-bottom: var(--s-2); } .zone-option .zone-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-bottom: var(--s-1); font-size: 1rem; } .zone-option .zone-detail { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; } .zone-option .zone-numbers { display: flex; justify-content: space-between; margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px dashed var(--rule); font-size: .85rem; } .zone-option .zone-numbers strong { color: var(--teal); font-family: var(--font-display); } .field-row { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; } @media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: var(--s-1); } .field label { font-weight: 600; font-size: .85rem; color: var(--ink); } .field input, .field textarea, .field select { font-family: var(--font-body); font-size: 1rem; padding: var(--s-3) var(--s-4); border: 1.5px solid var(--rule); border-radius: 10px; background: var(--bg); color: var(--ink); transition: border-color .15s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--terracotta); background: var(--white); } .field textarea { min-height: 80px; resize: vertical; } .order-mode { display: inline-flex; background: var(--cream-deep); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: var(--s-6); } .mode-btn { background: transparent; border: 0; padding: var(--s-2) var(--s-5); border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--ink-soft); cursor: pointer; transition: all .15s; } .mode-btn.active { background: var(--terracotta); color: var(--white); } .menu-pick { display: grid; gap: var(--s-3); } .pick-item { display: grid; grid-template-columns: 48px 1fr auto auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); } .pick-thumb { width: 48px; height: 48px; border-radius: 50%; background: var(--cream-deep); display: grid; place-items: center; color: var(--terracotta); font-weight: 700; font-family: var(--font-display); } .pick-info .pick-name { font-weight: 600; font-size: .96rem; margin: 0 0 2px; color: var(--ink); } .pick-info .pick-desc { color: var(--muted); font-size: .8rem; margin: 0; line-height: 1.3; } .pick-price { font-weight: 700; color: var(--teal); font-family: var(--font-display); font-size: 1rem; min-width: 50px; text-align: right; } .qty-controls { display: flex; align-items: center; gap: var(--s-2); } .qty-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--white); border: 1px solid var(--rule); display: grid; place-items: center; font-weight: 700; color: var(--ink); font-size: 1rem; transition: all .15s; } .qty-btn:hover { background: var(--terracotta); color: var(--white); border-color: var(--terracotta); } .qty-btn:disabled { opacity: 0.35; cursor: not-allowed; } .qty-val { min-width: 18px; text-align: center; font-weight: 700; font-family: var(--font-display); } .summary-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-6); position: sticky; top: 96px; } .summary-card h3 { font-size: 1.2rem; margin-bottom: var(--s-4); } .summary-line { display: flex; justify-content: space-between; padding: var(--s-2) 0; border-bottom: 1px dashed var(--rule); font-size: .92rem; color: var(--ink-soft); } .summary-line:last-of-type { border-bottom: 0; } .summary-line .qty-tag { color: var(--muted); margin-right: var(--s-2); } .summary-empty { text-align: center; color: var(--muted); padding: var(--s-6) 0; font-size: .9rem; } .summary-total { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; } .summary-total .label { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.1rem; } .summary-total .amt { font-family: var(--font-display); font-weight: 700; color: var(--terracotta); font-size: 1.6rem; } .fee-line { color: var(--teal); font-weight: 600; } .free-banner { background: rgba(67, 122, 34, 0.10); color: #2b5a14; padding: var(--s-2) var(--s-3); border-radius: 8px; font-size: .82rem; text-align: center; margin: var(--s-3) 0; font-weight: 600; } .threshold-banner { background: var(--cream-deep); color: var(--ink); padding: var(--s-2) var(--s-3); border-radius: 8px; font-size: .82rem; text-align: center; margin: var(--s-3) 0; } .threshold-banner strong { color: var(--terracotta); } .submit-btn { width: 100%; margin-top: var(--s-5); background: #25D366; color: var(--white); border: 0; border-radius: 999px; padding: var(--s-4) var(--s-6); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; gap: var(--s-2); transition: all .2s; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.32); } .submit-btn:hover { background: #128C7E; transform: translateY(-2px); } .submit-btn:disabled { background: var(--rule); color: var(--muted); cursor: not-allowed; box-shadow: none; transform: none; } .submit-btn svg { width: 22px; height: 22px; } .secondary-actions { display: flex; gap: var(--s-3); margin-top: var(--s-3); } .secondary-actions .btn { flex: 1; justify-content: center; font-size: .9rem; padding: var(--s-3) var(--s-4); } .hours-strip { display: flex; align-items: center; gap: var(--s-2); background: rgba(1, 105, 111, 0.08); color: var(--teal-dark); padding: var(--s-3) var(--s-4); border-radius: 10px; font-size: .9rem; margin-bottom: var(--s-5); } .hours-strip svg { width: 18px; height: 18px; flex-shrink: 0; } .notice-alert { background: rgba(232, 175, 52, 0.15); color: #7a5400; padding: var(--s-3) var(--s-4); border-radius: 10px; font-size: .9rem; margin-bottom: var(--s-5); border-left: 3px solid var(--gold); } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); } @media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } } .contact-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-8); } .contact-row { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); } .contact-row:last-child { border-bottom: 0; } .contact-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--cream-deep); color: var(--terracotta); display: grid; place-items: center; } .contact-icon svg { width: 20px; height: 20px; } .contact-row .label { font-weight: 600; color: var(--ink); display: block; margin-bottom: 2px; } .contact-row .val { color: var(--ink-soft); font-size: .95rem; } .contact-row a.val { color: var(--terracotta); } .map-frame { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--rule); background: var(--cream-deep); } .map-frame iframe { width: 100%; height: 100%; border: 0; } /* ---------- About story ---------- */ .story-list { list-style: none; padding: 0; margin: var(--s-6) 0; } .story-list li { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-3) 0; } .story-list li::before { content: ''; width: 12px; height: 12px; flex-shrink: 0; background: var(--terracotta); border-radius: 50%; margin-top: 7px; } /* ---------- Utility ---------- */ .center { text-align: center; } .muted { color: var(--muted); } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-6 { margin-bottom: var(--s-6); } .hidden { display: none !important; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ============================================================ 2026 Pantone refresh — targeted overrides These rules sit at the bottom of the cascade so they win wherever they touch a previously declared property. ============================================================ */ /* --- Cloud Dancer: page background --- */ html, body { background: var(--cloud); } section.section, main { background: var(--cloud); } /* --- Mango Mojito: primary CTA / button / link / nav --- */ .btn--primary { background: var(--mango); border-color: var(--mango); color: var(--ink); } .btn--primary:hover, .btn--primary:focus { background: var(--mango-dark); border-color: var(--mango-dark); color: var(--white); } .btn--ghost { color: var(--mango-dark); border-color: var(--mango); } .btn--ghost:hover { background: var(--mango); color: var(--ink); border-color: var(--mango); } a { color: var(--mango-dark); } a:hover { color: var(--mango); } .nav-links a:hover, .nav-links a.active { color: var(--mango-dark); } .nav-links a.active::after { background: var(--mango); } .brand:hover { color: var(--mango-dark); } /* eyebrows, accents and "signature pies" eyebrow */ .section-eyebrow, .accent { color: var(--mango-dark); } /* --- Menu highlights: gold badges, gold hover --- */ .menu-item { transition: border-color .15s, box-shadow .15s; } .menu-item:hover { border-color: var(--mango); box-shadow: 0 6px 18px rgba(217, 160, 43, 0.15); } .menu-item .menu-thumb { background: rgba(217, 160, 43, 0.14); color: var(--mango-dark); } .menu-item .menu-price { color: var(--cocoa-dark); } .badge-classic { background: rgba(217, 160, 43, 0.18); color: var(--mango-dark); } .badge-caribbean { background: rgba(126, 99, 84, 0.14); color: var(--cocoa-dark); } .badge-vegetarian { background: rgba(162, 162, 130, 0.22); color: var(--tea-deep); } .badge-spicy { background: var(--papaya); color: var(--cocoa-dark); } .badge-premium { background: var(--mango); color: var(--ink); } /* --- Papaya: pizza-name wording on cards (home + menu) --- */ .pizza-card h3, .menu-item .menu-name h3 { color: var(--papaya-dark); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; } .pizza-card:hover h3, .menu-item:hover .menu-name h3 { color: var(--papaya); } /* monogram thumb on hero pizza cards (homepage Signature pizzas) */ .pizza-card .pizza-mark { background: rgba(245, 162, 103, 0.18); color: var(--papaya-dark); } .pizza-card:hover { border-color: var(--mango); box-shadow: 0 12px 30px rgba(217,160,43,0.18); } .pizza-card .price { color: var(--cocoa-dark); } /* --- "Pick your pizzas. We'll do the rest." CTA banner --- Top half: Mango Mojito gold. Bottom strip: Cocoa Crème brown for the "we'll do the rest" copy block. ----------------------------------------------------------- */ .cta-banner { background: linear-gradient(180deg, var(--mango) 0%, var(--mango) 62%, var(--cocoa) 62%, var(--cocoa) 100%); color: var(--ink); border-radius: var(--radius-lg); padding: var(--s-12) var(--s-8); overflow: hidden; position: relative; } .cta-banner h2 { color: var(--ink); } .cta-banner p { color: rgba(255, 255, 255, 0.92); } .cta-banner .btn--primary { background: var(--white); color: var(--cocoa-dark); border-color: var(--white); } .cta-banner .btn--primary:hover { background: var(--papaya); color: var(--ink); border-color: var(--papaya); } .cta-banner .btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.65); } .cta-banner .btn--ghost:hover { background: var(--white); color: var(--cocoa-dark); border-color: var(--white); } /* --- Order page step number / zone select use Mango --- */ .step-num { background: var(--mango); color: var(--ink); } .zone-option:hover { border-color: var(--mango-soft); } .zone-option.selected { border-color: var(--mango); background: rgba(217, 160, 43, 0.08); } .zone-option .zone-tag { background: var(--mango); color: var(--ink); } .zone-option .zone-numbers strong { color: var(--cocoa-dark); } /* --- Tea: footer block --- */ .site-footer { background: var(--tea); color: rgba(255, 255, 255, 0.92); } .site-footer a { color: rgba(255, 255, 255, 0.92); } .site-footer a:hover { color: var(--mango-soft); } .site-footer h4 { color: var(--white); } .site-footer .footer-divider, .site-footer hr { border-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2); } /* --- Section eyebrow / hero text dialed for Cloud Dancer surface --- */ .hero, .hero-bg, .section--cream, .section--alt { background: var(--cloud) !important; } .section--cream-deep { background: var(--cloud-deep) !important; } /* Order summary / sidebar cards on Cloud Dancer */ .order-summary, .summary-box { background: var(--white); border-color: var(--rule); }