/* Homepage revision 4. Loaded after brand.css. Dark blue and orange dominate; the brighter colour is a local highlight. Add hero-warm to for the orange hero variant. */ .homepage { --blue-flow: radial-gradient(ellipse at 100% 50%, #1492af 0%, #042932 70%); --orange-flow: radial-gradient(ellipse at 100% 40%, #ffd52d 0%, #f69445 70%); } .homepage .hero { box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(108px, 12vh, 150px) 0 34px; background: radial-gradient(ellipse at 100% 0%, #1492af 0%, #042932 70%); color: var(--surface-text); } .homepage .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); flex: 0 0 auto; gap: clamp(28px, 4vw, 64px); } .homepage .hero-title { font-size: clamp(48px, 6.2vw, 86px); font-weight: 800; line-height: .98; letter-spacing: -.055em; } .homepage .hero-title span { background: linear-gradient(105deg, #f69445 0%, #f69445 65%, #ffd52d 100%); background-clip: text; -webkit-background-clip: text; color: transparent; } .homepage .hero .eyebrow { color: var(--orange); } .homepage .hero-sub { color: var(--surface-muted); max-width: 43ch; } .homepage .hero .btn-primary, .homepage .cta-band .btn-primary { background: linear-gradient(115deg, #f69445 0%, #f69445 65%, #ffd52d 100%); color: var(--navy); border-color: var(--orange); box-shadow: none; } .homepage .hero .btn-ghost { color: var(--surface-text); border-color: #1492af; } .homepage .hero .btn-ghost:hover { background: #1492af33; } .homepage .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-color: #1492af80; } .homepage .hero-stats strong { color: var(--orange); font-size: clamp(28px, 3.2vw, 42px); } .homepage .hero-stats strong span { color: var(--orange); font-size: .5em; } .homepage .hero-stats li>span { color: var(--surface-muted); font-size: 11px; letter-spacing: .015em; } .homepage .hero-locations { margin-top: 32px; } .homepage .hero-locations-label { color: var(--surface-muted); } .homepage .hero-right { width: min(100%, 440px); } .homepage .hero-photo { border-color: #f6944580; box-shadow: 12px 14px 0 #04293260; } .homepage .marquee { background: var(--navy); color: var(--orange); border-color: #1492af55; } /* Crisp section boundaries; no blue/orange fade overlays. */ .homepage #menu { background: var(--orange-flow); padding-top: 110px; padding-bottom: 110px; } .homepage .blue-section-flow { background: var(--blue-flow); } .homepage #locations, .homepage #club { background: transparent; color: var(--surface-text); } .homepage #locations .eyebrow { color: var(--orange); } .homepage #locations .section-title { color: var(--surface-text); } .homepage #locations .section-title span { color: var(--orange); } .homepage #club::before { display: none; } /* The existing textured orange club card sits over the uninterrupted blue backdrop. */ .homepage .club { background-color: var(--orange); background-image: radial-gradient(circle, #04293220 1px, transparent 1.6px), repeating-linear-gradient(-35deg, transparent 0 42px, #04293208 42px 44px), radial-gradient(ellipse at 100% 0%, #ffd52d, transparent 70%); background-size: 18px 18px, auto, auto; border-color: #f6944580; } .homepage .club-visual { perspective: 1000px; } .homepage .club-visual img { transform: rotate(-3deg); transition: transform .35s ease, filter .35s ease; } @media (hover:hover) and (pointer:fine) { .homepage .club-visual:hover img { transform: rotate(0deg) rotateY(-9deg) rotateX(3deg) translateY(-7px); filter: drop-shadow(14px 18px 14px #04293230); } } .homepage #locations .loc-order { flex-basis: 100%; width: 100%; font-size: 14px; justify-content: center; background: linear-gradient(115deg, #f69445 0%, #f69445 65%, #f69445 100%); color: var(--navy); border: 1px solid var(--orange); box-shadow: none; } .homepage #locations .loc-order:hover { background: var(--yellow); } .homepage #faq { background: var(--orange-flow); padding-top: 110px; } .homepage .reviews-section { background: var(--orange-flow); padding-bottom: 110px; } .homepage .cta-band { background: radial-gradient(ellipse at 100% 45%, #1492af 0%, #042932 70%); color: var(--surface-text); border: 0; } .homepage .cta-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 70px); } .homepage .cta-copy .eyebrow { color: var(--orange); } .homepage .janar-quote { margin: 24px 0 36px; } .homepage .janar-quote p { font-family: var(--font-display); font-size: clamp(25px, 3vw, 40px); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; } .homepage .janar-quote footer { color: var(--orange); font-size: 16px; margin-top: 16px; font-weight: 700; } .homepage .cta-inner h2 { font-size: clamp(28px, 3.4vw, 44px); } .homepage .cta-inner h2 span { color: var(--orange); } .homepage .cta-copy>p:last-child { color: var(--surface-muted); } .homepage .cta-action { display: flex; flex-direction: column; align-items: center; gap: 24px; min-width: 0; } .homepage .janar-photo { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 16px 24px #04293260); } .homepage .cta-action .btn { min-width: 200px; } .homepage .cta-band::after { content: ''; position: absolute; inset: auto 0 0; height: 60px; background: linear-gradient(transparent, #042932); pointer-events: none; } /* Promotion pricing: the sale price comes first, then the smaller crossed-out price. */ #menu .menu-member-label { color: var(--yellow); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; margin: 0 0 12px; } .menu-pricing { display: grid; justify-items: start; gap: 4px; min-width: 0; } #menu .menu-pricing .menu-price { font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; } #menu .menu-pricing--discount .menu-price { font-size: 29px; } .menu-old-price { color: #d2dfe1; font-size: 14px; line-height: 1.3; } .discount-badge { background: #be2033; color: #fff; padding: 5px 10px; border-radius: 6px; font-weight: 800; font-size: 13px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Optional warm hero, using the same 70/30 colour balance. */ .homepage.hero-warm .hero { background: var(--orange-flow); color: var(--navy); } .homepage.hero-warm .hero-title span { background-image: linear-gradient(105deg, #042932 0%, #042932 65%, #1492af 100%); } .homepage.hero-warm .hero .eyebrow, .homepage.hero-warm .hero-sub, .homepage.hero-warm .hero-stats strong, .homepage.hero-warm .hero-stats strong span, .homepage.hero-warm .hero-stats li>span, .homepage.hero-warm .hero-locations-label { color: var(--navy); } .homepage.hero-warm .hero .btn-primary { background: var(--navy); color: var(--yellow); } .homepage.hero-warm .hero .btn-ghost { color: var(--navy); border-color: var(--navy); } @media(max-width:900px) { .homepage .hero-inner { grid-template-columns: 1fr; gap: 30px; } .homepage .hero-title { font-size: clamp(46px, 8.8vw, 76px); } .homepage .hero-right { justify-self: center; width: min(100%, 430px); } .homepage .cta-inner { grid-template-columns: 1fr; text-align: left; } .homepage .cta-copy>p:last-child { margin-inline: 0; } .homepage .cta-action { width: min(100%, 540px); justify-self: center; } } @media(max-width:600px) { .homepage .hero { padding-top: 104px; padding-bottom: 28px; } .homepage .hero-title { font-size: clamp(42px, 11vw, 64px); letter-spacing: -.055em; } .homepage .hero-left { align-items: flex-start; text-align: left; } .homepage .hero-stats { width: 100%; margin-top: 22px; gap: 8px; } .homepage .hero-stats li { align-items: flex-start; } .homepage .hero-stats strong { font-size: 28px; } .homepage .hero-stats li>span { font-size: 9px; } .homepage .hero-right { width: min(100%, 360px); } .homepage .hero-locations { margin-top: 26px; } .homepage .club-visual img { max-width: 100%; height: auto; max-height: 410px; } .homepage .cta-action .btn { width: 100%; } } @media(prefers-reduced-motion:reduce) { .homepage .club-visual img, .homepage .club-visual:hover img { transform: none; transition: none; filter: none; } } .homepage .hero-title span { width: fit-content; } /* Keep the desktop poster proportional to the available viewport height. */ @media(min-width:901px) { .homepage .hero-right { width: min(100%, 440px, max(280px, calc((100svh - 300px) * .8))); } .homepage .hero-title { font-size: clamp(48px, 5.9vw, 80px); } .homepage .hero-sub { font-size: 15px; } .homepage .hero-stats { margin-top: 22px; padding-top: 16px; } } /* Revision 4: sunny highlights and very light CSS-only texture. */ .homepage { --hero-sun: linear-gradient(110deg, #f69445 0%, #ffb739 38%, #ffd52d 58%, #ffe889 100%); --light-texture: repeating-linear-gradient(-45deg, transparent 0 28px, #ffffff06 28px 29px); --warm-texture: repeating-linear-gradient(-45deg, transparent 0 28px, #04293206 28px 29px); } .homepage .hero { background-image: var(--light-texture), radial-gradient(ellipse at 100% 0%, #1492af 0%, #042932 70%); } .homepage .blue-section-flow { background-image: var(--light-texture), var(--blue-flow); } .homepage #menu, .homepage #faq, .homepage .reviews-section { background-image: var(--warm-texture), var(--orange-flow); } .homepage .hero-title span, .homepage .hero .eyebrow, .homepage .hero-stats strong { background-image: var(--hero-sun); background-clip: text; -webkit-background-clip: text; color: transparent; } .homepage .hero-title span { padding-bottom: .06em; filter: drop-shadow(0 3px 12px #ffd52d18); } .homepage .hero-title { position: relative; } .homepage .hero-title::after { content: ''; position: absolute; right: 0; top: -14px; width: 24px; height: 24px; background: var(--hero-sun); transform: rotate(12deg); clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); } .homepage .hero .eyebrow { width: fit-content; } .homepage .hero-stats { width: min(100%, 470px); gap: 18px; justify-content: start; } .homepage .hero-stats strong { width: fit-content; font-variant-numeric: tabular-nums; white-space: nowrap; } .homepage .hero-stats strong .metric-value { color: inherit; font: inherit; letter-spacing: inherit; margin: 0; text-transform: none; } .homepage .hero-stats strong .metric-suffix { color: inherit; } .homepage .hero .btn-primary { background: var(--hero-sun); border-color: #ffd52d99; box-shadow: inset 0 2px 0 #fff7cf70, 0 6px 22px #ffd52d1a; } .homepage .hero .btn-primary:hover { box-shadow: inset 0 2px 0 #fff7cf90, 0 8px 26px #ffd52d30; } .homepage .hero-location-link, .homepage .hero-location-link:hover { background: var(--hero-sun); color: var(--navy); border-color: #ffd52d88; box-shadow: inset 0 1px 0 #fff7cf60; } .homepage .hero-location-link small, .homepage .hero-location-link .location-pin { color: var(--navy); } .homepage .hero-promo-dots button::after { background: #f69445; opacity: .65; height: 6px; } .homepage .hero-promo-dots button.is-active::after { background: var(--hero-sun); opacity: 1; box-shadow: 0 0 10px #ffd52d50; } .homepage .hero-promo-dots button:hover::after { opacity: 1; } .homepage .marquee { background: linear-gradient(105deg, #f69445 0%, #f69445 55%, #ffd52d 100%); color: var(--navy); border-color: #ffd52d88; } .homepage .marquee .dot { color: var(--navy); } .homepage #locations .section-title span, .homepage #locations .eyebrow, .homepage .cta-copy .eyebrow, .homepage .janar-quote footer, .homepage .cta-inner h2 span { color: var(--yellow); } .discount-badge { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-width: 78px; padding: 5px 10px; margin: 3px 0 7px; border-radius: 20px 8px 20px 8px; border: 1px solid #f9474e; background: linear-gradient(135deg, #f9474e 0%, #f9474e 42%, #c92240 100%); color: #fff; font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 2px #81162d80; transform: rotate(-4deg); box-shadow: inset 0 2px 0 #f9474e, 0 4px 12px #ff4d5540; } .discount-badge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 18%, #ffffff28 38%, transparent 57%); pointer-events: none; } @media(min-width:901px) { .homepage .hero-left { padding-left: clamp(12px, 1.5vw, 24px); } .homepage .hero-title { font-size: clamp(52px, 6.5vw, 92px); } .homepage .hero-right { width: min(100%, 470px, max(300px, calc((100svh - 270px) * .8))); margin-top: 22px; } } @media(max-width:900px) { .homepage .hero-title { font-size: clamp(50px, 9.5vw, 82px); } .homepage .hero-right { width: min(100%, 450px); margin-top: 12px; } .homepage .hero-stats { margin-inline: 0; } } @media(max-width:600px) { .homepage .hero-title { font-size: clamp(44px, 12vw, 68px); } .homepage .hero-title::after { right: -22px; top: -10px; width: 18px; height: 18px; } .homepage .hero-right { width: min(100%, 380px); margin-top: 8px; } .homepage .hero-stats { gap: 12px; } .homepage .hero-stats strong { font-size: 30px; } } .homepage.hero-warm .hero { background-image: var(--warm-texture), var(--orange-flow); } .homepage.hero-warm .hero-title::after { color: var(--navy); text-shadow: none; } .homepage .hero-stats li:nth-child(2) { position: relative; left: -30px; } .homepage .marquee { background: #ff7b00; color: var(--navy); border-block: 3px solid var(--navy); } /* BITE$ offers: points badge above the crossed-out regular euro price. */ #menu .menu-pricing--bites .menu-price { position: relative; display: inline-block; overflow: hidden; max-width: 100%; padding: 6px 11px; margin: 2px 0 4px; border: 1px solid #ffb739; border-radius: 18px 10px 18px 10px; background: linear-gradient(115deg, #f69445 0%, #ffb739 38%, #ffd52d 58%, #ffe889 100%); color: #042932; font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.2; box-shadow: inset 0 2px 0 #ffb739, 0 4px 16px #ffd52d30; } #menu .menu-pricing--bites .menu-price::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 18%, #ffffff50 38%, transparent 57%); pointer-events: none; } #menu .menu-pricing--bites .menu-old-price { color: #d2dfe1; font-size: 14px; } /* Keep the order button beside the prices, including on narrow cards. */ #menu .menu-foot { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; } #menu .menu-foot>.menu-pricing { flex: 1 1 0; min-width: 0; } #menu .menu-foot>.order-trigger { flex: 0 0 auto; width: auto; margin-left: auto; white-space: nowrap; } #menu .menu-pricing--bites .menu-price { box-sizing: border-box; transform: rotate(-4deg); } /* Continue the shared background through the CTA. */ .homepage .blue-section-flow>.cta-band { background: transparent; border: 0; box-shadow: none; } /* Remove the CTA's separate texture and bottom fade. */ .homepage .blue-section-flow>.cta-band::before, .homepage .blue-section-flow>.cta-band::after { display: none; }