/* ============================================================ PLATES & PLAYMAKERS — pages.css Styles for all sub-pages (chefs, impact, sponsors, faq, etc.) Import AFTER style.css. Add class="subpage" to . ============================================================ */ /* ── SUB-PAGE OVERRIDES ───────────────────────────────────── */ body.subpage section { min-height: unset; scroll-snap-align: unset; overflow: visible; } body.subpage #nav { background: var(--navy-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ── PAGE HERO ─────────────────────────────────────────────── */ .page-hero { min-height: 58vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; padding: 140px 40px 90px; background: var(--navy); overflow: hidden; } .page-hero-bg { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(155, 137, 93, 0.5) 1px, transparent 1px); background-size: 36px 36px; opacity: 0.04; pointer-events: none; } .page-hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(155, 137, 93, 0.06) 0%, transparent 70%); } .page-hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .page-hero-badge { width: 56px; height: 56px; object-fit: contain; margin-bottom: 24px; opacity: 0.9; } .page-hero-eyebrow { font-size: 0.6rem; letter-spacing: 0.4em; color: var(--gold-mid); text-transform: uppercase; margin-bottom: 20px; } .page-hero-title { font-size: clamp(2.5rem, 8vw, 7rem); color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; margin-bottom: 24px; } .page-hero-sub { font-size: 0.75rem; color: var(--cream-dim); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.8; max-width: 500px; } /* ── CONTENT WRAPPERS ──────────────────────────────────────── */ .content-section { padding: 100px 80px; } .content-section--dark { background: rgba(155, 137, 93, 0.03); border-top: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim); } .content-inner { max-width: 1300px; margin: 0 auto; } .section-label { font-size: 0.58rem; letter-spacing: 0.45em; color: var(--gold-mid); text-transform: uppercase; margin-bottom: 16px; display: block; } .section-title { font-size: clamp(1.6rem, 4vw, 3.2rem); color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; margin-bottom: 32px; } .section-body { font-size: 0.85rem; line-height: 1.9; color: var(--cream); max-width: 640px; } .section-divider { width: 60px; height: 1px; background: var(--gold-dim); margin: 60px 0; } /* ── FOOTER PAGES NAV ──────────────────────────────────────── */ .footer-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 32px; margin: 4px 0; } .footer-pages a { font-size: 0.58rem; letter-spacing: 0.25em; color: var(--cream-dim); text-transform: uppercase; transition: color 0.3s ease; font-family: inherit; } .footer-pages a:hover { color: var(--gold); } /* ── CHEFS FULL PAGE ───────────────────────────────────────── */ .chefs-full-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .chef-full-card { border: 1px solid rgba(155, 137, 93, 0.2); display: flex; flex-direction: column; transition: border-color 0.3s ease; cursor: default; } .chef-full-card:hover { border-color: var(--gold); } .chef-full-card:hover .chef-full-photo img { transform: scale(1.04); } .chef-full-photo { position: relative; width: 100%; aspect-ratio: 3 / 4; height: auto; overflow: hidden; flex-shrink: 0; background: rgba(155, 137, 93, 0.05); } .chef-full-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease; filter: grayscale(15%) contrast(1.05); } .chef-full-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(15, 23, 38, 0.7) 100%); pointer-events: none; } .chef-full-num { position: absolute; bottom: 12px; left: 18px; font-size: 1rem; color: rgba(155, 137, 93, 0.5); font-weight: 700; letter-spacing: 0.1em; z-index: 2; } .chef-placeholder { background: repeating-linear-gradient( 45deg, rgba(155, 137, 93, 0.04) 0px, rgba(155, 137, 93, 0.04) 1px, transparent 1px, transparent 20px ); display: flex; align-items: center; justify-content: center; } .chef-placeholder .chef-placeholder-num { font-size: 6rem; color: rgba(155, 137, 93, 0.1); font-weight: 700; line-height: 1; } .chef-full-info { padding: 24px 26px 30px; background: var(--navy); flex: 1; display: flex; flex-direction: column; gap: 10px; } .chef-full-info .jb-badge { display: inline-block; background: var(--gold); color: var(--navy); font-size: 0.52rem; padding: 2px 6px; letter-spacing: 0.15em; font-weight: 700; text-transform: uppercase; align-self: flex-start; } .chef-full-name { color: var(--gold); font-size: 1.05rem; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; line-height: 1.2; margin: 0; } .chef-full-restaurant { color: var(--cream); font-size: 0.78rem; letter-spacing: 0.05em; } .chef-full-bio { color: rgba(240, 233, 216, 0.65); font-size: 0.72rem; line-height: 1.75; flex: 1; margin-top: 4px; } .chef-full-link { display: inline-block; font-size: 0.6rem; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; border-bottom: 1px solid var(--gold-dim); padding-bottom: 2px; margin-top: 8px; align-self: flex-start; transition: border-color 0.3s ease; font-family: inherit; } .chef-full-link:hover { border-color: var(--gold); } /* ── STATS ROW ─────────────────────────────────────────────── */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim); } .stat-item { padding: 60px 40px; border-right: 1px solid var(--gold-dim); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .stat-item:last-child { border-right: none; } .stat-number { font-size: clamp(2rem, 5vw, 3.5rem); color: var(--gold); font-weight: 700; letter-spacing: 0.04em; line-height: 1; } .stat-label { font-size: 0.62rem; letter-spacing: 0.3em; color: var(--cream-dim); text-transform: uppercase; line-height: 1.6; } /* ── IMPACT PROGRAMS ───────────────────────────────────────── */ .programs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; border: 1px solid var(--gold-dim); } .program-item { padding: 48px 44px; border: 1px solid var(--gold-dim); display: flex; flex-direction: column; gap: 16px; transition: background 0.3s ease; } .program-item:hover { background: var(--gold-faint); } .program-icon { opacity: 0.7; } .program-name { font-size: 0.75rem; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; font-weight: 700; } .program-desc { font-size: 0.82rem; line-height: 1.8; color: var(--cream-dim); } /* ── TICKET IMPACT ─────────────────────────────────────────── */ .ticket-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ticket-impact-item { padding: 32px 28px; border: 1px solid var(--gold-dim); display: flex; flex-direction: column; gap: 12px; transition: border-color 0.3s ease, background 0.3s ease; } .ticket-impact-item:hover { border-color: var(--gold); background: var(--gold-faint); } .ticket-amount { font-size: clamp(1.5rem, 3vw, 2.4rem); color: var(--gold); font-weight: 700; letter-spacing: 0.05em; } .ticket-impact-desc { font-size: 0.78rem; color: var(--cream-dim); line-height: 1.75; } /* ── HOSPITAL SECTION ──────────────────────────────────────── */ .hospital-section { display: flex; gap: 80px; align-items: flex-start; } .hospital-left { flex: 1; } .hospital-right { flex: 1; display: flex; flex-direction: column; gap: 24px; } .hospital-quote { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--gold); font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; border-left: 2px solid var(--gold); padding-left: 24px; } /* ── SPONSOR TIERS ─────────────────────────────────────────── */ .sponsor-tier { margin-bottom: 72px; } .sponsor-tier-label { font-size: 0.58rem; letter-spacing: 0.45em; color: var(--gold-mid); text-transform: uppercase; margin-bottom: 8px; display: block; } .sponsor-tier-name { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--gold); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--gold-dim); } .sponsor-grid { display: grid; gap: 16px; } .sponsor-grid--presenting { grid-template-columns: 1fr; } .sponsor-grid--gold { grid-template-columns: repeat(3, 1fr); } .sponsor-grid--silver { grid-template-columns: repeat(4, 1fr); } .sponsor-grid--partner { grid-template-columns: repeat(5, 1fr); } .sponsor-card { border: 1px solid var(--gold-dim); padding: 40px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; min-height: 120px; transition: border-color 0.3s ease, background 0.3s ease; cursor: default; } .sponsor-card--presenting { min-height: 200px; border-color: rgba(155, 137, 93, 0.4); } .sponsor-card:hover { border-color: var(--gold); background: var(--gold-faint); } .sponsor-card-name { font-size: 0.72rem; color: var(--cream); letter-spacing: 0.15em; text-transform: uppercase; } .sponsor-card-type { font-size: 0.58rem; color: var(--gold-mid); letter-spacing: 0.25em; text-transform: uppercase; } .sponsor-tbd { font-size: 0.6rem; letter-spacing: 0.3em; color: rgba(155, 137, 93, 0.3); text-transform: uppercase; } /* Become a sponsor */ .become-sponsor { background: var(--gold-faint); border: 1px solid var(--gold-dim); padding: 72px 80px; display: flex; align-items: center; justify-content: space-between; gap: 60px; } .become-sponsor-left { flex: 1; } .become-sponsor-title { font-size: clamp(1.5rem, 3vw, 2.4rem); color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; margin-bottom: 16px; } .become-sponsor-sub { font-size: 0.82rem; color: var(--cream-dim); line-height: 1.8; max-width: 480px; } .become-sponsor-right { display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; } .contact-line { font-size: 0.7rem; letter-spacing: 0.15em; color: var(--cream); } .contact-line a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); padding-bottom: 2px; transition: border-color 0.3s ease; font-family: inherit; } .contact-line a:hover { border-color: var(--gold); } /* ── FAQ ───────────────────────────────────────────────────── */ .faq-layout { display: grid; grid-template-columns: 280px 1fr; gap: 80px; align-items: start; } .faq-groups { display: flex; flex-direction: column; gap: 60px; } .faq-group-title { font-size: 0.62rem; letter-spacing: 0.4em; color: var(--gold); text-transform: uppercase; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--gold-dim); } .faq-list { display: flex; flex-direction: column; gap: 0; } .faq-item { border-bottom: 1px solid var(--gold-dim); cursor: pointer; } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; gap: 24px; } .faq-question-text { font-size: 0.82rem; color: var(--cream); letter-spacing: 0.05em; line-height: 1.5; font-family: inherit; font-weight: 400; } .faq-item:hover .faq-question-text { color: var(--gold); } .faq-icon { width: 20px; height: 20px; flex-shrink: 0; position: relative; border: 1px solid var(--gold-dim); display: flex; align-items: center; justify-content: center; transition: border-color 0.3s ease, background 0.3s ease; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--gold); transition: transform 0.3s ease, opacity 0.3s ease; } .faq-icon::before { width: 10px; height: 1px; } .faq-icon::after { width: 1px; height: 10px; } .faq-item.open .faq-icon::after { opacity: 0; transform: rotate(90deg); } .faq-item.open .faq-icon { border-color: var(--gold); background: var(--gold-faint); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; } .faq-item.open .faq-answer { max-height: 400px; } .faq-answer-inner { padding: 0 0 24px; font-size: 0.8rem; color: var(--cream-dim); line-height: 1.85; max-width: 680px; } /* ── EVENTS / STORY ────────────────────────────────────────── */ .story-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .story-large-text { font-size: clamp(3rem, 10vw, 9rem); color: var(--gold); font-weight: 700; letter-spacing: -0.02em; line-height: 0.9; } .story-body { font-size: 0.85rem; line-height: 1.9; color: var(--cream); } .story-body p + p { margin-top: 20px; } .timeline { display: flex; flex-direction: column; gap: 0; } .timeline-item { display: flex; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--gold-dim); } .timeline-item:first-child { border-top: 1px solid var(--gold-dim); } .timeline-date { font-size: 0.65rem; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; font-weight: 700; flex-shrink: 0; width: 120px; padding-top: 2px; } .timeline-content h4 { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--cream); text-transform: uppercase; margin-bottom: 8px; font-weight: 700; } .timeline-content p { font-size: 0.75rem; color: var(--cream-dim); line-height: 1.7; } .gallery-placeholder { border: 1px dashed var(--gold-dim); padding: 80px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .gallery-placeholder-text { font-size: 0.65rem; letter-spacing: 0.3em; color: var(--gold-mid); text-transform: uppercase; } /* ── DONATE ────────────────────────────────────────────────── */ .donate-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .donate-tier { border: 1px solid var(--gold-dim); padding: 40px 32px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.3s ease, background 0.3s ease; text-decoration: none; } .donate-tier:hover { border-color: var(--gold); background: var(--gold-faint); } .donate-tier--featured { border-color: rgba(155, 137, 93, 0.5); background: rgba(155, 137, 93, 0.04); } .donate-amount { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--gold); font-weight: 700; letter-spacing: 0.04em; line-height: 1; } .donate-impact { font-size: 0.78rem; color: var(--cream); line-height: 1.75; flex: 1; } .donate-cta-text { font-size: 0.6rem; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; font-weight: 700; } .donate-custom { border: 1px solid var(--gold-dim); padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 20px; transition: border-color 0.3s ease; } .donate-custom:hover { border-color: var(--gold); } .donate-custom-label { font-size: 0.65rem; letter-spacing: 0.35em; color: var(--gold-mid); text-transform: uppercase; } .donate-custom-title { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .donate-custom-body { font-size: 0.8rem; color: var(--cream-dim); line-height: 1.8; max-width: 480px; } /* ── PRESS ─────────────────────────────────────────────────── */ .press-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border: 1px solid var(--gold-dim); margin-bottom: 60px; } .press-asset { padding: 40px 44px; border: 1px solid var(--gold-dim); display: flex; flex-direction: column; gap: 14px; transition: background 0.3s ease; } .press-asset:hover { background: var(--gold-faint); } .press-asset-name { font-size: 0.78rem; letter-spacing: 0.15em; color: var(--cream); text-transform: uppercase; font-weight: 700; } .press-asset-desc { font-size: 0.72rem; color: var(--cream-dim); line-height: 1.7; } .press-asset-link { font-size: 0.58rem; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; font-family: inherit; border-bottom: 1px solid var(--gold-dim); padding-bottom: 2px; align-self: flex-start; transition: border-color 0.3s ease; } .press-asset-link:hover { border-color: var(--gold); } .press-contact { padding: 48px 44px; border: 1px solid var(--gold-dim); display: flex; flex-direction: column; gap: 16px; } .press-contact-item { display: flex; gap: 16px; align-items: flex-start; } .press-contact-key { font-size: 0.6rem; letter-spacing: 0.3em; color: var(--gold-mid); text-transform: uppercase; flex-shrink: 0; width: 80px; padding-top: 2px; } .press-contact-val { font-size: 0.78rem; color: var(--cream); line-height: 1.6; } .press-contact-val a { color: var(--gold); font-family: inherit; border-bottom: 1px solid var(--gold-dim); padding-bottom: 1px; transition: border-color 0.3s ease; } .press-contact-val a:hover { border-color: var(--gold); } .boilerplate { padding: 44px; border: 1px solid var(--gold-dim); background: var(--gold-faint); } .boilerplate-label { font-size: 0.58rem; letter-spacing: 0.4em; color: var(--gold-mid); text-transform: uppercase; margin-bottom: 16px; display: block; } .boilerplate-text { font-size: 0.78rem; color: var(--cream-dim); line-height: 1.85; } .coverage-placeholder { display: flex; flex-direction: column; gap: 16px; } .coverage-item { padding: 28px 32px; border: 1px solid var(--gold-dim); display: flex; align-items: center; gap: 32px; transition: background 0.3s ease; } .coverage-item:hover { background: var(--gold-faint); } .coverage-outlet { font-size: 0.65rem; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; font-weight: 700; flex-shrink: 0; width: 160px; } .coverage-headline { font-size: 0.8rem; color: var(--cream); line-height: 1.5; flex: 1; } .coverage-tbd { font-size: 0.6rem; letter-spacing: 0.25em; color: rgba(155, 137, 93, 0.3); text-transform: uppercase; } /* ── MENU ──────────────────────────────────────────────────── */ .menu-announce { text-align: center; padding: 60px 40px; border: 1px solid var(--gold-dim); background: var(--gold-faint); margin-bottom: 60px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .menu-announce-label { font-size: 0.58rem; letter-spacing: 0.45em; color: var(--gold-mid); text-transform: uppercase; } .menu-announce-title { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; } .menu-announce-sub { font-size: 0.78rem; color: var(--cream-dim); line-height: 1.8; max-width: 480px; text-align: center; } .menu-grid { display: flex; flex-direction: column; gap: 0; } .menu-item { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 32px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--gold-dim); } .menu-item:first-child { border-top: 1px solid var(--gold-dim); } .menu-item-num { font-size: 1.8rem; color: rgba(155, 137, 93, 0.2); font-weight: 700; letter-spacing: 0.05em; line-height: 1; padding-top: 4px; } .menu-item-chef { display: flex; flex-direction: column; gap: 6px; } .menu-item-name { font-size: 0.85rem; color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; } .menu-item-restaurant { font-size: 0.72rem; color: var(--cream-dim); letter-spacing: 0.05em; } .menu-item-dish { display: flex; flex-direction: column; gap: 8px; } .menu-dish-title { font-size: 0.8rem; color: var(--cream); font-weight: 700; letter-spacing: 0.05em; line-height: 1.3; } .menu-dish-desc { font-size: 0.7rem; color: var(--cream-dim); line-height: 1.7; font-style: italic; } .menu-format { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 60px; } .menu-format-item { padding: 32px 28px; border: 1px solid var(--gold-dim); display: flex; flex-direction: column; gap: 10px; } .menu-format-label { font-size: 0.58rem; letter-spacing: 0.35em; color: var(--gold-mid); text-transform: uppercase; } .menu-format-title { font-size: 0.8rem; color: var(--cream); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .menu-format-desc { font-size: 0.72rem; color: var(--cream-dim); line-height: 1.7; } /* ── INTRO TWO-COL LAYOUT ──────────────────────────────────── */ .intro-two-col { display: flex; gap: 80px; align-items: flex-start; } .intro-two-col-left { flex: 0 0 45%; } .intro-two-col-right { flex: 1; display: flex; flex-direction: column; gap: 24px; } .intro-stats-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 28px; } .intro-stat { border-left: 2px solid var(--gold); padding-left: 16px; } .intro-stat-num { font-size: 1.6rem; color: var(--gold); font-weight: 700; line-height: 1; } .intro-stat-label { font-size: 0.6rem; letter-spacing: 0.3em; color: var(--cream-dim); text-transform: uppercase; margin-top: 4px; } /* ── PAGE CTA STRIP ────────────────────────────────────────── */ .page-cta-strip { padding: 100px 80px; display: flex; align-items: center; justify-content: space-between; gap: 60px; border-top: 1px solid var(--gold-dim); } .page-cta-text { flex: 1; } .page-cta-eyebrow { font-size: 0.58rem; letter-spacing: 0.4em; color: var(--gold-mid); text-transform: uppercase; margin-bottom: 12px; display: block; } .page-cta-title { font-size: clamp(1.5rem, 4vw, 3rem); color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; } .page-cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; flex-shrink: 0; } /* ── RESPONSIVE — TABLET (max-width: 1024px) ──────────────── */ @media (max-width: 1024px) { .content-section { padding: 80px 48px; } .chefs-full-grid { grid-template-columns: repeat(2, 1fr); } .stats-row { grid-template-columns: repeat(2, 1fr); } .stat-item:nth-child(2) { border-right: none; } .ticket-impact-grid { grid-template-columns: repeat(2, 1fr); } .sponsor-grid--gold { grid-template-columns: repeat(2, 1fr); } .sponsor-grid--silver { grid-template-columns: repeat(3, 1fr); } .sponsor-grid--partner { grid-template-columns: repeat(3, 1fr); } .donate-tiers { grid-template-columns: repeat(2, 1fr); } .menu-item { grid-template-columns: 60px 1fr; grid-template-rows: auto auto; } .menu-item-num { grid-row: 1; grid-column: 1; } .menu-item-chef { grid-row: 1; grid-column: 2; } .menu-item-dish { grid-row: 2; grid-column: 2; padding-bottom: 8px; } .story-two-col { grid-template-columns: 1fr; gap: 40px; } .hospital-section { flex-direction: column; gap: 40px; } .become-sponsor { flex-direction: column; gap: 32px; padding: 48px 40px; } .page-cta-strip { flex-direction: column; text-align: center; padding: 80px 48px; gap: 32px; } .page-cta-actions { align-items: center; } .press-grid { grid-template-columns: 1fr; } .faq-layout { grid-template-columns: 200px 1fr; gap: 48px; } } /* ── RESPONSIVE — MOBILE (max-width: 768px) ───────────────── */ @media (max-width: 768px) { .page-hero { min-height: 50vh; padding: 120px 28px 70px; } .content-section { padding: 64px 28px; } /* Intro two-col: stack on mobile */ .intro-two-col { flex-direction: column; gap: 36px; } .intro-two-col-left { flex: none; width: 100%; } .intro-two-col-right { width: 100%; } .chefs-full-grid { grid-template-columns: 1fr; } .chef-full-photo { aspect-ratio: 4 / 3; height: auto; } .stats-row { grid-template-columns: repeat(2, 1fr); } .stat-item { padding: 40px 24px; } .stat-item:nth-child(even) { border-right: none; } .programs-grid { grid-template-columns: 1fr; } .ticket-impact-grid { grid-template-columns: 1fr; } .sponsor-grid--gold, .sponsor-grid--silver, .sponsor-grid--partner { grid-template-columns: repeat(2, 1fr); } .donate-tiers { grid-template-columns: 1fr; } .menu-format { grid-template-columns: 1fr; } .menu-item { grid-template-columns: 1fr; gap: 16px; } .menu-item-num { display: none; } .coverage-item { flex-direction: column; gap: 8px; align-items: flex-start; } .coverage-outlet { width: auto; } .page-cta-strip { padding: 64px 28px; } .become-sponsor { padding: 40px 28px; } .faq-layout { grid-template-columns: 1fr; gap: 40px; } .faq-layout > div:first-child { display: none; } }