/*===================================================== Sun City Birria: Professional polish overrides Loaded after style.css; keep all overrides in here. =====================================================*/ /*------- Global guards -------*/ /* The strips behind the status bar and the browser toolbar are painted from the canvas background, which propagates from . It was white (inherited from body), so those strips showed white on iOS. Painting the preloader's colour makes both ends of the screen match the loading screen, and gives dark rubber-band overscroll too. */ html, body { /* This is what iOS Safari paints in the strip between the layout viewport and the toolbar, which no element can reach. Matching the hero gradient's final opaque stop makes the hero read as continuous down to the toolbar. The preloader paints its own overshoot, so it no longer relies on this. */ background-color: #0D1B26; } /* viewport-fit=cover pushes the page under the status bar, so the fixed bars need to hold themselves clear of it. */ .scb-header, .fixed-top.d-lg-none { padding-top: env(safe-area-inset-top, 0px); } /* `html { overflow-x: clip }` used to live here to contain the seasonal snowflake overlay. That markup is gone and nothing overflows now (verified 375-1440px), and `clip` can clip position:fixed descendants on iOS, which is a prime suspect for the preloader being cut off. The per-section `overflow-x: clip` rules further down still apply. */ /* Seasonal snowflake overlay: empty in-season markup renders broken image outlines and forces horizontal overflow. Keep it off until it gets real content. */ .snowflakes { display: none; } /*------- Neutral scrollbar (replaces candy-striped theme scrollbar) -------*/ body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { background: #e9e4d8; box-shadow: none; -webkit-box-shadow: none; } body::-webkit-scrollbar-thumb { background-color: #153143; background-image: none; border-radius: 5px; } /*------- Navigation -------*/ /* The utility strip and the nav row share one fixed wrapper so they move as a unit and the height stays measurable for scroll offsets. */ .scb-nav { background: #0f2634; border-top: 1px solid rgba(255, 255, 255, 0.08); } .scb-nav-list { display: flex; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .scb-nav-list a { display: block; padding: 14px 20px; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); border-bottom: 2px solid transparent; /* A wrapped label would break out of the fixed bar's height. */ white-space: nowrap; transition: color 0.22s ease, border-color 0.22s ease; } /* Tighten the gaps just above the mobile breakpoint so five labels still fit on one line at 992px. */ @media (max-width: 1199px) { .scb-nav-list a { padding-left: 13px; padding-right: 13px; letter-spacing: 0.1em; } } .scb-nav-list a:hover, .scb-nav-list a:focus-visible { color: var(--theme-color3); border-bottom-color: var(--theme-color3); } .scb-nav-list a:focus-visible { outline: 2px solid var(--theme-color3); outline-offset: -4px; } /* Hamburger: icon only, so the row still fits ORDER NOW at 375px. */ .scb-nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 38px; height: 38px; flex: 0 0 auto; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 6px; margin-right: 8px; cursor: pointer; } /* The mobile bar overflowed its 375px viewport, clipping the leftmost icon. The theme puts a 50px right margin on the first
  • , which alone was more than the overflow. Trim that plus the inline gaps. */ @media (max-width: 575px) { .fixed-top.d-lg-none .header-links ul > li:first-child { margin-right: 14px !important; } .fixed-top.d-lg-none .header-links li > div { margin-right: 10px !important; } .fixed-top.d-lg-none .th-social { gap: 12px; } .scb-mobile-actions .th-btn.btn-mask { padding-left: 14px; padding-right: 14px; } } .scb-nav-toggle-bar { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: background 0.2s ease; } .scb-nav-toggle[aria-expanded="true"] { border-color: var(--theme-color3); } .scb-nav-toggle[aria-expanded="true"] .scb-nav-toggle-bar { background: var(--theme-color3); } .scb-nav-toggle:focus-visible { outline: 2px solid var(--theme-color3); outline-offset: 2px; } .scb-mobile-nav-list { list-style: none; margin: 6px 0 2px; padding: 0; display: flex; flex-direction: column; } .scb-mobile-nav-list a { display: block; text-align: center; padding: 12px 16px; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); border-top: 1px solid rgba(255, 255, 255, 0.08); } .scb-mobile-nav-list a:hover, .scb-mobile-nav-list a:focus-visible { color: var(--theme-color3); background: rgba(255, 255, 255, 0.04); } /* Anchor targets must clear the fixed header, or headings land underneath it. nav.js keeps --scb-header-h in sync with the real bar height; the fallback covers the window before that script runs. */ #menu, #about, #reviews, #order, #catering, #restaurant-location-sec { scroll-margin-top: calc(var(--scb-header-h, 133px) + 16px); } /*------- Typography discipline -------*/ /* Replace the comic "Bangers" accent font with clean, letter-spaced uppercase labels that match the Barlow Condensed headings. */ .sub-title, .specials-sub-title { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.35em; color: var(--theme-color3); justify-content: center; } .sec-title { letter-spacing: 0.02em; } /*------- Hero -------*/ .scb-hero { position: relative; /* iOS Safari's bottom toolbar is translucent and floats OVER the page, so the background must reach the full screen height to appear behind it. lvh is the viewport at its LARGEST, i.e. edge to edge. Sizing to svh (the earlier attempt) deliberately stopped the hero above the toolbar, which is why the next section showed through it. The content is padded separately so nothing is hidden underneath. */ min-height: 100vh; min-height: 100lvh; display: flex; align-items: center; justify-content: center; text-align: center; background: url("../img/gallery/gallery_1_4.jpg") center 40% / cover no-repeat; isolation: isolate; } .scb-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; /* Final stop is fully opaque #0D1B26 so the bottom edge is a known colour that theme-color can match pixel for pixel. */ background: linear-gradient(180deg, rgba(13, 27, 38, 0.82) 0%, rgba(13, 27, 38, 0.68) 45%, rgba(13, 27, 38, 0.90) 93%, rgb(13, 27, 38) 100%); } /* Clear the fixed header rather than sitting under it. nav.js keeps --scb-header-h at the real bar height, so this tracks the header instead of a fixed guess that the nav row broke. */ .scb-hero-inner { padding: calc(var(--scb-header-h, 133px) + 40px) 20px 56px; max-width: 780px; margin: 0 auto; } /* The gap between the large and small viewport IS the toolbar height, so this keeps the buttons above it while the background runs behind it. */ @supports (height: 100lvh) and (height: 100svh) { .scb-hero-inner { padding-bottom: calc(110px + (100lvh - 100svh)); } /* Measured on device: lvh 836, svh 796, so the toolbar is 40px. Adding that puts the chevron 34px clear of it. No env() term here: with viewport-fit=cover it becomes non-zero and would double-count. */ .scb-hero-scroll { bottom: calc(34px + (100lvh - 100svh)); } } /* Doubled class beats style.css `img:not([draggable]) { height: auto }` */ .scb-hero .scb-hero-inner img.scb-hero-logo { height: 170px; width: auto; margin-bottom: 28px; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45)); } /* Two lines inside one h1: the brand name carries the size, the positioning line sits under it. Keeps the business name in the h1 for search without stacking two competing headlines. */ .scb-hero-title { font-family: "Barlow Condensed", sans-serif; font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 16px; } .scb-hero-brand { display: block; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; letter-spacing: 0.01em; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.35); } .scb-hero-lede { display: block; font-size: clamp(1.05rem, 2.3vw, 1.6rem); line-height: 1.25; font-weight: 600; letter-spacing: 0.06em; margin-top: 10px; color: rgba(255, 255, 255, 0.92); } .scb-hero-title .accent { color: var(--theme-color3); } .scb-hero-tagline { font-family: "Inter", sans-serif; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; color: rgba(255, 255, 255, 0.88); max-width: 560px; margin: 0 auto 34px; } .scb-hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .scb-hero-kicker { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--theme-color3); display: block; margin-bottom: 12px; } @media (max-width: 767px) { /* Full screen here too; the smaller logo buys the room for it. */ .scb-hero .scb-hero-inner img.scb-hero-logo { height: 120px; } .scb-hero-inner { padding-top: calc(var(--scb-header-h, 56px) + 28px); padding-bottom: 40px; } @supports (height: 100lvh) and (height: 100svh) { .scb-hero-inner { padding-bottom: calc(100px + (100lvh - 100svh)); } } } /* Short viewports (landscape phones, small laptops) cannot fit the full stack at full size, so trim the logo and spacing rather than let the hero grow past the fold. */ @media (max-height: 700px) { .scb-hero .scb-hero-inner img.scb-hero-logo { height: 92px; margin-bottom: 18px; } .scb-hero-tagline { margin-bottom: 24px; } } /*------- Buttons: calmer, consistent -------*/ .scb-btn { display: inline-block; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 17px; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 36px; border-radius: 6px; border: 2px solid var(--theme-color3); transition: background 0.25s ease, color 0.25s ease; } .scb-btn-solid { background: var(--theme-color3); color: #14212e; } .scb-btn-solid:hover { background: transparent; color: var(--theme-color3); } .scb-btn-outline { background: transparent; color: #fff; } .scb-btn-outline:hover { background: var(--theme-color3); color: #14212e; } /*------- Section rhythm -------*/ .order-online-sec-1, .restaurant-location-sec-1 { overflow-x: clip; } /* Solid navy backdrop; the theme painted this with a drop-shadow hack on an offscreen image, which fails at some viewport widths. */ .order-online-sec-1 { background-color: #153143; padding-top: 60px; padding-bottom: 60px; } /* The cream blob + zigzag strip decorations cover the navy backdrop at narrow widths and clash with the white text, so retire them. */ .order-bg-thumb, .order-shape-long { display: none; } .order-online-container-wrap { padding-left: 0; padding-right: 0; } /* Delivery cards need their own surface on flat navy */ .delivery-item-wrap .item { background-color: rgba(255, 255, 255, 0.05); } .delivery-item-wrap .item .box-text { color: rgba(255, 255, 255, 0.85); } /* Delivery option cards: flat, even, professional */ .delivery-item-wrap .item { border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); transition: transform 0.25s ease, border-color 0.25s ease; } .delivery-item-wrap a:hover .item { transform: translateY(-4px); border-color: var(--theme-color3); } .delivery-item-wrap .item .box-title { text-shadow: none !important; } /*------- Menu cards -------*/ /* Rebuilt from the theme's blob-masked, hover-rotating cards into a flat image-and-caption card: photo on top, name and price on one baseline. */ /* The theme's house cream, so the menu ties into the existing palette and the white cards read as distinct surfaces against it. */ .food-sec-1 { background-color: var(--smoke-color); } .food-card-1.style-2 { background: #fff; border: 1px solid rgba(21, 49, 67, 0.08); border-radius: 14px; overflow: hidden; height: 100%; text-align: left; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(21, 49, 67, 0.04); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .food-card-1.style-2:hover { transform: translateY(-6px); border-color: rgba(255, 153, 36, 0.55); box-shadow: 0 16px 32px rgba(21, 49, 67, 0.13); } /* The favourite cards wrap image + badge in a bare div; `contents` flattens it so both variants share one layout. */ .food-card-1.style-2 .thumb > div { display: contents; } .food-card-1.style-2 .thumb { position: relative; padding: 0; border-radius: 0; overflow: hidden; background: #f0ebe1; } .food-card-1.style-2 .thumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.45s ease; } /* Kill the theme's hover tilt; it reads as clip-art. */ .food-card-1.style-2:hover .thumb img { transform: scale(1.05); } .scb-fav-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(21, 49, 67, 0.92); color: #ff9924; font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 11px; border-radius: 4px; } /* Name left, price right on a shared baseline; description spans below. */ .food-card-1.style-2 .content { padding: 18px 20px 22px; display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: baseline; flex: 1; } .food-card-1.style-2 .content .box-title { grid-column: 1; grid-row: 1; margin-bottom: 0; font-size: 21px; line-height: 1.25; color: var(--theme-color2); } .food-card-1.style-2 .content .price { grid-column: 2; grid-row: 1; position: static; transform: none; margin: 0; padding: 0; background: none; border-radius: 0; font-size: 19px; color: var(--theme-color3); font-variant-numeric: tabular-nums; white-space: nowrap; } .food-card-1.style-2:hover .content .price { background: none; color: var(--theme-color3); } .food-card-1.style-2 .content .box-text { grid-column: 1 / -1; grid-row: 2; margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #5c6b76; } /*------- About us -------*/ /* Navy sits between the cream menu and the white reviews section, so the three read as distinct bands rather than one long light stretch. */ .scb-about { background-color: #153143; padding: 90px 0; overflow-x: clip; } .scb-about-content .sub-title { justify-content: flex-start; } .scb-about-content .sec-title { margin-bottom: 24px; } .scb-about-text { font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, 0.82); margin-bottom: 18px; max-width: 560px; } .scb-about-facts { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 40px; } .scb-about-facts li { display: flex; flex-direction: column; gap: 2px; position: relative; } /* Divider sits centred in the flex gap, so spacing stays 40px total rather than gap + padding stacking up and forcing a wrap. */ .scb-about-facts li + li::before { content: ""; position: absolute; left: -20px; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, 0.18); } .scb-fact-value { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--theme-color3); } .scb-fact-label { font-size: 13.5px; color: rgba(255, 255, 255, 0.62); } .scb-about-media { border-radius: 14px; overflow: hidden; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.3); } .scb-about-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; } @media (max-width: 991px) { .scb-about { padding: 66px 0; } .scb-about-content .sub-title { justify-content: center; } .scb-about-content { text-align: center; } .scb-about-text { margin-left: auto; margin-right: auto; } .scb-about-facts { justify-content: center; } } @media (max-width: 575px) { .scb-about-facts { gap: 18px; flex-direction: column; align-items: center; } /* Divider flips from vertical to horizontal when the facts stack. */ .scb-about-facts li + li::before { left: 50%; right: auto; top: -9px; bottom: auto; width: 46px; height: 1px; transform: translateX(-50%); } } /*------- Testimonials / Google reviews -------*/ .scb-reviews { background: #fff; padding: 90px 0; } .scb-reviews[hidden] { display: none; } .scb-reviews .title-area { margin-bottom: 46px; } /*------- Aggregate rating badge -------*/ .scb-rating { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 22px; padding: 18px 34px; border: 1px solid rgba(21, 49, 67, 0.12); border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(21, 49, 67, 0.06); } .scb-rating-name { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--theme-color2); } .scb-rating-main { display: inline-flex; align-items: center; gap: 14px; } .scb-rating-score { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 34px; line-height: 1; color: var(--theme-color2); } /* Two stacked star rows; the gold layer is clipped to the exact score (4.9 / 5 = 98%) so the display isn't rounded up to a full five. */ .scb-rating-stars { position: relative; display: inline-block; font-size: 17px; letter-spacing: 3px; line-height: 1; } .scb-rating-base { color: #d7dde2; } .scb-rating-fill { position: absolute; top: 0; left: 0; width: 98%; overflow: hidden; white-space: nowrap; color: #ffc107; } .scb-rating-count { font-size: 14px; color: #5c6b76; } @media (max-width: 480px) { .scb-rating { padding: 16px 22px; } } .scb-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 991px) { .scb-review-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } } .scb-review-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21, 49, 67, 0.1); border-radius: 14px; padding: 30px 28px 24px; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(21, 49, 67, 0.04); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } /* Oversized quote mark, purely decorative. */ .scb-review-card::before { content: "\201C"; position: absolute; top: 6px; right: 22px; font-family: Georgia, "Times New Roman", serif; font-size: 84px; line-height: 1; color: rgba(255, 153, 36, 0.16); pointer-events: none; } .scb-review-card:hover, .scb-review-card:focus-visible { transform: translateY(-6px); border-color: rgba(255, 153, 36, 0.55); box-shadow: 0 16px 32px rgba(21, 49, 67, 0.13); color: inherit; } .scb-review-card:focus-visible { outline: 3px solid var(--theme-color3); outline-offset: 3px; } .scb-review-stars { color: #ffc107; font-size: 15px; letter-spacing: 3px; margin-bottom: 16px; } .scb-review-text { font-size: 15.5px; line-height: 1.7; color: #40515e; margin: 0 0 20px; flex: 1; /* Some reviewers post an original and an update separated by a blank line. pre-line keeps that break instead of running them together. */ white-space: pre-line; } .scb-review-meta { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(21, 49, 67, 0.09); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .scb-review-who { display: flex; flex-direction: column; min-width: 0; } .scb-review-name { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 17px; color: var(--theme-color2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .scb-review-date { font-size: 13px; color: #8494a0; } .scb-review-source { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #6b7c88; white-space: nowrap; } .scb-reviews-cta { text-align: center; margin-top: 44px; } /*------- Location section -------*/ .scb-storefront { border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(21, 49, 67, 0.18); } .scb-storefront img { width: 100%; display: block; } /* style.css bleeds these two columns past the container with negative margins (margin-left:-168px / margin-right:-291px), resetting them only below 1200px. The section clips overflow, so on desktop the hours card lost its left edge and the map lost its right edge. */ .location-content { margin-left: 0; } .map-location { margin-right: 0; margin-bottom: 0; } .restaurant-location-sec-1 { padding-top: 70px; padding-bottom: 70px; } /* Theme caps this at 40%, which broke the address mid-city ("El / Paso"). */ .location-content .box-text { width: auto; max-width: 420px; } .opening { max-width: 420px; margin-left: auto; margin-right: auto; } .opening .opening-text { display: flex; justify-content: space-between; gap: 24px; padding: 7px 4px; margin-bottom: 0; border-bottom: 1px dashed rgba(21, 49, 67, 0.25); font-variant-numeric: tabular-nums; } .opening .opening-text:last-child { border-bottom: none; } .map-location iframe { width: 100%; border-radius: 12px; display: block; } /*------- Buttons: replace torn-paper sticker mask with clean buttons -------*/ /* style.css forces `border-radius: 0` on :hover, :active and :focus, so the radius has to be restated on every state or the corners snap square. */ .th-btn.btn-mask, .th-btn.btn-mask:hover, .th-btn.btn-mask:focus, .th-btn.btn-mask:focus-visible, .th-btn.btn-mask:active, .th-btn.btn-mask.active { -webkit-mask-image: none; mask-image: none; border-radius: 6px; } .th-btn.btn-mask { background: var(--theme-color3); color: #14212e; font-weight: 700; letter-spacing: 0.08em; padding: 12px 22px; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .th-btn.btn-mask:hover, .th-btn.btn-mask:focus, .th-btn.btn-mask:active, .th-btn.btn-mask.active { background: #fff; color: #14212e; transform: translateY(-2px); } /* Keyboard focus needs a visible ring since the theme removes outlines. */ .th-btn.btn-mask:focus-visible { outline: 3px solid var(--theme-color3); outline-offset: 2px; } /*------- Spanish menu descriptions -------*/ /* Shown under the English copy, marked lang="es" so search engines and screen readers treat it as Spanish rather than misread English. */ .scb-es { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(21, 49, 67, 0.16); font-size: 14px; line-height: 1.55; color: #74838d; font-style: italic; } /*------- Footer -------*/ .scb-foot-title { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--theme-color3); margin-bottom: 18px; } .scb-foot-title-sm { margin-top: 26px; } .scb-foot-address { font-style: normal; line-height: 1.75; color: rgba(255, 255, 255, 0.82); margin-bottom: 14px; } .scb-foot-address strong { color: #fff; } .scb-foot-address a, .scb-foot-links a { color: rgba(255, 255, 255, 0.82); transition: color 0.2s ease; } .scb-foot-address a:hover, .scb-foot-links a:hover, .scb-foot-address a:focus-visible, .scb-foot-links a:focus-visible { color: var(--theme-color3); } .scb-foot-note { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.55); max-width: 320px; } .scb-foot-hours, .scb-foot-links { list-style: none; margin: 0; padding: 0; } .scb-foot-hours li { display: flex; justify-content: space-between; gap: 18px; max-width: 300px; padding: 5px 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums; } .scb-foot-links li { padding: 5px 0; font-size: 14.5px; } /* The theme zeroes .widget-area's bottom padding and .copyright-wrap carries its own top border, so without padding here the icon circles sit flush on that divider. */ .scb-foot-social { margin-top: 40px; padding-top: 26px; padding-bottom: 34px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: center; } /* Icons wrap on narrow phones; give the rows breathing room too. */ .scb-foot-social .th-social { flex-wrap: wrap; justify-content: center; row-gap: 14px; } @media (max-width: 767px) { .scb-foot-note, .scb-foot-hours li { max-width: none; } } /*------- Catering -------*/ .scb-catering { background: #fff; padding: 90px 0; } .scb-catering-intro .sub-title { justify-content: flex-start; } .scb-catering-intro .sec-title { margin-bottom: 20px; } .scb-catering-text { font-size: 16px; line-height: 1.75; color: #4d5c66; margin-bottom: 22px; } .scb-catering-points { list-style: none; margin: 0 0 22px; padding: 0; } .scb-catering-points li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 15.5px; color: #4d5c66; } .scb-catering-points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-color3); } .scb-catering-alt { font-size: 15px; color: #6b7c88; } .scb-catering-alt a { color: var(--theme-color2); font-weight: 600; text-decoration: underline; } /* Form */ .scb-form { background: var(--smoke-color); border: 1px solid rgba(21, 49, 67, 0.1); border-radius: 14px; padding: 30px; } .scb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 575px) { .scb-form-row { grid-template-columns: 1fr; } .scb-form { padding: 22px; } } .scb-field { margin-bottom: 18px; display: flex; flex-direction: column; } .scb-field label { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-color2); margin-bottom: 7px; } .scb-field label span { color: var(--theme-color); } .scb-field input, .scb-field textarea { width: 100%; font-family: "Inter", sans-serif; font-size: 15px; color: #22333f; background: #fff; border: 1px solid rgba(21, 49, 67, 0.18); border-radius: 8px; padding: 12px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .scb-field textarea { resize: vertical; min-height: 110px; } .scb-field input:focus, .scb-field textarea:focus { outline: none; border-color: var(--theme-color3); box-shadow: 0 0 0 3px rgba(255, 153, 36, 0.22); } /* Only shown once the browser has flagged a genuinely invalid entry. */ .scb-field input:user-invalid, .scb-field textarea:user-invalid { border-color: #d9534f; } .scb-form-submit { border: none; cursor: pointer; width: 100%; margin-top: 4px; } .scb-form-submit[disabled] { opacity: 0.6; cursor: progress; } /* Honeypot: off-screen rather than display:none, which some bots skip. */ .scb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .scb-form-status { margin: 16px 0 0; font-size: 15px; line-height: 1.6; min-height: 1px; } .scb-form-status.is-ok { color: #1c7c4a; font-weight: 600; } .scb-form-status.is-err { color: #c0392b; font-weight: 600; } .scb-form-note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: #7d8b95; } @media (max-width: 991px) { .scb-catering { padding: 66px 0; } .scb-catering-intro { text-align: center; } .scb-catering-intro .sub-title { justify-content: center; } .scb-catering-points { display: inline-block; text-align: left; } } /*------- Preloader -------*/ /* The strip around the iOS URL bar is browser chrome, painted from , not from any element. Colouring html/body to fake coverage fought Safari for the same pixels and was unreliable, so that is gone: theme-color.js keeps the meta in sync instead. The negative inset still guarantees full coverage of the page itself. */ .preloader { /* iOS Safari clips `position: fixed` to the layout viewport, so a fixed preloader stops at the toolbar no matter how it is inset. Absolute is in document space and is not clipped, so the overshoot below actually paints the strip the toolbar sits over. The page is locked at scroll 0 while this is on screen, so it looks identical to fixed. */ position: absolute; top: 0; right: 0; bottom: auto; left: 0; width: auto; height: calc(100vh + 240px); height: calc(100svh + 240px); /* Overshoot is taken back out of the content box so the logo still centres on the part of the screen the visitor can actually see. */ padding-bottom: 240px; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Undo the theme's absolute centring so flex can do it. */ .preloader-inner { position: static; top: auto; left: auto; transform: none; } /*------- Catering consent checkbox -------*/ /* style.css hides every native checkbox (visibility/opacity/display/size) and draws a fake box with `label::before`. That breaks a REQUIRED field: a display:none control cannot be focused, so the browser blocks submit but can never show the user why. Restore the real control and suppress the theme's decorative box so there is only one. Scoped to .scb-consent so the honeypot checkbox stays hidden. */ .scb-consent { display: flex; align-items: flex-start; gap: 11px; margin: 2px 0 20px; } .scb-consent input[type="checkbox"] { visibility: visible; opacity: 1; display: inline-block; flex: 0 0 auto; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--theme-color3); cursor: pointer; } /* Suppress the theme's pseudo-element box. */ .scb-consent label::before { content: none !important; } /* The theme indents the label 30px to clear its fake box. That selector (`input[type=checkbox] ~ label`) scores 0,1,2 and beat a plain `.scb-consent label`, so the indent stacked on the flex gap and pushed the text 41px from the box. Mirror the theme's shape to outrank it. */ .scb-consent input[type="checkbox"] ~ label { padding-left: 0; } .scb-consent label { font-family: "Inter", sans-serif; font-size: 13.5px; line-height: 1.55; letter-spacing: normal; text-transform: none; font-weight: 400; color: #5c6b76; margin: 0; cursor: pointer; } .scb-consent input[type="checkbox"]:focus-visible { outline: 3px solid var(--theme-color3); outline-offset: 2px; } /*------- Date field on iOS -------*/ /* iOS sizes from its native picker's intrinsic width, which is wider than the grid column. Grid and flex children default to min-width:auto, so that intrinsic width wins and the field spills out of the card. Cap it explicitly and drop the native appearance. */ .scb-form-row, .scb-form-row > *, .scb-field { min-width: 0; } .scb-field input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; /* Without an explicit height iOS collapses date inputs shorter than their siblings. */ min-height: 46px; } /*------- Hero scroll chevron -------*/ /* The hero now fills the screen, so nothing below it is visible on load. This is the cue that there is more page. */ .scb-hero-scroll { position: absolute; left: 50%; /* Sits this far above the toolbar. The toolbar's own height is added back in the @supports block below. */ bottom: 34px; transform: translateX(-50%); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 2; } .scb-hero-scroll-chevron { width: 14px; height: 14px; border-right: 2px solid rgba(255, 255, 255, 0.9); border-bottom: 2px solid rgba(255, 255, 255, 0.9); transform: rotate(45deg) translate(-2px, -2px); animation: scb-chevron-nudge 2s ease-in-out infinite; } .scb-hero-scroll:hover .scb-hero-scroll-chevron, .scb-hero-scroll:focus-visible .scb-hero-scroll-chevron { border-color: var(--theme-color3); } .scb-hero-scroll:focus-visible { outline: 3px solid var(--theme-color3); outline-offset: 2px; } @keyframes scb-chevron-nudge { 0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: 0.75; } 50% { transform: rotate(45deg) translate(3px, 3px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .scb-hero-scroll-chevron { animation: none; } } /* Not enough vertical room for it once the hero content is compressed. */ @media (max-height: 700px) { .scb-hero-scroll { display: none; } } /*------- Mobile header: ORDER NOW first, menu toggle second -------*/ .scb-mobile-actions .th-btn.btn-mask { order: 1; } .scb-mobile-actions .scb-nav-toggle { order: 2; margin-right: 0; margin-left: 10px; } /*------- Mobile navigation drawer (slides in from the right) -------*/ .scb-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(78vw, 320px); background: #0f2634; border-left: 1px solid rgba(255, 255, 255, 0.09); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35); transform: translateX(100%); visibility: hidden; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s; z-index: 1050; /* Safe-area insets keep the drawer clear of the notch and the home indicator now that viewport-fit=cover extends the page into both. */ padding: calc(74px + env(safe-area-inset-top, 0px)) 0 calc(28px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .scb-drawer.is-open { transform: translateX(0); visibility: visible; } .scb-drawer-backdrop { position: fixed; inset: 0; background: rgba(8, 18, 26, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.32s ease, visibility 0.32s; z-index: 1040; } .scb-drawer-backdrop.is-open { opacity: 1; visibility: visible; } .scb-drawer-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; font-size: 30px; line-height: 1; color: rgba(255, 255, 255, 0.85); background: transparent; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; cursor: pointer; } .scb-drawer-close:hover, .scb-drawer-close:focus-visible { color: var(--theme-color3); border-color: var(--theme-color3); } /* Links read left-aligned in a drawer, not centred as in the old panel. */ .scb-drawer .scb-mobile-nav-list a { text-align: left; padding: 15px 26px; border-top: none; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } /* Stop the page scrolling behind the open drawer. */ body.scb-drawer-open { overflow: hidden; }