/* ================================================================= ANTHONY'S PIZZA & PASTA — ST. CLOUD, FL Design system: Warm Italian-American editorial ================================================================= */ :root, [data-theme='light'] { /* Surfaces — warm cream / parchment */ --color-bg: #fbf6ec; --color-surface: #fef9ef; --color-surface-2: #ffffff; --color-surface-offset: #f3ecdc; --color-surface-offset-2: #ebe2cc; --color-surface-dynamic: #e3d8bd; --color-divider: #dfd4b8; --color-border: #cfc299; /* Deep charred crust + tomato */ --color-charcoal: #1c1411; --color-charcoal-2: #2a1f1a; --color-text: #221814; --color-text-muted: #6b5a4a; --color-text-faint: #a39379; --color-text-inverse: #fef9ef; /* Tomato red — primary accent */ --color-primary: #b8311f; --color-primary-hover: #9b2718; --color-primary-active: #7d1d12; --color-primary-highlight: #f1d4cd; /* Honey gold — secondary accent */ --color-gold: #c89b2a; --color-gold-hover: #a8801c; --color-gold-highlight: #f1e4bd; /* Basil green — sparingly */ --color-basil: #4a6638; /* Type scale */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); --text-hero: clamp(3rem, 1rem + 7vw, 7.5rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1.25rem; --radius-full: 9999px; /* Transitions */ --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1); /* Shadows — warm */ --shadow-sm: 0 1px 2px oklch(0.25 0.04 50 / 0.08); --shadow-md: 0 8px 24px oklch(0.2 0.04 50 / 0.12); --shadow-lg: 0 24px 60px oklch(0.15 0.05 50 / 0.22); /* Content widths */ --content-narrow: 640px; --content-default: 1080px; --content-wide: 1280px; --content-full: 100%; /* Fonts */ --font-display: 'Boska', 'Playfair Display', 'Georgia', serif; --font-body: 'Satoshi', 'Inter', 'Helvetica Neue', sans-serif; --font-script: 'Cormorant Garamond', 'Georgia', serif; } [data-theme='dark'] { --color-bg: #14100c; --color-surface: #1a1410; --color-surface-2: #1f1814; --color-surface-offset: #251c16; --color-surface-offset-2: #2c2118; --color-surface-dynamic: #34281c; --color-divider: #2a2018; --color-border: #3a2c20; --color-text: #f0e3cb; --color-text-muted: #b39d80; --color-text-faint: #7a6850; --color-text-inverse: #1a1410; --color-primary: #e8553e; --color-primary-hover: #f06b56; --color-primary-active: #d54328; --color-primary-highlight: #3a1a14; --color-gold: #e6bc4f; --color-gold-hover: #f5cf68; --color-gold-highlight: #3a2d12; --color-basil: #8aab6b; --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3); --shadow-md: 0 8px 24px oklch(0 0 0 / 0.4); --shadow-lg: 0 24px 60px oklch(0 0 0 / 0.55); } /* ===== BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 84px; } body { min-height: 100dvh; line-height: 1.6; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } ul[role='list'] { list-style: none; } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; color: var(--color-text); } p, li, figcaption { text-wrap: pretty; max-width: 68ch; } ::selection { background: var(--color-primary); color: var(--color-text-inverse); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } a, button, [role='button'] { transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ===== LAYOUT ===== */ .container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-10)); } section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-4); } .eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--color-primary); } /* ===== HEADER / NAV ===== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-block: var(--space-4); background: oklch(from var(--color-bg) l c h / 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background var(--transition-interactive), border-color var(--transition-interactive), padding var(--transition-interactive); } .header--scrolled { background: oklch(from var(--color-bg) l c h / 0.95); border-bottom-color: var(--color-divider); padding-block: var(--space-3); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } .logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); } .logo svg { width: 38px; height: 38px; color: var(--color-primary); } .logo-wordmark { display: flex; flex-direction: column; line-height: 1; } .logo-wordmark .name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; } .logo-wordmark .sub { font-family: var(--font-body); font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 2px; } .nav-links { display: flex; gap: var(--space-6); list-style: none; font-size: var(--text-sm); font-weight: 500; } .nav-links a { color: var(--color-text-muted); position: relative; } .nav-links a:hover { color: var(--color-text); } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: var(--color-primary); transform: scaleX(0); transform-origin: right; transition: transform var(--transition-interactive); } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } .nav-actions { display: flex; align-items: center; gap: var(--space-3); } @media (max-width: 880px) { .nav-links { display: none; } } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.875rem 1.5rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; line-height: 1; } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 2px 0 var(--color-primary-active), var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 4px 0 var(--color-primary-active), var(--shadow-md); } .btn-primary:active { transform: translateY(0); box-shadow: 0 1px 0 var(--color-primary-active); } .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-ghost:hover { background: var(--color-surface-offset); border-color: var(--color-text); } .btn-dark { background: var(--color-charcoal); color: var(--color-text-inverse); border-color: var(--color-charcoal); } .btn-dark:hover { background: var(--color-charcoal-2); transform: translateY(-2px); } .btn-arrow svg { width: 16px; height: 16px; transition: transform var(--transition-interactive); } .btn:hover .btn-arrow svg { transform: translateX(4px); } /* Theme toggle */ .theme-toggle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-text-muted); background: transparent; } .theme-toggle:hover { color: var(--color-text); background: var(--color-surface-offset); } /* ===== HERO ===== */ .hero { position: relative; min-height: 100vh; padding-top: 120px; padding-bottom: var(--space-16); display: flex; align-items: center; overflow: hidden; background: #ffffff; color: var(--color-text); isolation: isolate; } .hero-bg { position: absolute; inset: 0; z-index: -1; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center right; opacity: 0.38; filter: saturate(0.55) brightness(1.18); } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.62) 38%, rgba(255, 255, 255, 0.30) 70%, rgba(255, 255, 255, 0.10) 100%); } @media (max-width: 720px) { .hero-bg::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.85) 100%); } .hero-bg img { object-position: 70% center; } } /* Hero text colors switched for white background readability */ .hero .hero-eyebrow, .hero .hero-content h1, .hero .hero-content .hero-h1, .hero .hero-content p, .hero .hero-content .hero-sub, .hero .hero-status, .hero .hero-trust, .hero .hero-trust-item { color: var(--color-text); } .hero .hero-content .accent { color: var(--color-primary); } .hero-content { max-width: 640px; position: relative; z-index: 1; } .hero-eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-3); } .hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--color-gold); } .hero h1 { font-size: var(--text-hero); font-weight: 500; line-height: 0.92; letter-spacing: -0.035em; margin-bottom: var(--space-6); color: #fef9ef; } .hero h1 .accent { font-style: italic; font-family: var(--font-script); font-weight: 500; color: var(--color-gold); display: inline-block; transform: translateY(-0.04em); } .hero-tagline { font-size: var(--text-lg); font-weight: 300; line-height: 1.4; max-width: 520px; margin-bottom: var(--space-10); color: oklch(0.92 0.02 70); } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); } .hero-meta { position: absolute; bottom: var(--space-8); right: clamp(var(--space-4), 4vw, var(--space-10)); display: flex; gap: var(--space-8); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.92 0.02 70); z-index: 1; } .hero-meta div { display: flex; align-items: center; gap: var(--space-2); } .hero-meta strong { color: var(--color-gold); font-weight: 600; } @media (max-width: 720px) { .hero-meta { position: static; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-10); padding-inline: clamp(var(--space-4), 4vw, var(--space-10)); } .hero-meta div { flex-wrap: nowrap; } .hero-meta .sep { display: none; } } /* ===== MARQUEE STRIP ===== */ .strip { background: var(--color-charcoal); color: var(--color-text-inverse); padding-block: var(--space-4); overflow: hidden; border-block: 1px solid oklch(0.25 0.04 50 / 1); } .strip-track { display: flex; gap: var(--space-12); white-space: nowrap; animation: marquee 38s linear infinite; width: max-content; } .strip-item { display: inline-flex; align-items: center; gap: var(--space-12); font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--color-gold); letter-spacing: -0.01em; } .strip-item::after { content: '✦'; color: var(--color-primary); font-style: normal; font-size: 0.8em; } @keyframes marquee { to { transform: translateX(-50%); } } /* ===== ABOUT ===== */ .about { background: var(--color-bg); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: center; } @media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } } .about-text h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); } .about-text h2 .accent { font-style: italic; font-family: var(--font-script); color: var(--color-primary); } .about-text p { font-size: var(--text-base); color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: 1.7; } .about-text p strong { color: var(--color-text); font-weight: 600; } .about-visual { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .about-visual img { width: 100%; height: 100%; object-fit: cover; } .about-stamp { position: absolute; bottom: var(--space-6); left: var(--space-6); background: var(--color-charcoal); color: var(--color-gold); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.1; max-width: 200px; box-shadow: var(--shadow-md); } .about-stamp small { display: block; font-family: var(--font-body); font-style: normal; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: oklch(0.92 0.02 70); margin-top: var(--space-1); } /* ===== SIGNATURE DISHES ===== */ .signature { background: var(--color-surface-offset); position: relative; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-12); } .section-head h2 { font-size: var(--text-2xl); max-width: 16ch; } .section-head h2 .accent { font-family: var(--font-script); font-style: italic; color: var(--color-primary); } .section-head p { font-size: var(--text-base); color: var(--color-text-muted); max-width: 36ch; } /* Menu section: head aside with PDF download */ .menu-head-aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); max-width: 36ch; } .menu-head-aside p { margin: 0; text-align: right; } .btn-pdf { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.125rem; border-radius: 999px; background: var(--color-surface, #fff8ec); color: var(--color-primary, #b3261e); border: 1.5px solid var(--color-primary, #b3261e); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; box-shadow: 0 1px 0 rgba(0,0,0,0.04); } .btn-pdf svg { width: 18px; height: 18px; flex-shrink: 0; } .btn-pdf:hover { background: var(--color-primary, #b3261e); color: #fff8ec; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(179, 38, 30, 0.18); } .btn-pdf:active { transform: translateY(0); } @media (max-width: 720px) { .menu-head-aside { align-items: flex-start; max-width: 100%; } .menu-head-aside p { text-align: left; } } .signature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); } .sig-card { background: var(--color-surface-2); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-divider); transition: transform var(--transition-interactive), box-shadow var(--transition-interactive); } .sig-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .sig-card-img { aspect-ratio: 4/3; overflow: hidden; position: relative; } .sig-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1); } .sig-card:hover .sig-card-img img { transform: scale(1.05); } .sig-card-tag { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--color-charcoal); color: var(--color-gold); padding: 4px 10px; border-radius: var(--radius-full); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .sig-card-body { padding: var(--space-5) var(--space-6) var(--space-6); } .sig-card h3 { font-size: var(--text-lg); font-family: var(--font-display); margin-bottom: var(--space-2); } .sig-card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; } /* ===== MENU ===== */ .menu { background: var(--color-bg); } .menu-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-12); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-divider); } .menu-tab { padding: 0.625rem 1.125rem; font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-full); color: var(--color-text-muted); background: transparent; border: 1px solid transparent; white-space: nowrap; } .menu-tab:hover { color: var(--color-text); } .menu-tab.active { background: var(--color-charcoal); color: var(--color-text-inverse); border-color: var(--color-charcoal); } .menu-panel { display: none; } .menu-panel.active { display: block; animation: fadeIn 400ms ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .menu-section { margin-bottom: var(--space-16); } .menu-section:last-child { margin-bottom: 0; } .menu-section-head { margin-bottom: var(--space-8); padding-bottom: var(--space-4); border-bottom: 1px dashed var(--color-border); display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); } .menu-section-head h3 { font-size: var(--text-xl); font-family: var(--font-display); } .menu-section-head h3 .accent { font-style: italic; font-family: var(--font-script); color: var(--color-primary); } .menu-section-head .note { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; } .menu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-8) var(--space-12); } .menu-item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: baseline; } .menu-item .name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; color: var(--color-text); letter-spacing: -0.01em; } .menu-item .price { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: var(--color-primary); white-space: nowrap; } .menu-item .desc { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.5; margin: 0; } .menu-item.featured .name::after { content: ' ★'; color: var(--color-gold); } .size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); background: var(--color-surface-offset); padding: var(--space-4); border-radius: var(--radius-lg); margin-bottom: var(--space-8); } @media (max-width: 640px) { .size-grid { grid-template-columns: repeat(5, 1fr); padding: var(--space-3); gap: var(--space-1); } } .size-grid .size { text-align: center; padding: var(--space-2); } .size-grid .size-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-1); } .size-grid .size-price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; color: var(--color-primary); } .callout-box { background: var(--color-surface-2); border: 1px solid var(--color-divider); border-left: 3px solid var(--color-gold); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); margin-block: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; } .callout-box strong { color: var(--color-text); font-weight: 600; } /* Wings table */ .wings-table { display: grid; grid-template-columns: 200px repeat(4, 1fr); gap: var(--space-2); background: var(--color-charcoal); color: var(--color-text-inverse); padding: var(--space-6); border-radius: var(--radius-lg); margin-bottom: var(--space-6); } @media (max-width: 720px) { .wings-table { grid-template-columns: 1fr 1fr; } } .wings-table .row-label { font-family: var(--font-display); font-size: var(--text-base); align-self: center; color: var(--color-gold); } .wings-table .cell { text-align: center; padding: var(--space-2); } .wings-table .cell-qty { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.85 0.02 60); margin-bottom: 2px; } .wings-table .cell-price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; } /* ===== BOROUGH SPECIALS ===== */ .specials { background: var(--color-charcoal); color: var(--color-text-inverse); position: relative; } .specials .eyebrow { color: var(--color-gold); } .specials .eyebrow::before { background: var(--color-gold); } .specials h2 { color: #fef9ef; font-size: var(--text-2xl); margin-bottom: var(--space-12); max-width: 18ch; } .specials h2 .accent { font-family: var(--font-script); font-style: italic; color: var(--color-gold); } .specials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); } .special-card { background: oklch(0.22 0.03 50); border: 1px solid oklch(0.30 0.04 50); border-radius: var(--radius-lg); padding: var(--space-6); padding-top: var(--space-12); /* room for save pill */ position: relative; overflow: visible; transition: transform var(--transition-interactive), border-color var(--transition-interactive); } .special-card:hover { transform: translateY(-4px); border-color: var(--color-gold); } .special-card .save { position: absolute; top: var(--space-4); right: var(--space-4); background: var(--color-primary); color: #fff; font-size: 0.6875rem; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-full); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; z-index: 2; box-shadow: var(--shadow-sm); } .special-card h3 { font-family: var(--font-display); font-size: var(--text-lg); color: #fef9ef; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); padding-right: 0; max-width: 100%; line-height: 1.15; } .special-card .price { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-gold); line-height: 1; margin-bottom: var(--space-4); } .special-card ul { list-style: none; font-size: var(--text-sm); color: oklch(0.85 0.02 60); line-height: 1.6; } .special-card ul li { padding-left: var(--space-4); position: relative; } .special-card ul li::before { content: '·'; position: absolute; left: 0; color: var(--color-gold); font-weight: 700; } .specials-terms { margin-top: var(--space-8); font-size: var(--text-xs); color: oklch(0.65 0.02 60); letter-spacing: 0.06em; } /* ===== LOOPMENU PROMO ===== */ .loopmenu { background: var(--color-surface-offset); position: relative; } .loop-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: center; } @media (max-width: 880px) { .loop-grid { grid-template-columns: 1fr; } } .loop-text .eyebrow { color: var(--color-basil); } .loop-text .eyebrow::before { background: var(--color-basil); } .loop-text h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); } .loop-text h2 .accent { font-family: var(--font-script); font-style: italic; color: var(--color-basil); } .loop-text p { font-size: var(--text-base); color: var(--color-text-muted); margin-bottom: var(--space-6); line-height: 1.7; } .loop-features { list-style: none; margin-bottom: var(--space-8); } .loop-features li { padding: var(--space-3) 0; border-top: 1px solid var(--color-divider); display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); } .loop-features li:last-child { border-bottom: 1px solid var(--color-divider); } .loop-features svg { width: 18px; height: 18px; color: var(--color-basil); flex-shrink: 0; margin-top: 2px; } .loop-features strong { color: var(--color-text); font-weight: 600; } .loop-visual { position: relative; background: var(--color-charcoal); border-radius: var(--radius-xl); padding: var(--space-8); color: var(--color-text-inverse); overflow: hidden; box-shadow: var(--shadow-lg); } .loop-visual::before { content: ''; position: absolute; top: -50%; right: -30%; width: 80%; height: 200%; background: radial-gradient(circle, oklch(0.65 0.16 142 / 0.18) 0%, transparent 65%); } .loop-mockup { position: relative; background: oklch(0.20 0.02 60); border: 1px solid oklch(0.28 0.02 60); border-radius: var(--radius-md); padding: var(--space-5); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8125rem; line-height: 1.6; } .loop-mockup .dots { display: flex; gap: 6px; margin-bottom: var(--space-4); } .loop-mockup .dots span { width: 10px; height: 10px; border-radius: 50%; background: oklch(0.4 0.02 60); } .loop-mockup .dots span:nth-child(1) { background: #ff5f57; } .loop-mockup .dots span:nth-child(2) { background: #febc2e; } .loop-mockup .dots span:nth-child(3) { background: #28c840; } .loop-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px dashed oklch(0.3 0.02 60); color: oklch(0.85 0.02 60); } .loop-row:last-child { border-bottom: none; } .loop-row .item { color: #fef9ef; } .loop-row .badge { background: var(--color-basil); color: #fef9ef; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 0.6875rem; font-weight: 600; } .loop-cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8); color: var(--color-basil); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; } .loop-cta:hover { color: #fef9ef; } .loop-cta svg { width: 16px; height: 16px; } /* ===== VISIT ===== */ .visit { background: var(--color-bg); } .visit-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: stretch; } @media (max-width: 880px) { .visit-grid { grid-template-columns: 1fr; } } .visit-info h2 { font-size: var(--text-2xl); margin-bottom: var(--space-8); } .visit-info h2 .accent { font-family: var(--font-script); font-style: italic; color: var(--color-primary); } .visit-block { margin-bottom: var(--space-8); } .visit-block h3 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); } .visit-block p, .visit-block a { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); line-height: 1.4; } .visit-block a:hover { color: var(--color-primary); } .visit-block .small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); } .visit-hours { display: grid; grid-template-columns: auto auto; gap: var(--space-2) var(--space-3); align-items: baseline; justify-content: center; } .visit-hours dt { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.04em; } .visit-hours dd { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); } .map-wrap { position: relative; min-height: 480px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider); } .map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(0.85); } /* ===== FOOTER ===== */ .footer { background: var(--color-charcoal); color: oklch(0.85 0.02 60); padding-block: var(--space-16) var(--space-8); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-10); margin-bottom: var(--space-12); } @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer .logo { color: #fef9ef; margin-bottom: var(--space-4); } .footer .logo svg { color: var(--color-primary); } .footer .logo-wordmark .sub { color: oklch(0.7 0.02 60); } .footer-blurb { font-size: var(--text-sm); line-height: 1.6; max-width: 32ch; color: oklch(0.75 0.02 60); } .footer h4 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4); } .footer ul { list-style: none; font-size: var(--text-sm); display: flex; flex-direction: column; gap: var(--space-2); } .footer a:hover { color: #fef9ef; } .footer-bottom { padding-top: var(--space-6); border-top: 1px solid oklch(0.25 0.04 50); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); letter-spacing: 0.04em; color: oklch(0.65 0.02 60); } .footer-bottom .loop-tag { display: inline-flex; align-items: center; gap: 0.4rem; } .footer-bottom .loop-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-basil); display: inline-block; margin-right: 0.2rem; } .footer-bottom .loop-tag-link { display: inline-flex; align-items: center; gap: 0.32rem; color: inherit; text-decoration: none; font-weight: 600; opacity: 0.95; transition: opacity 0.2s ease; } .footer-bottom .loop-tag-link:hover { opacity: 1; text-decoration: underline; } .footer-bottom .loop-tag-icon { width: 16px; height: 16px; border-radius: 50%; background: #fff8e7; padding: 1.5px; object-fit: contain; flex-shrink: 0; } /* ===== UTIL ===== */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } .fade-in.visible { opacity: 1; transform: translateY(0); } @media (max-width: 720px) { .nav-actions .btn span.long { display: none; } } /* ================================================================= V2 — HERO SPLIT PANEL · Papa John's-inspired ================================================================= */ /* Logo sizing — JPG is square 512×512, mostly transparent surround, we crop visually */ .logo-mark { height: 144px; width: auto; max-height: 144px; display: block; object-fit: contain; mix-blend-mode: multiply; /* drop white halo against cream header */ filter: contrast(1.05); } [data-theme='dark'] .logo-mark { mix-blend-mode: screen; filter: invert(1) contrast(1.1); } @media (max-width: 720px) { .logo-mark { height: 96px; width: auto; max-height: 96px; } } /* Header phone */ .nav-phone { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem 0.75rem; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); letter-spacing: 0.02em; } .nav-phone:hover { color: var(--color-primary); background: var(--color-surface-offset); } .nav-phone svg { color: var(--color-primary); flex-shrink: 0; } @media (max-width: 880px) { .nav-phone span { display: none; } } /* Pill badge */ .pill { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .pill-red { background: var(--color-primary); color: #fff; } .pill-gold { background: var(--color-gold); color: var(--color-charcoal); } .pill-cream { background: #fef9ef; color: var(--color-primary); border: 1px solid var(--color-primary); } /* HERO V2 — split panel */ .hero.hero-v2 { min-height: auto; padding-top: clamp(150px, 17vh, 210px); padding-bottom: clamp(var(--space-12), 8vw, var(--space-20)); display: block; align-items: stretch; background: var(--color-charcoal); color: var(--color-text-inverse); } .hero.hero-v2 .hero-grid { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-10)); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; } .hero-left { position: relative; z-index: 1; max-width: 620px; } .hero-right { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); isolation: isolate; } .hero-right .hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-eyebrow-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); } .hero-v2 .hero-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); color: oklch(0.92 0.02 70); letter-spacing: 0.28em; } .hero-v2 .hero-eyebrow::before { display: none; } .hero-v2 h1 { font-size: clamp(2.75rem, 1rem + 6.5vw, 6rem); font-weight: 500; line-height: 0.93; letter-spacing: -0.035em; margin-bottom: var(--space-6); color: #fef9ef; } .hero-v2 h1 .accent { font-style: normal; font-family: var(--font-display); color: var(--color-primary-hover); background: linear-gradient(180deg, #e8553e 0%, var(--color-primary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; transform: none; } .hero-v2 h1 .hero-italic { font-family: var(--font-script); font-style: italic; font-weight: 500; color: var(--color-gold); display: inline-block; } .hero-v2 .hero-tagline { margin-bottom: var(--space-8); max-width: 480px; } .hero-v2 .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-10); } /* Larger buttons */ .btn-xl { padding: 1.1rem 1.75rem; font-size: var(--text-sm); letter-spacing: 0.06em; } .btn-outline-light { background: transparent; color: #fef9ef; border: 1.5px solid oklch(1 0 0 / 0.35); } .btn-outline-light:hover { background: oklch(1 0 0 / 0.08); border-color: #fef9ef; } /* Trust strip */ .hero-trust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); letter-spacing: 0.06em; color: oklch(0.85 0.02 70); padding-top: var(--space-6); border-top: 1px solid oklch(1 0 0 / 0.12); } .trust-item { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; } .trust-item strong { color: var(--color-gold); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0; } .trust-item .muted { color: oklch(0.65 0.02 70); font-weight: 400; } .trust-sep { width: 4px; height: 4px; border-radius: 50%; background: oklch(1 0 0 / 0.25); flex-shrink: 0; } /* Price tag (Papa John's-style) */ .hero-price-tag { position: absolute; bottom: var(--space-5); right: var(--space-5); background: var(--color-gold); color: var(--color-charcoal); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); box-shadow: 0 10px 30px oklch(0 0 0 / 0.35); display: flex; flex-direction: column; gap: 2px; z-index: 2; transform: rotate(-3deg); } .price-from { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.35 0.05 50); } .price-number { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 4.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; display: inline-flex; align-items: flex-start; color: var(--color-charcoal); } .price-dollar { font-size: 0.45em; margin-right: 2px; margin-top: 0.32em; font-weight: 500; } .price-cents { font-size: 0.45em; margin-top: 0.32em; font-weight: 500; } .price-sub { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: oklch(0.35 0.05 50); margin-top: 2px; } /* Hero responsive */ @media (max-width: 880px) { .hero.hero-v2 .hero-grid { grid-template-columns: 1fr; } .hero-right { aspect-ratio: 4 / 3; max-height: 380px; } .hero-price-tag { padding: var(--space-3) var(--space-4); } } /* ================================================================= QUICK ORDER — Category tab bar ================================================================= */ .quickorder { background: var(--color-surface); border-bottom: 1px solid var(--color-divider); padding-block: clamp(var(--space-10), 6vw, var(--space-16)); } .quickorder-head { margin-bottom: var(--space-8); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } .quickorder-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text); max-width: 24ch; line-height: 1.15; } .quickorder-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-3); } @media (max-width: 1080px) { .quickorder-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 720px) { .quickorder-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38vw; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); margin-inline: calc(-1 * clamp(var(--space-4), 4vw, var(--space-10))); padding-inline: clamp(var(--space-4), 4vw, var(--space-10)); scrollbar-width: thin; } .qo-card { scroll-snap-align: start; } } .qo-card { background: var(--color-surface-2); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1); transition: transform var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive); color: var(--color-text); } .qo-card:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow-md); } .qo-icon { font-size: 1.875rem; line-height: 1; margin-bottom: var(--space-1); filter: drop-shadow(0 2px 6px oklch(0 0 0 / 0.15)); } .qo-label { font-family: var(--font-display); font-size: var(--text-base); font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); } .qo-sub { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.02em; } /* ================================================================= DELIVERY SECTION ================================================================= */ .delivery { background: var(--color-surface-offset); } .delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; } @media (max-width: 880px) { .delivery-grid { grid-template-columns: 1fr; } } .delivery-info h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); } .delivery-info h2 .accent { font-family: var(--font-script); font-style: italic; color: var(--color-primary); } .delivery-info p { color: var(--color-text-muted); margin-bottom: var(--space-6); } .delivery-fee { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-6); padding: var(--space-5) var(--space-6); background: var(--color-surface-2); border-radius: var(--radius-lg); border-left: 4px solid var(--color-primary); } .delivery-fee dt { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); align-self: center; } .delivery-fee dd { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); font-weight: 500; } .delivery-fee dd strong { color: var(--color-primary); font-weight: 600; } .delivery-map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider); } .delivery-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .delivery-radius-badge { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--color-primary); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; z-index: 2; box-shadow: var(--shadow-md); } /* ================================================================= BOROUGH SPECIALS V2 — Papa John's-style giant numerals Uses HTML structure:
$90
================================================================= */ .special-card .price { font-family: var(--font-display); font-size: clamp(3rem, 5.5vw, 4rem); color: var(--color-gold); line-height: 0.95; margin-bottom: var(--space-4); font-weight: 600; letter-spacing: -0.04em; display: inline-flex; align-items: flex-start; } .special-card .price .d { font-size: 0.45em; margin-right: 3px; margin-top: 0.18em; font-weight: 500; } /* Fan favorite badge on signature cards (red pill replacing gold tag style) */ .sig-card-tag { background: var(--color-primary); color: #fff; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.625rem; padding: 0.375rem 0.625rem; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); } /* ================================================================= DARK MODE — Hero stays dark always, but adjust quickorder cards ================================================================= */ [data-theme='dark'] .quickorder { background: var(--color-surface); } [data-theme='dark'] .qo-card { background: var(--color-surface-2); border-color: var(--color-border); } [data-theme='dark'] .delivery { background: var(--color-surface-offset); } [data-theme='dark'] .delivery-fee { background: var(--color-surface-2); } /* ================================================================= LIGHT OVERHAUL — Italian flag palette (red · white · green) All dark/charcoal surfaces replaced with cream/white surfaces. Accents shift to tomato red, basil green, and warm gold. ================================================================= */ /* ----- HERO: cream page bg with a real, warm NY skyline photograph baked in ----- */ .hero.hero-v2, .hero { background: /* cream wash that lets the photo show through the bottom 60% */ linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 240, 0.72) 35%, rgba(251, 246, 236, 0.55) 70%, rgba(251, 246, 236, 0.85) 100%), url('../assets/ny-skyline.png') center bottom / cover no-repeat, var(--color-bg); color: var(--color-text); border-bottom: 6px solid transparent; border-image: linear-gradient(90deg, var(--color-basil) 0 33.33%, #ffffff 33.33% 66.66%, var(--color-primary) 66.66% 100% ) 1; position: relative; overflow: hidden; } /* Soft cream fade at the bottom so the skyline blends INTO the page bg below */ .hero.hero-v2::after, .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(180deg, rgba(251, 246, 236, 0) 0%, var(--color-bg) 100%); pointer-events: none; z-index: 0; } @media (max-width: 720px) { .hero.hero-v2, .hero { background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 250, 240, 0.82) 40%, rgba(251, 246, 236, 0.65) 75%, rgba(251, 246, 236, 0.90) 100%), url('../assets/ny-skyline.png') center 85% / cover no-repeat, var(--color-bg); } } /* keep all hero content above the skyline */ .hero-grid, .hero-content, .hero-left, .hero-right { position: relative; z-index: 1; } .hero-left { color: var(--color-text); } .hero h1, .hero .hero-h1 { color: var(--color-text); } .hero .hero-eyebrow, .hero .eyebrow { color: var(--color-primary); } .hero p, .hero .hero-lede { color: var(--color-text-muted); } .hero-trust .trust-item { color: var(--color-text-muted); } .hero-trust .trust-item strong { color: var(--color-text); } .hero-trust .trust-sep { background: var(--color-border); } .hero .muted { color: var(--color-text-faint); } .hero-pill, .pill-badge { background: var(--color-primary); color: #ffffff; border: none; } .btn-outline-light { border-color: var(--color-text) !important; color: var(--color-text) !important; background: transparent; } .btn-outline-light:hover { background: var(--color-text); color: var(--color-surface-2) !important; } /* Hero photo gets a green ring + red tag */ .hero-right { box-shadow: 0 24px 60px -20px oklch(0.25 0.06 30 / 0.18); outline: 3px solid #ffffff; outline-offset: -3px; border: 4px solid var(--color-basil); } .hero-price-tag { background: var(--color-primary); color: #ffffff; } .hero-price-tag .price-from, .hero-price-tag .price-sub { color: oklch(0.96 0.02 30); } /* ----- MARQUEE STRIP: flip to white with red+green ----- */ .strip { background: #ffffff; color: var(--color-primary); border-block: 1px solid var(--color-border); } .strip-item { color: var(--color-primary); } .strip-item::after { color: var(--color-basil); } /* ----- MENU TABS active state: red instead of black ----- */ .menu-tab.active { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); } /* ----- WINGS TABLE: flip to cream card with red accent ----- */ .wings-table { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); } .wings-table .row-label { color: var(--color-primary); } .wings-table .cell-qty { color: var(--color-text-muted); } .wings-table .cell-price { color: var(--color-text); } /* ----- BOROUGH SPECIALS: flip to warm cream ----- */ .specials { background: radial-gradient(ellipse at top, oklch(0.95 0.04 30 / 0.7) 0%, transparent 60%), var(--color-surface); color: var(--color-text); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .specials .eyebrow { color: var(--color-primary); } .specials .eyebrow::before { background: var(--color-primary); } .specials h2 { color: var(--color-text); } .specials h2 .accent { color: var(--color-primary); } .specials p, .specials .specials-lede { color: var(--color-text-muted); } /* Borough cards on light bg: white card, green top stripe, red save pill */ .specials .borough-card, .specials .special-card, .specials .card, .borough-card, .special-card { background: #ffffff !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; box-shadow: 0 10px 32px -16px oklch(0.25 0.06 30 / 0.25); position: relative; } .specials .borough-card::before, .specials .special-card::before, .borough-card::before, .special-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-basil) 0 33.33%, #ffffff 33.33% 66.66%, var(--color-primary) 66.66% 100% ); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .specials .borough-card h3, .specials .special-card h3, .borough-card h3, .special-card h3 { color: var(--color-text); } .specials .borough-card p, .specials .special-card p, .borough-card p, .special-card p, .specials .borough-card li, .specials .special-card li, .borough-card li, .special-card li { color: var(--color-text-muted); } .specials .borough-card strong, .borough-card strong { color: var(--color-text); } /* ----- LOOPMENU VISUAL BLOCK: keep dark mockup feel but soften ----- */ .loop-visual { background: #ffffff; color: var(--color-text); border: 1px solid var(--color-border); } .loop-mockup { background: var(--color-surface-offset); border-color: var(--color-border); color: var(--color-text); } .loop-row { color: var(--color-text-muted); border-bottom-color: var(--color-border); } .loop-row .item { color: var(--color-text); } /* ----- FOOTER: flip to cream with Italian flag top accent ----- */ .footer { background: var(--color-surface-offset); color: var(--color-text-muted); border-top: 6px solid transparent; border-image: linear-gradient(90deg, var(--color-basil) 0 33.33%, #ffffff 33.33% 66.66%, var(--color-primary) 66.66% 100% ) 1; } .footer .logo { color: var(--color-text); } .footer .logo svg { color: var(--color-primary); } .footer .logo-wordmark .sub { color: var(--color-text-muted); } .footer-blurb { color: var(--color-text-muted); } .footer h4 { color: var(--color-text); } .footer a { color: var(--color-text-muted); } .footer a:hover { color: var(--color-primary); } .footer-bottom { border-top-color: var(--color-border) !important; color: var(--color-text-faint); } /* ----- ABOUT STAMP: keep but switch black → red ----- */ .about-stamp { background: var(--color-primary); color: #ffffff; } /* ----- SIGNATURE CARD TAG: red pill (already changed in v2, ensure) ----- */ .sig-card-tag { background: var(--color-primary); color: #ffffff; } /* ----- BTN-DARK: turn into red CTA ----- */ .btn-dark { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); } .btn-dark:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } /* ----- PILL-GOLD: white text on gold for legibility ----- */ .pill-gold { color: #ffffff; } /* ----- SECTION DIVIDERS: add subtle Italian flag rule between major sections ----- */ .strip { position: relative; } .strip::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--color-basil) 0 33.33%, #ffffff 33.33% 66.66%, var(--color-primary) 66.66% 100% ); } /* ----- DELIVERY SECTION: add green accent ----- */ .delivery { background: var(--color-surface); } .delivery-info h2 .accent { color: var(--color-basil); } .delivery-fee { background: #ffffff; border: 1px solid var(--color-border); } .delivery-radius-badge { background: var(--color-basil) !important; color: #ffffff !important; } /* ----- LOGO HEADER: ensure visible on cream ----- */ .nav-logo, .header .logo img { mix-blend-mode: multiply; } /* ----- HEADER: clean white with strong, branded separation ----- */ .site-header, header.site-header, .header { background: rgba(255, 252, 245, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); /* Italian-flag accent bar under nav (basil → white → tomato) */ border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--color-basil) 0 33.33%, var(--color-gold) 33.33% 66.66%, var(--color-primary) 66.66% 100% ) 1; box-shadow: 0 4px 16px rgba(28, 20, 17, 0.06), 0 1px 0 rgba(28, 20, 17, 0.04); } .header--scrolled { background: rgba(255, 252, 245, 0.98) !important; box-shadow: 0 6px 22px rgba(28, 20, 17, 0.10), 0 1px 0 rgba(28, 20, 17, 0.05) !important; } /* Dark-mode users on this site: force light theme look — the brand is light. */ [data-theme='dark'] .hero.hero-v2 { background: linear-gradient(180deg, #fffaf0 0%, var(--color-bg) 70%, var(--color-surface-offset) 100%); } [data-theme='dark'] .specials { background: var(--color-surface); color: var(--color-text); } [data-theme='dark'] .footer { background: var(--color-surface-offset); color: var(--color-text-muted); } /* ================================================================= INSTAGRAM-STYLE MENU GRID Big visual cards, short descriptions, price chips. ================================================================= */ .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); margin-top: var(--space-6); } @media (min-width: 720px) { .menu-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); } } .mg-card { background: #ffffff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: 0 6px 20px -10px oklch(0.25 0.06 30 / 0.18); transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1); position: relative; display: flex; flex-direction: column; } .mg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px oklch(0.25 0.06 30 / 0.3); } /* Featured card — gold border + tag */ .mg-card-featured { border: 2px solid var(--color-gold); } .mg-card-featured::after { content: 'CHEF\'S PICK'; position: absolute; top: var(--space-3); right: var(--space-3); background: var(--color-gold); color: #ffffff; padding: 4px 10px; border-radius: var(--radius-full); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; z-index: 2; box-shadow: 0 2px 8px oklch(0.25 0.06 60 / 0.3); } .mg-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-surface-offset); } .mg-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } .mg-card:hover .mg-img img { transform: scale(1.06); } /* Letter fallback for items without a photo */ .mg-img-text { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary), oklch(0.55 0.18 30)); color: #ffffff; } .mg-img-text .mg-mark { font-family: var(--font-display); font-style: italic; font-size: 4.5rem; font-weight: 600; opacity: 0.85; } .mg-body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .mg-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .mg-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); line-height: 1.15; letter-spacing: -0.01em; flex: 1; text-wrap: balance; } .mg-price { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; flex-shrink: 0; } .mg-tag { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.4; margin: 0; max-width: none; } .mg-sub { font-size: 0.75rem; color: var(--color-text-faint); font-style: italic; margin: 0; letter-spacing: 0.01em; } /* ===== WINGS HERO IMAGE ===== */ .wings-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-8); aspect-ratio: 21 / 9; max-height: 360px; } .wings-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .wings-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.18 0.04 30 / 0.85) 0%, oklch(0.18 0.04 30 / 0.4) 60%, transparent 100%); color: #ffffff; padding: var(--space-8) var(--space-10); display: flex; flex-direction: column; justify-content: center; max-width: 60%; } .wings-hero-overlay .eyebrow { color: var(--color-gold); margin-bottom: var(--space-2); } .wings-hero-overlay .eyebrow::before { background: var(--color-gold); } .wings-hero-overlay h4 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; margin-bottom: var(--space-2); letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; } .wings-hero-overlay p { font-size: var(--text-sm); opacity: 0.92; max-width: 38ch; } @media (max-width: 720px) { .wings-hero { aspect-ratio: 4 / 5; max-height: none; } .wings-hero-overlay { max-width: 100%; padding: var(--space-6); } .wings-hero-overlay h4 { font-size: var(--text-xl); } } /* ===== DRIZZLES SUB-GRID ===== */ .drizzle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); } .drizzle { background: #ffffff; border: 1px solid var(--color-border); border-left: 3px solid var(--color-gold); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 4px; } .drizzle strong { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text); font-weight: 600; } .drizzle span { font-size: 0.8125rem; color: var(--color-text-muted); } /* ============================================================ MADE WITH LOVE — pizza-is-special section ============================================================ */ .love { background: linear-gradient(180deg, var(--color-surface-offset) 0%, var(--color-bg) 60%, var(--color-surface) 100%); padding: clamp(4rem, 8vw, 7.5rem) 0; position: relative; overflow: hidden; } .love::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 10%, oklch(from var(--color-gold) l c h / 0.10) 0%, transparent 50%), radial-gradient(ellipse at 90% 90%, oklch(from var(--color-primary) l c h / 0.06) 0%, transparent 50%); pointer-events: none; } .love-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; position: relative; z-index: 1; } @media (max-width: 880px) { .love-grid { grid-template-columns: 1fr; } } /* Image side --------------------------------------------------- */ .love-img-wrap { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -20px oklch(from var(--color-charcoal) l c h / 0.45), 0 0 0 1px oklch(from var(--color-charcoal) l c h / 0.06); transform: rotate(-1.2deg); transition: transform 0.5s cubic-bezier(.22,.6,.36,1); } .love-img-wrap:hover { transform: rotate(0deg) scale(1.01); } .love-img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.03); } /* Hand-stamped "fatto con amore" overlay */ .love-stamp { position: absolute; bottom: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); background: var(--color-bg); border: 1.5px solid var(--color-gold); border-radius: 999px; padding: clamp(0.9rem, 1.5vw, 1.25rem) clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; align-items: center; gap: 2px; transform: rotate(6deg); box-shadow: 0 12px 28px -10px oklch(from var(--color-charcoal) l c h / 0.45); max-width: 60%; text-align: center; } .love-stamp-script { font-family: var(--font-script); font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1; font-weight: 500; color: var(--color-primary); letter-spacing: 0.01em; } .love-stamp-script.accent-italic { font-style: italic; color: var(--color-gold-hover); margin-top: -2px; } .love-stamp-tr { font-family: var(--font-display); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 6px; } /* Text side ---------------------------------------------------- */ .love-text h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 1rem + 4.5vw, 5rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 var(--space-6); color: var(--color-text); } .love-text .accent-italic { font-style: italic; font-family: var(--font-script); font-weight: 500; color: var(--color-primary); position: relative; padding: 0 0.05em; } .love-text .accent-italic::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0.05em; height: 0.42em; background: oklch(from var(--color-gold) l c h / 0.28); z-index: -1; border-radius: 4px; transform: skewX(-6deg); } .love-lede { font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.6; color: var(--color-text); margin: 0 0 var(--space-5); font-weight: 500; } .love-body { font-size: var(--text-base); line-height: 1.7; color: var(--color-text-muted); margin: 0 0 var(--space-8); } /* Three pillars: Time / Hands / Heart */ .love-pillars { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); border-top: 1px solid var(--color-divider); padding-top: var(--space-6); } .love-pillars li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; } .pillar-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-gold); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; line-height: 1; padding-top: 4px; min-width: 2.2ch; } .love-pillars h4 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin: 0 0 4px; color: var(--color-text); letter-spacing: -0.005em; } .love-pillars p { font-size: 0.95rem; line-height: 1.55; color: var(--color-text-muted); margin: 0; } /* Closing italian phrase */ .love-signoff { margin: 0; padding: var(--space-6) 0 0; border-top: 1px dashed var(--color-border); display: flex; flex-direction: column; gap: 4px; } .signoff-script { font-family: var(--font-script); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.2vw, 1.85rem); color: var(--color-primary); line-height: 1.1; font-weight: 500; } .signoff-tr { font-size: 0.85rem; color: var(--color-text-faint); letter-spacing: 0.05em; font-style: normal; } /* Dark theme adjustments */ [data-theme='dark'] .love { background: linear-gradient(180deg, var(--color-surface-offset) 0%, var(--color-bg) 60%, var(--color-surface) 100%); } [data-theme='dark'] .love-stamp { background: var(--color-surface); } [data-theme='dark'] .love-img-wrap { box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px oklch(from var(--color-gold) l c h / 0.12); } /* ================================================================= MENU NOTICE STRIP — large orders + delivery terms ================================================================= */ .menu-notice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); align-items: stretch; margin-bottom: var(--space-8); padding: var(--space-5) var(--space-6); background: linear-gradient(90deg, oklch(from var(--color-primary) l c h / 0.04), oklch(from var(--color-gold) l c h / 0.04)); border: 1px solid oklch(from var(--color-primary) l c h / 0.22); border-left: 4px solid var(--color-primary); border-radius: var(--radius-lg); } .menu-notice-item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-2) 0; } .menu-notice-item + .menu-notice-item { border-left: 1px dashed var(--color-border); padding-left: var(--space-6); } .menu-notice-item svg { flex: 0 0 28px; width: 28px; height: 28px; color: var(--color-primary); margin-top: 2px; } .menu-notice-item strong { display: block; font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text); letter-spacing: -0.01em; margin-bottom: 2px; } .menu-notice-item span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; } @media (max-width: 720px) { .menu-notice { grid-template-columns: 1fr; gap: 0; padding: var(--space-4) var(--space-5); } .menu-notice-item + .menu-notice-item { border-left: 0; border-top: 1px dashed var(--color-border); padding-left: 0; padding-top: var(--space-4); margin-top: var(--space-4); } } /* ================================================================= MENU TAB — HOT (Lunch Specials) ================================================================= */ .menu-tab-hot { position: relative; color: var(--color-primary); background: oklch(from var(--color-primary) l c h / 0.08); border-color: oklch(from var(--color-primary) l c h / 0.25); display: inline-flex; align-items: center; gap: 0.5rem; } .menu-tab-hot:hover { color: var(--color-primary-hover); background: oklch(from var(--color-primary) l c h / 0.14); } .menu-tab-hot.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .menu-tab-hot.active .tab-pill { background: rgba(255,255,255,0.18); color: #fff; } .tab-pill { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.15rem 0.5rem; border-radius: var(--radius-full); background: var(--color-gold-highlight); color: var(--color-gold-hover); text-transform: uppercase; } /* ================================================================= LUNCH SPECIALS PANEL ================================================================= */ .lunch-hero { text-align: center; max-width: 720px; margin: 0 auto var(--space-10); padding: var(--space-2) var(--space-4); } .lunch-hero-tag { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); padding: 0.35rem 0.85rem; background: oklch(from var(--color-primary) l c h / 0.10); border-radius: var(--radius-full); margin-bottom: var(--space-4); } .lunch-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--space-3); } .lunch-hero-title .accent, .lunch-hero-title .accent-italic { font-family: var(--font-script); font-style: italic; color: var(--color-primary); font-weight: 400; } .lunch-hero-sub { font-size: var(--text-base); color: var(--color-text-muted); max-width: 540px; margin: 0 auto; } .lunch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } @media (max-width: 1100px) { .lunch-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .lunch-grid { grid-template-columns: 1fr; } } .lunch-card { position: relative; display: flex; flex-direction: column; background: var(--color-card, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5) var(--space-5); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .lunch-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: oklch(from var(--color-gold) l c h / 0.5); } .lunch-card-featured { border-top: 4px solid var(--color-primary); background: linear-gradient(180deg, oklch(from var(--color-primary) l c h / 0.04), transparent 40%), var(--color-card, #fff); } .lunch-card-featured::before { content: 'Popular'; position: absolute; top: -10px; left: var(--space-5); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.6rem; background: var(--color-primary); color: #fff; border-radius: var(--radius-full); } .lunch-card-num { position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-display); font-size: 1.5rem; font-style: italic; color: var(--color-gold); letter-spacing: -0.02em; opacity: 0.7; } .lunch-card h4 { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.01em; line-height: 1.15; margin: var(--space-2) 0 var(--space-3); padding-right: 2.5rem; } .lunch-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; margin-bottom: var(--space-4); flex: 1; } .lunch-desc .plus { color: var(--color-gold); font-weight: 600; padding: 0 0.15em; } .lunch-price { font-family: var(--font-display); font-size: 1.875rem; color: var(--color-primary); letter-spacing: -0.02em; line-height: 1; margin-top: auto; } .lunch-fine { margin-top: var(--space-8); text-align: center; font-size: var(--text-sm); font-style: italic; color: var(--color-text-muted); } /* ================================================================= CREATIONS SHOWCASE — pre-menu hero strip ================================================================= */ .creations-showcase { padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); background: radial-gradient(900px 500px at 90% 0%, oklch(from var(--color-gold) l c h / 0.06), transparent 65%), radial-gradient(800px 500px at 0% 100%, oklch(from var(--color-primary) l c h / 0.06), transparent 65%), var(--color-bg); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); } .creations-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-10); align-items: end; margin-bottom: var(--space-12); } .creations-head h2 { font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1.02; letter-spacing: -0.025em; margin: var(--space-3) 0 var(--space-4); } .creations-head h2 .accent { font-family: var(--font-script); font-style: italic; color: var(--color-primary); } .creations-head .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; } .flag-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66% 100%); box-shadow: 0 0 0 1px var(--color-border); } .creations-lede { font-size: var(--text-base); color: var(--color-text-muted); max-width: 56ch; line-height: 1.55; } .creations-pricing { background: var(--color-card, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-sm); } .creations-pricing-label { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); } .creations-pricing-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--color-text); } .creations-pricing-row span { display: inline-flex; align-items: baseline; gap: 0.35rem; } .creations-pricing-row strong { font-family: var(--font-display); font-style: italic; color: var(--color-primary); font-size: 1rem; } @media (max-width: 860px) { .creations-head { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; } } .creations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 980px) { .creations-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .creations-grid { grid-template-columns: 1fr; } } .creation-card { position: relative; display: flex; flex-direction: column; background: var(--color-card, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease; } .creation-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: oklch(from var(--color-gold) l c h / 0.55); } .creation-card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg); } .creation-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); } .creation-card:hover .creation-card-img img { transform: scale(1.06); } .creation-tag { position: absolute; top: var(--space-3); left: var(--space-3); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.65rem; background: var(--color-charcoal); color: var(--color-text-inverse, #fff); border-radius: var(--radius-full); } .creation-card-body { padding: var(--space-5) var(--space-5) var(--space-6); } .creation-card-body h3 { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.015em; margin-bottom: var(--space-2); } .creation-card-body p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; } .creations-cta { margin-top: var(--space-10); display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding-top: var(--space-8); border-top: 1px dashed var(--color-border); } .creations-cta p { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; max-width: 70ch; line-height: 1.55; } @media (max-width: 720px) { .creations-cta { flex-direction: column; align-items: stretch; text-align: center; } .creations-cta .btn { width: 100%; } } /* ================================================================= REVEAL PHONE BUTTON ================================================================= */ .reveal-phone { position: relative; cursor: pointer; } .reveal-phone::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 0.5rem; vertical-align: -2px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .reveal-phone.revealed { font-family: var(--font-display); letter-spacing: 0.02em; background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .reveal-phone.revealed::before { background-color: #fff; } /* ================================================================= DARK THEME — new component adjustments ================================================================= */ [data-theme='dark'] .menu-notice { background: linear-gradient(90deg, oklch(from var(--color-primary) l c h / 0.10), oklch(from var(--color-gold) l c h / 0.10)); border-color: oklch(from var(--color-primary) l c h / 0.32); } [data-theme='dark'] .lunch-card, [data-theme='dark'] .creation-card, [data-theme='dark'] .creations-pricing { background: var(--color-surface, #1a1410); } [data-theme='dark'] .creations-showcase { background: radial-gradient(900px 500px at 90% 0%, oklch(from var(--color-gold) l c h / 0.08), transparent 65%), radial-gradient(800px 500px at 0% 100%, oklch(from var(--color-primary) l c h / 0.08), transparent 65%), var(--color-bg); } /* ============================================================ SERVICE AREA (Hyper-local SEO section) ============================================================ */ .service-area { background: var(--color-bg); padding: var(--space-12) 0; border-top: 1px solid var(--color-divider); } .service-area-grid { display: grid; gap: var(--space-6); max-width: 920px; margin: 0 auto; } .service-area-text .eyebrow { color: var(--color-primary); font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--space-2); } .service-area-text h2 { font-family: var(--font-display); color: var(--color-charcoal); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; margin: 0 0 var(--space-4); } .service-area-text p { color: var(--color-text); font-size: 1.05rem; line-height: 1.65; margin: 0 0 var(--space-4); max-width: 70ch; } .service-area-list { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); } .service-area-list li { background: var(--color-surface-2); border: 1px solid var(--color-border); border-left: 4px solid var(--color-basil); padding: var(--space-3) var(--space-4); border-radius: 6px; color: var(--color-text); font-size: 0.95rem; line-height: 1.5; } .service-area-list li strong { display: block; color: var(--color-primary); font-family: var(--font-display); font-size: 1rem; margin-bottom: 2px; } .service-area-fine { font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; border-top: 1px dashed var(--color-divider); padding-top: var(--space-3); margin-top: var(--space-4); } /* ============================================================ FAQ (Frequently Asked Questions — feeds AI Overviews/voice) ============================================================ */ .faq { background: var(--color-surface); padding: var(--space-12) 0; border-top: 1px solid var(--color-divider); } .faq-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-8); } .faq-head .eyebrow { color: var(--color-primary); font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--space-2); } .faq-head h2 { font-family: var(--font-display); color: var(--color-charcoal); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; margin: 0 0 var(--space-3); } .faq-head p { color: var(--color-text-muted); font-size: 1rem; line-height: 1.6; margin: 0; } .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 1080px; margin: 0 auto; } @media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; } } .faq-item { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 10px; padding: 0; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; overflow: hidden; } .faq-item:hover { border-color: var(--color-gold); box-shadow: 0 6px 20px rgba(28, 20, 17, 0.06); transform: translateY(-1px); } .faq-item[open] { border-color: var(--color-primary); box-shadow: 0 8px 24px rgba(184, 49, 31, 0.08); } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); color: var(--color-charcoal); user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { display: none; content: ''; } .faq-item h3 { margin: 0; display: inline; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--color-charcoal); line-height: 1.35; } .faq-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-gold-highlight); color: var(--color-gold-hover); font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; line-height: 1; transition: transform 250ms ease, background 250ms ease, color 250ms ease; } .faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--color-primary); color: #fff; } .faq-item > *:not(summary) { padding: 0 var(--space-5) var(--space-5); color: var(--color-text); font-size: 0.98rem; line-height: 1.65; margin: 0; } .faq-item p { margin: 0; } /* ================================================================= SUNDAY SAUCE — APPETITE WARM-UP Alternating warm bands so each section feels alive. Inspired by Papa John's / Little Caesars energy, kept on-brand with the Italian flag palette (tomato · cream · basil · gold). This block is LAST and intentionally overrides earlier section bgs. ================================================================= */ /* Body sets the warm baseline (slight peach) */ body { background: /* faint diagonal checker hint — extremely subtle */ repeating-linear-gradient(135deg, rgba(184, 49, 31, 0.012) 0 22px, transparent 22px 44px), linear-gradient(180deg, #fdf6e8 0%, #fbeed7 100%); background-attachment: fixed; } /* ---------- QUICK ORDER (red strip just under hero) ---------- */ .quickorder { background: radial-gradient(ellipse at 20% 50%, rgba(255, 248, 230, 0.25) 0%, transparent 55%), linear-gradient(95deg, #b8311f 0%, #c93822 50%, #a82716 100%) !important; color: #fff8e1 !important; border-top: 3px solid var(--color-gold); border-bottom: 3px solid var(--color-gold); position: relative; } .quickorder .eyebrow, .quickorder .quickorder-eyebrow { color: #ffd97a !important; } .quickorder .quickorder-title, .quickorder h2 { color: #fff8e1 !important; } .quickorder .quickorder-title .accent { color: #ffd97a !important; } /* Category tiles: cream cards with dark text so labels & prices are readable */ .quickorder .qo-card { background: #fff8e1 !important; border: 1px solid rgba(255, 217, 122, 0.6) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .quickorder .qo-card:hover { transform: translateY(-3px); border-color: var(--color-gold) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .quickorder .qo-icon { filter: none !important; } .quickorder .qo-label { color: var(--color-charcoal) !important; font-weight: 700; } .quickorder .qo-sub { color: var(--color-primary) !important; font-weight: 600; } /* ---------- ABOUT / OUR STORY (warm cream, slightly toasted) ---------- */ .about { background: radial-gradient(ellipse 80% 50% at 80% 20%, rgba(200, 155, 42, 0.10) 0%, transparent 60%), radial-gradient(ellipse 70% 45% at 10% 80%, rgba(74, 102, 56, 0.06) 0%, transparent 60%), linear-gradient(180deg, #fef4dc 0%, #fbeac8 100%) !important; position: relative; } .about::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 30%, rgba(184, 49, 31, 0.04) 0 1px, transparent 1.5px) 0 0 / 56px 56px; pointer-events: none; opacity: 0.7; } .about > * { position: relative; z-index: 1; } /* ---------- SIGNATURES (warm tomato wash) ---------- */ .signature { background: radial-gradient(ellipse at top left, rgba(184, 49, 31, 0.10) 0%, transparent 55%), radial-gradient(ellipse at bottom right, rgba(200, 155, 42, 0.10) 0%, transparent 55%), linear-gradient(180deg, #fff1d8 0%, #fde2bc 100%) !important; position: relative; } /* ---------- CREATIONS SHOWCASE (rich golden glow) ---------- */ .creations-showcase { background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 220, 130, 0.40) 0%, transparent 65%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(184, 49, 31, 0.10) 0%, transparent 60%), linear-gradient(180deg, #fde9c0 0%, #f6d9a0 100%) !important; position: relative; } /* ---------- MENU (clean ivory — keeps cards readable) ---------- */ .menu { background: radial-gradient(ellipse at top, rgba(74, 102, 56, 0.06) 0%, transparent 55%), linear-gradient(180deg, #fff8ea 0%, #fdedcb 100%) !important; position: relative; } .menu::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 25%, rgba(200, 155, 42, 0.05) 0 2px, transparent 3px) 0 0 / 84px 84px, radial-gradient(circle at 70% 60%, rgba(184, 49, 31, 0.04) 0 2px, transparent 3px) 0 0 / 96px 96px; pointer-events: none; } .menu > * { position: relative; z-index: 1; } /* ---------- BOROUGH SPECIALS (tomato red band — the big appetite hit) ---------- */ .specials { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 200, 80, 0.18) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0, 0, 0, 0.10) 0%, transparent 55%), linear-gradient(180deg, #b8311f 0%, #9b2718 100%) !important; color: #fef4dc !important; border-top: 4px solid var(--color-gold) !important; border-bottom: 4px solid var(--color-gold) !important; position: relative; } .specials .eyebrow, .specials h2, .specials h2 .accent, .specials p, .specials li, .specials small { color: #fef4dc !important; } .specials .eyebrow { color: #ffd97a !important; } .specials .eyebrow::before { background: #ffd97a !important; } .specials h2 .accent { color: #ffd97a !important; font-style: italic; } /* Borough cards: lift on red background */ .specials .borough-card, .specials .special-card { background: #fff8e1 !important; border: 1px solid rgba(255, 217, 122, 0.5) !important; color: var(--color-text) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .specials .borough-card h3, .specials .borough-card p, .specials .borough-card li, .specials .borough-card strong, .specials .special-card h3, .specials .special-card p, .specials .special-card li, .specials .special-card strong { color: var(--color-text) !important; } .specials .borough-card .save-pill, .specials .special-card .save-pill { background: var(--color-primary) !important; color: #fff !important; } /* ---------- LOVE / MADE WITH LOVE (basil green wash) ---------- */ .love { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 240, 200, 0.30) 0%, transparent 60%), linear-gradient(180deg, #5b7944 0%, #4a6638 100%) !important; color: #fef4dc !important; border-top: 4px solid var(--color-gold); border-bottom: 4px solid var(--color-gold); } .love *, .love h2, .love p, .love .eyebrow { color: #fef4dc !important; } .love .eyebrow { color: #ffd97a !important; } .love h2 .accent { color: #ffd97a !important; font-style: italic; } /* ---------- DELIVERY (warm sandstone) ---------- */ .delivery { background: radial-gradient(ellipse 60% 50% at 90% 10%, rgba(184, 49, 31, 0.08) 0%, transparent 55%), linear-gradient(180deg, #f6d9a0 0%, #f0c87a 100%) !important; position: relative; } /* ---------- SERVICE AREA (cool basil-tinted cream for contrast) ---------- */ .service-area { background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(74, 102, 56, 0.12) 0%, transparent 60%), linear-gradient(180deg, #f3eed3 0%, #e8e1bf 100%) !important; position: relative; } .service-area-list li { background: #fff8e1 !important; border-left: 4px solid var(--color-basil) !important; } /* ---------- FAQ (warm peachy cream) ---------- */ .faq { background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(200, 155, 42, 0.12) 0%, transparent 60%), linear-gradient(180deg, #fff1d8 0%, #fde2bc 100%) !important; position: relative; } .faq-item { background: #fff8e1 !important; } /* ---------- VISIT (rich cream with gold glow) ---------- */ .visit { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(200, 155, 42, 0.15) 0%, transparent 60%), linear-gradient(180deg, #fde9c0 0%, #f6d9a0 100%) !important; position: relative; } /* ---------- FOOTER (deep tomato — closes the warm story) ---------- */ .footer { background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 217, 122, 0.10) 0%, transparent 60%), linear-gradient(180deg, #9b2718 0%, #7d1d12 100%) !important; color: #fef4dc !important; border-top: 4px solid var(--color-gold); } .footer *, .footer a, .footer p, .footer li, .footer h3, .footer h4 { color: #fef4dc !important; } .footer a:hover { color: #ffd97a !important; } .footer .footer-bottom, .footer small { color: rgba(254, 244, 220, 0.7) !important; } /* ---------- Subtle "wavy edge" between sections for energy ---------- */ .about + .signature, .signature + .creations-showcase, .creations-showcase + .menu, .menu + .specials, .specials + .love, .love + .delivery, .delivery + .service-area, .service-area + .faq, .faq + .visit { position: relative; } /* Mobile: simplify gradients for perf */ @media (max-width: 720px) { body { background: linear-gradient(180deg, #fdf6e8 0%, #fbeed7 100%); } } /* ================================================================= ROUND 2 — Hero color, Mangia badge contrast, footer black logo ================================================================= */ /* ---------- HERO: pure white background with desaturated NY skyline only ---------- */ .hero.hero-v2, .hero { background: /* soft white wash so skyline becomes a faint architectural watermark */ linear-gradient(100deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 38%, rgba(255, 255, 255, 0.55) 70%, rgba(255, 255, 255, 0.40) 100%), url('../assets/ny-skyline.png') center bottom / cover no-repeat, #ffffff !important; color: var(--color-text) !important; } @media (max-width: 720px) { .hero.hero-v2, .hero { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 45%, rgba(255, 255, 255, 0.65) 80%, rgba(255, 255, 255, 0.90) 100%), url('../assets/ny-skyline.png') center 85% / cover no-repeat, #ffffff !important; } } /* Hero text colors flipped for white background readability */ .hero .hero-banner, .hero .hero-h1, .hero h1, .hero .hero-italic, .hero .hero-tagline, .hero .hero-content p, .hero .hero-banner span, .hero .hero-banner strong { color: var(--color-text) !important; } .hero .hero-h1 .accent, .hero h1 .accent, .hero .hero-italic { color: var(--color-primary) !important; } /* Family-Owned banner pill on white hero */ .hero .hero-banner { background: rgba(0, 0, 0, 0.06) !important; border: 1px solid rgba(0, 0, 0, 0.10) !important; } /* ---------- MANGIA badge: fix invisible cream-on-cream text ---------- */ .love .love-stamp, .love-img-wrap .love-stamp, .love-stamp { background: #fef4dc !important; border: 2px solid var(--color-gold) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30) !important; } .love .love-stamp-script, .love-stamp-script { color: var(--color-primary) !important; } .love .love-stamp-script.accent-italic, .love-stamp-script.accent-italic { color: var(--color-gold-hover) !important; } .love .love-stamp-tr, .love-stamp-tr { color: var(--color-charcoal) !important; } /* ---------- FOOTER LOGO: black Little Anthony's plaque on tomato ---------- */ .footer-logo-link { display: inline-block; margin-bottom: var(--space-4); text-decoration: none; line-height: 0; } .footer-logo-img { display: block; max-width: 240px; width: 100%; height: auto; /* Cream tile behind the black logo so the white text inside the JPEG pops on red */ background: #fef4dc; padding: 14px 18px; border-radius: 14px; border: 2px solid var(--color-gold); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30), inset 0 0 0 2px rgba(255, 255, 255, 0.5); transition: transform 220ms ease, box-shadow 220ms ease; } .footer-logo-link:hover .footer-logo-img { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), inset 0 0 0 2px rgba(255, 255, 255, 0.6); } /* ================================================================= ROUND 3 — Bold hero, trimmed menus, new Pasta hero section ================================================================= */ /* ---------- HERO: WHITE background + NY skyline, NO red (test) ---------- */ .hero.hero-v2, .hero { background: #ffffff !important; color: var(--color-text) !important; } /* NY skyline photograph as a faint architectural watermark */ .hero.hero-v2::before, .hero::before { content: ""; position: absolute; inset: 0; background: url('../assets/ny-skyline.png') center bottom / cover no-repeat; /* Fade in from top (invisible) to bottom (visible but soft) */ -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.85) 85%, rgba(0,0,0,1) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.85) 85%, rgba(0,0,0,1) 100%); opacity: 0.55; filter: saturate(0.7) brightness(1.05); mix-blend-mode: normal; pointer-events: none; z-index: 0; } /* Soft white wash from the left so headline text stays crisp */ .hero.hero-v2::after, .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.45) 38%, rgba(255, 255, 255, 0.15) 70%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 0; mix-blend-mode: normal; } .hero.hero-v2 .container, .hero.hero-v2 .hero-grid, .hero .container, .hero .hero-grid { position: relative; z-index: 1; } /* Hero text: dark on white for readability */ .hero h1, .hero .hero-italic, .hero .accent, .hero-tagline, .hero-eyebrow, .hero .trust-item, .hero .hero-trust, .hero .hero-trust .muted { color: var(--color-text) !important; } .hero .accent, .hero h1 .accent { color: var(--color-primary) !important; } .hero .hero-italic { color: var(--color-primary) !important; } .hero-tagline { color: var(--color-text-muted) !important; } .hero .hero-trust .muted { color: var(--color-text-muted) !important; } .hero .trust-sep { background: rgba(0, 0, 0, 0.15) !important; } /* Outline button: dark on white */ .hero .btn-outline-light { border-color: rgba(0, 0, 0, 0.55) !important; color: var(--color-text) !important; background: transparent !important; } .hero .btn-outline-light:hover { background: rgba(0, 0, 0, 0.05) !important; border-color: var(--color-text) !important; } /* Primary CTA on red — use gold so it pops */ .hero .btn-primary { background: var(--color-gold) !important; color: #1c1411 !important; border-color: var(--color-gold) !important; } .hero .btn-primary:hover { background: #d9a82e !important; color: #1c1411 !important; } /* Pill: red badge becomes cream on dark red bg */ .hero .pill-red { background: rgba(254, 244, 220, 0.95) !important; color: var(--color-primary) !important; } /* Price tag on hero — gold pill */ .hero .hero-price-tag { background: linear-gradient(180deg, #fef4dc 0%, #f8e6c3 100%) !important; color: #1c1411 !important; border: 2px solid var(--color-gold) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important; } .hero .hero-price-tag .price-from, .hero .hero-price-tag .price-sub { color: #5a3a16 !important; } .hero .hero-price-tag .price-number, .hero .hero-price-tag .price-dollar, .hero .hero-price-tag .price-cents { color: var(--color-primary) !important; } /* Photo edge: warm gold glow against red */ .hero .hero-photo { box-shadow: 0 0 0 6px rgba(254, 244, 220, 0.95), 0 0 0 8px var(--color-gold), 0 22px 50px rgba(0, 0, 0, 0.4) !important; } @media (max-width: 720px) { .hero.hero-v2, .hero { background: #ffffff !important; } } /* ---------- "More on the full menu" link inside menu panels ---------- */ .menu-more-link { text-align: center; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed rgba(184, 49, 31, 0.25); } .menu-more-link a { color: var(--color-primary); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none; border-bottom: 2px solid rgba(200, 155, 42, 0.4); padding-bottom: 2px; transition: border-color 200ms ease, color 200ms ease; } .menu-more-link a:hover { color: #8a1f12; border-bottom-color: var(--color-gold); } /* ---------- PASTA HERO SECTION ---------- */ .pasta-hero { padding: clamp(64px, 9vw, 120px) 0; background: radial-gradient(ellipse 50% 40% at 12% 18%, rgba(200, 155, 42, 0.12) 0%, transparent 60%), radial-gradient(ellipse 45% 35% at 88% 80%, rgba(74, 102, 56, 0.10) 0%, transparent 60%), linear-gradient(180deg, #fcf2dd 0%, #f7e6c2 100%); position: relative; } .pasta-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 8% 28%, rgba(184, 49, 31, 0.05) 0 1.5px, transparent 2px), radial-gradient(circle at 78% 62%, rgba(74, 102, 56, 0.05) 0 1.5px, transparent 2px), radial-gradient(circle at 42% 88%, rgba(200, 155, 42, 0.05) 0 1.5px, transparent 2px); background-size: 120px 120px; pointer-events: none; z-index: 0; } .pasta-hero > .container { position: relative; z-index: 1; } .pasta-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: end; margin-bottom: var(--space-7); } .pasta-head h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; color: var(--color-charcoal); margin: var(--space-2) 0 0; } .pasta-head h2 .accent { font-style: italic; color: var(--color-primary); } .pasta-head > p { color: rgba(28, 20, 17, 0.78); font-size: 1.05rem; line-height: 1.6; max-width: 460px; justify-self: end; } .pasta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); } .pasta-card { background: #fef9ec; border: 1px solid rgba(200, 155, 42, 0.28); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; box-shadow: 0 4px 14px rgba(120, 70, 30, 0.08); } .pasta-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(120, 70, 30, 0.18); border-color: var(--color-gold); } .pasta-card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f3e1bc; } .pasta-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms ease; } .pasta-card:hover .pasta-card-img img { transform: scale(1.04); } .pasta-tag { position: absolute; top: 12px; left: 12px; background: var(--color-primary); color: #fef4dc; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); } .pasta-card-body { padding: var(--space-4) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .pasta-card-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); } .pasta-card-row h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--color-charcoal); margin: 0; line-height: 1.2; } .pasta-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-gold); letter-spacing: 0.01em; white-space: nowrap; } .pasta-card-body p { font-size: 0.94rem; color: rgba(28, 20, 17, 0.72); line-height: 1.5; margin: 0; } .pasta-cta { margin-top: var(--space-6); text-align: center; padding-top: var(--space-5); border-top: 1px dashed rgba(184, 49, 31, 0.25); } .pasta-cta p { color: rgba(28, 20, 17, 0.7); font-size: 0.95rem; margin-bottom: var(--space-3); max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.5; } @media (max-width: 720px) { .pasta-head { grid-template-columns: 1fr; align-items: start; } .pasta-head > p { justify-self: start; max-width: 100%; } } /* Round 3 hero — force gold fill on accent over red bg (override transparent text trick) */ .hero.hero-v2 h1 .accent, .hero-v2 h1 .accent { -webkit-text-fill-color: #ffd97a !important; color: #ffd97a !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .hero.hero-v2 h1 .hero-italic, .hero-v2 h1 .hero-italic { color: #ffd97a !important; -webkit-text-fill-color: #ffd97a !important; } /* ================================================================= ROUND 4 — Basil green header bar (matches the Love section) ================================================================= */ .site-header, header.site-header, .header { background: linear-gradient(180deg, #5a7a44 0%, #4a6638 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 2px solid transparent !important; border-image: linear-gradient(90deg, #2f4523 0 33.33%, var(--color-gold) 33.33% 66.66%, var(--color-primary) 66.66% 100% ) 1 !important; box-shadow: 0 6px 22px rgba(28, 20, 17, 0.18) !important; } .header--scrolled { background: linear-gradient(180deg, #4a6638 0%, #3d5530 100%) !important; box-shadow: 0 8px 26px rgba(28, 20, 17, 0.25) !important; } /* Nav text on green: cream */ .header .nav-links a, .header .nav-phone, .header .nav-phone span, .header .theme-toggle, .header .logo, .header .logo-mark { color: #fef4dc !important; } .header .nav-links a { transition: color 200ms ease, background 200ms ease; border-radius: 6px; } .header .nav-links a:hover { color: #ffd97a !important; background: rgba(254, 244, 220, 0.08); } .header .nav-phone svg { stroke: var(--color-gold) !important; } .header .theme-toggle:hover { color: #ffd97a !important; } /* Order Online button on green header: tomato-red CTA pops nicely */ .header .nav-cta.btn-primary { background: var(--color-primary) !important; color: #fef4dc !important; border-color: var(--color-primary) !important; box-shadow: 0 6px 18px rgba(184, 49, 31, 0.4) !important; } .header .nav-cta.btn-primary:hover { background: #d44430 !important; border-color: #d44430 !important; } /* Logo plaque on green header — transparent PNG, no tile/border */ .header .logo-mark, .site-header .logo-mark, header.site-header .logo-mark { mix-blend-mode: normal !important; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)) !important; background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: 72px !important; max-height: 72px !important; width: auto !important; object-fit: contain !important; } @media (max-width: 720px) { .header .logo-mark, .site-header .logo-mark, header.site-header .logo-mark { height: 54px !important; max-height: 54px !important; } } /* Footer logo — transparent PNG, no tile (the dark plate already has its own border) */ .footer-logo-img { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) !important; mix-blend-mode: normal !important; } /* Hero bottom trust row — dark text on white hero */ .hero .hero-trust, .hero.hero-v2 .hero-trust { position: relative; padding: 14px 18px !important; border-radius: 12px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } .hero .hero-trust .trust-item, .hero.hero-v2 .hero-trust .trust-item { color: var(--color-text) !important; text-shadow: none; } .hero .hero-trust .trust-item strong, .hero.hero-v2 .hero-trust .trust-item strong { color: var(--color-primary) !important; } .hero .hero-trust .muted, .hero.hero-v2 .hero-trust .muted { color: var(--color-text-muted) !important; } .hero .hero-trust .trust-sep, .hero.hero-v2 .hero-trust .trust-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(0, 0, 0, 0.25); } /* Visit section — no more map; let the info panel breathe full width and center */ .visit-grid { grid-template-columns: 1fr !important; max-width: 720px; margin-left: auto; margin-right: auto; } .visit-info { text-align: center; } .visit-info .visit-blocks, .visit-info > div { /* fallback */ } /* ============== CONSPICUOUS "Order Delivery" CTA ============== */ .btn-delivery-cta { font-size: 1.15rem !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 18px 34px !important; border-radius: 999px !important; background: linear-gradient(180deg, #d6432d 0%, #b8311f 60%, #9c2716 100%) !important; color: #fef4dc !important; border: 2px solid #ffd97a !important; box-shadow: 0 0 0 4px rgba(255, 217, 122, 0.18), 0 14px 32px rgba(184, 49, 31, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; position: relative; overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease; animation: deliveryPulse 2.4s ease-in-out infinite; } .btn-delivery-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%); transform: translateX(-100%); animation: deliveryShine 3.6s ease-in-out infinite; pointer-events: none; } .btn-delivery-cta:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.05); box-shadow: 0 0 0 5px rgba(255, 217, 122, 0.28), 0 18px 38px rgba(184, 49, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } .btn-delivery-cta:active { transform: translateY(0) scale(0.99); } .btn-delivery-cta .btn-arrow svg { stroke-width: 3 !important; } @keyframes deliveryPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 217, 122, 0.18), 0 14px 32px rgba(184, 49, 31, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); } 50% { box-shadow: 0 0 0 8px rgba(255, 217, 122, 0.10), 0 18px 40px rgba(184, 49, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22); } } @keyframes deliveryShine { 0%, 60%, 100% { transform: translateX(-100%); } 80% { transform: translateX(100%); } } @media (max-width: 720px) { .btn-delivery-cta { width: 100%; justify-content: center; padding: 18px 28px !important; font-size: 1.05rem !important; } } @media (prefers-reduced-motion: reduce) { .btn-delivery-cta { animation: none; } .btn-delivery-cta::before { animation: none; opacity: 0; } } /* ================================================================= MENU ADDITIONS — Slice grid (3-up) + Weekend Family Specials ================================================================= */ /* 3-column variant of size-grid for Pizza by the Slice */ .size-grid.size-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 720px; margin-left: auto; margin-right: auto; } @media (max-width: 640px) { .size-grid.size-grid-3 { grid-template-columns: repeat(3, 1fr); } } /* Weekend Family Specials wrapper — gentle separation from lunch grid above */ .weekend-family-section { margin-top: var(--space-12, 4rem); padding-top: var(--space-10, 3rem); border-top: 1px dashed oklch(from var(--color-gold) l c h / 0.45); } .weekend-family-section .menu-section-head h3 { /* keep heading consistent — accent already in span */ } .weekend-family-section .lunch-card-featured::before { content: 'Weekend'; background: var(--color-basil, #4a6638); } /* ================================================================= QUICK-ORDER TILES — Full-bleed photo on Pizza, text-only on others ================================================================= */ /* Hide any leftover emoji icons */ .qo-card .qo-icon { display: none !important; } /* Every tile is vertically centered so text-only tiles align with the photo tile */ .qo-card { display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 168px; position: relative; overflow: hidden; } .qo-card:not(.qo-card-photo) .qo-label { margin-top: 0.25rem; } /* PHOTO TILE — full-bleed pepperoni shot with dark gradient overlay for legibility */ .qo-card-photo { background: radial-gradient(circle at 50% 55%, #c63a26 0%, #8a1f12 70%, #5a1208 100%); border-color: var(--color-gold, #c89b2a) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .qo-card-photo .qo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; /* Source photo has whitespace around the pie — scale + shift to fill card edge-to-edge */ transform: scale(1.55) translateY(-2%); transform-origin: center 55%; z-index: 0; transition: transform 0.5s ease; } .qo-card-photo:hover .qo-bg { transform: scale(1.68) translateY(-2%); } .qo-card-photo .qo-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.10) 75%, rgba(0,0,0,0.0) 100%); pointer-events: none; } .qo-card-photo .qo-label, .qo-card-photo .qo-sub { position: relative; z-index: 2; color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5); } .qo-card-photo .qo-label { font-weight: 800; letter-spacing: 0.01em; } .qo-card-photo .qo-sub { color: #ffd97a !important; font-weight: 700; } /* hover transform handled above */ /* Override the dark-mode/red-band rules from earlier so the photo card stays photo-first */ .quickorder .qo-card.qo-card-photo .qo-label { color: #fff !important; } .quickorder .qo-card.qo-card-photo .qo-sub { color: #ffd97a !important; } @media (max-width: 640px) { .qo-card { min-height: 140px; } } /* ================================================================= HERO BANNER — Expressive top status (moved from below CTAs) ================================================================= */ .hero-banner { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1.5rem; padding: 0.6rem 1.2rem; background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.38) 100%); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12); color: #fff; font-size: 0.92rem; letter-spacing: 0.01em; max-width: 100%; animation: hbFadeIn 0.7s ease 0.1s both; } @keyframes hbFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Italian-flag chip on the left */ .hb-chip { display: inline-flex; align-items: center; padding: 4px; background: rgba(255,255,255,0.95); border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); flex-shrink: 0; } .hb-chip-flag .flag-g, .hb-chip-flag .flag-w, .hb-chip-flag .flag-r { display: inline-block; width: 8px; height: 18px; } .hb-chip-flag .flag-g { background: #008c45; border-radius: 4px 0 0 4px; } .hb-chip-flag .flag-w { background: #f4f5f0; } .hb-chip-flag .flag-r { background: #cd212a; border-radius: 0 4px 4px 0; } .hb-item { display: inline-flex; align-items: center; gap: 0.4rem; color: #fff; white-space: nowrap; } .hb-item strong { color: var(--color-gold, #ffd97a); font-weight: 700; letter-spacing: 0.02em; } .hb-item-lead strong { color: #fff; } .hb-muted { color: rgba(255,255,255,0.72); font-size: 0.86em; font-style: italic; margin-left: 0.15rem; } .hb-sep { width: 1px; height: 1.2em; background: rgba(255,255,255,0.28); flex-shrink: 0; } /* Live "open" pulse dot */ .hb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.85); animation: hbPulse 2.2s ease-out infinite; flex-shrink: 0; } @keyframes hbPulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.85); } 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } @media (prefers-reduced-motion: reduce) { .hero-banner { animation: none; } .hb-dot { animation: none; } } /* Stack gracefully on small screens */ @media (max-width: 720px) { .hero-banner { border-radius: 18px; padding: 0.75rem 1rem; font-size: 0.85rem; gap: 0.5rem 0.85rem; } .hb-sep { display: none; } .hb-item-modes { width: 100%; } } /* ================================================================= CONNECT — Stay connected / Leave us a review (above footer) ================================================================= */ .connect { position: relative; padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, #fff8e8 0%, #fbeed3 50%, #f6e2b9 100%); border-top: 6px solid var(--color-basil, #4a6638); border-bottom: 6px solid var(--color-primary, #b8311f); overflow: hidden; } .connect-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 20%, rgba(200,155,42,0.10) 0%, transparent 50%), radial-gradient(circle at 85% 80%, rgba(184,49,31,0.07) 0%, transparent 55%); z-index: 0; } .connect-inner { position: relative; z-index: 1; text-align: center; } .connect-head { max-width: 760px; margin: 0 auto 2.5rem; } .eyebrow-light { display: inline-block; color: var(--color-primary, #b8311f); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.85rem; } .connect-title { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: clamp(1.85rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 1.1rem; color: #2a1a0d; } .connect-title .accent-italic { font-style: italic; color: var(--color-primary, #b8311f); font-weight: 400; } .connect-sub { font-size: 1.05rem; line-height: 1.6; color: #4a3520; margin: 0; } .connect-sub strong { color: var(--color-primary, #b8311f); background: linear-gradient(180deg, transparent 65%, rgba(200,155,42,0.35) 65%); padding: 0 0.15em; } /* Review CTA row */ .review-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 880px; margin: 0 auto 2.5rem; } .review-card { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding: 1.6rem 1.3rem 1.4rem; background: #fff; border: 1.5px solid rgba(0,0,0,0.08); border-radius: 18px; text-decoration: none; color: #2a1a0d; text-align: center; box-shadow: 0 6px 18px rgba(184,49,31,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .review-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(184,49,31,0.18); border-color: var(--color-gold, #c89b2a); } .review-card-google:hover { border-color: #4285f4; } .review-card-yelp:hover { border-color: #d32323; } .review-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #fbf6ec; border-radius: 14px; flex-shrink: 0; } .review-text { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; width: 100%; } .review-text strong { font-size: 1.08rem; font-weight: 700; color: #2a1a0d; line-height: 1.2; } .review-sub { font-size: 0.88rem; color: #6b5a3f; line-height: 1.35; } .review-arrow { font-size: 1.25rem; color: var(--color-primary, #b8311f); font-weight: 700; transition: transform 0.2s ease; margin-top: 0.15rem; } .review-card:hover .review-arrow { transform: translateX(4px); } /* Free-slice hero CTA — the single perk callout */ .slice-cta { display: flex; align-items: center; justify-content: center; gap: 1.1rem; max-width: 720px; margin: 0 auto 2.25rem; padding: 1.35rem 1.75rem; background: linear-gradient(135deg, #b8311f 0%, #8f2418 100%); border-radius: 18px; box-shadow: 0 14px 32px rgba(184,49,31,0.28), inset 0 1px 0 rgba(255,255,255,0.18); position: relative; overflow: hidden; } .slice-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 30%, rgba(200,155,42,0.32) 0%, transparent 55%), radial-gradient(circle at 88% 75%, rgba(255,255,255,0.10) 0%, transparent 50%); pointer-events: none; } .slice-cta-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.28); font-size: 1.85rem; line-height: 1; backdrop-filter: blur(4px); position: relative; z-index: 1; } .slice-cta-text { position: relative; z-index: 1; text-align: center; } .slice-cta-headline { margin: 0 0 0.2rem; font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.005em; } .slice-cta-accent { color: var(--color-gold, #f0c656); font-style: italic; text-shadow: 0 1px 0 rgba(0,0,0,0.18); } .slice-cta-sub { margin: 0; font-size: 0.92rem; color: rgba(255,255,255,0.88); line-height: 1.4; } /* Social row — hero CTA + icon-only socials */ .social-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 1.5rem; } /* Hero "Order Online" CTA */ .social-cta { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.35rem 0.7rem 0.7rem; background: #2a1a0d; border-radius: 999px; text-decoration: none; color: #fff8e7; font-weight: 600; font-size: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 6px 18px rgba(42,26,13,0.22); } .social-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42,26,13,0.3); background: #3a2614; } .social-cta-icon { width: 38px; height: 38px; border-radius: 50%; background: #fff8e7; padding: 3px; object-fit: contain; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.18) inset; } .social-cta-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .social-cta-title { font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; } .social-cta-sub { font-size: 0.74rem; font-weight: 500; opacity: 0.78; letter-spacing: 0.04em; margin-top: 1px; } .social-cta-arrow { margin-left: 0.25rem; transition: transform 0.2s ease; opacity: 0.85; } .social-cta:hover .social-cta-arrow { transform: translateX(3px); opacity: 1; } /* Icon-only mini socials */ .social-mini { display: inline-flex; align-items: center; gap: 0.55rem; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #fff; border: 1.5px solid rgba(0,0,0,0.08); border-radius: 50%; color: #2a1a0d; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 3px 10px rgba(0,0,0,0.06); } .social-icon:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.14); color: #fff; border-color: transparent; } .social-icon-ig:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } .social-icon-fb:hover { background: #1877f2; } .connect-fineprint { font-size: 0.85rem; color: #6b5a3f; font-style: italic; margin: 0; } .connect-thanks { color: var(--color-primary, #b8311f); font-weight: 600; font-style: normal; } /* Mobile */ @media (max-width: 720px) { .review-row { grid-template-columns: 1fr; gap: 0.85rem; } .review-card { padding: 1.3rem 1rem 1.15rem; gap: 0.7rem; } .review-icon { width: 48px; height: 48px; } .review-icon svg { width: 30px; height: 30px; } .social-row { gap: 0.65rem; } .social-cta { padding: 0.6rem 1.1rem 0.6rem 0.6rem; font-size: 0.94rem; } .social-cta-icon { width: 34px; height: 34px; } .social-cta-title { font-size: 0.96rem; } .social-cta-sub { font-size: 0.7rem; } .social-icon { width: 40px; height: 40px; } .slice-cta { flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.1rem; margin-bottom: 1.75rem; } .slice-cta-badge { width: 48px; height: 48px; font-size: 1.55rem; } } /* 2-column variant of size-grid for Pizza by the Slice (cheese + specialty only) */ .size-grid.size-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; } @media (max-width: 640px) { .size-grid.size-grid-2 { grid-template-columns: repeat(2, 1fr); } } /* Inline menu-item tag (e.g. "Dine-in only") */ .menu-item .item-tag { display: inline-block; margin-left: 0.5rem; padding: 0.12rem 0.55rem; font-size: 0.7rem; font-weight: 600; font-style: italic; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-primary, #b8311f); background: rgba(184,49,31,0.08); border: 1px solid rgba(184,49,31,0.18); border-radius: 999px; vertical-align: middle; white-space: nowrap; } /* ============================================================ CATERING PAGE ============================================================ */ .page-catering { background: var(--color-bg, #fbf6ec); } /* --- Active nav state for catering link --- */ .nav-links a.is-active { color: var(--color-primary, #b8311f); font-weight: 600; } .nav-links a.is-active::after { content: ""; display: block; height: 2px; background: var(--color-primary, #b8311f); margin-top: 4px; border-radius: 2px; } /* --- Hero --- */ .catering-hero { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 5vw, 4rem); background: radial-gradient(ellipse at top right, rgba(200,155,42,0.10), transparent 60%), radial-gradient(ellipse at bottom left, rgba(184,49,31,0.06), transparent 60%), var(--color-bg, #fbf6ec); text-align: center; } .catering-hero h1 { font-family: var(--font-display, "Boska", serif); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; margin: 0.5rem 0 1.25rem; letter-spacing: -0.02em; } .catering-lede { max-width: 640px; margin: 0 auto 2rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; color: var(--color-text-muted, #5a4a3f); } .catering-hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; } .catering-quickfacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; list-style: none; padding: 0; margin: 0 auto; max-width: 820px; } .catering-quickfacts li { font-size: 0.95rem; color: var(--color-text-muted, #5a4a3f); padding: 0.5rem 1rem; background: rgba(255,255,255,0.6); border: 1px solid rgba(184,49,31,0.12); border-radius: 999px; } .catering-quickfacts li strong { color: var(--color-primary, #b8311f); font-weight: 700; margin-right: 0.35rem; } /* --- Why Anthony's --- */ .catering-why { padding: clamp(3rem, 5vw, 5rem) 0; } .catering-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .catering-why-card { padding: 1.75rem 1.5rem; background: #fff; border: 1px solid rgba(184,49,31,0.10); border-radius: 14px; box-shadow: 0 4px 16px rgba(28,20,17,0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .catering-why-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(28,20,17,0.08); } .catering-why-card .cw-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(184,49,31,0.08); color: var(--color-primary, #b8311f); border-radius: 12px; margin-bottom: 1rem; } .catering-why-card h3 { font-family: var(--font-display, "Boska", serif); font-size: 1.3rem; margin: 0 0 0.5rem; } .catering-why-card p { font-size: 0.95rem; line-height: 1.55; color: var(--color-text-muted, #5a4a3f); margin: 0; } /* --- Catering menu placeholder section --- */ .catering-menu { padding: clamp(3rem, 5vw, 5rem) 0; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); } .catering-menu .section-intro { max-width: 640px; margin: 0 0 2.5rem; color: var(--color-text-muted, #5a4a3f); font-size: 1.05rem; line-height: 1.6; } .catering-menu-placeholder { max-width: 720px; margin: 0 auto; } .catering-placeholder-card { padding: 2.5rem; background: #fff; border: 2px dashed rgba(184,49,31,0.25); border-radius: 18px; text-align: center; } .catering-placeholder-card .cph-badge { display: inline-block; background: var(--color-gold, #c89b2a); color: #fff; padding: 0.25rem 0.85rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; } .catering-placeholder-card h3 { font-family: var(--font-display, "Boska", serif); font-size: 1.65rem; margin: 0 0 1rem; } .catering-placeholder-card p { color: var(--color-text-muted, #5a4a3f); line-height: 1.6; margin: 0 auto; max-width: 480px; } /* --- How it works --- */ .catering-how { padding: clamp(3rem, 5vw, 5rem) 0; } .catering-steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; counter-reset: step; } .catering-steps li { display: flex; gap: 1rem; padding: 1.5rem; background: #fff; border: 1px solid rgba(184,49,31,0.10); border-radius: 14px; } .catering-steps .cs-num { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--color-primary, #b8311f); color: #fff; border-radius: 50%; font-family: var(--font-display, "Boska", serif); font-size: 1.25rem; font-weight: 600; } .catering-steps h4 { font-family: var(--font-display, "Boska", serif); font-size: 1.2rem; margin: 0 0 0.4rem; } .catering-steps p { font-size: 0.95rem; line-height: 1.55; color: var(--color-text-muted, #5a4a3f); margin: 0; } /* --- Policies --- */ .catering-policies { padding: clamp(3rem, 5vw, 5rem) 0; background: linear-gradient(180deg, rgba(200,155,42,0.06), transparent); } .catering-policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .catering-policy-card { padding: 1.5rem 1.5rem 1.75rem; background: #fff; border-left: 4px solid var(--color-primary, #b8311f); border-radius: 0 12px 12px 0; box-shadow: 0 2px 12px rgba(28,20,17,0.04); } .catering-policy-card h4 { font-family: var(--font-display, "Boska", serif); font-size: 1.25rem; margin: 0 0 0.6rem; color: var(--color-primary, #b8311f); } .catering-policy-card p { font-size: 0.95rem; line-height: 1.55; color: var(--color-text, #2a1f1a); margin: 0; } /* --- Inquiry form --- */ .catering-form-section { padding: clamp(3rem, 5vw, 5rem) 0; background: radial-gradient(ellipse at top left, rgba(184,49,31,0.05), transparent 60%), var(--color-bg, #fbf6ec); } .catering-form-container { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 1100px; } @media (min-width: 900px) { .catering-form-container { grid-template-columns: 5fr 7fr; align-items: start; } } .catering-form-intro h2 { font-family: var(--font-display, "Boska", serif); font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin: 0.5rem 0 1rem; line-height: 1.1; } .catering-form-intro p { color: var(--color-text-muted, #5a4a3f); line-height: 1.6; margin-bottom: 1.5rem; } .catering-form-promise { list-style: none; padding: 0; margin: 0; } .catering-form-promise li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.95rem; color: var(--color-text, #2a1f1a); } .catering-form-promise svg { color: var(--color-basil, #4a6638); flex-shrink: 0; margin-top: 2px; } .catering-form { background: #fff; padding: 2rem; border-radius: 16px; border: 1px solid rgba(184,49,31,0.10); box-shadow: 0 8px 28px rgba(28,20,17,0.06); } .cf-row { display: grid; gap: 1rem; margin-bottom: 1rem; } @media (min-width: 600px) { .cf-row-2 { grid-template-columns: 1fr 1fr; } .cf-row-3 { grid-template-columns: 1fr 1fr 1fr; } } .cf-field { display: flex; flex-direction: column; } .cf-field label { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-text, #2a1f1a); letter-spacing: 0.01em; } .cf-field label span[aria-hidden] { color: var(--color-primary, #b8311f); margin-left: 2px; } .cf-hint { font-weight: 400; color: var(--color-text-muted, #5a4a3f); font-size: 0.8rem; margin-left: 0.35rem; } .cf-field input, .cf-field select, .cf-field textarea { width: 100%; padding: 0.7rem 0.9rem; font-family: inherit; font-size: 0.95rem; color: var(--color-text, #2a1f1a); background: var(--color-bg, #fbf6ec); border: 1.5px solid rgba(184,49,31,0.15); border-radius: 8px; transition: border-color 0.2s ease, background 0.2s ease; } .cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { outline: none; border-color: var(--color-primary, #b8311f); background: #fff; } .cf-field textarea { resize: vertical; min-height: 80px; } .cf-field input[type="date"], .cf-field input[type="time"] { font-family: inherit; } .cf-policies { margin: 1.5rem 0; padding: 1rem 1.25rem; background: rgba(200,155,42,0.08); border-left: 3px solid var(--color-gold, #c89b2a); border-radius: 0 8px 8px 0; font-size: 0.88rem; line-height: 1.55; } .cf-policies p { margin: 0 0 0.5rem; font-weight: 600; color: var(--color-text, #2a1f1a); } .cf-policies ul { margin: 0; padding-left: 1.2rem; color: var(--color-text-muted, #5a4a3f); } .cf-policies ul li { margin-bottom: 0.25rem; } .cf-submit { width: 100%; justify-content: center; margin-top: 0.5rem; } .cf-fallback { text-align: center; font-size: 0.85rem; color: var(--color-text-muted, #5a4a3f); margin: 1rem 0 0; } .cf-fallback a { color: var(--color-primary, #b8311f); font-weight: 600; } .cf-status { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 10px; font-size: 0.95rem; line-height: 1.4; } .cf-status-ok { background: #e8f5ec; color: #1c6b3a; border: 1px solid #b6dec3; } .cf-status-err { background: #fbe9e7; color: #8c2818; border: 1px solid #f0bcb2; } /* --- Homepage catering teaser --- */ .catering-teaser { padding: clamp(3rem, 5vw, 4.5rem) 0; background: linear-gradient(135deg, rgba(184,49,31,0.04), rgba(200,155,42,0.06)); } .catering-teaser-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; background: #fff; border-radius: 18px; padding: 2.5rem; border: 1px solid rgba(184,49,31,0.10); box-shadow: 0 8px 24px rgba(28,20,17,0.05); } @media (min-width: 800px) { .catering-teaser-grid { grid-template-columns: 1.3fr 1fr; padding: 3rem 3.5rem; } } .catering-teaser-text .eyebrow { color: var(--color-primary, #b8311f); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; margin: 0 0 0.5rem; } .catering-teaser-text h2 { font-family: var(--font-display, "Boska", serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem; } .catering-teaser-text p { font-size: 1.02rem; line-height: 1.6; color: var(--color-text-muted, #5a4a3f); margin: 0 0 1.5rem; max-width: 480px; } .catering-teaser-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; } .catering-teaser-facts li { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.1rem; background: rgba(184,49,31,0.05); border-radius: 10px; font-size: 0.95rem; color: var(--color-text, #2a1f1a); } .catering-teaser-facts li strong { color: var(--color-primary, #b8311f); font-weight: 700; min-width: 70px; } /* ============================================================ MENU CARD — Multi-protein variant list (Specialty Pasta) Each plate sold with a defined protein at a defined price. ============================================================ */ .mg-variants { list-style: none; padding: 0; margin: 0.65rem 0 0; display: grid; gap: 0.35rem; } .mg-variants li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; padding: 0.4rem 0.65rem; background: rgba(184,49,31,0.04); border-left: 3px solid rgba(184,49,31,0.45); border-radius: 0 6px 6px 0; } .mg-variants li > span:first-child { color: var(--color-text, #2a1f1a); font-weight: 500; } .mg-variants .mg-vprice { color: var(--color-primary, #b8311f); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ============================================================ CATERING — Packages, pies, trays, tables ============================================================ */ /* Shared catering section spacing */ .cat-section { padding: clamp(3rem, 5vw, 5rem) 0; } .cat-section + .cat-section { border-top: 1px solid rgba(184,49,31,0.08); } .cat-section h2 { font-family: var(--font-display, "Boska", serif); font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0.4rem 0 0.75rem; line-height: 1.1; } .cat-section .section-intro { max-width: 720px; margin: 0 0 2rem; color: var(--color-text-muted, #5a4a3f); font-size: 1.02rem; line-height: 1.6; } .cat-tier-head { font-family: var(--font-display, "Boska", serif); font-size: 1.4rem; color: var(--color-primary, #b8311f); margin: 1.75rem 0 0.6rem; padding-bottom: 0.4rem; border-bottom: 2px solid rgba(184,49,31,0.18); letter-spacing: 0.01em; } /* --- Catering packages (3 cards) --- */ .cat-packages { background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); } .cat-package-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1rem; } @media (min-width: 760px) { .cat-package-grid { grid-template-columns: repeat(3, 1fr); } } .cat-package-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(184,49,31,0.12); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(28,20,17,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; } .cat-package-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(28,20,17,0.10); } .cat-package-featured { border-color: var(--color-primary, #b8311f); box-shadow: 0 10px 28px rgba(184,49,31,0.18); } .cat-package-featured .cpc-price-block { background: var(--color-primary, #b8311f); } .cpc-badge { position: absolute; top: 12px; right: 12px; background: var(--color-gold, #c89b2a); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 999px; z-index: 2; } .cpc-price-block { background: #2a1f1a; color: #fff; padding: 1.75rem 1.5rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .cpc-price { font-family: var(--font-display, "Boska", serif); font-size: clamp(2.5rem, 5vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; } .cpc-per { font-size: 0.9rem; opacity: 0.85; letter-spacing: 0.02em; } .cpc-feeds { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-top: 0.4rem; } .cpc-body { padding: 1.75rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; } .cpc-body h3 { font-family: var(--font-display, "Boska", serif); font-size: 1.6rem; margin: 0; line-height: 1.1; } .cpc-sub { color: var(--color-text-muted, #5a4a3f); font-size: 0.92rem; margin: -0.25rem 0 0.5rem; } .cpc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; } .cpc-list li { position: relative; padding-left: 1.25rem; font-size: 0.93rem; line-height: 1.45; color: var(--color-text, #2a1f1a); } .cpc-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; background: var(--color-primary, #b8311f); border-radius: 50%; } .cpc-note { margin: 0.5rem 0 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(184,49,31,0.10); font-size: 0.82rem; color: var(--color-text-muted, #5a4a3f); font-style: italic; } .cpc-body .btn { margin-top: auto; justify-content: center; } /* --- Pie cards (Large / X-Large) --- */ .cat-pies { background: linear-gradient(180deg, rgba(200,155,42,0.05), transparent); } .cat-pie-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 720px; margin: 1rem 0 2.25rem; } @media (min-width: 600px) { .cat-pie-grid { grid-template-columns: 1fr 1fr; } } .cat-pie-card { background: #fff; border: 1px solid rgba(184,49,31,0.12); border-radius: 14px; padding: 1.5rem 1.5rem 1.75rem; text-align: center; display: flex; flex-direction: column; gap: 0.4rem; align-items: center; box-shadow: 0 4px 14px rgba(28,20,17,0.05); } .cat-pie-card-feature { border-color: var(--color-primary, #b8311f); background: linear-gradient(180deg, #fff, #fdf3e8); } .cat-pie-size { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: var(--color-text, #2a1f1a); padding: 0.3rem 1rem; border-radius: 999px; } .cat-pie-card-feature .cat-pie-size { background: var(--color-primary, #b8311f); } .cat-pie-dim { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.05rem; color: var(--color-text-muted, #5a4a3f); } .cat-pie-price { font-family: var(--font-display, "Boska", serif); font-size: clamp(2.5rem, 5vw, 3.25rem); font-weight: 600; line-height: 1; color: var(--color-primary, #b8311f); margin: 0.4rem 0 0.3rem; } .cat-pie-meta { font-size: 0.92rem; color: var(--color-text-muted, #5a4a3f); } /* --- Toppings list --- */ .cat-toppings { background: #fff; border: 1px solid rgba(184,49,31,0.12); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.5rem; } .cat-toppings h4 { font-family: var(--font-display, "Boska", serif); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary, #b8311f); margin: 0 0 0.85rem; text-align: center; } .cat-toppings-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1rem; text-align: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.05rem; color: var(--color-text, #2a1f1a); } @media (min-width: 600px) { .cat-toppings-grid { grid-template-columns: repeat(4, 1fr); } } /* --- Notes list (under each menu section) --- */ .cat-notes { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.4rem; border-left: 3px solid var(--color-gold, #c89b2a); padding-left: 1rem; background: rgba(200,155,42,0.05); border-radius: 0 8px 8px 0; padding-top: 0.85rem; padding-bottom: 0.85rem; padding-right: 1rem; } .cat-notes li { font-size: 0.88rem; line-height: 1.5; color: var(--color-text, #2a1f1a); } /* --- Tray pricing tables (pasta, subs, salads) --- */ .cat-pasta-trays, .cat-salads-sodas { background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); } .cat-tray-tier { margin-bottom: 2rem; } .cat-tray-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(28,20,17,0.04); margin-bottom: 0.5rem; } .cat-tray-table thead th { background: var(--color-text, #2a1f1a); color: #fff; text-align: left; padding: 0.85rem 1.25rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .cat-tray-table thead th.cat-col-price { text-align: right; width: 90px; } .cat-tray-table tbody td { padding: 1rem 1.25rem; border-top: 1px solid rgba(184,49,31,0.08); vertical-align: top; font-size: 0.95rem; line-height: 1.4; color: var(--color-text, #2a1f1a); } .cat-tray-table tbody td.cat-col-price { text-align: right; font-weight: 700; color: var(--color-primary, #b8311f); font-variant-numeric: tabular-nums; white-space: nowrap; width: 90px; font-size: 1rem; } .cat-tray-table tbody tr:first-child td { border-top: none; } .cat-tray-table .cat-desc { display: block; font-size: 0.85rem; color: var(--color-text-muted, #5a4a3f); font-style: italic; margin-top: 0.2rem; } .cat-tray-table tbody tr:hover { background: rgba(200,155,42,0.05); } /* --- Soda block --- */ .cat-soda-block { display: grid; grid-template-columns: 1fr; gap: 1rem; background: var(--color-primary, #b8311f); color: #fff; border-radius: 16px; padding: 2rem; margin-top: 2.5rem; align-items: center; } @media (min-width: 600px) { .cat-soda-block { grid-template-columns: 200px 1fr; gap: 2rem; } } .cat-soda-price { text-align: center; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 1rem; } @media (min-width: 600px) { .cat-soda-price { border-right: 1px solid rgba(255,255,255,0.2); border-bottom: none; padding-bottom: 0; padding-right: 2rem; } } .cat-soda-amount { display: block; font-family: var(--font-display, "Boska", serif); font-size: 3.5rem; font-weight: 600; line-height: 1; } .cat-soda-unit { display: block; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 0.95rem; margin-top: 0.4rem; opacity: 0.9; } .cat-soda-body h4 { font-family: var(--font-display, "Boska", serif); font-size: 1.4rem; margin: 0 0 0.5rem; } .cat-soda-body p { font-size: 0.95rem; line-height: 1.5; margin: 0 0 0.6rem; opacity: 0.95; } .cat-soda-flavors { font-size: 0.88rem; opacity: 0.85; } .cat-soda-flavors strong { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; margin-right: 0.4rem; } /* Wide-screen: table cells get a bit more breathing room */ @media (min-width: 800px) { .cat-tray-table thead th, .cat-tray-table tbody td { padding: 1rem 1.5rem; } } /* ===== STAFF TV LINK · hidden in plain sight ===== */ /* A near-invisible dot in the footer bottom row. Staff who know it's there can tap/click it to reach the TV zone picker. Customers ignore it. */ .staff-tv-link { display: inline-block; margin-left: 0.5rem; color: rgba(0, 0, 0, 0.12); font-size: 1rem; line-height: 1; text-decoration: none; opacity: 0.4; cursor: default; user-select: none; transition: color 0.2s ease, opacity 0.2s ease; } .staff-tv-link:hover, .staff-tv-link:focus { color: var(--color-primary, #b8311f); opacity: 1; cursor: pointer; outline: none; } /* ============ Round 4 — Logo in hero + Family-Owned banner above photo ============ */ .hero.hero-v2 .hero-left .hero-logo { display: block; width: clamp(220px, 28vw, 360px); height: auto; margin: 0 0 22px; background: transparent !important; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12)); } @media (max-width: 860px) { .hero.hero-v2 .hero-left .hero-logo { width: clamp(200px, 50vw, 280px); margin: 0 auto 16px; } } /* Move family-owned banner above the photo on the right */ .hero.hero-v2 .hero-right .hero-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 0 0 18px; padding: 10px 18px; background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.08); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); color: var(--color-text, #2a1d18); font-size: 0.92rem; line-height: 1.3; } .hero.hero-v2 .hero-right .hero-banner .hb-item-lead strong, .hero.hero-v2 .hero-right .hero-banner .hb-item strong { color: var(--color-text, #2a1d18); } .hero.hero-v2 .hero-right .hero-banner .hb-sep { width: 1px; height: 14px; background: rgba(0,0,0,0.15); display: inline-block; } .hero.hero-v2 .hero-right .hero-banner .hb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2e9e5c; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(46,158,92,0.18); } .hero.hero-v2 .hero-right .hero-banner .hb-muted { opacity: 0.7; } @media (max-width: 860px) { .hero.hero-v2 .hero-right .hero-banner { font-size: 0.82rem; padding: 8px 14px; margin: 0 auto 14px; } } /* ============ Round 5 — Text-based header logo (replaces image) ============ */ .header .logo.logo-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1; text-decoration: none; gap: 2px; } .header .logo.logo-text .logo-text-main { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: clamp(1.4rem, 1.5vw, 1.7rem); color: #fff; letter-spacing: 0.5px; line-height: 1; } .header .logo.logo-text .logo-text-sub { font-family: var(--font-body, system-ui, sans-serif); font-weight: 500; font-size: 0.72rem; color: rgba(255,255,255,0.78); letter-spacing: 0.6px; text-transform: uppercase; } .header .logo.logo-text:hover .logo-text-main { color: #ffd97a; } @media (max-width: 720px) { .header .logo.logo-text .logo-text-main { font-size: 1.25rem; } .header .logo.logo-text .logo-text-sub { font-size: 0.65rem; } } /* ============================================================ ROUND 6 — FERRARA-INSPIRED REDESIGN (master override) Locks fonts, palette, header, hero, buttons, transitions ============================================================ */ :root { --ferrara-red: #c63a26; --ferrara-red-dk: #a32717; --ferrara-gold: #f2c14e; --ferrara-black: #1a1a1a; --ferrara-ink: #2a2a2a; --ferrara-mute: #6a6a6a; --ferrara-bg: #ffffff; --ferrara-bg-alt: #f5f5f5; --ferrara-line: #e6e6e6; } /* ---- Typography lock ---- */ html, body { font-family: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important; color: var(--ferrara-ink) !important; background: var(--ferrara-bg) !important; } body { font-weight: 400; letter-spacing: 0; } h1, h2, h3, .display, .eyebrow strong { font-family: 'Bebas Neue', Impact, sans-serif !important; letter-spacing: 0.02em; font-weight: 400; } h1 { font-size: clamp(3.2rem, 7vw, 6.4rem); line-height: 0.95; } h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: 0.03em; } h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.1; letter-spacing: 0.04em; } .eyebrow { font-family: 'Work Sans', sans-serif !important; font-size: 0.78rem !important; letter-spacing: 0.22em !important; text-transform: uppercase; font-weight: 600 !important; color: var(--ferrara-mute) !important; } .hero-script, .script { font-family: 'Caveat', cursive !important; font-style: normal !important; } /* ---- Header: transparent over hero, solid after scroll ---- */ .header { background: transparent !important; box-shadow: none !important; border-bottom: 0 !important; padding-top: 12px !important; padding-bottom: 12px !important; transition: background 0.25s, box-shadow 0.25s !important; } .header.is-scrolled, body.scrolled .header { background: rgba(26,26,26,0.94) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.18) !important; backdrop-filter: blur(8px); } .header .nav-links a { color: #fff !important; font-family: 'Work Sans', sans-serif !important; font-weight: 500; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; } .header .nav-links a:hover { color: var(--ferrara-gold) !important; } .header .header-cta a { color: #fff !important; } .header .logo.logo-text .logo-text-main { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(1.6rem, 2vw, 2rem) !important; letter-spacing: 0.06em; color: #fff !important; } .header .logo.logo-text .logo-text-sub { font-family: 'Work Sans', sans-serif !important; color: rgba(255,255,255,0.75) !important; font-size: 0.66rem !important; letter-spacing: 0.18em; } .header .nav-cta.btn-primary { background: transparent !important; border: 1.5px solid #fff !important; color: #fff !important; border-radius: 0 !important; padding: 10px 18px !important; font-family: 'Work Sans', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: none !important; } .header .nav-cta.btn-primary:hover { background: var(--ferrara-red) !important; border-color: var(--ferrara-red) !important; color: #fff !important; } .header .nav-cta .btn-arrow { display: none !important; } .header .nav-phone, .header .header-cta a:not(.btn) { color: #fff !important; } .header .container.nav { border-bottom: 0 !important; } /* Kill the green/red/gold underline strips under the header */ .header::after, .header::before, .header .container.nav::after, .header .container.nav::before { display: none !important; content: none !important; background: none !important; } /* ---- Hero V3: full-bleed photo, dark overlay, white text ---- */ .hero.hero-v3 { position: relative; min-height: 92vh; padding: 120px 0 80px; /* Skyline background only — the floating pie is a separate element below */ background: url('../assets/ny-skyline.png') center bottom / cover no-repeat, #0a0a0a !important; color: #fff; overflow: hidden; margin-top: -88px; /* slide under transparent header */ } /* Floating cheese pie — real element, drifts on the right of the skyline */ .hero.hero-v3 .hero-floating-pie { position: absolute !important; right: -4% !important; top: 52% !important; transform: translateY(-50%) rotate(-8deg) !important; width: 46% !important; max-width: 720px !important; height: auto !important; filter: drop-shadow(0 30px 45px rgba(0,0,0,0.55)) drop-shadow(0 12px 22px rgba(0,0,0,0.35)) !important; z-index: 2 !important; pointer-events: none !important; animation: heroPieFloat 6s ease-in-out infinite !important; user-select: none !important; } @keyframes heroPieFloat { 0%, 100% { transform: translateY(-50%) rotate(-8deg) translateX(0); } 50% { transform: translateY(calc(-50% - 10px)) rotate(-7deg) translateX(-4px); } } @media (prefers-reduced-motion: reduce) { .hero.hero-v3 .hero-floating-pie { animation: none !important; } } .hero.hero-v3 .hero-v3-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.75) 100%), linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 100%); z-index: 1; } .hero.hero-v3 .hero-v3-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 60px 32px 0; text-align: left; } .hero.hero-v3 .hero-eyebrow { font-family: 'Work Sans', sans-serif; font-size: 0.85rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ferrara-gold); margin: 0 0 22px; font-weight: 600; } .hero.hero-v3 .hero-eyebrow::after { content: ''; display: inline-block; width: 60px; height: 1px; background: var(--ferrara-gold); margin-left: 18px; vertical-align: middle; } .hero.hero-v3 .hero-v3-title { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(4.2rem, 11vw, 9rem); line-height: 0.88; letter-spacing: 0.01em; color: #fff; margin: 0 0 28px; text-shadow: 0 4px 24px rgba(0,0,0,0.55); } .hero.hero-v3 .hero-v3-title .accent { color: var(--ferrara-gold); } .hero.hero-v3 .hero-v3-title .hero-script { font-family: 'Caveat', cursive; display: inline-block; font-size: 0.45em; color: var(--ferrara-gold); margin-left: 18px; transform: rotate(-4deg) translateY(-12px); font-weight: 700; letter-spacing: 0; text-shadow: none; } .hero.hero-v3 .hero-v3-tagline { font-family: 'Work Sans', sans-serif; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.5; color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 0 32px; font-weight: 300; } .hero.hero-v3 .hero-v3-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; } .hero.hero-v3 .hero-v3-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-family: 'Work Sans', sans-serif; font-size: 0.88rem; color: rgba(255,255,255,0.78); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; } .hero.hero-v3 .hero-v3-meta .hb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #4ade80; margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 4px rgba(74,222,128,0.25); } .hero.hero-v3 .hero-v3-meta .hb-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.3); } /* ---- Unified button: Ferrara white-outline rectangle ---- */ .btn.btn-ferrara, a.btn.btn-ferrara { display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px !important; border: 1.5px solid #fff !important; background: transparent !important; color: #fff !important; font-family: 'Work Sans', sans-serif !important; font-weight: 600 !important; font-size: 0.86rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; border-radius: 0 !important; text-decoration: none !important; box-shadow: none !important; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s !important; } .btn.btn-ferrara:hover { background: var(--ferrara-red) !important; border-color: var(--ferrara-red) !important; color: #fff !important; transform: translateY(-1px); } .btn.btn-ferrara:first-child { background: var(--ferrara-red) !important; border-color: var(--ferrara-red) !important; } .btn.btn-ferrara:first-child:hover { background: var(--ferrara-red-dk) !important; border-color: var(--ferrara-red-dk) !important; } /* Cascade ALL btn-primary / btn-outline-light buttons into ferrara look */ .btn-primary, .btn-outline-light, .btn-outline, .btn-secondary { border-radius: 0 !important; font-family: 'Work Sans', sans-serif !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 600 !important; box-shadow: none !important; } .btn-primary { background: var(--ferrara-red) !important; border: 1.5px solid var(--ferrara-red) !important; color: #fff !important; } .btn-primary:hover { background: var(--ferrara-red-dk) !important; border-color: var(--ferrara-red-dk) !important; } .btn-outline-light, .btn-outline { background: transparent !important; border: 1.5px solid var(--ferrara-ink) !important; color: var(--ferrara-ink) !important; } .btn-outline-light:hover, .btn-outline:hover { background: var(--ferrara-ink) !important; color: #fff !important; } /* ---- Ghost marquee (replaces the red strip) ---- */ .ghost-marquee { background: var(--ferrara-bg); padding: 24px 0; overflow: hidden; border-bottom: 1px solid var(--ferrara-line); } .ghost-marquee .ghost-track { display: flex; gap: 0; font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(3rem, 8vw, 7rem); line-height: 1; letter-spacing: 0.04em; color: rgba(0,0,0,0.06); white-space: nowrap; animation: ghost-scroll 38s linear infinite; } .ghost-marquee .ghost-track > span { padding-right: 0; } @keyframes ghost-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Hide old marquee strip if it's still present */ .strip { display: none !important; } /* ---- Sections: white / off-white alternating, hard cuts ---- */ section { background: var(--ferrara-bg) !important; } section.signature, section.signatures, .signature, #signatures { background: var(--ferrara-bg) !important; } section.pasta, .pasta-section, #pasta { background: var(--ferrara-bg-alt) !important; } section.about, .about-section, #story { background: var(--ferrara-bg) !important; } section.visit, .visit-section, #visit { background: var(--ferrara-bg-alt) !important; } /* Section headings & eyebrows */ .section-head .eyebrow { display: inline-flex; align-items: center; gap: 14px; color: var(--ferrara-red) !important; } .section-head .eyebrow::after { content: ''; width: 50px; height: 1px; background: var(--ferrara-red); } .section-head h2 { color: var(--ferrara-ink) !important; } .section-head h2 .accent { color: var(--ferrara-red) !important; } /* ---- Card / signature treatment cleanup ---- */ .sig-card, .pasta-card, article.card { background: #fff !important; border: 1px solid var(--ferrara-line) !important; border-radius: 0 !important; box-shadow: none !important; transition: transform 0.25s, box-shadow 0.25s !important; } .sig-card:hover, .pasta-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.08) !important; } .sig-card-tag, .pasta-tag, .card-tag { background: var(--ferrara-ink) !important; color: #fff !important; border-radius: 0 !important; font-family: 'Work Sans', sans-serif !important; font-size: 0.7rem !important; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 12px !important; } /* ---- Footer cleanup ---- */ .footer { background: var(--ferrara-black) !important; color: rgba(255,255,255,0.78) !important; } .footer a { color: rgba(255,255,255,0.78) !important; } .footer a:hover { color: var(--ferrara-gold) !important; } .footer .footer-logo-img { filter: brightness(1.1); } /* ---- Mobile ---- */ @media (max-width: 860px) { .hero.hero-v3 { min-height: 78vh; padding: 120px 0 60px; margin-top: -76px; } .hero.hero-v3 .hero-v3-inner { padding: 40px 20px 0; text-align: left; } .hero.hero-v3 .hero-v3-cta { flex-direction: column; align-items: stretch; } .hero.hero-v3 .hero-v3-cta .btn { width: 100%; text-align: center; } .hero.hero-v3 .hero-v3-title .hero-script { display: block; margin-left: 0; transform: rotate(-3deg); } .ghost-marquee .ghost-track { animation-duration: 22s; } } /* Disable old Round 1-5 hero rules that may conflict */ .hero.hero-v2, .hero-v2 { display: none !important; } /* ---- Round 6 tweaks ---- */ /* Lighter hero — let the cheese pull breathe, keep text legible with a localized scrim */ .hero.hero-v3 .hero-v3-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 35%, rgba(0,0,0,0.10) 65%, rgba(0,0,0,0.45) 100%), linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0) 100%) !important; } /* No panel scrim — rely on per-letter text-shadow blur to keep text readable on the photo */ .hero.hero-v3 .hero-v3-inner { position: relative; } .hero.hero-v3 .hero-v3-inner::before { display: none !important; content: none !important; } .hero.hero-v3 .hero-v3-inner > * { position: relative; z-index: 1; } /* Stronger, multi-layer text shadow acts as a soft per-letter glow — no visible panel */ .hero.hero-v3 .hero-v3-title { text-shadow: 0 0 28px rgba(0,0,0,0.85), 0 0 14px rgba(0,0,0,0.75), 0 4px 16px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.6) !important; } .hero.hero-v3 .hero-v3-tagline, .hero.hero-v3 .hero-v3-meta, .hero.hero-v3 .hero-eyebrow { text-shadow: 0 0 18px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.6) !important; } /* Nav: prevent wrapping, tighter spacing */ .header .nav-links { flex-wrap: nowrap !important; } .header .nav-links a { white-space: nowrap !important; font-size: 0.82rem !important; letter-spacing: 0.06em !important; } .header .nav-links li { white-space: nowrap !important; } /* Kill the green/black/red border stripe under header/hero */ .header + *::before, .hero.hero-v3 ~ ::before { display: none !important; } .tri-stripe, .header-stripe, .nav-stripe, [class*="tri-color"], [class*="stripe-bottom"] { display: none !important; } /* The colored line right below the hero comes from .header underline pseudo or a div — nuke any horizontal striped bar */ .header::after, .header::before { display: none !important; content: none !important; height: 0 !important; } /* ---- Round 6 final cleanup: nuke ALL ::before pseudo on hero v3 + look for italian-flag bar ---- */ .hero.hero-v3::before, .hero:not(.hero-v3)::before { content: none !important; display: none !important; background: none !important; height: 0 !important; } .hero:not(.hero-v3)::after { content: none !important; display: none !important; background: none !important; height: 0 !important; } /* Find any 3-segment colored bar anywhere */ .italian-flag, .italian-stripe, .flag-bar, .flag-row, .hero-flag, .pizza-flag, [class*="flag-bar"], [class*="flag-row"], [class*="italian-stripe"], [class*="tricolor"] { display: none !important; } /* The trust row / flag chip below the hero CTA might be it */ .hb-chip-flag, .flag-g, .flag-w, .flag-r, .hero-flag-chip { display: none !important; } /* ============ ROUND 6 FINAL FIX — color + stripe ============ */ /* Force hero v3 title to white over the !important rules at lines 3359/3470 */ .hero.hero-v3 .hero-v3-title, .hero.hero-v3 .hero-v3-title .accent, .hero.hero-v3 .hero-v3-title .hero-script, .hero.hero-v3 h1, .hero.hero-v3 .hero-v3-tagline, .hero.hero-v3 .hero-eyebrow, .hero.hero-v3 .hero-v3-meta { color: #fff !important; } .hero.hero-v3 .hero-v3-title .accent { color: var(--ferrara-gold) !important; } .hero.hero-v3 .hero-v3-title .hero-script { color: #e63946 !important; /* strong tomato red — pops off both skyline and pizza */ text-shadow: 0 2px 8px rgba(0,0,0,0.75), 0 0 24px rgba(0,0,0,0.55), 2px 2px 0 rgba(0,0,0,0.4) !important; -webkit-text-stroke: 1px rgba(0,0,0,0.35) !important; position: relative !important; z-index: 4 !important; } .hero.hero-v3 .hero-eyebrow { color: var(--ferrara-gold) !important; } .hero.hero-v3 .hero-v3-tagline { color: rgba(255,255,255,0.9) !important; } .hero.hero-v3 .hero-v3-meta { color: rgba(255,255,255,0.85) !important; } /* Kill the .strip div completely (the tricolor bar) — and its ::before */ .strip, .strip::before, .strip::after { display: none !important; content: none !important; background: none !important; height: 0 !important; border: 0 !important; } /* ---- Round 8: hero logo back + seamless hero edges ---- */ /* Anthony's plaque logo — absolute to hero section, far-left corner */ .hero.hero-v3 { position: relative; } .hero.hero-v3 > .hero-v3-logo { position: absolute !important; top: 110px; left: 28px; width: 140px; max-width: 12vw; height: auto; margin: 0; filter: drop-shadow(0 6px 22px rgba(0,0,0,0.95)) drop-shadow(0 2px 4px rgba(0,0,0,0.8)); z-index: 5; } @media (max-width: 1100px) { .hero.hero-v3 > .hero-v3-logo { width: 110px; top: 100px; } } @media (max-width: 900px) { .hero.hero-v3 > .hero-v3-logo { position: static !important; width: 160px; margin: 18px 0 0 18px; max-width: none; } } .hero.hero-v3 .hero-v3-inner { text-align: left !important; align-items: flex-start !important; } /* Seamless hero edges — kill the visible cut at bottom by fading photo into next section */ .hero.hero-v3 { /* Slight vignette on left so PIZZA DONE pops without a hard panel edge */ background-blend-mode: normal; } .hero.hero-v3 .hero-v3-overlay { /* Soft gradient: keeps left text legible, lets skyline + food photo show clearly */ background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.10) 35%, rgba(10,10,10,0.05) 70%, rgba(10,10,10,0.35) 100%), linear-gradient(90deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.30) 35%, rgba(10,10,10,0.00) 60%, rgba(10,10,10,0.00) 100%) !important; } /* Soft bottom band — fade photo into the next section without darkening the whole image */ .hero.hero-v3::after { content: "" !important; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.55) 88%, #1a1a1a 100%) !important; z-index: 3; pointer-events: none; display: block !important; } /* Ghost marquee section gets a dark top edge that matches, then transitions to white */ .ghost-marquee { background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 12px, var(--ferrara-bg) 12px, var(--ferrara-bg) 100%) !important; } .hero.hero-v3::before { display: none !important; content: none !important; } /* Kill any leftover tricolor stripe under hero, again */ .hero.hero-v3 ~ .strip, .strip { display: none !important; } /* ---- Round 9: NUKE the italian-flag border on hero-v3 ---- */ .hero.hero-v3 { border: none !important; border-bottom: none !important; border-image: none !important; border-image-source: none !important; } /* ---- Round 10: header logo placeholder (no text, no logo) ---- */ .header .logo.logo-blank { display: inline-block; width: 1px; height: 60px; background: transparent; font-size: 0; color: transparent; } .header .logo.logo-text { display: none !important; } /* ============================================================ Round 11 — CATERING PAGE Ferrara hero ============================================================ */ /* Override page-catering cream bg under the dark hero (hero handles its own bg). Catering sections below remain on cream — body bg shows through them. */ .page-catering .hero.hero-v3.catering-hero-v3 { background: #1a1a1a url('../assets/feature-spread.png') center 40%/cover no-repeat !important; } /* Ensure header is fully transparent over the dark hero on catering page too */ .page-catering .header { background: transparent !important; border-bottom: none !important; } .page-catering .header .nav-links a { color: #fff !important; } .page-catering .header .nav-links a:hover { color: var(--ferrara-gold, #c89b2a) !important; } .page-catering .header .nav-links a.is-active { color: var(--ferrara-gold, #c89b2a) !important; } .page-catering .header .nav-links a.is-active::after { background: var(--ferrara-gold, #c89b2a) !important; } .page-catering .header .nav-phone { color: #fff !important; } .page-catering .header .nav-phone:hover { color: var(--ferrara-gold, #c89b2a) !important; } /* Sticky-header dark variant once scrolled */ .page-catering .header.is-scrolled { background: rgba(20, 20, 20, 0.95) !important; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.08) !important; } /* Override Round-10 logo-blank placeholder so catering hero logo image isn't double-shown */ /* (catering page uses logo-blank in header + hero-v3-logo in hero — same as homepage) */ /* Adjust nav-cta (Request Quote) so it still pops on dark header */ .page-catering .header .nav-cta { background: var(--ferrara-red, #b8311f) !important; border-color: var(--ferrara-red, #b8311f) !important; color: #fff !important; } .page-catering .header .nav-cta:hover { background: var(--ferrara-red-dk, #8f2517) !important; border-color: var(--ferrara-red-dk, #8f2517) !important; } /* Keep ghost-marquee separator visible — it sits between dark hero and cream sections */ .page-catering .ghost-marquee { background: #fbf6ec !important; } /* ============================================================ Round 12 — DEALS STRIP (fills white gap between marquee & signatures) ============================================================ */ /* Strip uses the page's Ferrara cream tone (inherited from section !important rule); we just add subtle radial accents + tighter padding so it reads as its own band. */ section.deals-strip, .deals-strip { padding: 56px 0 64px !important; position: relative; overflow: hidden; border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); } .deals-strip::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 25%, rgba(184,49,31,0.06), transparent 55%), radial-gradient(circle at 88% 75%, rgba(200,155,42,0.08), transparent 55%); pointer-events: none; } .deals-strip .container { position: relative; z-index: 1; } .deals-strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .deals-strip-head .eyebrow { color: var(--ferrara-gold, #c89b2a); letter-spacing: 0.22em; font-size: 12px; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; } .deals-strip-head h2 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.02; color: #1a1a1a; margin: 0; letter-spacing: 0.01em; } .deals-strip-head h2 .accent { color: var(--ferrara-red, #b8311f); font-style: italic; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; } .deals-strip-all { display: inline-flex; align-items: center; gap: 8px; color: var(--ferrara-red, #b8311f); font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(184,49,31,0.35); padding-bottom: 4px; transition: color 0.2s, border-color 0.2s, gap 0.2s; } .deals-strip-all:hover { color: var(--ferrara-red-dk, #8f2517); border-color: var(--ferrara-red-dk, #8f2517); gap: 12px; } .deals-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 980px) { .deals-strip-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .deals-strip-grid { grid-template-columns: 1fr; } } .deal-tile { position: relative; display: block; background: #2a1a18; border: 1px solid rgba(0,0,0,0.10); border-radius: 14px; padding: 24px 22px 22px; color: #f5efe2; text-decoration: none; transition: transform 0.25s ease, border-color 0.25s, box-shadow 0.25s; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } .deal-tile:hover { transform: translateY(-4px); border-color: var(--ferrara-gold, #c89b2a); box-shadow: 0 12px 28px rgba(0,0,0,0.18); } .deal-tile-red { background: linear-gradient(155deg, #b8311f 0%, #8f2517 100%); border-color: transparent; } .deal-tile-red:hover { background: linear-gradient(155deg, #c93b27 0%, #a02a1c 100%); border-color: var(--ferrara-gold, #c89b2a); } .deal-tile-lunch { background: #2a1a18; border-color: rgba(200,155,42,0.55); } .deal-tile-lunch:hover { background: #321f1c; border-color: var(--ferrara-gold, #c89b2a); } .deal-save { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ferrara-gold, #c89b2a); background: rgba(0,0,0,0.35); padding: 5px 10px; border-radius: 999px; margin-bottom: 14px; } .deal-tile-red .deal-save { color: #fff; background: rgba(0,0,0,0.30); } .deal-save-gold { color: #1a1a1a; background: var(--ferrara-gold, #c89b2a); } .deal-tile h3 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 26px; line-height: 1; margin: 0 0 10px; letter-spacing: 0.02em; color: #fff; } .deal-price { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 56px; line-height: 1; color: #fff; margin: 0 0 12px; display: flex; align-items: flex-start; gap: 4px; } .deal-price .d { font-size: 26px; color: var(--ferrara-gold, #c89b2a); font-weight: 700; margin-top: 6px; } .deal-tile-red .deal-price .d { color: rgba(255,255,255,0.85); } .deal-tile-lunch .deal-price .d { color: var(--ferrara-gold, #c89b2a); } .deal-price-sm { font-size: 32px; } .deal-meta { font-size: 13px; line-height: 1.45; color: rgba(245,239,226,0.78); margin: 0; } .deal-tile-red .deal-meta { color: rgba(255,255,255,0.88); } /* ---- Round 13: Hero skyline + floating cheese pie — mobile tuning ---- */ @media (max-width: 860px) { .hero.hero-v3 .hero-floating-pie { width: 85% !important; right: -12% !important; top: auto !important; bottom: 6% !important; transform: rotate(-6deg) !important; } @keyframes heroPieFloat { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-8px); } } } @media (max-width: 600px) { .hero.hero-v3 .hero-floating-pie { width: 105% !important; right: -20% !important; bottom: 4% !important; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.55)) !important; } .hero.hero-v3 .hero-v3-overlay { background: linear-gradient(180deg, rgba(10,10,10,0.60) 0%, rgba(10,10,10,0.25) 40%, rgba(10,10,10,0.55) 100%) !important; } } /* ---- Round 23: Kill Slice modal popup + shrink floating button ---- */ /* Modal popup and banner variants are hidden. Only the small floating button is allowed. */ [data-slice-widget="modal-popup"], [data-slice-widget="modal-multi-loc"], [data-slice-widget="floating-sticker"], [data-slice-widget="banner"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Extra guard: any Slice-injected modal/dialog/overlay elements get killed. */ [id^="slice-"][role="dialog"], [id^="slice-"][class*="modal"], [id^="slice-"][class*="Modal"], [id^="slice-"][class*="overlay"], [id^="slice-"][class*="Overlay"], [id^="slice-"][class*="popup"], [id^="slice-"][class*="Popup"], [class*="slice-modal"], [class*="SliceModal"], [class*="slice-popup"], [class*="slice-overlay"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Kill body scroll-lock that Slice sometimes applies when the modal opens. */ body.slice-modal-open, body[style*="overflow: hidden"][class*="slice"] { overflow: auto !important; } /* Shrink the floating Order button so it doesn't obstruct the view. */ [data-slice-widget="floating-button"] { transform: scale(0.72) !important; transform-origin: bottom right !important; opacity: 0.92 !important; bottom: 16px !important; right: 16px !important; z-index: 90 !important; } [data-slice-widget="floating-button"]:hover { opacity: 1 !important; } @media (max-width: 640px) { [data-slice-widget="floating-button"] { transform: scale(0.66) !important; bottom: 12px !important; right: 12px !important; } } /* Also shrink any iframe Slice injects for the floating button. */ iframe[src*="slicelife"], iframe[src*="slice-widget"] { max-width: 220px !important; } /* Escape hatch for testing (unchanged from prior rounds). */ body.slice-widget-test [data-slice-widget] { display: block !important; visibility: visible !important; transform: none !important; opacity: 1 !important; } /* ===== Round 15 · Ferrara-style stacked footer credit ===== */ .footer-bottom--stacked { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.5rem; padding-top: var(--space-6); padding-bottom: var(--space-4); } .footer-bottom--stacked .footer-copyright { font-size: var(--text-sm); letter-spacing: 0.02em; color: oklch(0.72 0.02 60); font-weight: 400; } .footer-bottom--stacked .footer-designed { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); letter-spacing: 0.02em; color: oklch(0.72 0.02 60); font-weight: 400; } .footer-bottom--stacked .footer-designed .loop-tag-link { display: inline-flex; align-items: center; gap: 0.4rem; color: #f4d47c; text-decoration: none; font-weight: 700; letter-spacing: 0.01em; transition: opacity 0.2s ease, color 0.2s ease; } .footer-bottom--stacked .footer-designed .loop-tag-link:hover { color: #ffe39a; text-decoration: underline; } .footer-bottom--stacked .footer-designed .loop-tag-word { font-size: 1.05rem; font-weight: 700; } .footer-bottom--stacked .footer-designed .loop-tag-icon { width: 20px; height: 20px; border-radius: 50%; background: #fff8e7; padding: 2px; object-fit: contain; flex-shrink: 0; } .footer-bottom--stacked .staff-tv-link { margin-top: 0.25rem; opacity: 0.35; } /* ===== Round 16 · DBPR SB 606 / s.509.214 operations charge notice ===== */ /* Font size must be equal to or greater than menu item descriptions. */ .ops-charge-banner { background: #fff8e7; border-top: 2px solid #d4a017; border-bottom: 2px solid #d4a017; padding: var(--space-4) 0; margin: 0; } .ops-charge-banner p { margin: 0; color: #3a2a10; font-size: 1rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.005em; } .ops-charge-banner strong { color: #1a0f00; font-weight: 700; } [data-theme='dark'] .ops-charge-banner { background: #2a1f0a; border-color: #d4a017; } [data-theme='dark'] .ops-charge-banner p { color: #f4e4b5; } [data-theme='dark'] .ops-charge-banner strong { color: #fff8e7; } .ops-charge-notice { font-size: 0.95rem; line-height: 1.55; color: var(--color-text-2); margin: var(--space-3) 0 0 0; padding: var(--space-3); background: rgba(212, 160, 23, 0.08); border-left: 3px solid #d4a017; border-radius: 6px; } /* ================================================================= ROUND 17 — APPETIZERS & DESSERTS SECTION Warm charcoal band that primes appetite before the Borough Specials ================================================================= */ .apps-desserts { background: var(--color-bg); padding: var(--space-16) 0; position: relative; border-top: 1px solid rgba(212, 160, 23, 0.12); border-bottom: 1px solid rgba(212, 160, 23, 0.12); } .apps-desserts .container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); } .apps-desserts .eyebrow { color: #d4a017; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--space-3) 0; } .apps-desserts h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 var(--space-4) 0; letter-spacing: -0.015em; } .apps-desserts h2 .accent { color: #d4a017; font-style: normal; } .apps-desserts-lede { font-size: 1.125rem; line-height: 1.55; color: var(--color-text-2); max-width: 60ch; margin: 0 0 var(--space-12) 0; } .apps-desserts .menu-section { margin-top: var(--space-10); } .apps-desserts .menu-section:first-of-type { margin-top: 0; } .apps-desserts .menu-section-head h3 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); } .apps-desserts .menu-grid-sweet { display: grid; grid-template-columns: minmax(0, 460px); justify-content: center; } @media (max-width: 640px) { .apps-desserts .menu-grid-sweet { grid-template-columns: 1fr; } } .apps-desserts .mg-price { color: #d4a017; font-weight: 700; font-size: 1.125rem; } /* ================================================================= ROUND 18 — RESTRUCTURE: carousels + tighter homepage ================================================================= */ /* ---------- GAP FIX #1: signature (reputation) section Was padding-bottom: var(--space-24) or similar. Tighten it. */ .signature { padding-top: var(--space-14); padding-bottom: var(--space-10); } /* ---------- GAP FIX #2: full menu section top spacing */ .menu { padding-top: var(--space-10); } /* ---------- Compact menu-section (Build Your Pizza + Slice) ---------- */ .menu-section-compact { padding: var(--space-4) 0; } .menu-section-compact .menu-section-head { margin-bottom: var(--space-3); } .menu-section-compact .menu-section-head h3 { font-size: 1.25rem; } .menu-section-compact .size-grid { gap: var(--space-2); } .menu-section-compact .size { padding: var(--space-3) var(--space-4); } .menu-section-compact .size-label { font-size: 0.9rem; } .menu-section-compact .size-price { font-size: 1.125rem; } .menu-section-compact .callout-box { padding: var(--space-4); font-size: 0.875rem; line-height: 1.55; } /* ---------- CAROUSEL BASE ---------- */ .carousel { position: relative; overflow: hidden; padding: var(--space-2) 0 var(--space-6); } .carousel:focus { outline: none; } .carousel-track { display: flex; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; gap: 0; } .carousel-slide { flex: 0 0 100%; min-width: 0; box-sizing: border-box; padding: 0 var(--space-3); } /* Prev / Next buttons */ .carousel-btn { position: absolute; top: 40%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.96); color: #1a1a1a; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); z-index: 3; transition: opacity 0.2s ease, transform 0.15s ease; } .carousel-btn:hover { transform: translateY(-50%) scale(1.06); } .carousel-btn:disabled { opacity: 0.35; cursor: default; transform: translateY(-50%); } .carousel-btn-prev { left: 8px; } .carousel-btn-next { right: 8px; } @media (max-width: 720px) { .carousel-btn { width: 36px; height: 36px; } .carousel-btn-prev { left: 4px; } .carousel-btn-next { right: 4px; } } /* Dots */ .carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-4); } .carousel-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.16); border: none; padding: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .carousel-dot:hover { background: rgba(0, 0, 0, 0.32); } .carousel-dot.active { background: #d4a017; transform: scale(1.25); } /* Signature carousel — reputation-specific tweaks */ .signature .carousel-slide { padding: 0 var(--space-4); } .signature .sig-card { height: 100%; } @media (min-width: 721px) { .signature .carousel-btn-prev { left: -8px; } .signature .carousel-btn-next { right: -8px; } } /* Compact card carousel (specialty pizzas + appetizers) */ .carousel-compact .carousel-slide { padding: 0 var(--space-3); } .carousel-compact .mg-card { height: 100%; } /* ---------- START (Appetizers) SECTION ---------- */ .start-strip { background: var(--color-bg); padding: var(--space-14) 0 var(--space-10); border-bottom: 1px solid rgba(212, 160, 23, 0.10); } .start-strip .container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); } .start-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; margin-bottom: var(--space-8); } @media (max-width: 900px) { .start-head { grid-template-columns: 1fr; gap: var(--space-4); } } .start-head .eyebrow { color: #d4a017; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--space-3) 0; } .start-head h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1; margin: 0; letter-spacing: -0.01em; } .start-head h2 .accent { color: #d4a017; font-style: normal; } .start-head > p { color: var(--color-text-2); font-size: 1.0625rem; line-height: 1.55; margin: 0; max-width: 46ch; } /* ---------- FINISH (Desserts) SECTION ---------- */ .finish-strip { background: var(--color-bg); padding: var(--space-14) 0; border-top: 1px solid rgba(212, 160, 23, 0.10); border-bottom: 1px solid rgba(212, 160, 23, 0.10); } .finish-strip .container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); } .finish-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; margin-bottom: var(--space-8); } @media (max-width: 900px) { .finish-head { grid-template-columns: 1fr; gap: var(--space-4); } } .finish-head .eyebrow { color: #d4a017; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--space-3) 0; } .finish-head h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1; margin: 0; letter-spacing: -0.01em; } .finish-head h2 .accent { color: #d4a017; font-style: normal; } .finish-head > p { color: var(--color-text-2); font-size: 1.0625rem; line-height: 1.55; margin: 0; max-width: 46ch; } .finish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 720px) { .finish-grid { grid-template-columns: 1fr; gap: var(--space-4); } } /* Mg-price for menu cards (retained from Round 17) */ .mg-price { color: #d4a017; font-weight: 700; font-size: 1.125rem; } /* ================================================================= ROUND 19 — GAP TIGHTENING + CAROUSEL POLISH ================================================================= */ /* Kill the huge default section padding on the reworked homepage sections. The base rule `section { padding-block: clamp(space-16, 9vw, space-32); }` was adding 60-120px above AND below every band. */ section.signature { padding-block: var(--space-10) var(--space-8); } section.pasta-hero { padding: var(--space-10) 0; } section.menu { padding-block: var(--space-8); } section.start-strip { padding-block: var(--space-10); } section.finish-strip { padding-block: var(--space-10); } /* Specialty pizzas carousel — cards are becoming gigantic because they stretch full-width. Cap image aspect ratio inside carousel slides. */ .menu-section-specialty .carousel { padding: var(--space-2) 0 var(--space-4); } .menu-section-specialty .mg-card .mg-img { aspect-ratio: auto !important; height: 240px !important; max-height: 240px; overflow: hidden; background: #f4ede1; } .menu-section-specialty .mg-card .mg-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .menu-section-specialty .mg-card { max-width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); background: #fff; } .menu-section-specialty .mg-card .mg-body { padding: var(--space-4); } .menu-section-specialty .mg-card .mg-name { font-size: 1.125rem; margin: 0 0 var(--space-1) 0; } .menu-section-specialty .mg-card .mg-tag { font-size: 0.875rem; color: var(--color-text-2); line-height: 1.4; margin: 0; } /* Move specialty carousel arrows OUTSIDE the cards on desktop */ @media (min-width: 721px) { .menu-section-specialty .carousel-btn-prev { left: -22px; } .menu-section-specialty .carousel-btn-next { right: -22px; } } /* Start (appetizers) carousel — same treatment for consistent card sizing */ .start-strip .mg-card .mg-img { aspect-ratio: auto !important; height: 200px !important; overflow: hidden; background: #1a1a1a; } .start-strip .mg-card .mg-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .start-strip .mg-card { border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); background: #fff; height: 100%; display: flex; flex-direction: column; } .start-strip .mg-card .mg-body { padding: var(--space-4); flex: 1; } .start-strip .mg-card .mg-name { font-size: 1.0625rem; margin: 0; } .start-strip .mg-card .mg-tag { font-size: 0.875rem; color: var(--color-text-2); line-height: 1.4; margin: var(--space-1) 0 0; } @media (min-width: 721px) { .start-strip .carousel-btn-prev { left: -22px; } .start-strip .carousel-btn-next { right: -22px; } } /* Finish (desserts) card polish — consistent with start-strip */ .finish-strip .mg-card .mg-img { aspect-ratio: auto !important; height: 220px !important; overflow: hidden; background: #1a1a1a; } .finish-strip .mg-card .mg-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .finish-strip .mg-card { border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); background: #fff; } .finish-strip .mg-card .mg-body { padding: var(--space-4); } .finish-strip .mg-card .mg-name { font-size: 1.0625rem; } .finish-strip .mg-card .mg-tag { font-size: 0.875rem; color: var(--color-text-2); line-height: 1.4; margin-top: var(--space-1); } /* Signature (reputation) — hard-cap the sig-card image so it doesn't stretch */ .signature .sig-card-img { aspect-ratio: 16 / 10; overflow: hidden; } .signature .sig-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }