/* Fusion King — base, exactly as the design artboards define it. Page layout lives in the markup's own style attributes, ported verbatim from the artboards; this file carries only what a style attribute cannot express: resets, fonts, keyframes and :hover states. */ *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{background:#0B0A09} body{margin:0;background:#0B0A09;color:#F5F0E6; font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased} a{color:#F5F0E6;text-decoration:none} a:hover{color:#D9702B} img{max-width:100%} ::selection{background:#C8151E;color:#F5F0E6} @keyframes om-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes om-pulse{0%,100%{opacity:1;transform:none}45%{opacity:.5;transform:scale(1.3)}} @keyframes om-drift{from{transform:scale(1.02)}to{transform:scale(1.1)}} @keyframes om-float{from{transform:translateY(0)}to{transform:translateY(-10px)}} /* Reveal on scroll. Hidden only once JS confirms it can reveal them again, so the page is readable with JavaScript off. */ .js .anim{opacity:0} .js .anim.in{animation:om-rise .75s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)} .js .anim.done{animation:none;opacity:1} .js .mi.done,.js .ht.done{animation:none} /* The three panels on the home page — Eat in, Take away, Paying — lift on hover exactly as the dish cards above them do: same distance, same 0.35s curve. The border is !important because each panel carries its border inline. */ .card-lift{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease} .card-lift:hover{border:1px solid rgba(245,240,230,0.4)!important;color:#F5F0E6!important; transform:translateY(-6px)!important} /* The three shots beside 'Fusion, in the literal sense' drift up and down so the group never sits quite still. Each runs on its own period, and the negative delays start them mid-cycle so they are out of phase from the first frame rather than rising together and giving the trick away. */ .float{animation:om-float var(--fd,7s) ease-in-out infinite alternate; animation-delay:var(--fdelay,0s)} /* Rows and their chilli dots animate on load, exactly as the artboards do — NOT gated on the card's reveal. `both` holds the from-state through the delay, so each row starts hidden and rises on its own 0.035s cadence. */ .js .mi{animation:om-rise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--i,0s)} .js .ht{animation:om-pulse 1.1s ease 1 both;animation-delay:calc(var(--i,0s) + .45s)} /* When the restaurant is genuinely shut, everything but the announcement is drained of colour — so the announcement is the only thing still wearing any. A notice put up in advance of a closure leaves the site in full colour. */ [data-shut="1"] > *:not([data-notice]){filter:grayscale(.92);opacity:.72;transition:filter .5s ease,opacity .5s ease} /* The navigation keeps its colour drained but not its contrast. The design fades everything to 0.72, and the nav links are already rgba(245,240,230,0.72) — the two multiply to about 0.52 against a near-black bar, which is too faint to read. Someone arriving during a closure still wants the address, the phone number and the menu, so the one part of the page that must stay usable does. */ [data-shut="1"] > .site-header-wrap{opacity:1} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .js .anim{opacity:1} } /* :hover states, generated from the artboards’ style-hover attributes */ .hm0:hover{color:#F5F0E6!important} .hm1:hover{color:#F5F0E6!important} .hm2:hover{color:#F5F0E6!important} .hm3:hover{color:#F5F0E6!important} .hm4:hover{color:#F5F0E6!important} .hm5:hover{color:#D9702B!important} .hm6:hover{background-position:0 0!important;color:#F5F0E6!important} .hm7:hover{background-position:0 0!important;color:#0B0A09!important} .hm8:hover{border:1px solid #F5F0E6!important;background-position:0 0!important;color:#F5F0E6!important} .hm9:hover{color:#F5F0E6!important} .hm10:hover{border:1px solid rgba(245,240,230,0.4)!important;color:#F5F0E6!important;transform:translateY(-6px)!important} .hm11:hover{color:#F5F0E6!important} .hm12:hover{color:#F5F0E6!important} .hm13:hover{color:#D9702B!important} .hm14:hover{color:#D9702B!important} .hm15:hover{color:#D9702B!important} .hm16:hover{color:#D9702B!important} .hm17:hover{color:#D9702B!important} .hm18:hover{color:#D9702B!important} .hm19:hover{color:#D9702B!important} .hm20:hover{color:#D9702B!important} .hm21:hover{color:#D9702B!important} .hm22:hover{color:#D9702B!important} .hm23:hover{color:#D9702B!important} .hm24:hover{color:#D9702B!important} .hm25:hover{color:#D9702B!important} .hm26:hover{color:#D9702B!important} .hm27:hover{color:#D9702B!important} .vs0:hover{color:#F5F0E6!important} .vs1:hover{color:#F5F0E6!important} .vs2:hover{color:#F5F0E6!important} .vs3:hover{color:#F5F0E6!important} .vs4:hover{color:#D9702B!important} .vs5:hover{background-position:0 0!important;color:#F5F0E6!important} .vs6:hover{color:#F5F0E6!important} .vs7:hover{color:#D9702B!important} .vs8:hover{color:#F5F0E6!important} .vs9:hover{background-position:0 0!important;color:#F5F0E6!important} .vs10:hover{border:1px solid #F5F0E6!important;color:#F5F0E6!important} .vs11:hover{background-position:0 0!important;color:#F5F0E6!important} .vs12:hover{color:#D9702B!important} .vs13:hover{color:#D9702B!important} .vs14:hover{color:#D9702B!important} .vs15:hover{color:#D9702B!important} .vs16:hover{color:#D9702B!important} .vs17:hover{color:#D9702B!important} .vs18:hover{color:#D9702B!important} .vs19:hover{color:#D9702B!important} .vs20:hover{color:#D9702B!important} .vs21:hover{color:#D9702B!important} .vs22:hover{color:#D9702B!important} .vs23:hover{color:#D9702B!important} .vs24:hover{color:#D9702B!important} .vs25:hover{color:#D9702B!important} .mn0:hover{color:#F5F0E6!important} .mn1:hover{color:#F5F0E6!important} .mn2:hover{color:#F5F0E6!important} .mn3:hover{color:#F5F0E6!important} .mn4:hover{color:#D9702B!important} .mn5:hover{background-position:0 0!important;color:#F5F0E6!important} .mn6:hover{color:#D9702B!important} .mn7:hover{border:1px solid #F5F0E6!important;color:#F5F0E6!important} .mn8:hover{background-position:0 0!important;color:#F5F0E6!important} .mn9:hover{border:1px solid rgba(245,240,230,0.55)!important} .mn10:hover{border:1px solid rgba(245,240,230,0.34)!important;transform:translateY(-5px)!important} .mn11:hover{border:1px solid rgba(245,240,230,0.34)!important;transform:translateY(-5px)!important} .mn12:hover{color:#D9702B!important} .mn13:hover{color:#D9702B!important} .mn14:hover{color:#D9702B!important} .mn15:hover{color:#D9702B!important} .mn16:hover{color:#D9702B!important} .mn17:hover{color:#D9702B!important} .mn18:hover{color:#D9702B!important} .mn19:hover{color:#D9702B!important} .mn20:hover{color:#D9702B!important} .mn21:hover{color:#D9702B!important} .mn22:hover{color:#D9702B!important} .mn23:hover{color:#D9702B!important} .mn24:hover{color:#D9702B!important} .mn25:hover{color:#D9702B!important} .al0:hover{color:#F5F0E6!important} .al1:hover{color:#F5F0E6!important} .al2:hover{color:#F5F0E6!important} .al3:hover{color:#F5F0E6!important} .al4:hover{color:#D9702B!important} .al5:hover{background-position:0 0!important;color:#F5F0E6!important} .al6:hover{border:1px solid rgba(245,240,230,0.55)!important} .al7:hover{border:1px solid #F5F0E6!important;color:#F5F0E6!important} .al8:hover{color:#D9702B!important} .al9:hover{color:#D9702B!important} .al10:hover{color:#D9702B!important} .al11:hover{color:#D9702B!important} .al12:hover{color:#D9702B!important} .al13:hover{color:#D9702B!important} .al14:hover{color:#D9702B!important} .al15:hover{color:#D9702B!important} .al16:hover{color:#D9702B!important} .al17:hover{color:#D9702B!important} .al18:hover{color:#D9702B!important} .al19:hover{color:#D9702B!important} .al20:hover{color:#D9702B!important} .al21:hover{color:#D9702B!important} .al22:hover{color:#D9702B!important} .sg0:hover{color:#F5F0E6!important} .sg1:hover{color:#F5F0E6!important} .sg2:hover{color:#F5F0E6!important} .sg3:hover{color:#F5F0E6!important} .sg4:hover{color:#D9702B!important} .sg5:hover{background-position:0 0!important;color:#F5F0E6!important} .sg6:hover{transform:scale(1.08)!important;background:#E11B22!important} .sg7:hover{border:1px solid #F5F0E6!important;color:#F5F0E6!important} .sg8:hover{background-position:0 0!important;color:#F5F0E6!important} .sg9:hover{color:#D9702B!important} .sg10:hover{color:#D9702B!important} .sg11:hover{color:#D9702B!important} .sg12:hover{color:#D9702B!important} .sg13:hover{color:#D9702B!important} .sg14:hover{color:#D9702B!important} .sg15:hover{color:#D9702B!important} .sg16:hover{color:#D9702B!important} .sg17:hover{color:#D9702B!important} .sg18:hover{color:#D9702B!important} .sg19:hover{color:#D9702B!important} .sg20:hover{color:#D9702B!important} .sg21:hover{color:#D9702B!important} .sg22:hover{color:#D9702B!important} .oh0:hover{color:#F5F0E6!important} .oh1:hover{color:#F5F0E6!important} .oh2:hover{color:#F5F0E6!important} .oh3:hover{color:#F5F0E6!important} .oh4:hover{color:#D9702B!important} .oh5:hover{background-position:0 0!important;color:#F5F0E6!important} .oh6:hover{border:1px solid #F5F0E6!important;color:#F5F0E6!important} .oh7:hover{background-position:0 0!important} .oh8:hover{border:1px solid rgba(245,240,230,0.5)!important} .oh9:hover{border:1px solid #C8151E!important;color:#C8151E!important} .oh10:hover{border:1px solid #17140F!important} .oh11:hover{color:#D9702B!important} .oh12:hover{border:1px solid #17140F!important} .oh13:hover{border:1px solid #C8151E!important;color:#C8151E!important} .oh14:hover{color:#D9702B!important} .oh15:hover{color:#D9702B!important} .oh16:hover{color:#D9702B!important} .oh17:hover{color:#D9702B!important} .oh18:hover{color:#D9702B!important} .oh19:hover{color:#D9702B!important} .oh20:hover{color:#D9702B!important} .oh21:hover{color:#D9702B!important} .oh22:hover{color:#D9702B!important} .oh23:hover{color:#D9702B!important} .oh24:hover{color:#D9702B!important} .oh25:hover{color:#D9702B!important} .oh26:hover{color:#D9702B!important} .oh27:hover{color:#D9702B!important} .oh28:hover{color:#D9702B!important} /* ---------------------------------------------------------------- mobile nav -- The artboards lay the navigation out as one flat row, which runs off the side of a phone — "Build an order" wraps to three lines and the phone number and Facebook button fall off the screen entirely. Above 900px nothing here applies and the design is untouched; below it the same links become a panel. */ .nav-toggle{display:none} @media (max-width:900px){ .nav-toggle{ display:inline-flex;align-items:center;gap:9px;margin-left:auto; padding:9px 14px;background:transparent;cursor:pointer; border:1px solid rgba(245,240,230,.28);border-radius:2px; color:#F5F0E6;font-family:'Manrope',system-ui,sans-serif; font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600; min-height:44px; /* a comfortable thumb target */ } .nav-toggle .bars{position:relative;width:16px;height:2px;background:#F5F0E6;transition:background .2s} .nav-toggle .bars::before,.nav-toggle .bars::after{ content:"";position:absolute;left:0;width:16px;height:2px;background:#F5F0E6;transition:transform .25s} .nav-toggle .bars::before{top:-5px} .nav-toggle .bars::after{top:5px} .nav-toggle[aria-expanded="true"] .bars{background:transparent} .nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-5px) rotate(-45deg)} /* The nav's own inline styles stay; these override only what the phone needs. */ .site-nav{ display:none!important;flex-direction:column;align-items:stretch!important; gap:0!important;width:100%;margin-top:14px; border-top:1px solid rgba(245,240,230,.12); } .site-nav.open{display:flex!important} .site-nav > a{ padding:15px 2px;border-bottom:1px solid rgba(245,240,230,.1); font-size:15px!important;letter-spacing:.06em;min-height:44px; display:flex;align-items:center; } /* The Facebook button keeps its shape rather than stretching edge to edge. */ .site-nav > a:last-child{ margin-top:14px;border-bottom:0;justify-content:center; padding:15px 20px!important;background:#C8151E!important; } } @media (max-width:900px) and (prefers-reduced-motion:reduce){ .nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{transition:none} } /* ------------------------------------------------------------ touch targets -- The artboards are drawn for a mouse: several controls are 24-32px tall, which is fine to click and fiddly to tap. On a touch screen these get the room a thumb needs, without changing how any of them look on a desktop. */ @media (pointer:coarse){ .site-nav > a, button[data-cat],button[data-allergen],button[data-svc],button[data-when], button[data-pick],button[data-opt],button[data-act]{ min-height:44px; } button[data-pick],button[data-opt]{padding-top:11px;padding-bottom:11px} /* Remove/One-more sit side by side under a ticket line; keep them apart so a thumb cannot catch the wrong one. */ button[data-act="remove"],button[data-act="again"]{min-width:88px;margin-right:6px} } @media (max-width:900px){ /* Wide content scrolls inside its own box — the page itself never does. */ .table-scroll{-webkit-overflow-scrolling:touch} /* The ticket panel is sticky beside the menu on a desktop; on a phone that would pin a tall box over the dishes, so it simply sits in the flow. */ [style*="position:sticky"][style*="top:88px"]{position:static!important} } /* ------------------------------------------------------------- sticky top -- The notices and the navigation pin to the top of the window as one block. A closure announcement that scrolls away is no use, and the menu has to sit below it rather than slide up over it — which is what happened when each element stuck on its own. */ /* The orange strip and the navigation pin to the top of the window; the red band scrolls away with the page. They are direct children of the page root on purpose. A sticky element only pins while its PARENT is in view, so wrapping them in their own div made them scroll away as soon as that div's height was passed. The band carries the full announcement — heading, dates and the day-by-day list — and is left to scroll: pinning it too took three quarters of the window. The strip is what is worth keeping in view, and it repeats the same dates in one line. --strip-h is measured by sticky.js, because the strip's height depends on how its text wraps. */ [data-page-root] > [data-notice]:first-child{position:sticky;top:0;z-index:62} .site-header-wrap{position:sticky;top:var(--strip-h,0px);z-index:60} /* On a short screen the pinned block must not eat the page. The Christmas band is a full message, so past a point it scrolls with the content and only the closure bar and the menu stay pinned. */ @media (max-height:620px){ .sticky-top{position:static} } /* ------------------------------------------------- underline on hover ----- A coloured rule slides in under navigation and footer links. Movement reads as "interactive" more strongly than a colour change, so the hover colour can stay a single consistent orange while the underline carries which section you are heading for — the same coding the nav underlines and footer headings use. It is drawn as a pseudo-element rather than a border so nothing shifts when it appears, and it grows from the left rather than fading, which is easier to see in peripheral vision. */ .site-nav > a, footer a{position:relative} /* Footer links sit in a flex column, so a block-level link stretches the whole column width and its underline with it. Shrinking each link to its own text keeps the rule under the words rather than running off across the gap. */ footer a{width:fit-content;max-width:100%} .site-nav > a::after, footer a::after{ content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px; background:currentColor; /* overridden per link below */ transform:scaleX(0);transform-origin:left center; transition:transform .4s cubic-bezier(.2,.7,.2,1); } .site-nav > a:hover::after, footer a:hover::after{transform:scaleX(1)} /* The page you are already on keeps its own coloured marker and gets no hover rule — otherwise the two sit 4px apart and it reads as a double underline. */ .site-nav > a[data-current]::after{display:none} /* Each link's underline takes the colour of where it is going. */ .site-nav > a[href="/visit"]::after, .site-nav > a[href="/build-an-order"]::after, .fcol-visit a::after {background:#7FA53C} .site-nav > a[href="/menu"]::after, .site-nav > a[href="/songs"]::after, .fcol-eat a::after {background:#C8151E} .site-nav > a[href="/allergens"]::after, .fcol-follow a::after {background:#D9702B} /* The Facebook button is a button, not a link in a list — it has its own background-position hover and should not gain a rule underneath it. */ .site-nav > a:last-child::after{display:none} /* The wordmark and the phone number in the footer's first column keep theirs in the colour they already wear. */ footer a[href^="tel:"]::after{background:#7FA53C} @media (prefers-reduced-motion:reduce){ .site-nav > a::after,footer a::after{transition:none} } /* On the phone the nav is a stacked list where each row already has a divider beneath it, and there is no cursor to hover with — a second rule 4px below the first would just look like a mistake. */ @media (max-width:900px){ .site-nav > a::after{display:none} } @media (pointer:coarse){ .site-nav > a::after,footer a::after{display:none} } /* Staff login is not for customers. It stays a plain, quiet link — no hover colour and no underline — so it reads as a utility rather than something the page is inviting you to click. */ footer a[href="/admin"]::after{display:none} footer a[href="/admin"]:hover{color:rgba(245,240,230,.4)!important} /* Build an order: the order sits beside the dishes and follows you down. When it grows taller than the screen it scrolls on its own, so the ticket at the bottom is always in reach. */ .order-side{position:sticky;top:86px;max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain} @media (max-width:760px){ .order-side{position:static;max-height:none;overflow:visible} } /* The menu on a phone. Dish names and prices were set for a desktop screen: 15px and 13px read as deliberate there and as small in a queue outside, where most people actually open this. Sizes live here rather than inline so the phone can have its own without repeating the whole style. */ .mi-name{font-size:15px} .mi-price{font-size:13px} .mg-note{font-size:13px} @media (max-width:560px){ .mi-name{font-size:16px} .mi-price{font-size:14px} .mg-note{font-size:14px} }