/* ============================================================ hero.css — four distinct hero treatments for The Eatery Toggled via [data-hero] on : editorial | collage | circle | cinematic (the original split / full / stack still live in styles.css) ============================================================ */ /* show the active layout (extends the rule in styles.css) */ [data-hero="editorial"] .hero-editorial, [data-hero="collage"] .hero-collage, [data-hero="circle"] .hero-circle, [data-hero="cinematic"] .hero-cinematic { display: block; } /* The hero sits above the fold — it must paint immediately and never depend on the scroll-reveal observer (which can leave it blank if the transition is throttled in a background tab). Force hero content visible. */ .hero .reveal { opacity: 1 !important; transform: none !important; } /* the cinematic layout wants a flush, full-bleed hero */ [data-hero="cinematic"] .hero { padding: 0; } /* collage already sets its own top spacing (.hero-collage padding-top); the base .hero padding-top would stack on top of it, doubling the gap */ [data-hero="collage"] .hero { padding-top: 0; } /* --------------------------------------------------------------- 1) EDITORIAL — type as the hero. Masthead rule + giant wordmark. --------------------------------------------------------------- */ .hero-editorial { padding-top: 30px; } .he-meta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 13px 2px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); } .he-meta span:last-child { color: var(--accent-deep); } .he-head { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; margin: 30px 0 0; color: var(--ink); } .he-head .l1 { display: block; font-size: clamp(40px, 8.4vw, 116px); line-height: .96; } .he-head .l1 em { font-style: italic; color: var(--accent-deep); } .he-head .l2 { display: block; font-size: clamp(78px, 19vw, 268px); line-height: .82; letter-spacing: -.03em; } .he-head .per { color: var(--accent); } .he-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-top: 40px; } .he-lower .he-sub { font-size: 19px; color: var(--ink-soft); max-width: 34ch; line-height: 1.6; } .he-lower .hero-cta { margin-top: 26px; } .he-photo .slot-img { width: 100%; height: 260px; } /* --------------------------------------------------------------- 2) COLLAGE — asymmetric photo mosaic with an embedded text tile. --------------------------------------------------------------- */ .hero-collage { padding-top: 26px; } .hc-top { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--accent-deep); margin-bottom: 20px; } .hc-top .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .hc-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 340px 340px; grid-template-areas: "a t t d" "a c c e"; gap: 16px; } .hc-grid .ga { grid-area: a; } .hc-grid .gd { grid-area: d; } .hc-grid .gc { grid-area: c; } .hc-grid .ge { grid-area: e; } .hc-grid .slot-img { width: 100%; height: 100%; } .hc-text { grid-area: t; background: var(--choco); color: #fbf3e8; border-radius: var(--radius-lg); padding: 38px 40px; display: flex; flex-direction: column; justify-content: center; } .hc-text .loc { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--blush); margin-bottom: 14px; } .hc-text h1 { font-family: var(--serif); font-weight: 500; color: #fbf3e8; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.0; } .hc-text h1 em { font-style: italic; color: var(--blush); } .hc-text .hc-sub { color: rgba(251,243,232,.82); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; margin-top: 16px; max-width: 34ch; } .hc-mobile-cta { display: none; } .hc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .hc-actions .hc-ghost { background: transparent; color: #fbf3e8; border: 1.5px solid rgba(255,255,255,.32); } .hc-actions .hc-ghost:hover { border-color: var(--blush); color: #fff; background: rgba(255,255,255,.06); } /* --------------------------------------------------------------- 3) CIRCLE — round photos that rhyme with the round logo. --------------------------------------------------------------- */ .hero-circle .wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; padding-top: 24px; padding-bottom: var(--section-y); } .hcir-copy .hero-loc { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--accent-deep); margin-bottom: 22px; } .hcir-copy .hero-loc .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .hcir-copy h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 6.4vw, 92px); line-height: .98; letter-spacing: -.01em; } .hcir-copy h1 em { font-style: italic; color: var(--accent-deep); } .hcir-copy .he-sub { font-size: 19px; color: var(--ink-soft); max-width: 32ch; margin-top: 22px; line-height: 1.6; } .hcir-copy .hero-cta { margin-top: 32px; } .hcir-media { position: relative; min-height: 560px; display: grid; place-items: center; } .hcir-big { position: relative; z-index: 2; } .hcir-big .slot-img { width: 440px; height: 440px; max-width: 78vw; } .hcir-ring { position: absolute; z-index: 1; width: 440px; height: 440px; max-width: 78vw; border: 1.5px solid var(--accent); border-radius: 50%; transform: translate(34px, -30px); } .hcir-small { position: absolute; z-index: 3; left: 2%; bottom: 8%; } .hcir-small .slot-img { width: 168px; height: 168px; border: 8px solid var(--cream); border-radius: 50%; } .hcir-star { position: absolute; z-index: 3; right: 4%; top: 6%; font-size: 34px; color: var(--accent); } /* --------------------------------------------------------------- 4) CINEMATIC — one full-bleed photo, low headline, info ribbon. --------------------------------------------------------------- */ .hero-cinematic { padding: 0; } .hcin-stage { position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; } .hcin-stage .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; } .hcin-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,13,8,.55) 0%, rgba(20,13,8,0) 26%, rgba(20,13,8,0) 48%, rgba(20,13,8,.82) 100%); } .hcin-kicker { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--maxw); padding: 0 28px; display: flex; justify-content: space-between; color: rgba(255,255,255,.92); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } .hcin-content { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px 0; color: #fff; } .hcin-content h1 { font-family: var(--serif); font-weight: 500; color: #fff; font-size: clamp(56px, 9.5vw, 150px); line-height: .9; letter-spacing: -.01em; max-width: 12ch; } .hcin-content h1 em { font-style: italic; color: var(--blush); } .hcin-bar { display: flex; align-items: stretch; border-top: 1px solid rgba(255,255,255,.22); margin-top: 36px; } .hcin-bar .col { flex: 1; padding: 26px 30px; border-left: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.9); } .hcin-bar .col:first-child { border-left: none; padding-left: 0; } .hcin-bar .col .lbl { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--blush); margin-bottom: 6px; } .hcin-bar .col .val { font-family: var(--serif); font-size: 22px; color: #fff; } .hcin-bar .col.act { display: flex; align-items: center; justify-content: flex-end; } .hcin-bar .col.act .btn { background: #fff; color: var(--ink); } .hcin-bar .col.act .btn:hover { background: var(--blush); } /* --------------------------------------------------------------- responsive --------------------------------------------------------------- */ @media (max-width: 940px) { .he-lower { grid-template-columns: 1fr; gap: 28px; } .he-photo .slot-img { height: 220px; } .hero-circle .wrap { grid-template-columns: 1fr; gap: 36px; } .hcir-media { min-height: 440px; margin-top: 8px; } .hcin-bar { flex-wrap: wrap; } .hcin-bar .col { flex: 1 1 50%; border-left: none; padding: 18px 0; } .hcin-bar .col.act { justify-content: flex-start; } } /* the boxy 2x2 collage grid only really works in this narrow band; below 901px (iPad-portrait and phones) it uses the mobile stack instead */ @media (min-width: 901px) and (max-width: 940px) { .hc-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 180px 180px; grid-template-areas: "t t" "a d" "c e"; } .hc-text { padding: 24px; } } @media (max-width: 900px) { /* ---- Collage hero: image-first clean stack for mobile & portrait tablets ---- */ .hc-grid { display: flex; flex-direction: column; gap: 22px; } /* Featured image leads — food first, words second */ .ga { order: 1; height: 260px; border-radius: 16px; overflow: hidden; } /* object-position biased to the top: the storefront sign sits in the upper quarter of the source photo, and a fixed-height/fluid-width crop cuts deeper into the top as the container widens toward 900px */ .ga .slot-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Text tile: strip the dark box, let page background breathe */ .hc-text { order: 2; background: transparent; color: var(--ink); padding: 0; border-radius: 0; justify-content: flex-start; } .hc-text .loc { color: var(--accent-deep); font-size: 11.5px; letter-spacing: .16em; margin-bottom: 14px; } .hc-text h1 { color: var(--ink); font-size: clamp(42px, 11vw, 56px); line-height: .96; } .hc-text h1 em { color: var(--accent-deep); } .hc-text .hc-sub { color: var(--ink-soft); font-size: 16px; max-width: 100%; margin-top: 14px; line-height: 1.6; } /* CTAs shown only at mobile */ .hc-mobile-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; } .hc-mobile-cta .btn { flex: 1; min-width: 0; justify-content: center; text-align: center; font-size: 15px; } /* Hide the three secondary collage images */ .gd, .gc, .ge { display: none; } } @media (max-width: 560px) { .he-meta { font-size: 10px; letter-spacing: .12em; gap: 10px; } /* Other hero layouts */ .hcir-big .slot-img, .hcir-ring { width: 280px; height: 280px; } .hcin-bar .col { flex: 1 1 100%; } .hcin-content, .hcin-kicker { padding-left: 20px; padding-right: 20px; } }