/*===================================================== 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 it dark makes both ends of the screen match the hero, 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. This matters MORE now the loading screen is gone: it used to cover this strip on the way in, and now the hero has to do it on its own. */ 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 was a prime suspect for the old loading screen being cut off. The per-section `overflow-x: clip` rules further down still apply. */ /*===================================================== THE SEASONAL FALLING PICTURES The theme's version was lifted from a snippet site and it moved like one. Every fault it had is the same fault: nothing varied. - Seven particles at 10% intervals across the page, which the eye reads as a row of things, not as weather. - All the same size and the same opacity, so everything sat on one flat plane. - All swaying 80 pixels, all on the same three second cycle. In lockstep. Snow does not march. - No rotation at all. - And it animated `top`, which makes the browser redo layout for the whole page on every frame of every particle, rather than `transform`, which the graphics card handles on its own. This replaces all of it. Fourteen particles in three depth bands: small, faint and slow at the back, large, solid and quick at the front. Each one has its own column, size, fall time, sway distance, sway period and spin, none of them multiples of each other, so the pattern does not visibly repeat. The fall is on the wrapper and the sway and spin are on the image inside it, because two animations cannot both drive transform on one element. =====================================================*/ .snowflakes { position: fixed; inset: 0; z-index: 1032; overflow: hidden; pointer-events: none; } @keyframes scb-fall { from { transform: translate3d(0, -20vh, 0); } to { transform: translate3d(0, 118vh, 0); } } @keyframes scb-drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(var(--sway, 18px), 0, 0) rotate(var(--spin, 18deg)); } 100% { transform: translate3d(0, 0, 0) rotate(0deg); } } /* The theme sets position, top, z-index and both animations on this class, and its :nth-of-type rules set left and the delays. Every one of those is restated here at equal or greater weight, so nothing of the old behaviour survives half-applied. */ .snowflakes .snowflake { position: absolute; top: 0; left: var(--x, 50%); width: var(--size, 24px); height: auto; z-index: auto; animation: scb-fall var(--fall, 16s) linear var(--delay, 0s) infinite; will-change: transform; } .snowflakes .snowflake img.snowflakeparticle { display: block; width: 100%; height: auto; opacity: var(--fade, 0.8); filter: blur(var(--blur, 0)); animation: scb-drift var(--sway-time, 7s) ease-in-out var(--delay, 0s) infinite; will-change: transform; } /* * FOURTEEN PARTICLES, hand placed. * * The columns are deliberately not evenly spaced and the times are * deliberately not round numbers: two particles on 8s and 16s fall into step * every sixteen seconds and the eye catches it immediately. Nothing here * shares a common factor with anything else, so it never quite repeats. */ .snowflakes .snowflake:nth-of-type(1) { --x: 4%; --size: 15px; --fade: .42; --blur: .7px; --fall: 23s; --delay: 0s; --sway: 12px; --sway-time: 6.5s; --spin: 14deg; } .snowflakes .snowflake:nth-of-type(2) { --x: 13%; --size: 26px; --fade: .78; --blur: 0; --fall: 15.5s; --delay: 2.1s; --sway: 26px; --sway-time: 8.2s; --spin: -22deg; } .snowflakes .snowflake:nth-of-type(3) { --x: 21%; --size: 34px; --fade: .9; --blur: 0; --fall: 11.2s; --delay: 5.4s; --sway: 38px; --sway-time: 5.3s; --spin: 26deg; } .snowflakes .snowflake:nth-of-type(4) { --x: 28%; --size: 17px; --fade: .48; --blur: .6px; --fall: 21s; --delay: 1.3s; --sway: 15px; --sway-time: 9.1s; --spin: -12deg; } .snowflakes .snowflake:nth-of-type(5) { --x: 36%; --size: 23px; --fade: .72; --blur: 0; --fall: 17.3s; --delay: 7.6s; --sway: 22px; --sway-time: 6.9s; --spin: 19deg; } .snowflakes .snowflake:nth-of-type(6) { --x: 44%; --size: 31px; --fade: .86; --blur: 0; --fall: 12.6s; --delay: 3.2s; --sway: 34px; --sway-time: 5.8s; --spin: -28deg; } .snowflakes .snowflake:nth-of-type(7) { --x: 51%; --size: 14px; --fade: .4; --blur: .8px; --fall: 24.5s; --delay: 9.1s; --sway: 10px; --sway-time: 7.4s; --spin: 10deg; } .snowflakes .snowflake:nth-of-type(8) { --x: 58%; --size: 27px; --fade: .8; --blur: 0; --fall: 14.8s; --delay: 4.7s; --sway: 28px; --sway-time: 8.7s; --spin: 23deg; } .snowflakes .snowflake:nth-of-type(9) { --x: 66%; --size: 19px; --fade: .55; --blur: .5px; --fall: 19.4s; --delay: 6.3s; --sway: 17px; --sway-time: 6.1s; --spin: -16deg; } .snowflakes .snowflake:nth-of-type(10) { --x: 73%; --size: 33px; --fade: .88; --blur: 0; --fall: 11.9s; --delay: 8.4s; --sway: 36px; --sway-time: 5.6s; --spin: 25deg; } .snowflakes .snowflake:nth-of-type(11) { --x: 80%; --size: 16px; --fade: .45; --blur: .7px; --fall: 22.3s; --delay: 2.8s; --sway: 13px; --sway-time: 9.6s; --spin: -13deg; } .snowflakes .snowflake:nth-of-type(12) { --x: 87%; --size: 25px; --fade: .75; --blur: 0; --fall: 16.7s; --delay: 10.2s; --sway: 24px; --sway-time: 7.1s; --spin: 20deg; } .snowflakes .snowflake:nth-of-type(13) { --x: 93%; --size: 30px; --fade: .84; --blur: 0; --fall: 13.4s; --delay: 5.9s; --sway: 31px; --sway-time: 6.3s; --spin: -24deg; } .snowflakes .snowflake:nth-of-type(14) { --x: 97%; --size: 18px; --fade: .5; --blur: .6px; --fall: 20.1s; --delay: 11.5s; --sway: 16px; --sway-time: 8.9s; --spin: 15deg; } /* * BEHIND THE CHROME, in front of the page. * * The theme put these on z-index 9999, which is over the header, over the * notice bar, over the sold-out bar and over the mobile menu when it is open. * A leaf drifting across a navigation drawer is not charming, it is a bug. * Sitting at 1 they fall over the page and pass behind everything that is * actually a control. */ /*===================================================== SEASONAL EFFECTS Eight packages of drawn scenery, one per season, each designed against the same contract: real SVG artwork rather than gradient blobs, readable over the dark navy sections and the white ones alike, inert to the pointer and the keyboard, and silenced wholesale for anyone who has asked their device for less motion. Every effect is FIVE separable parts, each with its own switch in the season editor, carried as classes on the container so the preview can flick them without a round trip: scb-p-pictures the falling images scb-p-scenery still set dressing scb-p-sky moving atmosphere scb-p-sections the touches on each page section scb-p-logo the accessory on the logo The artwork itself lives in SiteBuilder::SCENERY and ::SKY; this file is its wardrobe. The two are checked against each other by tools/seasoncheck.py. =====================================================*/ /* * ABOVE the header, BELOW the bars and the menu drawer. * * This layer once sat at z-index 1, under the fixed header at 1030, which * made everything anchored to the top of the screen invisible: bunting, * cobwebs and streamers all rendered exactly where they were told to and the * header painted over them. 1032 drapes scenery over the header, which is * what a decorated shopfront actually looks like, while the notice bar * (1035), the sold-out bar (1040) and the navigation drawer (1050) still * cover it. Everything here is pointer-events none, so no tap is ever blocked. */ .scb-season { position: fixed; inset: 0; z-index: 1032; overflow: hidden; pointer-events: none; } /* The two artwork layers fill the overlay so their children keep viewport coordinates. */ .scb-scenery, .scb-sky { position: absolute; inset: 0; pointer-events: none; } /* * ROOM FOR THE HANGINGS. * * The garlands, bunting and icicles used to drape over the header, which * covered the navigation and the order button. They now hang from the * header's bottom edge instead, and the hero makes room for them above * the logo. The room is tied to the scenery switch, so turning the * scenery off gives the space back. */ body:has(.scb-season--snow.scb-p-scenery){--scb-hang:64px} body:has(.scb-season--valentine.scb-p-scenery){--scb-hang:96px} body:has(.scb-season--july.scb-p-scenery){--scb-hang:72px} body:has(.scb-season--mothers.scb-p-scenery){--scb-hang:104px} body:has(.scb-season--fathers.scb-p-scenery){--scb-hang:76px} body:has(.scb-season--snow.scb-p-scenery) .scb-hero-inner,body:has(.scb-season--valentine.scb-p-scenery) .scb-hero-inner,body:has(.scb-season--july.scb-p-scenery) .scb-hero-inner,body:has(.scb-season--mothers.scb-p-scenery) .scb-hero-inner,body:has(.scb-season--fathers.scb-p-scenery) .scb-hero-inner{padding-top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px))} /* A part whose class is missing is a part that is switched off. The markup ships either way, which is what lets the preview toggle these live. */ .scb-season:not(.scb-p-pictures) .snowflakes { display: none; } .scb-season:not(.scb-p-scenery) .scb-scenery { display: none; } .scb-season:not(.scb-p-sky) .scb-sky { display: none; } /*---------- snow ---------- A crisp Christmas snowscape settles over the taco shop: hand-drawn icicles fringe the top of the viewport under a lumpy snow ledge, a three-layer blue-shaded snowdrift banks along the bottom with twinkling glints, and wavy settled-snow caps pile up on the menu cards and the top edges of five sections. Pine sprigs with red berries frame the hero, steel-blue snowflakes garnish the white sections, and the sun-taco logo wears a properly drawn Santa hat at a jaunty angle while a few soft motes and two spinning flakes drift down. ----------*/ .scb-season--snow .scb-chill{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 42%,rgba(0,0,0,0) 55%,rgba(58,102,150,.16) 100%)} .scb-season--snow .scb-icicles{position:absolute;top:var(--scb-header-h,133px);left:0;right:0;height:84px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 88'%3E%3Cpath fill='%23c3daee' d='M0 0h240v14q-15 8-30 3-15 6-36-3-16 7-32 2-18 6-36-2-15 8-32 3-18 5-36-3-19 7-38 1z'/%3E%3Cpath fill='%23fff' d='M0 0h240v9q-15 6-30 2-15 5-36-2-16 5-32 2-18 5-36-2-15 6-32 2-18 4-36-2-19 5-38 1z'/%3E%3Cg fill='%23e4f2fc' stroke='%23a6c9e2' stroke-width='1.2'%3E%3Cpath d='M14 10q6 28 7 58 4-30 6-56z'/%3E%3Cpath d='M52 12q4 14 5 27 3-14 5-26z'/%3E%3Cpath d='M90 10q5 22 6 44 3-24 5-43z'/%3E%3Cpath d='M130 12q3 10 4 19 2-10 4-18z'/%3E%3Cpath d='M168 10q4 26 5 52 3-27 5-51z'/%3E%3Cpath d='M208 12q3 16 4 31 2-16 4-30z'/%3E%3C/g%3E%3C/svg%3E") left top/240px 84px repeat-x;filter:drop-shadow(0 3px 4px rgba(20,50,80,.3))} .scb-season--snow .scb-bank{position:absolute;left:0;bottom:-2px;width:100%;height:118px;filter:drop-shadow(0 -5px 10px rgba(46,86,126,.3))} .scb-season--snow .scb-glint{position:absolute;width:11px;height:11px;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 3px rgba(120,170,220,.9));opacity:0;animation:scb-snow-twinkle 8s ease-in-out infinite} .scb-season--snow .scb-flurry{position:absolute;inset:0} .scb-season--snow .scb-mote{position:absolute;top:0;display:block;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(127,163,197,.5),0 0 6px rgba(255,255,255,.95);animation:scb-snow-mote 24s linear infinite} .scb-season--snow .scb-flake{position:absolute;top:0;display:block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23fff' stroke-width='4.5' stroke-linecap='round' fill='none'%3E%3Cpath d='M50 6v88M12 28l76 44M12 72l76-44'/%3E%3Cpath d='M42 16l8 10 8-10M42 84l8-10 8 10M14 40l12-4 2-13M86 60l-12 4-2 13M14 60l12 4 2 13M86 40l-12-4-2-13'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='5' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(70,110,150,.65));animation:scb-snow-spin 40s linear infinite} @keyframes scb-snow-twinkle{0%,52%,100%{opacity:0;transform:scale(.3) rotate(0deg)}60%{opacity:1;transform:scale(1.1) rotate(20deg)}68%{opacity:.2;transform:scale(.55) rotate(38deg)}} @keyframes scb-snow-mote{0%{transform:translate3d(0,-6vh,0)}26%{transform:translate3d(20px,23vh,0)}52%{transform:translate3d(-15px,52vh,0)}77%{transform:translate3d(17px,80vh,0)}100%{transform:translate3d(-8px,107vh,0)}} @keyframes scb-snow-spin{0%{transform:translate3d(0,-8vh,0) rotate(0deg)}50%{transform:translate3d(-26px,49vh,0) rotate(170deg)}100%{transform:translate3d(15px,108vh,0) rotate(340deg)}} body:has(.scb-season--snow.scb-p-sections) .scb-hero,body:has(.scb-season--snow.scb-p-sections) #menu,body:has(.scb-season--snow.scb-p-sections) #about,body:has(.scb-season--snow.scb-p-sections) #order,body:has(.scb-season--snow.scb-p-sections) #reviews,body:has(.scb-season--snow.scb-p-sections) #catering,body:has(.scb-season--snow.scb-p-sections) #restaurant-location-sec,body:has(.scb-season--snow.scb-p-sections) .footer-wrapper,body:has(.scb-season--snow.scb-p-sections) .food-card-1.style-2{position:relative} body:has(.scb-season--snow.scb-p-sections) #menu::before,body:has(.scb-season--snow.scb-p-sections) #about::before,body:has(.scb-season--snow.scb-p-sections) #order::before,body:has(.scb-season--snow.scb-p-sections) #restaurant-location-sec::before,body:has(.scb-season--snow.scb-p-sections) .footer-wrapper::before,body:has(.scb-season--snow.scb-p-sections) .food-card-1.style-2::before{content:"";position:absolute;top:-1px;left:0;right:0;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 30'%3E%3Cpath fill='%23c3daee' d='M0 0h240v15q-15 9-30 4-15 6-36-4-16 8-32 3-18 6-36-3-15 9-32 4-18 5-36-4-19 8-38 1z'/%3E%3Cpath fill='%23fff' d='M0 0h240v10q-15 7-30 3-15 5-36-3-16 6-32 2-18 5-36-2-15 7-32 3-18 4-36-3-19 6-38 1z'/%3E%3C/svg%3E") left top/240px 30px repeat-x;filter:drop-shadow(0 3px 3px rgba(25,55,85,.22))} body:has(.scb-season--snow.scb-p-sections) .food-card-1.style-2::before{height:19px;background-size:150px 19px;left:3px;right:3px;border-radius:14px 14px 0 0;filter:drop-shadow(0 2px 2px rgba(25,55,85,.3))} /* One pseudo-element for BOTH sprigs, and that is the fix, not a tidy-up. The site dims its hero photograph with .scb-hero::before, and putting a sprig there replaced the dim: full-colour photo, unreadable headline. The right-hand sprig is a pre-mirrored copy of the artwork, because one background layer of a pair cannot be flipped on its own. */ body:has(.scb-season--snow.scb-p-sections) .scb-hero::after{content:"";position:absolute;top:calc(var(--scb-header-h,133px) + 6px + var(--scb-hang,0px));left:12px;right:12px;height:94px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 110'%3E%3Cg stroke='%232e6b4c' stroke-width='5' fill='none' stroke-linecap='round'%3E%3Cpath d='M6 8q46 20 84 58'/%3E%3Cpath d='M30 24q20-14 34-14M46 38q22-16 40-16M66 56q24-18 44-18M42 34q-2 24 4 38M62 52q0 22 8 34M84 70q2 18 10 28'/%3E%3C/g%3E%3Cg stroke='%234f9068' stroke-width='3.5' fill='none' stroke-linecap='round'%3E%3Cpath d='M24 18q14-10 26-10M56 46q18-14 34-14M52 44q-2 18 2 30'/%3E%3C/g%3E%3Ccircle cx='96' cy='84' r='10' fill='%23d7263d' stroke='%238e1626' stroke-width='2'/%3E%3Ccircle cx='116' cy='72' r='8' fill='%23e2493f' stroke='%238e1626' stroke-width='2'/%3E%3Ccircle cx='108' cy='94' r='7' fill='%23b01e30' stroke='%238e1626' stroke-width='2'/%3E%3Cpath d='M4 6q26 10 46 26' stroke='%23fff' stroke-width='4' fill='none' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E") left top/128px 94px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20110'%3E%3Cg%20transform='translate(150%200)%20scale(-1%201)'%3E%3Cg%20stroke='%232e6b4c'%20stroke-width='5'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M6%208q46%2020%2084%2058'/%3E%3Cpath%20d='M30%2024q20-14%2034-14M46%2038q22-16%2040-16M66%2056q24-18%2044-18M42%2034q-2%2024%204%2038M62%2052q0%2022%208%2034M84%2070q2%2018%2010%2028'/%3E%3C/g%3E%3Cg%20stroke='%234f9068'%20stroke-width='3.5'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M24%2018q14-10%2026-10M56%2046q18-14%2034-14M52%2044q-2%2018%202%2030'/%3E%3C/g%3E%3Ccircle%20cx='96'%20cy='84'%20r='10'%20fill='%23d7263d'%20stroke='%238e1626'%20stroke-width='2'/%3E%3Ccircle%20cx='116'%20cy='72'%20r='8'%20fill='%23e2493f'%20stroke='%238e1626'%20stroke-width='2'/%3E%3Ccircle%20cx='108'%20cy='94'%20r='7'%20fill='%23b01e30'%20stroke='%238e1626'%20stroke-width='2'/%3E%3Cpath%20d='M4%206q26%2010%2046%2026'%20stroke='%23fff'%20stroke-width='4'%20fill='none'%20stroke-linecap='round'%20opacity='.9'/%3E%3C/g%3E%3C/svg%3E") right top/128px 94px no-repeat;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))} body:has(.scb-season--snow.scb-p-sections) #reviews::before,body:has(.scb-season--snow.scb-p-sections) #catering::after{content:"";position:absolute;top:20px;width:86px;height:86px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%237ba7c7' stroke-width='4.5' stroke-linecap='round' fill='none'%3E%3Cpath d='M50 6v88M12 28l76 44M12 72l76-44'/%3E%3Cpath d='M42 16l8 10 8-10M42 84l8-10 8 10M14 40l12-4 2-13M86 60l-12 4-2 13M14 60l12 4 2 13M86 40l-12-4-2-13'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='5' fill='%237ba7c7'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9} body:has(.scb-season--snow.scb-p-sections) #reviews::before{right:26px;transform:rotate(14deg)} body:has(.scb-season--snow.scb-p-sections) #catering::after{left:26px;transform:rotate(-11deg)} body:has(.scb-season--snow.scb-p-logo) .scb-hero-inner{position:relative} body:has(.scb-season--snow.scb-p-logo) .scb-hero-inner::before{content:"";position:absolute;z-index:5;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 2px);left:50%;transform:translateX(50px) rotate(10deg);width:86px;height:94px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 100'%3E%3Crect x='10' y='8' width='4' height='88' rx='2' fill='%23b4551b'/%3E%3Ccircle cx='12' cy='7' r='4.5' fill='%23FF9924'/%3E%3Cpath d='M14,14C38,6 58,20 84,12L82,50C58,58 38,44 14,52Z' fill='%23d7263d' stroke='%2314212e' stroke-width='2'/%3E%3Cg transform='translate(49 31)' stroke='%23F7F2E2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0-10V10M-8.5-5 8.5 5M-8.5 5 8.5-5'/%3E%3C/g%3E%3Ccircle cx='49' cy='31' r='2.5' fill='%23F7F2E2'/%3E%3Ccircle cx='27' cy='22' r='2' fill='%23F7F2E2'/%3E%3Ccircle cx='69' cy='27' r='2' fill='%23F7F2E2'/%3E%3Ccircle cx='30' cy='43' r='1.8' fill='%23F7F2E2'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 3px 5px #0a121c8c);pointer-events:none} @media (max-width:575px){.scb-season--snow .scb-icicles{height:56px;background-size:160px 56px}.scb-season--snow .scb-bank{height:72px}.scb-season--snow .scb-flake,.scb-season--snow .scb-glint:nth-of-type(n+6),.scb-season--snow .scb-mote:nth-of-type(n+6){display:none}body:has(.scb-season--snow.scb-p-sections) .scb-hero::after{height:60px;background-size:82px 60px,82px 60px}body:has(.scb-season--snow.scb-p-sections) #reviews::before,body:has(.scb-season--snow.scb-p-sections) #catering::after{width:54px;height:54px;top:12px}body:has(.scb-season--snow.scb-p-logo) .scb-hero-inner::before{width:60px;height:66px;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 2px);transform:translateX(36px) rotate(10deg)}} /*---------- halloween ---------- A moonless desert boneyard: a silhouetted mound in the bottom-left corner carries a gnarled bare tree, three tilted cracked headstones (rounded, cross, gothic arch) and a fat jack-o-lantern whose carved face flickers with candlelight, while two layers of low fog slide through at different speeds. Big hand-drawn corner cobwebs with sagging concentric arcs frame the top of the viewport, a spider bobs on its thread under the right one, and every ~19 seconds a double lightning flash washes the sky as a jagged bolt blinks in. Sections get cream bats over the navy bands, grinning pumpkins in corners, inked cobwebs on the white corners, and the logo wears a crooked purple witch hat with a gold buckle band. ----------*/ .scb-webv2{position:absolute;top:var(--scb-header-h,133px);width:212px;height:212px;filter:drop-shadow(0 1px 2px rgba(13,20,32,.8))}.scb-webv2--r{right:0}.scb-webv2--l{left:0;width:148px;height:148px;transform:scaleX(-1)}.scb-webv2 svg,.scb-yard svg,.scb-fogx svg,.scb-boltjag svg,.scb-spidey svg{width:100%;height:auto;display:block}/* A row of three plots instead of one corner scene, so the boneyard runs the width of the page the way a boneyard does. The middle plot is smaller and mirrored so the row does not read as a repeat. */ .scb-yard{position:absolute;bottom:-3px;left:-1%;right:-1%;display:flex;justify-content:space-between;align-items:flex-end;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))} .scb-plot{display:block;width:min(30vw,330px)} .scb-plot--mid{width:min(21vw,230px);transform:scaleX(-1);opacity:.92} .scb-plot--r{transform:scaleX(-1)}.scb-yard-face{fill:#ffd75e;filter:drop-shadow(0 0 5px #ffb437);animation:scb-halloween-jack 9.7s ease-in-out infinite}/* A fixed height, or the fog scaled with the viewport width and stood nearly 300px tall on a desktop, drifting over the hero copy. */ .scb-fogx{position:absolute;bottom:-6px;left:-25%;width:150%;height:74px;opacity:.34;filter:blur(5px)} .scb-fogx svg{height:100%}.scb-fogx--a{animation:scb-halloween-fog 43s ease-in-out infinite alternate}.scb-fogx--b{bottom:18px;opacity:.2;animation:scb-halloween-fog 67s ease-in-out infinite alternate-reverse}.scb-spidey{position:absolute;top:calc(var(--scb-header-h,133px) + 4px);right:58px;width:34px;animation:scb-halloween-bob 7.3s ease-in-out infinite}.scb-flashwash{position:absolute;inset:0;background:radial-gradient(ellipse at 72% -10%,#dfe9ff,rgba(223,233,255,.4) 40%,transparent 72%);opacity:0;animation:scb-halloween-flash 19s linear infinite}.scb-boltjag{position:absolute;top:0;right:16%;width:64px;opacity:0;filter:drop-shadow(0 0 6px #9fc0ff);animation:scb-halloween-bolt 19s linear infinite}@keyframes scb-halloween-jack{0%,86%,100%{opacity:1}88%{opacity:.5}90%{opacity:.95}93%{opacity:.6}}@keyframes scb-halloween-fog{from{transform:translateX(-4%)}to{transform:translateX(9%)}}@keyframes scb-halloween-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(22px)}}@keyframes scb-halloween-flash{0%,73.4%,77%,100%{opacity:0}74%{opacity:.3}74.8%{opacity:.05}75.6%{opacity:.26}}@keyframes scb-halloween-bolt{0%,73.6%,76%,100%{opacity:0}74%{opacity:.9}75.2%{opacity:.35}} body:has(.scb-season--halloween.scb-p-sections) #menu,body:has(.scb-season--halloween.scb-p-sections) #about,body:has(.scb-season--halloween.scb-p-sections) #order,body:has(.scb-season--halloween.scb-p-sections) #reviews,body:has(.scb-season--halloween.scb-p-sections) #catering,body:has(.scb-season--halloween.scb-p-sections) #restaurant-location-sec,body:has(.scb-season--halloween.scb-p-sections) .footer-wrapper{position:relative}body:has(.scb-season--halloween.scb-p-sections) #reviews::before,body:has(.scb-season--halloween.scb-p-sections) #catering::before{content:"";position:absolute;top:0;width:140px;height:140px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%234a6379' stroke-width='2'%3E%3Cpath d='M200 0L10 0M200 0L19 59M200 0L46 112M200 0L88 154M200 0L141 181M200 0L200 190'/%3E%3Cpath d='M115 0Q125 12 119 26Q133 34 131 50Q147 54 150 69Q166 67 174 81Q188 75 200 85'/%3E%3Cpath d='M75 0Q90 17 81 39Q101 50 99 74Q121 79 127 101Q150 99 161 119Q183 110 200 125'/%3E%3Cpath d='M35 0Q55 23 43 51Q69 67 67 97Q96 104 103 134Q133 131 149 157Q177 145 200 165'/%3E%3C/g%3E%3C/svg%3E") no-repeat top/contain;opacity:.75;pointer-events:none}body:has(.scb-season--halloween.scb-p-sections) #reviews::before{left:0;transform:scaleX(-1)}body:has(.scb-season--halloween.scb-p-sections) #catering::before{right:0}body:has(.scb-season--halloween.scb-p-sections) #menu::before,body:has(.scb-season--halloween.scb-p-sections) #order::before,body:has(.scb-season--halloween.scb-p-sections) .footer-wrapper::before{content:"";position:absolute;bottom:6px;right:12px;width:56px;height:52px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 46'%3E%3Cpath d='M25 12c-2-8 2-13 10-15 2 4 1 9-4 13' fill='%235d7a3a'/%3E%3Cellipse cx='13' cy='29' rx='12' ry='16' fill='%23d96f16'/%3E%3Cellipse cx='35' cy='29' rx='12' ry='16' fill='%23d96f16'/%3E%3Cellipse cx='24' cy='30' rx='15' ry='16' fill='%23FF9924'/%3E%3Cpath d='M18 17c-3 9-3 18 0 26M30 17c3 9 3 18 0 26' stroke='%23e07d18' stroke-width='2' fill='none'/%3E%3Cpath d='M17 24l4 7h-8zM31 24l4 7h-8zM24 31l3 5h-6z' fill='%2314212e'/%3E%3Cpath d='M13 36q11 8 22 0c-1 3-2 5-4 6l-2-3-3 4-3-4-3 4-2-3c-2-1-4-3-5-6z' fill='%2314212e'/%3E%3C/svg%3E") no-repeat center/contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));pointer-events:none}body:has(.scb-season--halloween.scb-p-sections) #order::before{right:auto;left:12px;transform:scaleX(-1)}body:has(.scb-season--halloween.scb-p-sections) #menu::after,body:has(.scb-season--halloween.scb-p-sections) #about::after,body:has(.scb-season--halloween.scb-p-sections) #order::after{content:"";position:absolute;top:14px;right:24px;width:118px;height:54px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 58'%3E%3Cg fill='%23F7F2E2'%3E%3Cpath transform='rotate(-9 30 12)' d='M2 12C8 2 20 0 27 6L29 2 31 6 33 2 35 6C42 0 54 2 60 12C54 9 49 10 46 14C43 11 39 12 37 16C35 13 33 14 31 19C29 14 27 13 25 16C23 12 19 11 16 14C13 10 8 9 2 12Z'/%3E%3Cpath transform='translate(66 26) scale(.62) rotate(14 30 10)' d='M2 12C8 2 20 0 27 6L29 2 31 6 33 2 35 6C42 0 54 2 60 12C54 9 49 10 46 14C43 11 39 12 37 16C35 13 33 14 31 19C29 14 27 13 25 16C23 12 19 11 16 14C13 10 8 9 2 12Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;opacity:.9;pointer-events:none}body:has(.scb-season--halloween.scb-p-sections) #about::after{left:26px;right:auto}body:has(.scb-season--halloween.scb-p-sections) #order::after{top:10px}body:has(.scb-season--halloween.scb-p-sections) #restaurant-location-sec::after{content:"";position:absolute;top:12px;right:18px;width:106px;height:50px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 58'%3E%3Cg fill='%2314212e'%3E%3Cpath transform='rotate(-9 30 12)' d='M2 12C8 2 20 0 27 6L29 2 31 6 33 2 35 6C42 0 54 2 60 12C54 9 49 10 46 14C43 11 39 12 37 16C35 13 33 14 31 19C29 14 27 13 25 16C23 12 19 11 16 14C13 10 8 9 2 12Z'/%3E%3Cpath transform='translate(66 26) scale(.62) rotate(14 30 10)' d='M2 12C8 2 20 0 27 6L29 2 31 6 33 2 35 6C42 0 54 2 60 12C54 9 49 10 46 14C43 11 39 12 37 16C35 13 33 14 31 19C29 14 27 13 25 16C23 12 19 11 16 14C13 10 8 9 2 12Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;opacity:.85;pointer-events:none} body:has(.scb-season--halloween.scb-p-logo) .scb-hero-inner{position:relative}body:has(.scb-season--halloween.scb-p-logo) .scb-hero-inner::before{content:"";position:absolute;z-index:3;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 2px);left:50%;transform:translateX(50px) rotate(13deg);width:86px;height:94px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 100'%3E%3Crect x='10' y='8' width='4' height='88' rx='2' fill='%23b4551b'/%3E%3Ccircle cx='12' cy='7' r='4.5' fill='%23FF9924'/%3E%3Cpath d='M14,14C38,6 58,20 84,12L82,50C58,58 38,44 14,52Z' fill='%232b1b45' stroke='%2314212e' stroke-width='2'/%3E%3Cpath d='M14,40C38,32 58,46 82.4,38L82.1,45C58,53 38,39 14,47Z' fill='%23FF9924'/%3E%3Cellipse cx='47' cy='28' rx='12' ry='10' fill='%23FF9924' stroke='%23b4551b' stroke-width='2'/%3E%3Cpath d='M43 24l3 5h-6Z M51 24l3 5h-6Z' fill='%232b1b45'/%3E%3Cpath d='M40 32l3 2 2-2 2 2 2-2 3 2' stroke='%232b1b45' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 3px 5px #0a121c8c);pointer-events:none} @media (max-width:575px){.scb-webv2{width:118px;height:118px}.scb-webv2--l{display:none}.scb-plot{width:46vw}.scb-plot--mid{display:none}.scb-spidey{width:24px;right:22px}.scb-boltjag{width:42px;right:32%}body:has(.scb-season--halloween.scb-p-sections) #reviews::before,body:has(.scb-season--halloween.scb-p-sections) #catering::before{width:92px;height:92px}body:has(.scb-season--halloween.scb-p-sections) #menu::before,body:has(.scb-season--halloween.scb-p-sections) #order::before,body:has(.scb-season--halloween.scb-p-sections) .footer-wrapper::before{width:40px;height:38px}body:has(.scb-season--halloween.scb-p-sections) #menu::after,body:has(.scb-season--halloween.scb-p-sections) #order::after{display:none}body:has(.scb-season--halloween.scb-p-sections) #about::after,body:has(.scb-season--halloween.scb-p-sections) #restaurant-location-sec::after{width:74px;height:34px}body:has(.scb-season--halloween.scb-p-logo) .scb-hero-inner::before{width:60px;height:66px;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 2px);transform:translateX(36px) rotate(13deg)}} /*---------- autumn ---------- Golden-hour in the desert fall: a deep, layered leaf drift banks along the bottom of the screen, built from dozens of individually drawn maple and oak leaves in seven fall shades, dark russet silhouettes at the back, bright outlined and veined leaves piled at the front over a shadowed mound. Wheat-and-leaf sprigs droop from the top corners, a warm vignette toasts the whole viewport, and three or four big leaves seesaw lazily down into the pile. Sections get acorn pairs, corner leaf clusters, and warm harvest-stripe top trims; a bright veined maple leaf tucks against the logo's shoulder. ----------*/ .scb-season--autumn::before{content:'';position:absolute;inset:0;background:radial-gradient(115% 92% at 50% 24%,rgba(0,0,0,0) 52%,rgba(255,153,36,.07) 72%,rgba(110,46,10,.22) 100%)} .scb-pile{position:absolute;left:0;bottom:-4px;width:100%;height:150px;z-index:2;filter:drop-shadow(0 -5px 9px rgba(40,15,5,.3))} .scb-sprig{position:absolute;top:var(--scb-header-h,133px);left:-10px;width:196px;height:145px;filter:drop-shadow(2px 3px 4px rgba(40,15,5,.4))} .scb-sprig--r{left:auto;right:-10px;transform:scaleX(-1)} .scb-fall{position:absolute;top:0;width:52px;height:52px;z-index:1;filter:drop-shadow(0 3px 4px rgba(40,15,5,.35))} .scb-fall--a{left:12%;animation:scb-autumn-fall1 29s linear -8s infinite} .scb-fall--b{left:55%;width:46px;height:46px;animation:scb-autumn-fall2 37s linear -21s infinite} .scb-fall--c{left:78%;animation:scb-autumn-fall3 45s linear -33s infinite} .scb-fall--d{left:33%;width:36px;height:36px;animation:scb-autumn-fall2 53s linear -12s infinite} @keyframes scb-autumn-fall1{0%{transform:translate(0,-14vh) rotate(-12deg)}14%{transform:translate(6vw,6vh) rotate(32deg)}28%{transform:translate(-2vw,22vh) rotate(-34deg)}42%{transform:translate(5vw,38vh) rotate(28deg)}56%{transform:translate(-3vw,54vh) rotate(-30deg)}70%{transform:translate(4vw,72vh) rotate(24deg)}84%{transform:translate(-1vw,88vh) rotate(-18deg)}100%{transform:translate(3vw,104vh) rotate(10deg)}} @keyframes scb-autumn-fall2{0%{transform:translate(0,-12vh) rotate(6deg)}16%{transform:translate(-6vw,8vh) rotate(-36deg)}34%{transform:translate(2vw,28vh) rotate(26deg)}52%{transform:translate(-6vw,48vh) rotate(-30deg)}68%{transform:translate(1vw,66vh) rotate(22deg)}84%{transform:translate(-4vw,86vh) rotate(-26deg)}100%{transform:translate(0,104vh) rotate(6deg)}} @keyframes scb-autumn-fall3{0%{transform:translate(0,-16vh) rotate(-6deg)}20%{transform:translate(-4vw,10vh) rotate(20deg)}40%{transform:translate(-8vw,32vh) rotate(-24deg)}60%{transform:translate(-3vw,52vh) rotate(18deg)}80%{transform:translate(-9vw,78vh) rotate(-22deg)}100%{transform:translate(-5vw,105vh) rotate(4deg)}} body:has(.scb-season--autumn.scb-p-sections) .scb-hero,body:has(.scb-season--autumn.scb-p-sections) #menu,body:has(.scb-season--autumn.scb-p-sections) #about,body:has(.scb-season--autumn.scb-p-sections) #reviews,body:has(.scb-season--autumn.scb-p-sections) #order,body:has(.scb-season--autumn.scb-p-sections) #catering,body:has(.scb-season--autumn.scb-p-sections) #restaurant-location-sec,body:has(.scb-season--autumn.scb-p-sections) .footer-wrapper{position:relative;--scb-au-l1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-54 -54 108 108'%3E%3Cpath d='M0-48 8-30 34-36 20-14 46 2 16 8 22 26 3 22 2 46-2 46-3 22-22 26-16 8-46 2-20-14-34-36-8-30Z' fill='%23FF9924' stroke='%236b3010' stroke-width='5'/%3E%3C/svg%3E");--scb-au-l2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-54 -54 108 108'%3E%3Cpath d='M0-48 8-30 34-36 20-14 46 2 16 8 22 26 3 22 2 46-2 46-3 22-22 26-16 8-46 2-20-14-34-36-8-30Z' fill='%23a93b2a' stroke='%23571f0e' stroke-width='5' transform='rotate(-28)'/%3E%3C/svg%3E");--scb-au-l3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-54 -54 108 108'%3E%3Cpath d='M0-46C8-44 10-36 5-30C16-34 22-26 12-20C24-22 28-12 14-8C28-8 30 2 15 5C27 8 25 18 11 17C18 24 12 32 4 28L2 44-2 44-4 28C-12 32-18 24-11 17C-25 18-27 8-15 5C-30 2-28-8-14-8C-28-12-24-22-12-20C-22-26-16-34-5-30C-10-36-8-44 0-46Z' fill='%23d98e2b' stroke='%235a2410' stroke-width='5' transform='rotate(22)'/%3E%3C/svg%3E");--scb-au-ac:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 64'%3E%3Cg id='scb-autumn-a'%3E%3Cpath d='M20 16v-9' stroke='%235a2f10' stroke-width='3' fill='none'/%3E%3Cellipse cx='20' cy='36' rx='12' ry='15' fill='%23b3742f' stroke='%235a2f10' stroke-width='3'/%3E%3Cpath d='M6 28Q20 12 34 28Q20 36 6 28Z' fill='%236b3a16' stroke='%235a2f10' stroke-width='2.5'/%3E%3C/g%3E%3Cuse href='%23scb-autumn-a' transform='translate(30 6)rotate(14 20 36)'/%3E%3C/svg%3E")} body:has(.scb-season--autumn.scb-p-sections) .scb-hero::after{content:'';position:absolute;inset:auto 0 0 0;height:64px;pointer-events:none;background:var(--scb-au-l2) left -12px bottom -16px/52px no-repeat,var(--scb-au-l1) left 30px bottom -24px/40px no-repeat,var(--scb-au-l3) right -10px bottom -18px/52px no-repeat,var(--scb-au-l1) right 34px bottom -26px/38px no-repeat} body:has(.scb-season--autumn.scb-p-sections) #menu::before{content:'';position:absolute;inset:0 0 auto 0;height:44px;pointer-events:none;background:linear-gradient(90deg,#b4551b,#FF9924 28%,#d98e2b 52%,#a93b2a 78%,#b4551b) 0 0/100% 5px no-repeat,var(--scb-au-l1) left 6% top -14px/34px no-repeat,var(--scb-au-l3) left 22% top -10px/30px no-repeat,var(--scb-au-l2) right 20% top -12px/32px no-repeat,var(--scb-au-l3) right 5% top -15px/36px no-repeat} body:has(.scb-season--autumn.scb-p-sections) #about::before{content:'';position:absolute;top:16px;left:16px;width:66px;height:50px;pointer-events:none;background:var(--scb-au-ac) center/contain no-repeat} body:has(.scb-season--autumn.scb-p-sections) #about::after{content:'';position:absolute;right:6px;bottom:6px;width:52px;height:52px;pointer-events:none;background:var(--scb-au-l1) center/contain no-repeat;transform:rotate(-30deg)} body:has(.scb-season--autumn.scb-p-sections) #reviews::before{content:'';position:absolute;top:8px;right:8px;width:96px;height:60px;pointer-events:none;background:var(--scb-au-l2) right top/44px no-repeat,var(--scb-au-l1) left bottom/34px no-repeat} body:has(.scb-season--autumn.scb-p-sections) #reviews::after{content:'';position:absolute;bottom:8px;left:10px;width:44px;height:44px;pointer-events:none;background:var(--scb-au-l3) center/contain no-repeat} body:has(.scb-season--autumn.scb-p-sections) #order::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;pointer-events:none;background:linear-gradient(90deg,#a93b2a,#FF9924 30%,#b4551b 60%,#d98e2b 85%,#a93b2a)} body:has(.scb-season--autumn.scb-p-sections) #order::after{content:'';position:absolute;left:6px;bottom:4px;width:96px;height:56px;pointer-events:none;background:var(--scb-au-l3) left bottom/42px no-repeat,var(--scb-au-l2) right top/34px no-repeat} body:has(.scb-season--autumn.scb-p-sections) #catering::before{content:'';position:absolute;top:12px;left:14px;width:64px;height:48px;pointer-events:none;background:var(--scb-au-ac) center/contain no-repeat} body:has(.scb-season--autumn.scb-p-sections) #catering::after{content:'';position:absolute;top:8px;right:10px;width:50px;height:50px;pointer-events:none;background:var(--scb-au-l1) center/contain no-repeat;transform:rotate(35deg)} body:has(.scb-season--autumn.scb-p-sections) #restaurant-location-sec::after{content:'';position:absolute;inset:auto 0 0 0;height:46px;pointer-events:none;background:var(--scb-au-l2) left 4% bottom -14px/38px no-repeat,var(--scb-au-l3) left 12% bottom -10px/30px no-repeat,var(--scb-au-l1) right 10% bottom -12px/36px no-repeat,var(--scb-au-l3) right 3% bottom -16px/40px no-repeat} body:has(.scb-season--autumn.scb-p-sections) .footer-wrapper::before{content:'';position:absolute;inset:0 0 auto 0;height:34px;pointer-events:none;background:linear-gradient(90deg,#b4551b,#FF9924 30%,#a93b2a 65%,#b4551b) 0 0/100% 4px no-repeat,var(--scb-au-l1) 0 -12px/34px 34px repeat-x,var(--scb-au-l3) 22px -20px/44px 44px repeat-x} body:has(.scb-season--autumn.scb-p-logo) .scb-hero-inner{position:relative} body:has(.scb-season--autumn.scb-p-logo) .scb-hero-inner::before{content:'';position:absolute;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 10px);left:50%;transform:translateX(40px) rotate(28deg);width:76px;height:76px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-54 -54 108 108'%3E%3Cpath d='M0-48 8-30 34-36 20-14 46 2 16 8 22 26 3 22 2 46-2 46-3 22-22 26-16 8-46 2-20-14-34-36-8-30Z' fill='%23FF9924' stroke='%237a3a12' stroke-width='5'/%3E%3Cpath d='M0 40V-38M0-4 28-28M0-4-28-28' stroke='%23b4551b' stroke-width='3' fill='none' opacity='.6'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(2px 3px 4px rgba(40,15,5,.45))} @media (max-width:575px){ .scb-pile{height:104px} .scb-sprig{width:126px;height:93px} .scb-fall{width:36px;height:36px} .scb-fall--d{display:none} body:has(.scb-season--autumn.scb-p-sections) #about::after,body:has(.scb-season--autumn.scb-p-sections) #reviews::after,body:has(.scb-season--autumn.scb-p-sections) #catering::after{display:none} body:has(.scb-season--autumn.scb-p-sections) #about::before,body:has(.scb-season--autumn.scb-p-sections) #catering::before{width:48px;height:36px} body:has(.scb-season--autumn.scb-p-sections) #menu::before{height:30px;background:linear-gradient(90deg,#b4551b,#FF9924 28%,#d98e2b 52%,#a93b2a 78%,#b4551b) 0 0/100% 4px no-repeat,var(--scb-au-l1) left 8% top -10px/26px no-repeat,var(--scb-au-l3) right 8% top -11px/28px no-repeat} body:has(.scb-season--autumn.scb-p-logo) .scb-hero-inner::before{width:54px;height:54px;transform:translateX(24px) rotate(28deg)} } /*---------- valentine ---------- A hand-strung Valentine: a deep-rose thread swags across the top of the viewport with a dozen outlined hearts hanging at staggered lengths, each swinging gently on its own rhythm, while two cream doves perch on the string facing a little gold heart hung between them. Blush, rose, red and gold hearts drift slowly up the page with a soft wobble, every menu card is stamped with a crimson wax-seal heart, and the sections pick up love-letter, stitched-ribbon and lace-scallop touches in the brand palette. ----------*/ .scb-heartline{position:absolute;top:var(--scb-header-h,133px);left:50%;width:2600px;height:200px;margin-left:-1300px;filter:drop-shadow(0 3px 3px #14212e59)} .scb-heartline-set path{stroke:#8a2b3f;stroke-width:2;fill:none} .scb-heartline-set circle{fill:#FF9924;stroke:#8a2b3f} .scb-heartline-set>g{transform-box:fill-box;transform-origin:50% 0;animation:scb-valentine-pend 5.6s ease-in-out infinite alternate} .scb-heartline-set>g:nth-child(2n){animation-duration:4.7s;animation-delay:-1.4s} .scb-heartline-set>g:nth-child(3n){animation-duration:6.4s;animation-delay:-2.6s} .scb-dove path{stroke:#14212e;stroke-width:2.2;stroke-linejoin:round} .scb-rosehaze{position:absolute;inset:0;background:radial-gradient(120% 90%,#0000 60%,#c62f4524)} .scb-vrise{position:absolute;bottom:-70px;aspect-ratio:7/6;animation-name:scb-valentine-rise;animation-timing-function:linear;animation-iteration-count:infinite} .scb-vrise svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px #14212e4d);animation:scb-valentine-sway var(--scb-sw,4.5s) ease-in-out infinite alternate} .scb-rise--1{left:5%;width:16px;fill:#e05a7a;animation-duration:31s;animation-delay:-4s;--scb-sw:3.9s} .scb-rise--2{left:14%;width:26px;fill:#c62f45;animation-duration:43s;animation-delay:-21s;--scb-sw:5.3s} .scb-rise--3{left:25%;width:14px;fill:#f2a9bb;animation-duration:29s;animation-delay:-11s;--scb-sw:3.4s} .scb-rise--4{left:36%;width:30px;fill:#e05a7a;animation-duration:51s;animation-delay:-33s;--scb-sw:5.9s} .scb-rise--5{left:47%;width:18px;fill:#FF9924;animation-duration:37s;animation-delay:-17s;--scb-sw:4.4s} .scb-rise--6{left:59%;width:22px;fill:#c62f45;animation-duration:47s;animation-delay:-29s;--scb-sw:5.1s} .scb-rise--7{left:70%;width:15px;fill:#f2a9bb;animation-duration:33s;animation-delay:-7s;--scb-sw:3.7s} .scb-rise--8{left:82%;width:28px;fill:#e05a7a;animation-duration:55s;animation-delay:-41s;--scb-sw:6.2s} .scb-rise--9{left:92%;width:19px;fill:#c62f45;animation-duration:39s;animation-delay:-25s;--scb-sw:4.7s} @keyframes scb-valentine-rise{0%{transform:translateY(0);opacity:0}6%{opacity:.9}88%{opacity:.9}100%{transform:translateY(-118vh);opacity:0}} @keyframes scb-valentine-sway{from{transform:translateX(-13px) rotate(-8deg)}to{transform:translateX(13px) rotate(8deg)}} @keyframes scb-valentine-pend{from{transform:rotate(-2.6deg)}to{transform:rotate(2.6deg)}} body:has(.scb-season--valentine.scb-p-sections){--scb-h1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -5 28 24'%3E%3Cpath d='M0 3C-2-1-5-3-8-3-12-2-13 2-11 5-9 10-4 14 0 17 4 14 9 10 11 5 13 2 12-2 8-3 5-3 2-1 0 3Z' fill='%23e05a7a' stroke='%235e1626' stroke-width='1.5'/%3E%3C/svg%3E");--scb-h2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -5 28 24'%3E%3Cpath d='M0 3C-2-1-5-3-8-3-12-2-13 2-11 5-9 10-4 14 0 17 4 14 9 10 11 5 13 2 12-2 8-3 5-3 2-1 0 3Z' fill='%23c62f45' stroke='%235e1626' stroke-width='1.5'/%3E%3C/svg%3E");--scb-sl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 3c6-4 14 0 16 6 7 0 12 7 10 13 5 5 4 13-2 17 1 7-6 12-12 11-4 5-13 6-18 2-7 2-13-3-13-10-6-3-8-11-4-16-3-6 1-14 8-15 2-6 9-10 15-8z' fill='%23a62339' stroke='%23701527' stroke-width='2.5'/%3E%3Ccircle cx='32' cy='32' r='19' fill='none' stroke='%23701527' stroke-width='1.5'/%3E%3Cpath transform='translate(32 26)' d='M0 3C-2-1-5-3-8-3-12-2-13 2-11 5-9 10-4 14 0 17 4 14 9 10 11 5 13 2 12-2 8-3 5-3 2-1 0 3Z' fill='%23e8a4b2' stroke='%23701527' stroke-width='1.6'/%3E%3C/svg%3E");--scb-ev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 54'%3E%3Crect x='2' y='2' width='70' height='50' fill='%23F7F2E2' stroke='%2314212e' stroke-width='2.5'/%3E%3Cpath d='M4 7l33 23L70 7' fill='none' stroke='%2314212e' stroke-width='2.5'/%3E%3Cpath transform='translate(37 26) scale(.8)' d='M0 3C-2-1-5-3-8-3-12-2-13 2-11 5-9 10-4 14 0 17 4 14 9 10 11 5 13 2 12-2 8-3 5-3 2-1 0 3Z' fill='%23c62f45' stroke='%235e1626' stroke-width='1.8'/%3E%3C/svg%3E")} body:has(.scb-season--valentine.scb-p-sections) .scb-hero,body:has(.scb-season--valentine.scb-p-sections) #about,body:has(.scb-season--valentine.scb-p-sections) #reviews,body:has(.scb-season--valentine.scb-p-sections) #order,body:has(.scb-season--valentine.scb-p-sections) #catering,body:has(.scb-season--valentine.scb-p-sections) #restaurant-location-sec,body:has(.scb-season--valentine.scb-p-sections) .footer-wrapper,body:has(.scb-season--valentine.scb-p-sections) .food-card-1.style-2{position:relative} body:has(.scb-season--valentine.scb-p-sections) .scb-hero::after,body:has(.scb-season--valentine.scb-p-sections) #about::before,body:has(.scb-season--valentine.scb-p-sections) #reviews::before,body:has(.scb-season--valentine.scb-p-sections) #order::before,body:has(.scb-season--valentine.scb-p-sections) #catering::before,body:has(.scb-season--valentine.scb-p-sections) #catering::after,body:has(.scb-season--valentine.scb-p-sections) #restaurant-location-sec::before,body:has(.scb-season--valentine.scb-p-sections) .footer-wrapper::before,body:has(.scb-season--valentine.scb-p-sections) .food-card-1.style-2::after{content:"";position:absolute;pointer-events:none} /* The heart cluster lives here too, not on ::before: that pseudo is the hero dim, and covering it lit the photo back up under the headline. */ body:has(.scb-season--valentine.scb-p-sections) .scb-hero::after{left:0;right:0;bottom:-9px;height:60px;z-index:2;background:var(--scb-h2) 16px 2px/36px 31px no-repeat,var(--scb-h1) 46px 14px/22px 19px no-repeat,var(--scb-h1) 4px bottom/23px 19px repeat-x;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))} body:has(.scb-season--valentine.scb-p-sections) #about::before{top:0;left:0;width:150px;height:150px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cdefs%3E%3Cpath id='scb-vh' d='M0 0C5.5 4.4 6 11 0 16.5C-6 11 -5.5 4.4 0 0Z'/%3E%3C/defs%3E%3Cg stroke='%23801d36' stroke-width='2'%3E%3Cpath d='M-8 62 62 -8 84 -8 -8 84Z' fill='%23c62f52'/%3E%3Cpath d='M18 36 36 18M40 14 58 -4M-4 58 14 40' stroke='%23f7f2e2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='%23e24c74' stroke='%23801d36' stroke-width='1.6'%3E%3Cuse href='%23scb-vh' transform='translate(84 34) scale(1.9) rotate(12)'/%3E%3Cuse href='%23scb-vh' transform='translate(52 74) scale(1.35) rotate(-10)' fill='%23f4a9bb'/%3E%3Cuse href='%23scb-vh' transform='translate(96 78) scale(1) rotate(20)' fill='%23c62f52'/%3E%3Cuse href='%23scb-vh' transform='translate(30 104) scale(.7) rotate(-18)'/%3E%3C/g%3E%3Cg fill='%23f7f2e2' opacity='.8'%3E%3Ccircle cx='112' cy='22' r='2.4'/%3E%3Ccircle cx='70' cy='52' r='2'/%3E%3Ccircle cx='118' cy='108' r='2.2'/%3E%3Ccircle cx='14' cy='128' r='2'/%3E%3C/g%3E%3C/svg%3E") no-repeat left top/contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))} body:has(.scb-season--valentine.scb-p-sections) #reviews::before{top:14px;right:18px;width:66px;height:48px;background:var(--scb-ev) 0 0/100% no-repeat;transform:rotate(7deg);filter:drop-shadow(0 3px 4px #14212e40)} body:has(.scb-season--valentine.scb-p-sections) #order::before{top:12px;right:16px;width:128px;height:34px;background:var(--scb-h2) 50% 0/30px 26px no-repeat,var(--scb-h1) 0 8px/22px 19px no-repeat,var(--scb-h1) 100% 8px/22px 19px no-repeat} body:has(.scb-season--valentine.scb-p-sections) #catering::before{top:-1px;left:0;right:0;height:12px;background:radial-gradient(10px at 50% 0,#e05a7a 0 9px,#0000 10px) 0 0/30px 12px repeat-x} body:has(.scb-season--valentine.scb-p-sections) #catering::after{bottom:12px;right:12px;width:52px;height:44px;background:var(--scb-h2) 100% 0/30px 26px no-repeat,var(--scb-h1) 0 100%/22px 19px no-repeat;transform:rotate(9deg)} body:has(.scb-season--valentine.scb-p-sections) #restaurant-location-sec::before{top:12px;left:14px;width:50px;height:42px;background:var(--scb-h2) 0 0/28px 24px no-repeat;transform:rotate(-8deg)} body:has(.scb-season--valentine.scb-p-sections) .footer-wrapper::before{top:4px;left:0;right:0;height:16px;background:var(--scb-h1) 6px 0/19px 16px repeat-x;opacity:.75} body:has(.scb-season--valentine.scb-p-sections) .food-card-1.style-2::after{top:6px;right:6px;width:54px;height:54px;background:var(--scb-sl) 0 0/100% no-repeat;transform:rotate(-12deg);filter:drop-shadow(0 3px 5px #000a);z-index:3} body:has(.scb-season--valentine.scb-p-logo) .scb-hero-inner{position:relative} body:has(.scb-season--valentine.scb-p-logo) .scb-hero-inner::before{content:"";position:absolute;pointer-events:none;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 4px);left:50%;width:64px;height:84px;transform:translateX(62px) rotate(9deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 92'%3E%3Cpath d='M9 6v82' stroke='%2314212e' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='6' r='4.5' fill='%23FF9924' stroke='%2314212e' stroke-width='1.5'/%3E%3Cpath d='M12 12h54l-11 14 11 14H12z' fill='%23c62f45' stroke='%23701527' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath transform='translate(33 19) scale(.72)' d='M0 3C-2-1-5-3-8-3-12-2-13 2-11 5-9 10-4 14 0 17 4 14 9 10 11 5 13 2 12-2 8-3 5-3 2-1 0 3Z' fill='%23F7F2E2'/%3E%3C/svg%3E") 0 0/100% no-repeat;filter:drop-shadow(0 3px 4px #0008);z-index:2} @media (max-width:575px){.scb-heartline{transform:scale(.68);transform-origin:top center}.scb-rise--2,.scb-rise--4,.scb-rise--6,.scb-rise--8{display:none}body:has(.scb-season--valentine.scb-p-sections) .food-card-1.style-2::after{width:42px;height:42px}body:has(.scb-season--valentine.scb-p-sections) #reviews::before{width:50px;height:36px}body:has(.scb-season--valentine.scb-p-sections) .scb-hero::after{background-size:26px 22px,16px 14px,23px 19px}body:has(.scb-season--valentine.scb-p-logo) .scb-hero-inner::before{width:46px;height:60px;transform:translateX(44px) rotate(9deg)}} /*---------- july ---------- Dusk on the Fourth in El Paso: fabric bunting swags in navy, cream and firecracker red, with cream stars, scalloped hems and gold tassels, drape the whole top of the screen. Three to four LARGE multi-stage fireworks (gold, teal, red) climb as streaks, burst 175-260px wide into 20 trailing spark lines with glowing tips, then shed falling glitter, each on its own slow clock behind the bunting. Star confetti drifts down the page, sections get star trims and firework glints, and a waving stars-and-stripes pennant is planted beside the logo. ----------*/ .scb-swagline{position:absolute;z-index:2;top:var(--scb-header-h,133px);left:-14px;right:-14px;height:150px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 170'%3E%3Cpath d='M0,8H420' stroke='%23b4551b' stroke-width='4'/%3E%3Cpath d='M10,10Q210,60 410,10L410,34Q210,96 10,34Z' fill='%2314212e' stroke='%23F7F2E2' stroke-width='1.5'/%3E%3Cg fill='%23F7F2E2'%3E%3Cpolygon points='0,-7 2,-2 7,-2 3,1 4,6 0,3 -4,6 -3,1 -7,-2 -2,-2' transform='translate(90,39)'/%3E%3Cpolygon points='0,-7 2,-2 7,-2 3,1 4,6 0,3 -4,6 -3,1 -7,-2 -2,-2' transform='translate(210,50)'/%3E%3Cpolygon points='0,-7 2,-2 7,-2 3,1 4,6 0,3 -4,6 -3,1 -7,-2 -2,-2' transform='translate(330,39)'/%3E%3C/g%3E%3Cpath d='M10,34Q210,96 410,34L410,58Q210,132 10,58Z' fill='%23F7F2E2'/%3E%3Cpath d='M10,58Q210,132 410,58L410,82Q370,114 330,110Q290,134 250,123Q210,141 170,123Q130,134 90,110Q50,114 10,82Z' fill='%23d64541' stroke='%2314212e' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='12' r='5' fill='%23FF9924'/%3E%3Cpath d='M10,16C4,24 5,34 10,42C15,34 16,24 10,16Z' fill='%23FF9924'/%3E%3Ccircle cx='410' cy='12' r='5' fill='%23FF9924'/%3E%3Cpath d='M410,16C404,24 405,34 410,42C415,34 416,24 410,16Z' fill='%23FF9924'/%3E%3C/svg%3E") left top repeat-x;background-size:372px 150px;filter:drop-shadow(0 5px 6px #0a121c73)} .scb-pyro{position:absolute} .scb-pyro--a{left:16%;top:21%;--t:9.6s;--d:.8s} .scb-pyro--b{left:68%;top:19%;--t:12.4s;--d:4.2s;scale:.79;filter:hue-rotate(148deg)} .scb-pyro--c{left:42%;top:27%;--t:10.9s;--d:7.6s;scale:1.08;filter:hue-rotate(-46deg) saturate(1.3)} .scb-pyro--d{left:87%;top:23%;--t:13.7s;--d:2.5s;scale:.73} .scb-rise{position:absolute;left:-2px;top:-8px;width:4px;height:150px;border-radius:3px;transform-origin:top;background:linear-gradient(to top,#ff992400,#FF9924 55%,#F7F2E2);opacity:0;animation:scb-july-rise var(--t) ease-out var(--d) infinite} .scb-boom{position:absolute;display:block;width:240px;height:240px;left:-120px;top:-120px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='scb-july-g' gradientUnits='userSpaceOnUse' cx='100' cy='100' r='96'%3E%3Cstop offset='.28' stop-color='%23FF9924' stop-opacity='0'/%3E%3Cstop offset='.72' stop-color='%23FF9924'/%3E%3Cstop offset='1' stop-color='%23F7F2E2'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M128,100L192,100M127,109L187,128M123,116L174,154M116,123L154,174M109,127L128,187M100,128L100,192M91,127L72,187M84,123L46,174M77,116L26,154M73,109L13,128M72,100L8,100M73,91L13,72M77,84L26,46M84,77L46,26M91,73L72,13M100,72L100,8M109,73L128,13M116,77L154,26M123,84L174,46M127,91L187,72' stroke='url(%23scb-july-g)' stroke-width='4.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M192,100h.1M174,154h.1M128,187h.1M72,187h.1M26,154h.1M8,100h.1M26,46h.1M72,13h.1M128,13h.1M174,46h.1' stroke='%23F7F2E2' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:scale(.2);filter:drop-shadow(0 0 8px #ff992488);animation:scb-july-boom var(--t) ease-out var(--d) infinite} .scb-glit{position:absolute;left:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#F7F2E2;box-shadow:-60px 6px 0 #f92,-22px -16px 0 -1px #ffe,28px -8px 0 #f92,56px 12px 0 -1px #ffe,10px 26px 0 #f92,-40px 32px 0 -1px #ffe;opacity:0;animation:scb-july-glit var(--t) ease-in var(--d) infinite} .scb-stray{position:absolute;top:-30px;width:15px;height:15px;background:#FF9924;clip-path:polygon(50% 4%,61% 35%,94% 36%,68% 56%,77% 87%,50% 68%,23% 87%,32% 56%,6% 36%,39% 35%);opacity:.9;animation:scb-july-fall var(--t,22s) linear var(--d,0s) infinite} .scb-s1{left:7%;--t:19s;--d:-3s} .scb-s2{left:22%;--t:26s;--d:-14s;width:11px;height:11px} .scb-s3{left:38%;--t:22s;--d:-8s} .scb-s4{left:55%;--t:29s;--d:-19s;width:10px;height:10px} .scb-s5{left:71%;--t:21s;--d:-5s;width:12px;height:12px} .scb-s6{left:88%;--t:25s;--d:-11s} .scb-s2,.scb-s6{background:#54aea6} .scb-s4{background:#d64541} @keyframes scb-july-rise{0%{opacity:0;transform:translateY(230px) scaleY(.35)}3%{opacity:.95}10%{opacity:1;transform:translateY(-16px) scaleY(1)}12.5%,100%{opacity:0;transform:translateY(-34px) scaleY(.5)}} @keyframes scb-july-boom{0%,11.5%{opacity:0;transform:scale(.2) rotate(0)}14%{opacity:1;transform:scale(.5) rotate(4deg)}24%{opacity:.95;transform:scale(.9) rotate(8deg)}34%{opacity:.5;transform:scale(1.05) rotate(11deg)}42%,100%{opacity:0;transform:scale(1.12) rotate(13deg)}} @keyframes scb-july-glit{0%,21%{opacity:0;transform:translateY(-4px)}27%{opacity:1}39%{opacity:.75}54%,100%{opacity:0;transform:translateY(95px)}} @keyframes scb-july-fall{0%{transform:translate(0,-4vh) rotate(0)}50%{transform:translate(26px,48vh) rotate(170deg)}100%{transform:translate(-10px,104vh) rotate(345deg)}} body:has(.scb-season--july.scb-p-sections){--jg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 15'%3E%3Cpolygon points='13,1 14.4,5.6 18.7,5.7 15.3,8.2 16.5,12.4 13,9.9 9.5,12.4 10.7,8.2 7.3,5.7 11.6,5.6' fill='%23FF9924'/%3E%3C/svg%3E");--js:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,0C13,7 17,11 24,12C17,13 13,17 12,24C11,17 7,13 0,12C7,11 11,7 12,0Z' fill='%23FF9924'/%3E%3C/svg%3E")} body:has(.scb-season--july.scb-p-sections) #menu,body:has(.scb-season--july.scb-p-sections) #about,body:has(.scb-season--july.scb-p-sections) #reviews,body:has(.scb-season--july.scb-p-sections) #order,body:has(.scb-season--july.scb-p-sections) #catering,body:has(.scb-season--july.scb-p-sections) #restaurant-location-sec,body:has(.scb-season--july.scb-p-sections) .footer-wrapper,body:has(.scb-season--july.scb-p-sections) .food-card-1.style-2{position:relative} body:has(.scb-season--july.scb-p-sections) #menu::before,body:has(.scb-season--july.scb-p-sections) #reviews::before,body:has(.scb-season--july.scb-p-sections) #catering::before,body:has(.scb-season--july.scb-p-sections) #restaurant-location-sec::before,body:has(.scb-season--july.scb-p-sections) .footer-wrapper::before{content:"";position:absolute;left:0;right:0;top:8px;height:13px;background:var(--jg) 0 0/38px 13px repeat-x;opacity:.85} body:has(.scb-season--july.scb-p-sections) #reviews::before,body:has(.scb-season--july.scb-p-sections) #catering::before{filter:invert(1) brightness(.85);opacity:.8} body:has(.scb-season--july.scb-p-sections) #restaurant-location-sec::before{filter:hue-rotate(-46deg) saturate(1.5) brightness(.92)} body:has(.scb-season--july.scb-p-sections) #about::before,body:has(.scb-season--july.scb-p-sections) #order::before,body:has(.scb-season--july.scb-p-sections) #reviews::after{content:"";position:absolute;background:var(--js) center/contain no-repeat;filter:drop-shadow(0 0 5px #ff99248c)} body:has(.scb-season--july.scb-p-sections) #about::before{width:44px;height:44px;top:26px;right:28px} body:has(.scb-season--july.scb-p-sections) #order::before{width:40px;height:40px;top:26px;left:30px} body:has(.scb-season--july.scb-p-sections) #reviews::after{width:34px;height:34px;top:32px;left:26px;filter:hue-rotate(-32deg) saturate(1.5) brightness(.9) drop-shadow(0 1px 2px #14212e4d)} body:has(.scb-season--july.scb-p-sections) .food-card-1.style-2::after{content:"";position:absolute;top:9px;right:11px;width:22px;height:12px;background:var(--jg) center/contain no-repeat;opacity:.9} body:has(.scb-season--july.scb-p-logo) .scb-hero-inner{position:relative} body:has(.scb-season--july.scb-p-logo) .scb-hero-inner::before{content:"";position:absolute;z-index:3;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 2px);left:50%;transform:translateX(50px) rotate(12deg);width:86px;height:94px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 100'%3E%3Crect x='10' y='8' width='4' height='88' rx='2' fill='%23b4551b'/%3E%3Ccircle cx='12' cy='7' r='4.5' fill='%23FF9924'/%3E%3Cpath d='M14,14C38,6 58,20 84,12L82,50C58,58 38,44 14,52Z' fill='%23d64541' stroke='%2314212e' stroke-width='2'/%3E%3Cpath d='M14,23.5C38,15.5 58,29.5 83.5,21.5L83,31C58,39 38,25 14,33Z' fill='%23F7F2E2'/%3E%3Cpath d='M14,40C38,32 58,46 82.4,38L82.1,45C58,53 38,39 14,47Z' fill='%23F7F2E2'/%3E%3Cpath d='M14,14C26,10 36,12 44,13L43.4,34C36,33 26,31 14,35Z' fill='%2314212e'/%3E%3Cpolygon points='0,-5 1.2,-1.6 4.8,-1.6 1.9,.6 2.9,4.1 0,2 -2.9,4.1 -1.9,.6 -4.8,-1.6 -1.2,-1.6' transform='translate(28,23)' fill='%23F7F2E2'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 3px 5px #0a121c8c)} @media (max-width:575px){ .scb-swagline{background-size:280px 113px;height:113px;top:-6px} .scb-pyro--c,.scb-pyro--d,.scb-s2,.scb-s4{display:none} .scb-boom{width:170px;height:170px;left:-85px;top:-85px} .scb-pyro--a{left:26%;top:18%} .scb-pyro--b{left:72%;top:24%} .scb-rise{height:110px} body:has(.scb-season--july.scb-p-sections) #about::before,body:has(.scb-season--july.scb-p-sections) #order::before,body:has(.scb-season--july.scb-p-sections) #reviews::after{width:26px;height:26px} body:has(.scb-season--july.scb-p-logo) .scb-hero-inner::before{width:60px;height:66px;transform:translateX(36px) rotate(12deg)} } /*---------- newyear ---------- Midnight at a champagne toast: metallic curled ribbon streamers spill from the top of the screen in champagne gold, silver and brand gold, drawn as true corkscrew coils with cylindrical shading, while sparse confetti flutters and tumbles down and champagne-gold starbursts wink open only once every dozen seconds. Dark sections get rising champagne-bubble columns and curling gold flourishes, white sections get a scattered confetti garland trim, and the logo wears a tilted gold party hat with a cream pom-pom. ----------*/ .scb-ny-veil{position:absolute;inset:0;background:radial-gradient(85% 50% at 50% -10%,rgba(247,201,72,.16),transparent 62%),radial-gradient(55% 38% at -4% 104%,rgba(247,201,72,.09),transparent 62%),radial-gradient(55% 38% at 104% 104%,rgba(247,201,72,.09),transparent 62%)} .scb-ny-conf{position:absolute;top:0;left:var(--l);width:var(--w);height:var(--h);border-radius:2px;background:var(--c);box-shadow:0 0 0 1px rgba(20,33,46,.18),0 1px 2px rgba(20,33,46,.28);opacity:0;animation:scb-newyear-fall var(--d) linear var(--e) infinite,scb-newyear-flip var(--f) linear var(--e) infinite} .scb-ny-conf--o{border-radius:50%} .scb-ny-conf--r{animation-name:scb-newyear-fall2,scb-newyear-flip} @keyframes scb-newyear-fall{0%{translate:0 -8vh}6%{opacity:1}50%{translate:3.5vw 48vh}94%{opacity:1}100%{translate:-2vw 106vh;opacity:0}} @keyframes scb-newyear-fall2{0%{translate:0 -8vh}6%{opacity:1}50%{translate:-3.5vw 48vh}94%{opacity:1}100%{translate:2vw 106vh;opacity:0}} @keyframes scb-newyear-flip{from{rotate:1 .7 .2 0deg}to{rotate:1 .7 .2 360deg}} .scb-ny-spark{position:absolute;width:var(--s);height:var(--s);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);background:radial-gradient(circle,#fff 0 18%,#f7c948 45%,#e39b12 100%);filter:drop-shadow(0 0 4px rgba(247,201,72,.9)) drop-shadow(0 1px 1px rgba(20,33,46,.4));opacity:0;animation:scb-newyear-wink var(--wd) ease-in-out var(--we) infinite} @keyframes scb-newyear-wink{0%,84%,96%,100%{opacity:0;scale:.2}88%{opacity:1;scale:1}92%{opacity:.65;scale:.55}} @keyframes scb-newyear-fizz{to{background-position:0 -236px}} body:has(.scb-season--newyear.scb-p-sections) #menu,body:has(.scb-season--newyear.scb-p-sections) #about,body:has(.scb-season--newyear.scb-p-sections) #reviews,body:has(.scb-season--newyear.scb-p-sections) #order,body:has(.scb-season--newyear.scb-p-sections) #catering,body:has(.scb-season--newyear.scb-p-sections) #restaurant-location-sec,body:has(.scb-season--newyear.scb-p-sections) .footer-wrapper{position:relative} body:has(.scb-season--newyear.scb-p-sections) #menu::before,body:has(.scb-season--newyear.scb-p-sections) #order::before{content:"";position:absolute;bottom:0;left:1.5%;width:64px;height:52%;background-image:radial-gradient(circle at 14px 16px,rgba(247,201,72,.95) 3px,transparent 3.8px),radial-gradient(circle at 44px 54px,rgba(247,201,72,.7) 2.3px,transparent 3px),radial-gradient(circle at 28px 92px,rgba(255,255,255,.8) 1.7px,transparent 2.4px);background-size:64px 118px;-webkit-mask-image:linear-gradient(to top,#000 55%,transparent);mask-image:linear-gradient(to top,#000 55%,transparent);animation:scb-newyear-fizz 10.5s linear infinite} body:has(.scb-season--newyear.scb-p-sections) #order::before{left:auto;right:1.5%;animation-duration:13.5s} body:has(.scb-season--newyear.scb-p-sections) #menu::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,#FF9924 18% 82%,transparent);opacity:.7} body:has(.scb-season--newyear.scb-p-sections) #about::before,body:has(.scb-season--newyear.scb-p-sections) #about::after,body:has(.scb-season--newyear.scb-p-sections) #restaurant-location-sec::before,body:has(.scb-season--newyear.scb-p-sections) #restaurant-location-sec::after{content:"";position:absolute;top:10px;left:10px;width:92px;height:92px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FF9924' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 116C10 62 26 30 62 18C92 8 112 18 109 36C106 52 86 56 78 46C72 37 79 27 89 28'/%3E%3Cpath d='M14 116C22 84 34 62 54 50'/%3E%3C/g%3E%3Ccircle cx='104' cy='58' r='3' fill='%23FF9924'/%3E%3Ccircle cx='116' cy='30' r='2.5' fill='%2354aea6'/%3E%3Cpath d='M34 24l3 8 8 3-8 3-3 8-3-8-8-3 8-3z' fill='%23f7c948'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.9} body:has(.scb-season--newyear.scb-p-sections) #about::after,body:has(.scb-season--newyear.scb-p-sections) #restaurant-location-sec::after{left:auto;right:10px;transform:scaleX(-1)} body:has(.scb-season--newyear.scb-p-sections) #reviews::before,body:has(.scb-season--newyear.scb-p-sections) #catering::before{content:"";position:absolute;top:5px;left:0;right:0;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 24'%3E%3Cg stroke='%2314212e' stroke-width='.8'%3E%3Crect x='8' y='9' width='11' height='5' rx='1' fill='%23FF9924' transform='rotate(24 13 11)'/%3E%3Crect x='52' y='6' width='10' height='5' rx='1' fill='%2354aea6' transform='rotate(-30 57 8)'/%3E%3Crect x='96' y='10' width='11' height='5' rx='1' fill='%23f7c948' transform='rotate(12 101 12)'/%3E%3Crect x='143' y='7' width='10' height='5' rx='1' fill='%2314212e' transform='rotate(-18 148 9)'/%3E%3Crect x='186' y='9' width='11' height='5' rx='1' fill='%23FF9924' transform='rotate(32 191 11)'/%3E%3Ccircle cx='36' cy='14' r='3' fill='%23f7c948'/%3E%3Ccircle cx='122' cy='8' r='3' fill='%2354aea6'/%3E%3Ccircle cx='207' cy='6' r='2.5' fill='%2314212e'/%3E%3C/g%3E%3Cpath d='M72 4l2 5.5L79.5 11.5 74 13.5 72 19l-2-5.5L64.5 11.5 70 9.5z' fill='%23FF9924' stroke='%2314212e' stroke-width='.8'/%3E%3Cpath d='M166 6l1.7 4.8 4.8 1.7-4.8 1.7-1.7 4.8-1.7-4.8-4.8-1.7 4.8-1.7z' fill='%23f7c948' stroke='%2314212e' stroke-width='.8'/%3E%3C/svg%3E") repeat-x;background-size:auto 22px} body:has(.scb-season--newyear.scb-p-sections) #catering::before{transform:scaleX(-1)} body:has(.scb-season--newyear.scb-p-sections) .footer-wrapper::before{content:"";position:absolute;top:2px;left:0;right:0;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cpath d='M0 8h58M102 8h58' stroke='%23FF9924' stroke-width='1.6'/%3E%3Cpath d='M80 1l2.2 4.8 4.8 2.2-4.8 2.2L80 15l-2.2-4.8L73 8l4.8-2.2z' fill='%23f7c948'/%3E%3Ccircle cx='66' cy='8' r='2' fill='%23FF9924'/%3E%3Ccircle cx='94' cy='8' r='2' fill='%23FF9924'/%3E%3C/svg%3E") repeat-x;background-size:auto 16px} body:has(.scb-season--newyear.scb-p-logo) .scb-hero-inner{position:relative} body:has(.scb-season--newyear.scb-p-logo) .scb-hero-inner::before{content:"";position:absolute;z-index:3;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 2px);left:50%;transform:translateX(50px) rotate(11deg);width:86px;height:94px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 100'%3E%3Crect x='10' y='8' width='4' height='88' rx='2' fill='%23b4551b'/%3E%3Ccircle cx='12' cy='7' r='4.5' fill='%23FF9924'/%3E%3Cpath d='M14,14C38,6 58,20 84,12L82,50C58,58 38,44 14,52Z' fill='%2314212e' stroke='%2314212e' stroke-width='2'/%3E%3Cg transform='translate(49 31)' stroke='%23f7c948' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M0-10V-4M0 4V10M-10 0H-4M4 0H10M-7.5-7.5-3-3M3 3 7.5 7.5M-7.5 7.5-3 3M3-3 7.5-7.5'/%3E%3C/g%3E%3Ccircle cx='49' cy='31' r='3' fill='%23f7c948'/%3E%3Ccircle cx='28' cy='21' r='2' fill='%23f7c948'/%3E%3Ccircle cx='67' cy='22' r='2' fill='%2354aea6'/%3E%3Ccircle cx='63' cy='44' r='1.8' fill='%23F7F2E2'/%3E%3Ccircle cx='30' cy='43' r='1.8' fill='%2354aea6'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 3px 5px #0a121c8c);pointer-events:none} @media (max-width:575px){ .scb-ny-conf:nth-of-type(2n){display:none} .scb-ny-spark{--s:12px} body:has(.scb-season--newyear.scb-p-sections) #about::before,body:has(.scb-season--newyear.scb-p-sections) #about::after,body:has(.scb-season--newyear.scb-p-sections) #restaurant-location-sec::before,body:has(.scb-season--newyear.scb-p-sections) #restaurant-location-sec::after{width:56px;height:56px;top:6px} body:has(.scb-season--newyear.scb-p-sections) #menu::before,body:has(.scb-season--newyear.scb-p-sections) #order::before{width:44px;height:38%} body:has(.scb-season--newyear.scb-p-sections) #reviews::before,body:has(.scb-season--newyear.scb-p-sections) #catering::before{background-size:auto 16px;height:18px} body:has(.scb-season--newyear.scb-p-logo) .scb-hero-inner::before{width:60px;height:66px;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 2px);transform:translateX(36px) rotate(11deg)} } /*---------- mothers ---------- A lush hand-drawn floral garland drapes the full width of the viewport top: a double leafy vine dipping gracefully at center, loaded with clustered lavender sprigs (dozens of small purple florets on curved stems), scallop-edged roses, and gold-hearted white blossoms, densest at the corners. Rose and lavender petals flutter down occasionally on slow desynchronized paths, a matching posy tucks against the logo, and every section gets lavender sprig corners, petals resting on white section bottoms, a soft rose-lavender light over the hero, and a vine-and-lavender trim across the footer. ----------*/ body:has(.scb-season--mothers){--scb-mpo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-linecap='round' viewBox='0 0 96 74'%3E%3Cpath d='M30 48 16 60M66 46 82 58M48 52v16' stroke='%232e5a38' stroke-width='10'/%3E%3Cpath d='M24 42 10 36M72 40l14-6' stroke='%234c8153' stroke-width='9'/%3E%3Cpath d='M34 44C27 34 24 24 23 10' stroke='%232e5a38' stroke-width='2.5' fill='none'/%3E%3Cpath d='M62 44C69 34 72 24 73 10' stroke='%232e5a38' stroke-width='2.5' fill='none'/%3E%3Cpath d='M23 10v.1M18 17v.1M28 16v.1M20 25v.1M30 24v.1M22 33v.1M32 31v.1M73 10v.1M68 16v.1M78 17v.1M66 24v.1M76 25v.1M64 31v.1M74 33v.1' stroke='%23b28ae6' stroke-width='7'/%3E%3Cpath d='M23 14v.1M25 21v.1M27 29v.1M73 14v.1M71 21v.1M69 29v.1' stroke='%237c56b8' stroke-width='6'/%3E%3Cpath d='M59.5 45v.1M55.8 53.8v.1M47 57.5v.1M38.2 53.8v.1M34.5 45v.1M38.2 36.2v.1M47 32.5v.1M55.8 36.2v.1' stroke='%23a63052' stroke-width='14'/%3E%3Cpath d='M59.5 45v.1M55.8 53.8v.1M47 57.5v.1M38.2 53.8v.1M34.5 45v.1M38.2 36.2v.1M47 32.5v.1M55.8 36.2v.1' stroke='%23d5566f' stroke-width='11'/%3E%3Ccircle cx='47' cy='45' r='12.5' fill='%23d5566f'/%3E%3Cpath d='M47 36a9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9 5.5 5.5 0 0 1 5.5-5.5 5.5 5.5 0 0 1 5.5 5.5 2.5 2.5 0 0 1-2.5 2.5' fill='none' stroke='%23f4a9bb' stroke-width='2.6'/%3E%3Cpath d='M76 51v.1' stroke='%23c8b48c' stroke-width='18'/%3E%3Cpath d='M76 44.5v.1M82 49v.1M79.6 56v.1M72.4 56v.1M70 49v.1' stroke='%23F7F2E2' stroke-width='8'/%3E%3Cpath d='M76 50.5v.1' stroke='%23FF9924' stroke-width='6'/%3E%3C/svg%3E");--scb-mlv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-linecap='round' viewBox='0 0 56 66'%3E%3Cpath d='M24 64C22 50 16 38 10 30M28 64C28 48 28 32 28 16M32 64C36 50 42 38 48 28' stroke='%232e5a38' stroke-width='2.6' fill='none'/%3E%3Cpath d='M21 58l-11 4M35 56l11 6' stroke='%234c8153' stroke-width='8'/%3E%3Cpath d='M10 30v.1M6 35v.1M14 36v.1M9 41v.1M17 42v.1M12 47v.1M28 16v.1M23 22v.1M33 22v.1M25 29v.1M31 29v.1M23 36v.1M33 36v.1M48 28v.1M43 33v.1M51 34v.1M41 40v.1M49 41v.1M45 47v.1' stroke='%23b28ae6' stroke-width='6.5'/%3E%3Cpath d='M28 23v.1M28 35v.1M28 42v.1M11 36v.1M14 43v.1M47 35v.1M44 42v.1' stroke='%237c56b8' stroke-width='5.5'/%3E%3C/svg%3E");--scb-mp1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-linecap='round' viewBox='0 0 20 22'%3E%3Cpath d='M10 1C16.5 6 17.5 14 10 21C2.5 14 3.5 6 10 1Z' fill='%23ef93a8' stroke='%23b23a55' stroke-width='1.5'/%3E%3C/svg%3E");--scb-mrw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-linecap='round' viewBox='0 0 200 24'%3E%3Cg transform='translate(20 22) rotate(112)'%3E%3Cpath d='M0 0C5 4 5.5 10 0 15C-5.5 10 -5 4 0 0Z' fill='%23ef93a8' stroke='%23b23a55' stroke-width='1.4'/%3E%3C/g%3E%3Cg transform='translate(88 23) rotate(72)'%3E%3Cpath d='M0 0C5 4 5.5 10 0 15C-5.5 10 -5 4 0 0Z' fill='%23f4a9bb' stroke='%23b23a55' stroke-width='1.4'/%3E%3C/g%3E%3Cg transform='translate(156 22) rotate(95)'%3E%3Cpath d='M0 0C5 4 5.5 10 0 15C-5.5 10 -5 4 0 0Z' fill='%23ef93a8' stroke='%23b23a55' stroke-width='1.4'/%3E%3C/g%3E%3Cpath d='M54 19v.1M188 18v.1' stroke='%23a279dd' stroke-width='7'/%3E%3Cpath d='M120 19v.1' stroke='%237c56b8' stroke-width='6'/%3E%3C/svg%3E");--scb-mtr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-linecap='round' viewBox='0 0 140 24'%3E%3Cpath d='M0 8Q35 24 70 8T140 8' fill='none' stroke='%234c8153' stroke-width='3'/%3E%3Cpath d='M20 13v.1M35 17v.1M50 13v.1M90 13v.1M105 17v.1M120 13v.1' stroke='%23b28ae6' stroke-width='6.5'/%3E%3Cpath d='M27 16v.1M43 16v.1M70 9v.1M97 16v.1M113 16v.1' stroke='%237c56b8' stroke-width='5'/%3E%3C/svg%3E")} .scb-mgar-wrap{position:absolute;top:var(--scb-header-h,133px);left:0;right:0;height:200px} .scb-mvine{position:absolute;top:0;left:0;width:100%;height:176px;filter:drop-shadow(0 3px 4px #14082859)} .scb-mgar{position:absolute;background:center/contain no-repeat;filter:drop-shadow(0 3px 3px #1e0f3266)} .scb-mgar--p{width:96px;height:74px;background-image:var(--scb-mpo)} .scb-mgar--l{width:56px;height:66px;background-image:var(--scb-mlv)} .scb-mgar--f{transform:scaleX(-1)} .scb-mgar--c{transform:translateX(-50%) scale(1.15)} .scb-mgar--s{width:42px;height:50px} .scb-mpet{position:absolute;top:-32px;width:17px;height:19px;background:var(--scb-mp1) center/contain no-repeat;filter:drop-shadow(0 2px 2px #32194659);animation:scb-mothers-f1 21s linear infinite} .scb-mpet--b{width:14px;height:16px;filter:hue-rotate(-75deg) drop-shadow(0 2px 2px #32194659);animation-name:scb-mothers-f2} @keyframes scb-mothers-f1{0%{transform:translate(0,-4vh) rotate(0)}30%{transform:translate(4vw,30vh) rotate(95deg)}65%{transform:translate(-2vw,66vh) rotate(200deg)}100%{transform:translate(2vw,110vh) rotate(320deg)}} @keyframes scb-mothers-f2{0%{transform:translate(0,-4vh) rotate(0)}30%{transform:translate(-3vw,32vh) rotate(-85deg)}65%{transform:translate(2vw,68vh) rotate(-190deg)}100%{transform:translate(-2vw,110vh) rotate(-310deg)}} body:has(.scb-season--mothers.scb-p-sections){--scb-msw:58px;--scb-msh:70px} body:has(.scb-season--mothers.scb-p-sections) .scb-hero,body:has(.scb-season--mothers.scb-p-sections) #menu,body:has(.scb-season--mothers.scb-p-sections) #about,body:has(.scb-season--mothers.scb-p-sections) #reviews,body:has(.scb-season--mothers.scb-p-sections) #order,body:has(.scb-season--mothers.scb-p-sections) #catering,body:has(.scb-season--mothers.scb-p-sections) #restaurant-location-sec,body:has(.scb-season--mothers.scb-p-sections) .footer-wrapper,body:has(.scb-season--mothers.scb-p-sections) .food-card-1.style-2{position:relative} body:has(.scb-season--mothers.scb-p-sections) #menu::before,body:has(.scb-season--mothers.scb-p-sections) #about::before,body:has(.scb-season--mothers.scb-p-sections) #reviews::before,body:has(.scb-season--mothers.scb-p-sections) #order::before,body:has(.scb-season--mothers.scb-p-sections) #catering::before,body:has(.scb-season--mothers.scb-p-sections) #restaurant-location-sec::before,body:has(.scb-season--mothers.scb-p-sections) #restaurant-location-sec::after{content:"";position:absolute;top:10px;width:var(--scb-msw);height:var(--scb-msh);background:var(--scb-mlv) center/contain no-repeat;filter:drop-shadow(0 2px 3px #190c2d73);pointer-events:none} body:has(.scb-season--mothers.scb-p-sections) #menu::before{left:12px;transform:rotate(-12deg)} body:has(.scb-season--mothers.scb-p-sections) #about::before{left:14px;top:14px;transform:rotate(-15deg)} body:has(.scb-season--mothers.scb-p-sections) #reviews::before{left:12px;transform:rotate(-12deg)} body:has(.scb-season--mothers.scb-p-sections) #order::before{right:12px;transform:scaleX(-1) rotate(-10deg)} body:has(.scb-season--mothers.scb-p-sections) #catering::before{right:14px;transform:scaleX(-1) rotate(-8deg)} body:has(.scb-season--mothers.scb-p-sections) #restaurant-location-sec::before{left:12px;transform:rotate(-12deg)} body:has(.scb-season--mothers.scb-p-sections) #restaurant-location-sec::after{right:12px;transform:scaleX(-1) rotate(-12deg)} body:has(.scb-season--mothers.scb-p-sections) #reviews::after,body:has(.scb-season--mothers.scb-p-sections) #catering::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:var(--scb-mrw) left bottom/200px 24px repeat-x;pointer-events:none} body:has(.scb-season--mothers.scb-p-sections) .scb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(178,138,230,.18),rgba(239,147,168,.12) 45%,rgba(0,0,0,0) 75%);pointer-events:none} body:has(.scb-season--mothers.scb-p-sections) .footer-wrapper::before{content:"";position:absolute;top:0;left:0;right:0;height:24px;background:var(--scb-mtr) top/140px 24px repeat-x;pointer-events:none} body:has(.scb-season--mothers.scb-p-sections) .food-card-1.style-2::after{content:"";position:absolute;top:6px;right:6px;width:30px;height:36px;background:var(--scb-mlv) center/contain no-repeat;transform:scaleX(-1);pointer-events:none} body:has(.scb-season--mothers.scb-p-logo) .scb-hero-inner{position:relative} body:has(.scb-season--mothers.scb-p-logo) .scb-hero-inner::before{content:"";position:absolute;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 112px);left:50%;transform:translateX(34px) rotate(-10deg);width:92px;height:70px;background:var(--scb-mpo) center/contain no-repeat;filter:drop-shadow(0 3px 5px #14082880);pointer-events:none;z-index:3} @media (max-width:575px){ .scb-mgar-wrap{left:-50vw;right:-50vw;transform:scale(.5);transform-origin:50% 0} .scb-mgar--s,.scb-mpet:nth-of-type(2n){display:none} body:has(.scb-season--mothers.scb-p-sections){--scb-msw:42px;--scb-msh:52px} body:has(.scb-season--mothers.scb-p-sections) #reviews::after,body:has(.scb-season--mothers.scb-p-sections) #catering::after{height:18px;background-size:150px 18px} body:has(.scb-season--mothers.scb-p-sections) .food-card-1.style-2::after{display:none} body:has(.scb-season--mothers.scb-p-logo) .scb-hero-inner::before{width:62px;height:48px;transform:translateX(22px) rotate(-10deg)} } /*---------- fathers ---------- A backyard cookout for Dad: a rope bunting of neckties, spatulas, and tongs strung across the top of the screen, a hand-drawn kettle grill in the bottom-left corner puffing slow smoke wisps and the occasional rising ember over a warm charcoal glow, and a grill-master star rosette stamped on sections and menu cards. The logo's sun wears a tilted dad cap. ----------*/ .scb-cookline{position:absolute;top:var(--scb-header-h,133px);left:50%;transform:translateX(-50%);width:max(1500px,100vw);filter:drop-shadow(0 3px 5px rgba(20,33,46,.4))} .scb-cookline svg,.scb-pit svg{display:block;width:100%;height:auto} .scb-pit{position:absolute;left:16px;bottom:-4px;width:118px;filter:drop-shadow(0 4px 7px rgba(0,0,0,.4))} .scb-hearth{position:absolute;left:-40px;bottom:-20px;width:430px;height:150px;background:radial-gradient(closest-side at 120px 130px,rgba(255,153,36,.3),rgba(180,85,27,.12) 55%,transparent 78%);animation:scb-fathers-hearth 9s ease-in-out infinite} .scb-smokewisp{position:absolute;left:56px;bottom:110px;opacity:0;animation:scb-fathers-smoke 12s linear infinite;filter:drop-shadow(0 1px 2px rgba(20,33,46,.35))} .scb-smokewisp--b{left:72px;animation-duration:15.5s;animation-delay:5.2s} .scb-smokewisp--c{left:42px;animation-duration:19s;animation-delay:9.7s} .scb-ember{position:absolute;left:64px;bottom:102px;width:5px;height:5px;border-radius:50%;background:#FF9924;box-shadow:0 0 7px 2px rgba(255,153,36,.85);opacity:0;animation:scb-fathers-ember 8.5s linear infinite} .scb-ember--b{left:76px;animation-duration:12s;animation-delay:3.4s;animation-name:scb-fathers-ember2} .scb-ember--c{left:56px;animation-duration:14.5s;animation-delay:6.1s} .scb-ember--d{left:86px;animation-duration:17s;animation-delay:10.3s;animation-name:scb-fathers-ember2} @keyframes scb-fathers-smoke{0%{transform:translate(0,0) scale(.55);opacity:0}10%{opacity:.5}45%{opacity:.34;transform:translate(14px,-22vh) scale(1)}100%{transform:translate(38px,-52vh) scale(1.6);opacity:0}} @keyframes scb-fathers-hearth{0%,100%{opacity:.7}50%{opacity:1}} @keyframes scb-fathers-ember{0%,80%{opacity:0;transform:translate(0,0)}82%{opacity:1}98%{opacity:.9}100%{transform:translate(16px,-130px) scale(.3);opacity:0}} @keyframes scb-fathers-ember2{0%,86%{opacity:0;transform:translate(0,0)}88%{opacity:1}100%{transform:translate(-14px,-110px) scale(.3);opacity:0}} body:has(.scb-season--fathers.scb-p-sections) #menu,body:has(.scb-season--fathers.scb-p-sections) #catering,body:has(.scb-season--fathers.scb-p-sections) .footer-wrapper,body:has(.scb-season--fathers.scb-p-sections) #about,body:has(.scb-season--fathers.scb-p-sections) #reviews,body:has(.scb-season--fathers.scb-p-sections) #order,body:has(.scb-season--fathers.scb-p-sections) #restaurant-location-sec,body:has(.scb-season--fathers.scb-p-sections) .food-card-1.style-2{position:relative} body:has(.scb-season--fathers.scb-p-sections) #menu::before,body:has(.scb-season--fathers.scb-p-sections) .footer-wrapper::before{content:'';position:absolute;top:0;left:0;right:0;height:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='34'%3E%3Cpath d='M0,3H96' stroke='%23b4551b' stroke-width='3'/%3E%3Cg stroke='%2314212e' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M18,3h11l-2,5l2,16l-5.5,6l-5.5-6l2-16z' fill='%23FF9924'/%3E%3Cpath d='M66,3h11l-2,5l2,16l-5.5,6l-5.5-6l2-16z' fill='%23F7F2E2'/%3E%3C/g%3E%3C/svg%3E") repeat-x left top;pointer-events:none} body:has(.scb-season--fathers.scb-p-sections) #catering::before{content:'';position:absolute;top:0;left:0;right:0;height:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='34'%3E%3Cpath d='M0,3H96' stroke='%23153143' stroke-width='3'/%3E%3Cg stroke='%2314212e' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M18,3h11l-2,5l2,16l-5.5,6l-5.5-6l2-16z' fill='%23FF9924'/%3E%3Cpath d='M66,3h11l-2,5l2,16l-5.5,6l-5.5-6l2-16z' fill='%23153143'/%3E%3C/g%3E%3C/svg%3E") repeat-x left top;pointer-events:none} body:has(.scb-season--fathers.scb-p-sections) #about::after,body:has(.scb-season--fathers.scb-p-sections) #reviews::after,body:has(.scb-season--fathers.scb-p-sections) .food-card-1.style-2::after{content:'';position:absolute;top:16px;right:18px;width:54px;height:74px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 82'%3E%3Cg stroke='%2314212e' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20,44l-6,32l11-8l5,12l5-12l11,8l-6-32z' fill='%23b4551b'/%3E%3Ccircle cx='30' cy='28' r='22' fill='%23FF9924' stroke-width='2.5'/%3E%3Ccircle cx='30' cy='28' r='16' fill='none' stroke='%23F7F2E2' stroke-dasharray='3,4'/%3E%3Cpath d='M30,17.5l2.7,6.7l7.2,0.5l-5.5,4.7l1.7,7l-6.1-3.8l-6.1,3.8l1.7-7l-5.5-4.7l7.2-0.5z' fill='%2314212e'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none} body:has(.scb-season--fathers.scb-p-sections) #reviews::after{left:18px;right:auto} body:has(.scb-season--fathers.scb-p-sections) .food-card-1.style-2::after{width:30px;height:41px;top:8px;right:8px} body:has(.scb-season--fathers.scb-p-sections) #order::after{content:'';position:absolute;top:14px;right:16px;width:72px;height:72px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cg stroke='%2314212e' stroke-linejoin='round'%3E%3Cg transform='rotate(45,42,42)' fill='%23FF9924' stroke-width='2.5'%3E%3Crect x='39' y='6' width='6' height='30' rx='3'/%3E%3Crect x='31' y='34' width='22' height='24' rx='5'/%3E%3Cpath d='M38,40v12M46,40v12' fill='none' stroke='%23F7F2E2'/%3E%3C/g%3E%3Cg transform='rotate(-45,42,42)'%3E%3Cpath d='M42,12L33,56M42,12L51,56' stroke-width='8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M42,12L33,56M42,12L51,56' stroke='%23F7F2E2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='42' cy='12' r='4' fill='%23FF9924' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none} body:has(.scb-season--fathers.scb-p-sections) #restaurant-location-sec::after{content:'';position:absolute;bottom:12px;right:16px;width:60px;height:60px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cg stroke='%2314212e' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='29' y='4' width='12' height='5' rx='2.5' fill='%23b4551b'/%3E%3Cpath d='M10,28q1-18 25-18t25,18z' fill='%23153143'/%3E%3Cpath d='M22,48L16,64M48,48L54,64' stroke='%2354aea6' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='15' cy='65' r='4' fill='%23b4551b'/%3E%3Ccircle cx='55' cy='65' r='4' fill='%23b4551b'/%3E%3Cpath d='M10,33h50q-4,16 -25,16q-21,0 -25-16z' fill='%2314212e'/%3E%3Crect x='8' y='27' width='54' height='6' rx='3' fill='%23FF9924'/%3E%3Cpath d='M52,2q-6,4 0,9' stroke='%2354aea6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none} body:has(.scb-season--fathers.scb-p-logo) .scb-hero-inner{position:relative} body:has(.scb-season--fathers.scb-p-logo) .scb-hero-inner::before{content:"";position:absolute;z-index:3;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 2px);left:50%;transform:translateX(50px) rotate(10deg);width:86px;height:94px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 100'%3E%3Crect x='10' y='8' width='4' height='88' rx='2' fill='%23b4551b'/%3E%3Ccircle cx='12' cy='7' r='4.5' fill='%23FF9924'/%3E%3Cpath d='M14,14C38,6 58,20 84,12L82,50C58,58 38,44 14,52Z' fill='%23F7F2E2' stroke='%2314212e' stroke-width='2'/%3E%3Cpath d='M14,40C38,32 58,46 82.4,38L82.1,45C58,53 38,39 14,47Z' fill='%23FF9924'/%3E%3Cg fill='%2314212e' transform='translate(45 28) rotate(-40)'%3E%3Crect x='-5' y='-14' width='10' height='9' rx='2'/%3E%3Crect x='-1.5' y='-6' width='3' height='19' rx='1.5'/%3E%3C/g%3E%3Cg transform='translate(53 28) rotate(40)'%3E%3Cpath d='M-3.5-14v5M0-14v5M3.5-14v5' stroke='%2314212e' stroke-width='2.2'/%3E%3Crect x='-4.5' y='-10' width='9' height='4' rx='1.5' fill='%2314212e'/%3E%3Crect x='-1.5' y='-6' width='3' height='19' rx='1.5' fill='%2314212e'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 3px 5px #0a121c8c);pointer-events:none} @media (max-width:575px){ .scb-cookline{width:1040px} .scb-pit{left:6px;width:90px} .scb-smokewisp{left:38px;bottom:86px} .scb-smokewisp--b{left:52px} .scb-smokewisp--c,.scb-ember--c,.scb-ember--d{display:none} .scb-ember{left:46px;bottom:80px} .scb-ember--b{left:56px} .scb-hearth{width:300px;height:110px} body:has(.scb-season--fathers.scb-p-sections) #menu::before,body:has(.scb-season--fathers.scb-p-sections) .footer-wrapper::before,body:has(.scb-season--fathers.scb-p-sections) #catering::before{height:25px;background-size:auto 25px} body:has(.scb-season--fathers.scb-p-sections) #about::after,body:has(.scb-season--fathers.scb-p-sections) #reviews::after{width:40px;height:55px;top:10px;right:10px} body:has(.scb-season--fathers.scb-p-sections) #reviews::after{left:10px;right:auto} body:has(.scb-season--fathers.scb-p-sections) #order::after{width:50px;height:50px} body:has(.scb-season--fathers.scb-p-sections) #restaurant-location-sec::after{width:44px;height:44px} body:has(.scb-season--fathers.scb-p-logo) .scb-hero-inner::before{width:60px;height:66px;top:calc(var(--scb-header-h,133px) + 40px + var(--scb-hang,0px) + 2px);transform:translateX(36px) rotate(10deg)} } /* * Decoration that moves is exactly what this setting exists for. Every * animated element from every package is listed by its designer and hidden * outright; the still scenery stays, because a garland is not motion. */ @media (prefers-reduced-motion: reduce) { .snowflakes, .scb-boltjag, .scb-boom, .scb-ember, .scb-fall, .scb-fall--a, .scb-fall--b, .scb-fall--c, .scb-fall--d, .scb-flake, .scb-flashwash, .scb-fogx--b, .scb-glint, .scb-glit, .scb-hearth, .scb-heartline-set>g, .scb-mpet, .scb-ny-conf, .scb-ny-spark, .scb-rise, .scb-smokewisp, .scb-spidey, .scb-stray, .scb-vrise, .scb-vrise svg, .scb-yard-face, body:has(.scb-season--newyear.scb-p-sections) #menu::before, body:has(.scb-season--newyear.scb-p-sections) #order::before, scb-fogx--a, scb-mote { display: none !important; } } /* * Fewer and smaller on a phone. Fourteen animated layers on a small screen is * a lot of compositing for a battery, and at that width they crowd the copy. */ @media (max-width: 575px) { .snowflakes .snowflake:nth-of-type(n + 9) { display: none; } .snowflakes .snowflake { width: calc(var(--size, 24px) * 0.75); } } /*------- 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; /* 42, not 38. It was under the 44px that a fingertip actually needs, and it is the control the ORDER NOW button beside it is now sized to match, so the pair reads as a pair. */ width: 42px; height: 42px; flex: 0 0 auto; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 8px; 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: 20px; 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); } /*------- Order now -------*/ /* * TWO LINES IN THE HEIGHT OF ONE BUTTON. * * It used to be a chunky block with an inline width:30px on it, which the * theme's own min-width overrode, so the only thing the width achieved was * making "ORDER NOW" wrap onto two lines at whatever height that came to. It * towered over the menu button next to it. * * Now it is deliberately two lines, both of them chosen, and exactly as tall * as the menu button. The second line is the reason to press it: ordering * here costs less than ordering through an app, and that is worth saying on * the button rather than three screens further in. */ .scb-order-btn { flex-direction: column; gap: 2px; height: 42px; min-width: 0; padding: 0 16px; border-radius: 8px; line-height: 1; white-space: nowrap; } /* * INHERIT, because the theme paints every span in the header white. * * ".header-links li, .header-links span, .header-links p, .header-links a" * sets white, which is right for the phone number sitting on a dark bar and * wrong for a label inside a button. It also made this the only button in the * row with white lettering while Direct, UberEats and the rest were dark. */ .scb-order-btn .scb-order-btn__main, .scb-order-btn .scb-order-btn__note { color: inherit; } .scb-order-btn__main { font-size: 14px; letter-spacing: 0.06em; } .scb-order-btn__note { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; } /* * THE CLAIM ONLY GOES ON BUTTONS THAT ACTUALLY REACH SQUARE. * * On the desktop header, ORDER NOW is a link straight to the ordering page, * so "best prices" is a plain statement of fact. On a phone the same button * opens a chooser that includes the three delivery apps, where it would not * be true, so there it is one line and the claim moves to the Direct button * inside and to the hero button, both of which do go to Square. */ .scb-order-btn--plain { flex-direction: row; } .scb-order-btn--plain .scb-order-btn__main { font-size: 15px; } /* And in the panel it opens, the direct link goes first and says why, because it was last, behind the three that cost the customer more. */ .scb-order-direct { flex-direction: column; gap: 2px; line-height: 1; } .scb-order-direct__note { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; } /* The row of ordering buttons is a flex row that does not wrap, so the line under it has to be allowed onto a line of its own or it is squeezed to nothing between two buttons. */ #onlineOrderCollapse > li { flex-wrap: wrap; gap: 10px; } /* * ONE GAP, NOT THREE DIFFERENT ONES. * * The theme's .ordering-buttons puts a 10px margin on each side, and it is on * DoorDash and GrubHub but not on Direct or UberEats. Added to the flex gap * that produced 10, 20 and 30 pixels across a row of four, so the buttons * drifted further apart the further right they went. The gap above is the * only thing that should be spacing them. */ #onlineOrderCollapse > li > .th-btn { margin: 0; } /* Room at the sides, so the row does not run into the edge of the screen, and every button the same height whether its label is one line or two. */ #onlineOrderCollapse { padding: 10px 12px; } /* On the items, not the row: Bootstrap's .align-items-center utility carries !important, so the container cannot be told otherwise, but align-self on each item outranks the container's align-items either way. */ #onlineOrderCollapse > li > .th-btn { align-self: stretch; } @media (max-width: 575px) { /* Tighter buttons so four of them plus the new side padding still land on one row at 375px rather than wrapping one lonely app onto a second. */ #onlineOrderCollapse > li > .th-btn { padding-left: 14px; padding-right: 14px; } } .scb-order-note { width: 100%; margin: 8px 0 0; font-family: "Barlow Condensed", sans-serif; font-size: 13px; letter-spacing: 0.02em; text-align: center; color: rgba(255, 255, 255, 0.72); } .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; } /* * The hero's Order Online goes to the Square page, so on a phone it is one of * the buttons that can honestly say so. Hidden on desktop, where the header's * ORDER NOW is right there saying it already and two of them would nag. */ .scb-btn-best__note { display: none; } @media (max-width: 991.98px) { .scb-btn-best { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.1; } .scb-btn-best__note { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; opacity: 0.75; } } .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. */ /*============================================================== THE MENU SECTION It was cream (#F7F2E2) with white cards on it, and the cream read as dingy rather than warm: a yellowed off-white next to a pure white card looks like paper that has been left in the sun. It is dark now, and that is the point. Food photography is lit food against a dark ground, which is why every menu, every cookery book and every restaurant window does this. The tacos glow instead of sitting on a beige rectangle. It also fixes something that was quietly broken: the brand orange is 2.1:1 against that cream, which fails every contrast threshold there is. Against the dark card it is 6.5:1. The prices were the hardest thing on the page to read and they are now among the easiest. ONE PLACE TO CHANGE IT BACK. Everything below is written against these six variables. Light again is six values, not a rewrite. ==============================================================*/ .food-sec-1 { --menu-bg: #101C25; --menu-bg-2: #16252F; --menu-card: #1C2E3B; --menu-ink: #FFFFFF; --menu-ink-2: #AEBDC7; --menu-ink-3: #93A4B0; /* Not a flat fill. A very slight warm lift behind the middle of the section stops a large dark area reading as a black box, and picks up the colour of the food without anybody noticing it is there. */ background-color: var(--menu-bg); background-image: radial-gradient(120% 80% at 50% 0%, rgba(255, 153, 36, 0.09), transparent 62%), linear-gradient(180deg, var(--menu-bg-2) 0%, var(--menu-bg) 55%); } /* The heading above the cards has to come with it. */ .food-sec-1 .sec-title { color: var(--menu-ink); } .food-sec-1 .sub-title { color: var(--theme-color3); } /* * The cards LIFT off the background rather than being drawn on it. * * The old ones were outlined: a hairline border, almost no shadow, and an * orange border on hover. An outline is what you reach for when the card and * the page are nearly the same colour and it always looks like a form field. * A card that is a shade lighter than what it sits on, with a real shadow * under it, reads as an object on a surface, which is what a dish on a menu * should feel like. */ .food-card-1.style-2 { background: var(--menu-card); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 18px; overflow: hidden; height: 100%; text-align: left; display: flex; flex-direction: column; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 12px 28px rgba(0, 0, 0, 0.22); 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.42); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 22px 46px rgba(0, 0, 0, 0.38); } /* 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; /* Behind the photo while it loads, so a slow connection shows a shape in the right colour rather than a white flash. */ background: #23384a; } .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); } /* * The badge, the other way round. * * It was orange text in a dark box, which on a photograph reads as a caption * somebody forgot to remove. Solid orange with dark text on it is a label: * the same two colours, but now it is the badge that is bright and the words * that sit in it, which is how a "customer favourite" flash should behave. */ .scb-fav-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--theme-color3); color: #16232C; font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32); } /* 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(--menu-ink); } .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: var(--menu-ink-2); } /*------- 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; } } /* `display: flex` below beats the browser's own rule for [hidden], so the cards the script sets aside would otherwise all stay on screen. */ .scb-review-card[hidden] { display: none; } .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; } /* * THE INVERTED STATE IS FOR A POINTER, NOT A FINGER. * * This used to include :focus and a bare :hover. On a phone both of those * STICK after a tap, so the button sat inverted, white on white, until * something else was touched. The ORDER NOW button in the header spent its * life looking like an empty white box because of it. * * :hover only where hovering is a thing the device does, and :focus-visible * rather than :focus, so a keyboard still gets a state and a tap does not. * :active stays: that one is momentary and is the press feedback. */ .th-btn.btn-mask:active, .th-btn.btn-mask.active, .th-btn.btn-mask:focus-visible { background: #fff; color: #14212e; transform: translateY(-2px); } @media (hover: hover) { .th-btn.btn-mask:hover { 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. */ /* The sizes an item comes in, written by the Square sync rather than by hand. Set apart from the description in the accent colour because it is a fact about the item rather than part of the sentence somebody wrote about it. */ .scb-sizes { display: block; margin-top: 6px; color: var(--theme-color3); font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; } /* The Spanish line under each description. Quieter than the English above it but never faint: it is the whole description for some of the people reading it. Falls back to a dark-on-light pair anywhere outside the menu section, which is where the variables come from. */ .scb-es { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(255, 255, 255, 0.14); font-size: 14px; line-height: 1.55; color: var(--menu-ink-3, #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; } /* The price, set apart from the prose so it is the thing the eye lands on after the heading. It is the first question anybody asks about catering. */ /* * WHITE HERE WAS INVISIBLE. * * This panel is white, and the line shipped as white text on it, so all * anybody ever saw was a floating "$10.99" with no words around it. The * price is the first question every catering enquiry asks, and it was the * one part of the sentence nobody could read. * * The brand orange does not survive on white either: #FF9924 is 2.1:1 * against it, which fails at any size. The deeper orange below is the same * hue at 4.9:1, so it still reads as the brand colour and can actually be * read. */ .scb-catering-price { margin: 0 0 18px; font-size: 1.05rem; color: #33434e; } .scb-catering-price strong { color: #B4551B; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; } .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; } /* Disabled because it is mid-send: a wait, so the cursor says wait. */ .scb-form-submit[disabled] { opacity: 0.6; cursor: progress; } /* * Disabled because the form is not filled in yet, which is a different thing * and has to look like one. Plainly not ready, and the cursor says so rather * than promising something is happening. * * Written after the rule above deliberately: both weigh the same, and this is * the one that should win while both apply. */ .scb-form-submit.is-waiting { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.55); } /* 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; } } /*------- 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; } /*===================================================== Owner-editable content The notice bar and the featured band are written into index.html by the dashboard. Both are absent from the file entirely when nothing is running, so neither needs an "empty" state. =====================================================*/ /*===================================================== THE OPEN SIGN The answer to "are they open?" was at the bottom of the page next to the opening hours, which is where you put it for somebody looking it up and the wrong place entirely for somebody who has just arrived hungry. Built as a neon sign because that is what the question looks like on a real shopfront, and because the hero behind it is a dark photograph, which is the one background neon actually works against. HOW THE NEON IS DONE. A real tube is a thin bright core inside a wide soft halo of its own colour. So: near white letters, three text-shadows at increasing radius and decreasing opacity for the halo, a rounded border for the glass, and the same glow thrown both outward and inward on the box. The flicker is deliberately almost nothing, two brief dips a cycle, because a sign that strobes is a sign nobody can read. =====================================================*/ .scb-neon { /* Held as components so the glow can be built at any opacity without color-mix, which iOS 15 does not have. */ --neon-rgb: 77, 255, 166; /* * A LINE OF ITS OWN, centred. * * inline-flex put it alongside the hero logo, because the logo is an img * and an img is inline, so the two shared a line and the sign hung off the * side of it. flex plus max-content plus auto margins gives a block that is * only as wide as its own words and sits in the middle of them. */ display: flex; flex-direction: column; align-items: center; gap: 3px; width: max-content; max-width: 100%; margin: 2px auto 20px; padding: 11px 26px 13px; border: 2px solid rgba(var(--neon-rgb), 0.5); border-radius: 12px; background: rgba(0, 14, 9, 0.4); box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.4), 0 0 34px rgba(var(--neon-rgb), 0.18), inset 0 0 14px rgba(var(--neon-rgb), 0.2); animation: scb-neon-buzz 7s infinite; } .scb-neon-main { font-family: var(--banger-font); font-size: 30px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: #f2fff8; text-shadow: 0 0 5px rgba(var(--neon-rgb), 0.95), 0 0 14px rgba(var(--neon-rgb), 0.7), 0 0 32px rgba(var(--neon-rgb), 0.45); } .scb-neon-sub { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--neon-rgb), 0.92); text-shadow: 0 0 8px rgba(var(--neon-rgb), 0.5); } /* Shut is a different tube, not the same one dimmed: a warm red reads as "closed" at a glance where a dim green just reads as a broken sign. */ .scb-neon--shut { --neon-rgb: 255, 92, 92; } .scb-neon--shut .scb-neon-main { color: #fff1f1; } /* Two short dips in seven seconds. Any more and it is a fairground. */ @keyframes scb-neon-buzz { 0%, 41%, 43.5%, 46%, 92%, 93.5%, 100% { opacity: 1; } 42%, 45% { opacity: 0.72; } 93% { opacity: 0.8; } } /* A flickering sign is decoration, and decoration is the first thing to go for anyone who has asked their device to stop moving things. */ @media (prefers-reduced-motion: reduce) { .scb-neon { animation: none; } } /* Sold out outranks it, and that is decided in site.js rather than here: the sold-out bar appears on both pages and the hero ribbon only on one, so a CSS rule would have to know which page it was on. See the sign's own script, which simply leaves it hidden. */ @media (max-width: 575px) { .scb-neon { padding: 9px 20px 11px; margin-bottom: 16px; } .scb-neon-main { font-size: 25px; } .scb-neon-sub { font-size: 12px; letter-spacing: 0.12em; } } /*------- Notice bar -------*/ /* * PINNED ABOVE THE HEADER, like the sold-out band. * * It used to be in the flow: it sat at the top of the document, the fixed * header overlapped it, and it scrolled out of sight as soon as anybody * moved. Both halves of that were wrong. A notice the header covers is a * notice nobody reads, and somebody who arrives halfway down the page from a * link never saw it at all. * * Fixed instead, directly under the sold-out bar when there is one and at the * very top when there is not, with the header pushed down below both. * nav.js measures the two and publishes --scb-bars-h. */ .scb-notice { position: fixed; top: var(--scb-soldout-h, 0px); left: 0; right: 0; /* Above the fixed header, below the sold-out band, which is the one message that outranks everything else on the page. */ z-index: 1035; background: var(--theme-color3); color: #22160A; text-align: center; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); } .scb-notice p { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 17px; letter-spacing: 0.04em; line-height: 1.35; } /* The safe-area padding belongs to whichever bar is actually against the top of the screen. On a phone the status bar overlaps the page, but only the first bar is under it; adding the same padding to the second one would open a gap in the middle of the stack. The sold-out region is written into the page above the notice, so a sibling selector is enough to tell them apart without waiting for script. */ .scb-soldout ~ .scb-notice { padding-top: 10px; } .scb-notice--alert { background: #C0392B; color: #fff; } /*------- Featured band -------*/ .scb-featured { background: #14293A; padding: 56px 0; } .scb-featured-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 34px; } .scb-featured-media { flex: 1 1 300px; min-width: 0; border-radius: 14px; overflow: hidden; background: #0D1B26; } .scb-featured-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .scb-featured-text { flex: 1 1 340px; min-width: 0; color: #EEF4F8; } .scb-featured-eyebrow { display: inline-block; margin-bottom: 10px; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--theme-color3); } .scb-featured-heading { margin: 0 0 14px; color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: 0.01em; } .scb-featured-body { margin: 0 0 14px; color: rgba(238, 244, 248, 0.86); font-size: 1rem; line-height: 1.6; } .scb-featured .scb-btn { margin-top: 6px; } /* Picture first on a phone: it is the thing that makes somebody stop. */ @media (max-width: 767px) { .scb-featured { padding: 40px 0; } .scb-featured-inner { gap: 22px; } } /*------- Open now badge -------*/ /* Written by the dashboard into the hours block. Deliberately quiet when closed: "we are shut" should not be the loudest thing on the page. */ /* [hidden] means hidden, whatever else a rule says. The browser's own rule loses to any class that sets `display`, which is how a review card that was meant to be put aside stayed on screen and how the "open now" badge flashed empty on every load. Declared once so it cannot happen again. */ [hidden] { display: none !important; } /* The header sits BELOW both pinned bars, however many of them there are today: a sold-out band, a notice, both, or neither. One variable, so nothing has to know which. nav.js keeps it at their combined height. */ .fixed-top { top: var(--scb-bars-h, 0px); } /* And it is not shoved right up against them. The row of controls started a few pixels under the bar above it, which read as the two being one thing that had gone wrong rather than two bars sitting one above the other. */ .fixed-top.d-lg-none { padding-top: 12px; } /*============================================================== THE FULL MENU PAGE The SAME CARDS as the featured section on the front page, under a heading per category. It was rows with dotted leaders first, on the reasoning that a long menu is read rather than browsed. The cards won, and rightly: the photographs are the reason anybody is on either page, and the two pages showing the same dish two different ways is the kind of seam a visitor notices without being able to say why. SiteBuilder draws one card, in one method, used by both pages, so a change to a badge or a sold-out flash lands on both. ==============================================================*/ .scb-fullmenu { /* The same six values the featured section uses, so the shared cards find what they expect on this page too. */ --menu-bg: #101C25; --menu-bg-2: #16252F; --menu-card: #1C2E3B; --menu-ink: #FFFFFF; --menu-ink-2: #AEBDC7; --menu-ink-3: #93A4B0; display: block; /* Clears the fixed header, and the sold-out bar above it when there is one, from the same measurement everything else uses. */ padding: calc(var(--scb-header-h, 133px) + 44px) 0 70px; background-color: var(--menu-bg); background-image: radial-gradient(120% 60% at 50% 0%, rgba(255, 153, 36, 0.09), transparent 62%), linear-gradient(180deg, var(--menu-bg-2) 0%, var(--menu-bg) 40%); min-height: 100vh; } .scb-fullmenu .sec-title { color: var(--menu-ink); } .scb-fullmenu .sub-title { color: var(--theme-color3); } .scb-fullmenu-lede { max-width: 620px; margin: 10px auto 0; color: var(--menu-ink-2); font-size: 16px; line-height: 1.65; } .scb-fullmenu-group { margin-top: 54px; } /* A rule under the heading rather than around it: it separates one part of the menu from the next without boxing anything in, which would compete with the cards for the eye's attention. */ .scb-fullmenu-heading { margin: 0 0 26px; padding-bottom: 11px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: var(--theme-color3); font-family: "Barlow Condensed", sans-serif; font-size: clamp(21px, 4.6vw, 29px); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .scb-fullmenu-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 60px; } /* The way through from the featured few on the front page. */ .scb-fullmenu-link { margin-top: 38px; text-align: center; } /*---------------- The staff way back ----------------*/ /* * Only ever on screen for somebody who has signed in to the dashboard from * this browser, and site.js is what decides that. It sits bottom LEFT because * the back-to-top button already owns bottom right, and it is deliberately * quiet: this is a staff door, not something to compete with Order Online. */ .scb-to-dashboard { position: fixed; left: 16px; /* Clear of the iPhone's home indicator, which sits over the bottom of the page because the viewport is set to cover the whole screen. */ bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1035; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px 9px 13px; border-radius: 999px; background: rgba(13, 27, 38, 0.92); color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .scb-to-dashboard:hover, .scb-to-dashboard:focus-visible { background: rgba(13, 27, 38, 0.98); color: #fff; border-color: var(--theme-color3); } .scb-to-dashboard svg { flex: 0 0 auto; } /* * The word stays, at every width. * * It was being dropped below 420px to save room, and the result was a bare * grid icon in the corner of a taco website, which says nothing to anybody. * There is no room problem to solve: at 320px this ends around x=146 and the * back-to-top button starts around x=245. */ /*---------------- Sold out, across the hero ----------------*/ /* * The ribbon is a full-width strip, rotated, sitting over the hero picture. * * Rotated rather than drawn as a corner triangle because it has to carry two * lines of real text at a readable size on a 375px phone. A corner ribbon has * room for about eight characters before it starts shrinking the type, and * type this size is the entire point. * * The overflow is clipped by .scb-hero, so a strip wider than the screen has * its ends hidden rather than pushing the page sideways. That matters: a * horizontal scrollbar on a phone is the single most obvious way to make a * site feel broken. */ .scb-hero-soldout { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; /* Taps go through to the hero buttons underneath. This is a sign, not a control, and a customer who wants to order should not have to scroll past it to find a button it is covering. */ pointer-events: none; /* * The clipping lives HERE, not on .scb-hero. * * The strip is wider than the screen on purpose, so its ends have to be cut * off or the page scrolls sideways, and a horizontal scrollbar on a phone is * the fastest way to make a site feel broken. Putting `overflow: hidden` on * the hero itself would have done the same job and would have applied every * day of the year, including the ones this banner does not exist. Scoped to * the banner, it cannot affect a page that is not sold out. */ overflow: hidden; } .scb-hero-soldout-ribbon { width: 175%; padding: 16px 0 18px; transform: rotate(-13deg); background: rgba(143, 29, 29, 0.94); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42); text-align: center; /* Above the hero's own dark overlay, below nothing else. */ backdrop-filter: blur(1px); } .scb-hero-soldout-main, .scb-hero-soldout-sub { display: block; color: #fff; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; line-height: 1.02; } .scb-hero-soldout-main { font-weight: 700; /* Scales with the screen, so it fills a phone and a desktop equally. Capped so it cannot outgrow the strip on a very wide monitor. */ font-size: clamp(30px, 9vw, 86px); letter-spacing: 0.055em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .scb-hero-soldout-sub { margin-top: 6px; font-weight: 500; font-size: clamp(14px, 3.4vw, 30px); letter-spacing: 0.22em; opacity: 0.94; } @media (prefers-reduced-motion: reduce) { .scb-hero-soldout-ribbon { box-shadow: none; } } /*---------------- Sold out ----------------*/ /* Across the top of the page, above everything, because somebody about to drive over needs this before they need anything else on the page. Deep red rather than the site's orange: this is the one message here that is bad news, and it should not look like a promotion. */ .scb-soldout { /* * PINNED, not scrolled away. * * It was in the flow at the top of the document, which meant two things * went wrong: the fixed header floated over its top half, and it scrolled * out of sight the moment anybody moved. Somebody who lands halfway down * the page from a link, or scrolls to the menu first, never saw it at all. * * Fixed at the very top instead, above the header rather than behind it, * and the header is pushed down to sit underneath. nav.js measures this bar * and publishes its height as --scb-soldout-h so the header, the notice and * every anchor offset can all account for it. Measured rather than assumed * because the sentence wraps to two lines on a narrow phone. */ position: fixed; top: 0; left: 0; right: 0; z-index: 1040; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; padding: 13px 18px; /* The status bar on a phone overlaps the top of the page, because the viewport is set to cover the whole screen. */ padding-top: calc(13px + env(safe-area-inset-top, 0px)); background: #8f1d1d; color: #fff; font-family: "Barlow Condensed", sans-serif; font-size: 17px; letter-spacing: 0.03em; text-align: center; } .scb-soldout strong { color: #fff; text-transform: uppercase; letter-spacing: 0.09em; } .scb-soldout span { opacity: 0.9; } /* A sold-out card is dimmed, never removed. Somebody who came looking for quesabirrias has to be able to see they exist and are gone today, or the page reads as though they were never sold at all. */ .food-card-1.style-2.is-soldout { position: relative; } .food-card-1.style-2.is-soldout .thumb img { filter: grayscale(1); opacity: 0.45; } .food-card-1.style-2.is-soldout .content .price, .food-card-1.style-2.is-soldout .content .box-title a { opacity: 0.5; } /* Dimmed against a dark card needs a little more help than dimmed against a white one, or the whole card just disappears rather than reading as "still on the menu, gone today". */ .food-card-1.style-2.is-soldout { border-color: rgba(143, 29, 29, 0.55); } .food-card-1.style-2.is-soldout .thumb img { filter: grayscale(1) brightness(0.7); opacity: 0.55; } .scb-soldout-tag { position: absolute; top: 14px; right: 0; z-index: 3; padding: 5px 14px; background: #8f1d1d; color: #fff; font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 3px 0 0 3px; } /* What the headcount works out to, under the catering form's guests field. Empty until they type a number, so it never sits there as a stray line. */ .scb-quote { margin: 6px 0 0; font-family: "Barlow Condensed", sans-serif; font-size: 16px; color: var(--theme-color3, #ff9924); letter-spacing: 0.02em; } .scb-quote:empty { display: none; } /* Same trap as the review cards: `display: inline-flex` below beats the browser's own [hidden] rule, so an empty pill would flash on every load before site.js works out whether we are open. */ .scb-open-badge[hidden] { display: none; } .scb-open-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 5px 13px; border-radius: 999px; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(46, 158, 99, 0.16); color: #2E9E63; border: 1px solid rgba(46, 158, 99, 0.4); } .scb-open-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .scb-open-badge--shut { background: rgba(120, 130, 140, 0.14); color: #6F8798; border-color: rgba(120, 130, 140, 0.35); }