/* The poco skin: design tokens, the two faces, buttons, cards, decorations, the navigation and the footer. Every rule the chrome needs and nothing that knows about a particular page. Extracted from templates/poco/_skin.blade.php on 2026-09-22; it was inlined into every poco page. Linked with a content hash (App\Support\StaticAsset), so the browser keeps it for a week and fetches it again only when a deploy changes it. Nothing here may depend on the page. The script font's URL is relative to this file, so it holds on a custom domain too. */ .skip-link{background:var(--ink);color:var(--canvas);border-radius:var(--radius)} .btn{border-radius:999px;font-family:var(--font-heading);font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.04em;padding:.95rem 1.9rem} /* Poco typography: two faces only. The theme font (Nunito on Subzy) for headings, body and buttons, and one calligraphic script for the accent lines. No doodle texture behind the canvas: the real photo cutouts carry the playfulness instead. */ body{background-image:none} /* A jump to a section of this same page glides rather than teleports, so the reader keeps their bearings and sees what they travelled past. Scoped to the motion-tolerant: an unrequested full-page glide is exactly what prefers-reduced-motion exists to switch off, and there the jump simply lands instead. */ @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} .display,.h2,h1,h2,h3{font-weight:900;letter-spacing:-.02em} .h2{font-size:clamp(2rem,1.5rem + 2.2vw,3.2rem);line-height:1.05} /* 'Macedonian Artistic' (ffonts.net) ships as a pre-Unicode font with the Macedonian alphabet parked on the Latin keys. The self-hosted woff2 is the same outlines re-mapped onto U+0400 Cyrillic code points, with the Latin letters removed, so real Macedonian text renders in it and any Latin word in a script line (a brand name, a URL) falls through to the theme font instead of coming out as Cyrillic look-alikes. */ /* The face is drawn small on its em square (a lowercase line reads about half the size of Lobster at the same font-size), so size-adjust scales it up in place of touching every script font-size; the hairlines get a thin stroke so the lines stay legible over photos and colour bands. */ @font-face{font-family:'Macedonian Artistic';src:url('../../fonts/macedonian-artistic.woff2') format('woff2');font-display:swap;size-adjust:165%} :root{--font-script:'Macedonian Artistic',var(--font-heading),cursive} /* Norican (SIL OFL 1.1, public/fonts/norican-OFL.txt), the trattoria skin's script, for a script line that has to be Latin: the loyalty band's "Coming soon" names it ahead of --font-script. Declared only, so a page that never asks for it never downloads it. */ @font-face{font-family:'Norican';src:url('../../fonts/norican-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} .script,.eyebrow-script,.banner-script,.delivery-bubble,.dark-promo-script{font-family:var(--font-script);font-style:normal;font-weight:400;letter-spacing:0;-webkit-text-stroke:.03em currentColor;paint-order:stroke fill} .eyebrow-script{font-size:clamp(1.4rem,1.2rem + .9vw,2rem);color:var(--accent-ink);margin-bottom:.45rem} /* size-adjust makes the script read a size and a half larger than its font-size says, which is too wide for a 390px column. */ @media (max-width:640px){.eyebrow-script{font-size:1.25rem}} .floater img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.18))} /* Floaters pop in once on load (scale, not transform, so it never fights the inline rotation or the drift engine), each a beat after the last. */ @keyframes floater-pop{from{scale:0;opacity:0}to{scale:1;opacity:1}} .floater img{animation:floater-pop .9s cubic-bezier(.2,1.5,.4,1) both} .floater:nth-of-type(2n) img{animation-delay:.15s} .floater:nth-of-type(3n) img{animation-delay:.3s} .floater:nth-of-type(4n) img{animation-delay:.45s} @media (prefers-reduced-motion:reduce){.floater img{animation:none}} /* Socials: the icon row at the foot of the links column. Round bordered buttons rather than bare glyphs, echoing the nav's .nav-icon, so they read as things to press; on hover they fill with the accent the same way the rest of the site's controls do. */ .poco-socials-label{margin:1.1rem 0 .5rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--canvas) 55%,transparent)} .poco-socials{display:flex;gap:.5rem;align-items:center;justify-content:center} .poco-socials a{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid color-mix(in srgb,var(--canvas) 28%,transparent);color:var(--canvas);transition:background-color .2s,border-color .2s,transform .2s} .poco-socials a:hover{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-primary-ink);transform:translateY(-2px)} .poco-socials a:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px} .poco-socials svg{width:1.05rem;height:1.05rem;display:block} /* Nav, Poco-style: logo, links, the scooter call-and-order block, then round icon buttons. On phones it turns into an app bar: burger left, logo centred, phone icon right, and a fixed bottom tab bar (below). */ /* The page frame: one width and one gutter for everything on this template that lines up with the page's edge - the navigation, every marketing block's .wrap, the footer, and on the ordering pages the content between them (poco/_ordering.blade.php) - so the brand, the hero, the menu's rail and the footer's first column share a left edge on every page. 96rem rather than the shared 72rem: at 1920px the 72rem frame left 670px of cream beside a menu squeezing its dishes between the rail and the basket. Sections that want a narrower measure for their own composition (testimonials, the loyalty band) keep setting it inside the frame. The gutter is fluid but never under the 1.5rem .wrap already used, so a phone is unchanged. */ :root{--poco-page:96rem;--poco-gutter:clamp(1.5rem,3vw,3rem)} .wrap{max-width:var(--poco-page);padding-inline:var(--poco-gutter)} .nav{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,.04)} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1rem;min-height:5.5rem} .nav-brand{display:flex;align-items:center;text-decoration:none;font-family:var(--font-heading);font-weight:800;font-size:1.25rem;color:var(--ink)} .nav-logo{height:3.4rem;width:auto;max-width:12rem;object-fit:contain} .nav-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12rem} .nav-links{display:flex;align-items:center;gap:.25rem} .nav-link{padding:.6rem .4rem;text-decoration:none;font-family:var(--font-heading);font-size:1.02rem;font-weight:700;color:var(--ink);white-space:nowrap} .nav-link:hover,.nav-link.is-active{color:var(--accent-ink)} .call-order{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink);margin-left:auto} .call-order-icon{width:3.4rem;height:3.4rem;color:var(--accent-ink);fill:currentColor} .call-order-label{display:block;font-size:.72rem;color:var(--ink-muted)} .call-order-phone{font-family:var(--font-heading);font-weight:800;font-size:1.35rem;color:var(--accent-ink);white-space:nowrap} .nav-icons{display:flex;align-items:center;gap:.5rem} .nav-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink);text-decoration:none;font-size:.75rem;font-weight:800} .nav-icon svg{width:1.3rem;height:1.3rem} .nav-icon:hover{border-color:var(--c-primary);color:var(--accent-ink)} /* The cart count comes from restaurant/_cart_regions so that the menu page's scripted add can swap it; that partial wraps it in a display:contents region, which generates no box, so the badge below still positions against the icon button exactly as it did when it was written inline here. It also renders nothing at all on an empty cart, which a hardcoded "0" did not. */ .ord-cart-region{display:contents} .nav-badge,.ord-cart-badge{position:absolute;top:-.3rem;right:-.3rem;min-width:1.2rem;height:1.2rem;padding:0 .3rem;border-radius:999px;background:var(--c-secondary);color:var(--c-secondary-ink);font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center} .nav-burger{display:none;width:2.6rem;height:2.6rem;border:0;background:none;padding:.5rem;cursor:pointer;flex-direction:column;justify-content:center;gap:.32rem} /* width:100% is not redundant. The bars are empty spans in a