/* Foundation is imported into a cascade layer, so every rule in this file beats it regardless of specificity (this stops Foundation's a:hover from recolouring link text). */ @import url("../vendor/foundation.min.css") layer(foundation); /* ========================================================================== Ranch & Roost — app.css Foundation supplies reset/grid utilities; everything visual is defined here. Breakpoints follow Foundation: small <640, medium 640–1023, large 1024+. ========================================================================== */ @font-face { font-family: 'Depressionist 3 Revisited'; src: url('../fonts/Depressionist3Revisited.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } :root { --rr-orange: #E8642C; --rr-orange-deep: #D95A18; --rr-navy: #343B65; --rr-navy-deep: #191E40; --rr-cream: #FDF5E6; --rr-ink: #2D2926; --rr-line: #E2D9C8; --rr-display: 'Depressionist 3 Revisited', Impact, 'Arial Narrow Bold', sans-serif; --rr-body: 'Gabarito', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Proxima Nova is a commercial Adobe Fonts licence; Manrope is the free stand-in until that is settled. */ --rr-ui: 'Manrope', 'Proxima Nova', system-ui, sans-serif; --rr-nav-h: 111px; --rr-nav-gap: 36px; --rr-topbar-h: 0px; /* Mobile-only hours strip above the nav; 0 everywhere else. */ --rr-gutter: 80px; --rr-max: 1440px; --rr-parallax: 11%; /* Location CTA background travel; tune live. */ } @media (max-width: 1199.98px) { :root { --rr-nav-gap: 12px; } } @media (max-width: 1023.98px) { :root { --rr-gutter: 40px; } } @media (max-width: 639.98px) { :root { --rr-gutter: 20px; --rr-nav-h: 84px; --rr-nav-gap: 8px; } } /* :has() lets the root-level var react to the body class; app.js then measures the real rendered height. */ @media (max-width: 639.98px) { :root:has(body.has-topbar) { --rr-topbar-h: 22px; } } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: #fff; color: var(--rr-ink); font-family: var(--rr-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body.rr-door-page { background: var(--rr-navy-deep); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--rr-body); font-weight: 700; line-height: 1.25; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .rr-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; padding: 12px 16px; } .rr-skip:focus { left: 8px; top: 8px; } :focus-visible { outline: 3px solid var(--rr-orange); outline-offset: 3px; } .rr-icon { display: inline-block; flex: none; } /* Display headings are typed in any case; the face is a caps face. */ .rr-module-title { font-family: var(--rr-display); font-weight: 400; font-size: clamp(30px, 4vw, 45px); line-height: 1.1; color: var(--rr-navy); text-transform: uppercase; } .rr-module-title--plain { font-family: var(--rr-body); font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -.01em; text-transform: none; color: var(--rr-navy); } /* ---------- WYSIWYG defaults (h3/h4/h5 only; plain sans, never the display face) ---------- */ .rr-wysiwyg { font-size: 16px; line-height: 1.6; color: var(--rr-ink); } .rr-wysiwyg > * + * { margin-top: 1em; } .rr-wysiwyg h3, .rr-wysiwyg h4, .rr-wysiwyg h5 { font-family: var(--rr-body); margin: 1.5em 0 .5em; } .rr-wysiwyg h3 { font-size: 28px; font-weight: 700; color: var(--rr-navy); line-height: 1.25; } .rr-wysiwyg h4 { font-size: 21px; font-weight: 700; color: var(--rr-navy); line-height: 1.3; } .rr-wysiwyg h5 { font-size: 16px; font-weight: 700; color: var(--rr-ink); line-height: 1.4; text-transform: uppercase; letter-spacing: 1px; } .rr-wysiwyg > :first-child { margin-top: 0; } .rr-wysiwyg ul, .rr-wysiwyg ol { padding-left: 1.4em; } .rr-wysiwyg ul { list-style: disc; } .rr-wysiwyg ol { list-style: decimal; } .rr-wysiwyg a { color: var(--rr-orange-deep); text-decoration: underline; } .rr-wysiwyg--light, .rr-wysiwyg--light h3, .rr-wysiwyg--light h4, .rr-wysiwyg--light h5, .rr-wysiwyg--light a { color: #fff; } /* ========================================================================== Navigation — 111px in both states; content swaps rather than the bar shrinking ========================================================================== */ /* Mobile-only strip above the nav, showing just the open/closed status in small, minimal-padding text. */ .rr-topbar { display: none; } @media (max-width: 639.98px) { .rr-topbar { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 101; background: var(--rr-navy-deep); color: rgba(255, 255, 255, .85); padding: 4px 12px; text-align: center; font-family: var(--rr-ui); font-style: italic; font-weight: 600; font-size: 10.5px; line-height: 1.3; } .admin-bar .rr-topbar { top: 46px; } } .rr-nav { position: fixed; top: var(--rr-topbar-h); left: 0; right: 0; z-index: 100; height: var(--rr-nav-h); display: flex; align-items: center; justify-content: space-between; padding-right: 20px; background: rgba(25, 30, 64, .1); transition: background .3s ease, box-shadow .3s ease; } .rr-nav.is-solid { background: var(--rr-navy-deep); } .rr-nav.is-scrolled { background: linear-gradient(to right, rgba(25, 30, 64, .4), rgba(25, 30, 64, .9)); box-shadow: 4px 4px 20px rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .admin-bar .rr-nav { top: calc(32px + var(--rr-topbar-h)); } @media (max-width: 782px) { .admin-bar .rr-nav { top: calc(46px + var(--rr-topbar-h)); } } .rr-nav__logo { flex: none; align-self: stretch; width: 198px; background: var(--rr-orange-deep); display: flex; align-items: center; justify-content: center; } .rr-nav__logo img { width: 95px; height: auto; } /* Right cluster: location pills + Order Online button share one uniform gap (--rr-nav-gap). */ .rr-nav__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--rr-nav-gap); flex: 1; min-width: 0; margin-left: 24px; } .rr-nav__tabs { display: flex; align-items: center; gap: var(--rr-nav-gap); } /* Order Online button (burger glyph + label). */ .rr-nav__order { flex: none; height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 22px 0 14px; background: var(--rr-orange); border-radius: 10px; color: #fff; text-decoration: none; white-space: nowrap; transition: background .2s; } .rr-nav__order:hover { background: var(--rr-orange-deep); } .rr-nav__order img { width: 40px; height: auto; } .rr-nav__order-label { font-family: var(--rr-display); font-size: 25px; line-height: 1; text-transform: uppercase; padding-top: 3px; } .rr-nav__order:focus-visible { outline-color: #fff; } .rr-pill { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 999px; white-space: nowrap; font-family: var(--rr-ui); font-size: 19px; font-weight: 400; color: var(--rr-cream); text-decoration: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); transition: background .2s; } a.rr-pill:hover { background: rgba(255, 255, 255, .18); } .rr-nav:not(.is-scrolled) a.rr-pill { font-weight: 600; } .rr-pill--active { position: relative; background: var(--rr-orange); border-color: var(--rr-orange); color: #fff; font-size: 21px; padding: 0 16px 0 20px; gap: 14px; justify-content: center; } .rr-nav__tabs .rr-pill--active { order: 2; } /* Active location sits nearest the Order Online button, as drawn. */ .rr-pill__name { font-weight: 500; } .rr-pill__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .85); } /* Always the hours/open-status, never swapped for an "Order Online" CTA on scroll — the nav already has the standalone Order Online button for that. */ .rr-pill__status { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; } /* Tablet and below: the pill status drops away (the Order Online button carries it). */ @media (max-width: 1199.98px) { .rr-nav__logo { width: 150px; } .rr-nav__logo img { width: 78px; } .rr-nav__right { margin-left: 12px; } .rr-pill__sep, .rr-pill__status { display: none; } .rr-nav__order { height: 52px; padding: 0 16px 0 10px; gap: 8px; } .rr-nav__order img { width: 32px; } .rr-nav__order-label { font-size: 20px; } .rr-pill { font-size: 16px; } .rr-pill--active { font-size: 17px; } } /* Mobile: a single row — logo, one location pill (name + chevron) that opens a dropdown to switch, and the Order Online button beside it. The open/closed status runs in the .rr-topbar strip above the whole nav instead of inside the pill — there wasn't room for it alongside the name without truncating the name. */ .rr-loc-drop { display: none; } @media (max-width: 639.98px) { .rr-nav { padding-right: 10px; } .rr-nav__logo { width: 72px; } .rr-nav__logo img { width: 46px; } .rr-nav__right { margin-left: 8px; gap: 8px; } .rr-nav__tabs { display: none; } /* replaced by the dropdown below */ /* No min-width: 0 here — the pill is allowed to grow to fit the location name in full, never truncate it. */ .rr-loc-drop { display: flex; position: relative; flex: 1 1 auto; } .rr-loc-drop__toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; padding: 0 16px; border-radius: 999px; background: var(--rr-navy-deep); border: 1px solid rgba(255, 255, 255, .15); color: #fff; } .rr-loc-drop__name { font-family: var(--rr-ui); font-weight: 700; font-size: 15px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; } .rr-loc-drop__caret { flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; } .rr-loc-drop.is-open .rr-loc-drop__caret { transform: rotate(-135deg); } .rr-loc-drop__menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; margin: 0; padding: 6px 0; background: var(--rr-navy-deep); border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; box-shadow: 0 12px 24px rgba(0, 0, 0, .35); overflow: hidden; } .rr-loc-drop__menu[hidden] { display: none; } .rr-loc-drop__menu a { display: block; padding: 12px 16px; font-family: var(--rr-ui); font-size: 15px; font-weight: 500; color: var(--rr-cream); text-decoration: none; } .rr-loc-drop__menu a:hover, .rr-loc-drop__menu a:focus-visible { background: rgba(255, 255, 255, .08); } .rr-loc-drop__menu a.is-current { color: var(--rr-orange); font-weight: 700; } /* Order Online, trimmed down a bit to leave the pill more room, and pill-shaped to match the location dropdown rather than clashing as a third, differently-rounded button shape. */ .rr-nav__order { flex: none; height: 48px; padding: 0 14px; gap: 6px; border-radius: 999px; } .rr-nav__order img { width: 18px; } .rr-nav__order-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 13px; padding-top: 2px; white-space: nowrap; } } @media (max-width: 359.98px) { .rr-nav__logo { width: 60px; } .rr-nav__right { margin-left: 6px; gap: 6px; } .rr-loc-drop__toggle { padding: 0 12px; } .rr-loc-drop__name { font-size: 13.5px; } .rr-nav__order { padding: 0 8px; } .rr-nav__order-label { font-size: 11.5px; } } body.no-hero main { padding-top: calc(var(--rr-nav-h) + var(--rr-topbar-h)); } /* ========================================================================== Location Hero + info bar ========================================================================== */ .rr-hero { position: relative; min-height: 670px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: calc(var(--rr-nav-h) + var(--rr-topbar-h)) var(--rr-gutter) 40px; color: #fff; } .rr-hero__media { position: absolute; inset: 0; } .rr-hero__media img, .rr-hero__video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .rr-hero__video { display: none; } @media (min-width: 640px) { .rr-hero__video.is-ready { display: block; } } .rr-hero__overlay { position: absolute; inset: 0; background: rgba(52, 59, 101, .55); } .rr-hero__content { position: relative; max-width: 1270px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .rr-hero__title { font-family: var(--rr-display); font-weight: 400; color: var(--rr-cream); font-size: clamp(44px, 7vw, 88px); line-height: 1.1; text-transform: uppercase; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); } .rr-hero__word { display: inline-block; animation: rr-rise .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 120ms); } .rr-hero__subtitle { font-family: var(--rr-ui); font-size: clamp(18px, 2vw, 25px); line-height: 1.6; max-width: 720px; } @keyframes rr-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rr-hero__word { animation: none; } } .rr-infobar { background: var(--rr-navy-deep); border-bottom: 1px solid var(--rr-line); color: #fff; } .rr-infobar__inner { max-width: var(--rr-max); margin: 0 auto; padding: 24px var(--rr-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 96px; } .rr-infobar__item { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; } .rr-infobar__item a { text-decoration: none; } .rr-infobar__item--link a { color: var(--rr-orange); text-decoration: underline; display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 1023.98px) { .rr-infobar__inner { gap: 12px 40px; } .rr-infobar__item { font-size: 16px; } } /* ========================================================================== Intro Content ========================================================================== */ .rr-intro { background: #fff; } .rr-intro__inner { max-width: var(--rr-max); margin: 0 auto; padding: 96px var(--rr-gutter) 81px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .rr-intro__text { display: flex; flex-direction: column; gap: 24px; } .rr-intro__panel { display: flex; flex-direction: column; gap: 24px; } .rr-kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: var(--rr-orange); } .rr-kicker__bar { width: 16px; height: 3px; background: var(--rr-orange); flex: none; } .rr-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rr-badge { display: flex; align-items: center; gap: 12px; background: var(--rr-cream); border-radius: 6px; padding: 12px 16px; } .rr-badge__icon { width: 32px; height: 32px; border-radius: 16px; background: var(--rr-orange); display: flex; align-items: center; justify-content: center; flex: none; } .rr-badge__label { font-size: 14px; font-weight: 600; color: var(--rr-navy); line-height: 1.3; } .rr-bullets { columns: 2; column-gap: 24px; font-size: 14px; font-weight: 700; line-height: 1.6; } .rr-bullets li { break-inside: avoid; position: relative; padding-left: 16px; } .rr-bullets li::before { content: '•'; position: absolute; left: 0; } @media (max-width: 1023.98px) { .rr-intro__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 56px; } } @media (max-width: 639.98px) { .rr-badges { grid-template-columns: 1fr; } .rr-bullets { columns: 1; } } /* ========================================================================== Single Feature — full-bleed photo callout for one dish (Figma: "Single Feature") ========================================================================== */ .rr-feature { --rr-feature-w: 560px; /* the text column's own max-width — the overlay below tracks this, not an arbitrary section fraction */ position: relative; overflow: hidden; min-height: 560px; background: var(--rr-navy-deep); } .rr-feature__media { position: absolute; inset: 0; } .rr-feature__media img { width: 100%; height: 100%; object-fit: cover; } /* On ultra-wide screens the centered content column stops short of the section's true edges — this keeps that outer strip solid instead of showing bare, undarkened photo past the text column. */ .rr-feature__side { position: absolute; inset: 0; right: auto; width: max(0px, calc((100% - var(--rr-max)) / 2)); background: var(--rr-navy-deep); } /* Centered to the same max-width column every other module content lines up to, so the headline here sits at the same left edge as "Featured Flavors", the intro copy, etc. */ .rr-feature__inner { position: absolute; inset: 0; max-width: var(--rr-max); margin: 0 auto; display: flex; align-items: center; } /* Opaque (matching .rr-feature__side exactly) for a short stretch — just enough that the photo's own left edge never shows as a hard seam against that solid panel — then a long, gentle fade across nearly the whole rest of the image. The fade deliberately runs UNDER the text column too, so the photo shows through faintly behind the copy rather than sitting on a flat solid block. */ .rr-feature__overlay { position: absolute; inset: 0; background: linear-gradient(to right, var(--rr-navy-deep) 0%, var(--rr-navy-deep) 6%, transparent 92%); } .rr-feature__content { position: relative; max-width: var(--rr-feature-w); padding: 48px var(--rr-gutter); display: flex; flex-direction: column; align-items: flex-start; gap: 28px; color: #fff; } .rr-feature__badge { display: inline-flex; align-items: center; padding: 10px 34px 10px 18px; margin-left: -4px; background: var(--rr-orange); border: 3px solid #fff; color: #fff; font-family: var(--rr-display); font-weight: 400; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; /* Concave — a notch cut INTO the right edge (classic ribbon-tail), not a point sticking out past it. */ clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%); } /* Extra-specific selector: .rr-btn is defined later in the file and would otherwise win this on source order alone, since a bare .rr-feature__cta has the same specificity as a bare .rr-btn. */ .rr-feature__content .rr-feature__cta { font-family: var(--rr-display); font-weight: 400; font-size: 20px; padding: 16px 32px; } /* A clean, non-distressed weight — deliberately distinct from the site's usual display headings, to read as a promo sticker rather than another section title. */ .rr-feature__title { font-family: var(--rr-body); font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; } .rr-feature__text { font-size: 17px; line-height: 1.5; } @media (max-width: 639.98px) { .rr-feature { min-height: 640px; } .rr-feature__inner { align-items: flex-start; } /* Full-bleed again on mobile (the side/inner max-width split is a no-op below --rr-max anyway, but the overlay still needs resetting: full width, and darkening the TOP — where the text sits — instead of the left, since content stacks rather than sitting beside the photo. */ .rr-feature__overlay { right: 0; width: auto; background: linear-gradient(to bottom, rgba(20, 22, 41, .8), rgba(20, 22, 41, .35) 45%, transparent 70%); } .rr-feature__content { max-width: none; padding: 40px var(--rr-gutter); align-items: center; text-align: center; } .rr-feature__badge { align-self: flex-start; } } /* ========================================================================== Featured Menu Items ========================================================================== */ .rr-featured { background: var(--rr-cream); } .rr-featured__inner { max-width: var(--rr-max); margin: 0 auto; padding: 58px var(--rr-gutter); display: flex; flex-direction: column; gap: 39px; } .rr-featured__title { font-size: clamp(36px, 4vw, 57px); color: var(--rr-orange); text-align: center; } .rr-featured__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .rr-featured__grid--1 { grid-template-columns: minmax(0, 420px); justify-content: center; } .rr-featured__grid--2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; } .rr-featured__grid--3 { grid-template-columns: repeat(3, 1fr); } .rr-card { background: #fff; border: 3px solid var(--rr-ink); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .rr-card__img { height: 240px; } .rr-card__img img { width: 100%; height: 100%; object-fit: cover; } .rr-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; } .rr-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .rr-card__name { font-family: var(--rr-display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--rr-navy); text-transform: uppercase; } .rr-card__price { font-family: var(--rr-display); font-size: 24px; color: var(--rr-orange); white-space: nowrap; } .rr-card__desc { font-size: 14px; line-height: 1.5; color: var(--rr-ink); } .rr-featured__cta { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; border-radius: 999px; background: rgba(229, 100, 38, .3); font-family: var(--rr-ui); font-weight: 600; font-size: clamp(18px, 2vw, 29px); text-transform: uppercase; color: var(--rr-navy); text-decoration: none; transition: background .2s; } .rr-featured__cta:hover { background: rgba(229, 100, 38, .45); } @media (max-width: 1023.98px) { .rr-featured__grid, .rr-featured__grid--3 { grid-template-columns: repeat(2, 1fr); } .rr-featured__grid--1 { grid-template-columns: minmax(0, 420px); } } @media (max-width: 639.98px) { .rr-featured__grid, .rr-featured__grid--2, .rr-featured__grid--3 { grid-template-columns: 1fr; } } /* ========================================================================== About ========================================================================== */ .rr-about { background: var(--rr-orange); color: #fff; overflow: hidden; } .rr-about__inner { max-width: var(--rr-max); margin: 0 auto; padding: 78px calc(var(--rr-gutter) - 8px) 40px var(--rr-gutter); display: grid; grid-template-columns: 420px 1fr; gap: 84px; align-items: stretch; } .rr-about--right .rr-about__inner { grid-template-columns: 1fr 420px; } .rr-about--right .rr-about__image { order: 2; } .rr-about__image { border-radius: 12px; overflow: hidden; min-height: 420px; } .rr-about__image img { width: 100%; height: 100%; object-fit: cover; } .rr-about__text { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; min-width: 0; } .rr-about__pre { font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; } .rr-about__title { font-size: clamp(30px, 3vw, 36px); color: #fff; } /* Caption sits in normal flow above the video; navy-deep for contrast on orange (navy #343B65 is only ~2.7:1). */ .rr-about__caption { font-family: var(--rr-display); font-size: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--rr-navy-deep); margin-top: 8px; } .rr-video { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; overflow: hidden; } .rr-video__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .rr-video__play img:first-child { width: 100%; height: 100%; object-fit: cover; } .rr-video__btn { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); transition: transform .2s; } .rr-video__play:hover .rr-video__btn { transform: translate(-50%, -50%) scale(1.08); } .rr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .rr-about__more { display: flex; flex-direction: column; gap: 16px; } .rr-about__links { display: none; } .rr-about__link { appearance: none; background: none; border: 0; padding: 4px 0; cursor: pointer; color: #fff; font-family: var(--rr-body); font-weight: 700; font-size: 19px; letter-spacing: 1px; text-transform: uppercase; } .rr-about__link:hover { text-decoration: underline; text-underline-offset: 4px; } .rr-about__t-close { display: none; } .rr-about.is-open .rr-about__t-open { display: none; } .rr-about.is-open .rr-about__t-close { display: inline; } /* Collapsed state (progressive enhancement: without JS the module stays expanded). */ .js .rr-about__links { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .js .rr-about.is-open .rr-about__links { justify-content: flex-end; } .js .rr-about.is-open .rr-about__watch { display: none; } .js .rr-about:not(.is-open) .rr-about__more { display: none; } .js .rr-about:not(.is-open) .rr-about__inner { grid-template-columns: 420px minmax(0, 625px); gap: 92px; padding: 72px var(--rr-gutter) 68px; align-items: center; justify-content: center; } .js .rr-about--right:not(.is-open) .rr-about__inner { grid-template-columns: minmax(0, 625px) 420px; } .js .rr-about:not(.is-open) .rr-about__image { height: 320px; min-height: 0; } .js .rr-about:not(.is-open) .rr-about__text { padding-top: 0; } .js .rr-about:not(.is-open) .rr-about__pre { font-size: 14px; } .js .rr-about:not(.is-open) .rr-about__title { font-size: clamp(30px, 3.4vw, 39px); } .js .rr-about:not(.is-open) .rr-about__excerpt { font-size: 17px; } @media (prefers-reduced-motion: no-preference) { .rr-about.is-animating .rr-about__more { animation: rr-rise .45s cubic-bezier(.16, 1, .3, 1) both; } } @media (max-width: 1023.98px) { .js .rr-about:not(.is-open) .rr-about__inner, .js .rr-about--right:not(.is-open) .rr-about__inner { grid-template-columns: 1fr; gap: 24px; padding: 48px var(--rr-gutter); align-items: stretch; } .js .rr-about:not(.is-open) .rr-about__image { height: auto; } .rr-about__link { font-size: 16px; } } @media (max-width: 1023.98px) { .rr-about__inner, .rr-about--right .rr-about__inner { grid-template-columns: 1fr; gap: 32px; padding: 56px var(--rr-gutter) 48px; } .rr-about--right .rr-about__image { order: 0; } .rr-about__image { min-height: 0; aspect-ratio: 4 / 3; } } /* ========================================================================== Value Props ========================================================================== */ .rr-props { background: var(--rr-navy); } .rr-props__inner { max-width: var(--rr-max); margin: 0 auto; padding: 63px var(--rr-gutter) 62px; display: flex; flex-direction: column; gap: 53px; } .rr-props__title { font-size: clamp(34px, 5vw, 69px); color: var(--rr-cream); text-align: center; } .rr-props__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .rr-props__row--1 { grid-template-columns: minmax(0, 480px); justify-content: center; } .rr-props__row--2 { grid-template-columns: repeat(2, minmax(0, 480px)); justify-content: center; } .rr-props__row--4 { grid-template-columns: repeat(2, 1fr); } .rr-prop { border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; padding: 40px; display: flex; flex-direction: column; gap: 24px; } .rr-prop__num { font-family: var(--rr-display); font-size: 48px; line-height: 1; color: var(--rr-orange); } .rr-prop__title { font-family: var(--rr-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; color: var(--rr-cream); text-transform: uppercase; } .rr-prop__text { font-size: 16px; color: var(--rr-cream); opacity: .8; } @media (max-width: 1023.98px) { .rr-props__row, .rr-props__row--2, .rr-props__row--4 { grid-template-columns: 1fr; } .rr-prop { padding: 28px; } } /* ========================================================================== Location Menu — whole menu renders; the tab bar sticks below the nav while any part of the module is on screen, and scrolls away with it once the module ends (plain CSS position:sticky, scoped by .rr-menu__tabbar being a direct child of .rr-menu, the module's full-height wrapper). ========================================================================== */ .rr-menu { scroll-margin-top: calc(var(--rr-nav-h) + var(--rr-topbar-h)); } /* jumping to #menu lands above the tabbar, before it has stuck */ .rr-menu__header { background: var(--rr-navy-deep); padding: 48px var(--rr-gutter) 40px; display: flex; justify-content: center; } .rr-menu__title { font-size: clamp(32px, 4vw, 50px); color: var(--rr-cream); text-align: center; } /* Thin, always-horizontally-scrolling strip — deliberately narrow, with a partial tab and an edge fade so it reads as swipeable rather than as a wrapped, fully-visible row. */ .rr-menu__tabbar { position: sticky; top: calc(var(--rr-nav-h) + var(--rr-topbar-h)); z-index: 90; background: var(--rr-navy-deep); border-bottom: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .admin-bar .rr-menu__tabbar { top: calc(32px + var(--rr-nav-h) + var(--rr-topbar-h)); } @media (max-width: 782px) { .admin-bar .rr-menu__tabbar { top: calc(46px + var(--rr-nav-h) + var(--rr-topbar-h)); } } .rr-menu__tabs-scroll { position: relative; overflow: hidden; } .rr-menu__tabs-scroll::before, .rr-menu__tabs-scroll::after { content: ''; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 2; pointer-events: none; transition: opacity .15s; } .rr-menu__tabs-scroll::before { left: 0; background: linear-gradient(to right, var(--rr-navy-deep), transparent); opacity: 0; } .rr-menu__tabs-scroll::after { right: 0; background: linear-gradient(to left, var(--rr-navy-deep), transparent); } .rr-menu__tabs-scroll.is-at-start::before { opacity: 0; } .rr-menu__tabs-scroll.is-at-end::after { opacity: 0; } .rr-menu__tabs { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; /* `safe center`: centers when all tabs fit (desktop), but falls back to flex-start the moment they overflow (mobile/tablet) — plain `center` would let the flex box center the overflow symmetrically, making the first tab(s) unreachable by scrolling since there'd be nothing to scroll TO on the left. */ justify-content: safe center; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 10px var(--rr-gutter); -webkit-overflow-scrolling: touch; } .rr-menu__tabs::-webkit-scrollbar { display: none; } .rr-menu__tabs li { flex: none; scroll-snap-align: start; } .rr-menu__tabs a { display: block; padding: 9px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); transition: background .2s, color .2s; } .rr-menu__tabs a:hover { background: rgba(255, 255, 255, .16); color: #fff; } .rr-menu__tabs a.is-active { background: var(--rr-orange); border-color: var(--rr-orange); color: #fff; } @media (max-width: 639.98px) { .rr-menu__header { padding: 40px var(--rr-gutter) 32px; } .rr-menu__tabs a { font-size: 13px; padding: 8px 14px; } } /* Category anchors land below the sticky tabbar too, since by the time you jump to one, it's stuck. */ .rr-cat { background: var(--rr-cream); padding: 64px var(--rr-gutter) 48px; scroll-margin-top: calc(var(--rr-nav-h) + var(--rr-topbar-h) + var(--rr-tabbar-h, 56px)); } .rr-cat + .rr-cat { padding-top: 32px; } .rr-cat__head { max-width: 1280px; margin: 0 auto 32px; display: flex; flex-direction: column; gap: 8px; text-align: center; } .rr-cat__title { font-family: var(--rr-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); color: var(--rr-navy); text-transform: uppercase; line-height: 1.1; } .rr-cat__desc { font-size: clamp(17px, 2vw, 26px); color: var(--rr-ink); line-height: 1.4; } .rr-cat__rule { border: 0; height: 2px; background: var(--rr-orange); margin: 8px 0 0; width: 100%; } .rr-items { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .rr-items--full { grid-template-columns: 1fr; } .rr-item { background: #fff; border: 1px solid var(--rr-line); border-radius: 6px; padding: 16px 20px; display: flex; gap: 16px; align-items: flex-start; } .rr-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .rr-item__name { font-family: var(--rr-display); font-weight: 400; font-size: 18px; line-height: 1.2; color: var(--rr-navy); text-transform: uppercase; } .rr-item__desc { font-size: 13px; line-height: 1.5; } .rr-item__price { font-size: 15px; font-weight: 600; color: var(--rr-orange); white-space: nowrap; } .rr-item--extras { padding: 20px; gap: 16px; align-items: baseline; } .rr-item__extras-title { font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--rr-orange); flex: none; width: 160px; } .rr-item__extras { font-size: 13px; line-height: 1.5; flex: 1; } @media (max-width: 767.98px) { .rr-items { grid-template-columns: 1fr; } .rr-item--extras { flex-direction: column; gap: 6px; } .rr-item__extras-title { width: auto; } } /* Build It — desktop and mobile are genuinely different treatments per the reference (desktop: plain two-column list on the normal cream category background; mobile: dark navy step-cards with pill chips), sharing one markup that's reshaped per breakpoint below rather than duplicated. */ .rr-cat--build-it .rr-cat__title { color: var(--rr-orange); } .rr-build { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .rr-build__col { display: flex; flex-direction: column; gap: 40px; } .rr-build__step { display: flex; flex-direction: column; gap: 16px; } .rr-build__step-head { display: flex; align-items: center; gap: 12px; } .rr-build__badge { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--rr-orange); color: #fff; font-weight: 700; font-size: 14px; } .rr-build__step-title { font-family: var(--rr-display); font-weight: 400; font-size: 20px; color: var(--rr-navy-deep); text-transform: uppercase; line-height: 1.2; } .rr-build__rule { border: 0; height: 1px; background: var(--rr-line); margin: 0; } .rr-build__group + .rr-build__group { margin-top: 16px; } .rr-build__group-label { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--rr-orange); margin: 0 0 8px; } /* Desktop: cheese is a bulleted list, sauces stack name + description, toppings read as one slash-joined line per group — all plain text, no chip styling. */ .rr-chips--cheese, .rr-chips--sauces { list-style: none; display: flex; flex-direction: column; gap: 8px; } .rr-chips--cheese .rr-chip { position: relative; padding-left: 18px; color: var(--rr-navy-deep); font-weight: 700; font-size: 15px; } .rr-chips--cheese .rr-chip::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 999px; background: var(--rr-orange); } .rr-chips--sauces .rr-chip { color: var(--rr-navy-deep); font-size: 15px; } .rr-build__sauce-name { font-weight: 700; } .rr-chips--toppings { list-style: none; display: block; } .rr-chips--toppings .rr-chip { display: inline; color: var(--rr-navy-deep); font-size: 15px; } .rr-chips--toppings .rr-chip:not(:last-child)::after { content: ' / '; } .rr-build__callout { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: var(--rr-orange); color: var(--rr-navy-deep); padding: 14px 24px; border-radius: 6px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } @media (max-width: 639.98px) { /* The dark card / chip treatment from the mobile reference — every property the desktop rules above set for these variants gets re-declared here at matching specificity, since a plain `.rr-chip` rule at lower specificity wouldn't win against e.g. `.rr-chips--cheese .rr-chip`. */ .rr-cat--build-it { background: var(--rr-navy); } .rr-cat--build-it .rr-cat__title { color: var(--rr-cream); } .rr-cat--build-it .rr-cat__desc { color: var(--rr-cream); opacity: .8; } .rr-build { display: block; } .rr-build__col { gap: 24px; } .rr-build__col + .rr-build__col { margin-top: 24px; } .rr-build__step { background: var(--rr-navy-deep); border-radius: 12px; padding: 20px; } .rr-build__step-title { color: var(--rr-cream); } .rr-build__rule { display: none; } /* Toppings read as one flat, ungrouped chip cloud on mobile (per the reference) — the group wrapper and its own