/* ============================================================================= public.css — Rut'n Buck public-site base + primitives (Foundation layer) ----------------------------------------------------------------------------- Consumes tokens.css. Provides: reset/base elements, the container + section shell, button system, and the reusable PRIMITIVES every page composes — .rb-section, .rb-stats (proof), .rb-appetite (appetite-appeal), .rb-cta-split. Page children style page-specific content on top; they do NOT redefine these. Pair with tokens.css + rb-chrome.js in . Load order in a page: (PostHog, existing) (rbTrack helper) (/) ============================================================================= */ /* ---- Reset / base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--page-bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: var(--lh-heading); margin: 0 0 var(--space-4); color: inherit; /* inherit section/context color — never force black (avoids dark-hero invisibility) */ } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 var(--space-4); } p:last-child { margin-bottom: 0; } :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } /* ---- Layout: container + section shell ----------------------------------- */ .rb-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .rb-container--wide { max-width: var(--container-wide); } .rb-container--text { max-width: var(--container-text); } /* .rb-section — the section shell primitive. Modifiers set surface: default warm, --alt faint band, --dark black, --red. */ .rb-section { padding-block: var(--section-y); } .rb-section--flush { padding-block: 0; } .rb-section--alt { background: var(--page-bg-alt); } .rb-section--dark { background: var(--black); color: var(--on-dark); } .rb-section--red { background: var(--red); color: var(--on-dark); } /* headings inherit section color (see base h1–h4: color:inherit) — no override needed */ /* .rb-on-dark — REUSABLE dark-context flag. Put it on ANY custom dark container (a photo/black hero, a dark band) so eyebrows, ledes, stats, and body text get their light-on-dark treatment. --dark/--red sections carry it implicitly (they share the override rules below). This is what keeps dark heroes readable. */ .rb-on-dark { color: var(--on-dark); } /* Section heading furniture */ .rb-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--tracking-cta); text-transform: uppercase; color: var(--red); margin: 0 0 var(--space-3); } .rb-section--dark .rb-eyebrow, .rb-section--red .rb-eyebrow, .rb-on-dark .rb-eyebrow { color: var(--tan); } .rb-lede { font-size: var(--fs-body-lg); color: var(--ink-soft); max-width: var(--container-text); } .rb-section--dark .rb-lede, .rb-section--red .rb-lede, .rb-on-dark .rb-lede { color: var(--on-dark-soft); } /* ---- Buttons ------------------------------------------------------------- */ .rb-btn[hidden] { display: none; } /* display:inline-flex below would otherwise defeat the hidden attr (e.g. funnel Back on step 1) */ .rb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 14px 32px; border-radius: var(--radius-sm); font-family: var(--font-cta-primary); font-weight: 700; font-size: var(--fs-body); text-transform: uppercase; letter-spacing: var(--tracking-cta); border: 2px solid var(--red); background: var(--red); color: var(--white); transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); } .rb-btn:hover { background: var(--red-dark); border-color: var(--red-dark); } .rb-btn:active { transform: scale(.98); } .rb-btn--secondary { font-family: var(--font-cta-secondary); background: transparent; color: var(--ink); border-color: var(--ink); padding: 12px 28px; } .rb-section--dark .rb-btn--secondary, .rb-section--red .rb-btn--secondary, .rb-on-dark .rb-btn--secondary { color: var(--white); border-color: var(--white); } .rb-btn--secondary:hover { background: var(--ink); color: var(--white); } .rb-section--dark .rb-btn--secondary:hover, .rb-on-dark .rb-btn--secondary:hover { background: var(--white); color: var(--black); } .rb-btn--lg { min-height: 56px; padding: 18px 40px; font-size: var(--fs-body-lg); } .rb-btn--block { width: 100%; } @media (hover: none) { .rb-btn:hover { background: var(--red); border-color: var(--red); } } /* ---- PRIMITIVE: proof-stat block (.rb-stats) ----------------------------- */ /* Markup contract:
50,000 burritos sold
...
*/ .rb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-6); text-align: center; } .rb-stat__num { display: block; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1.3rem + 3vw, 3rem); line-height: var(--lh-tight); color: var(--red); } .rb-section--dark .rb-stat__num, .rb-section--red .rb-stat__num, .rb-on-dark .rb-stat__num { color: var(--tan); } .rb-stat__label { display: block; margin-top: var(--space-2); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-accent); color: var(--ink-soft); } .rb-section--dark .rb-stat__label, .rb-section--red .rb-stat__label, .rb-on-dark .rb-stat__label { color: var(--on-dark-soft); } /* "+X this week" line — sits ABOVE the lifetime number in the same quiet label register as "on Google" / "locations". Revealed by rb-burrito-count.js (sets text, removes [hidden], adds .is-in). Stays display:none while [hidden] so it never flashes an empty element or shifts layout before the data lands. Under prefers-reduced-motion --dur-slow is 0ms, so it just appears. */ .rb-stat__week { margin-bottom: var(--space-2); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-accent); color: var(--ink-soft); /* pop-in start state; .is-in eases it home (delay lets the ticker get going) */ opacity: 0; transform: translateY(4px); transition: opacity var(--dur-slow) var(--ease-out) 0.5s, transform var(--dur-slow) var(--ease-out) 0.5s; } .rb-stat__week:not([hidden]) { display: block; } .rb-stat__week.is-in { opacity: 1; transform: none; } .rb-section--dark .rb-stat__week, .rb-section--red .rb-stat__week, .rb-on-dark .rb-stat__week { color: var(--on-dark-soft); } /* ---- PRIMITIVE: appetite-appeal block (.rb-appetite) --------------------- */ /* Image + copy split for craving moments. Markup contract:
...headline + copy + CTA...
*/ .rb-appetite { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; } @media (min-width: 768px) { .rb-appetite { grid-template-columns: 1fr 1fr; gap: var(--space-12); } .rb-appetite--reverse .rb-appetite__media { order: 2; } } .rb-appetite__media { margin: 0; } .rb-appetite__media img, .rb-appetite__media .rb-photo-slot { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); } /* Photo placeholder — specs the planned shoot (brief shot-list). Markup:
(the data-shot text is surfaced so the shoot can be planned around it) */ .rb-photo-slot { position: relative; aspect-ratio: 4 / 3; display: grid; place-content: center; text-align: center; padding: var(--space-6); background: repeating-linear-gradient(45deg, rgba(17,17,17,.04) 0 12px, transparent 12px 24px), var(--tan); border: 2px dashed rgba(17,17,17,.28); color: var(--grey-dark); } .rb-photo-slot::before { content: "PHOTO"; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-micro); letter-spacing: var(--tracking-cta); color: var(--red); } .rb-photo-slot::after { content: attr(data-shot); margin-top: var(--space-2); font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--grey-dark); } /* ---- PRIMITIVE: split-CTA router (.rb-cta-split) ------------------------- */ /* Two-path fork. Each path is a card linking to a destination + firing rbTrack via data-rb-track. Markup contract:
… …
*/ .rb-cta-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .rb-cta-split { grid-template-columns: 1fr 1fr; } } /* --3: three lanes (catering / program / wholesale) — stack to 1-col below 880 */ @media (min-width: 768px) and (max-width: 879px) { .rb-cta-split--3 { grid-template-columns: 1fr; } } @media (min-width: 880px) { .rb-cta-split--3 { grid-template-columns: repeat(3, 1fr); } } .rb-path { display: block; padding: var(--space-8); background: var(--card-bg); color: var(--ink); /* light card → always dark text, even inside a --dark section */ border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .rb-path:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--red); } .rb-path__title { font-family: var(--font-heading); font-size: var(--fs-h2); margin: 0 0 var(--space-2); } .rb-path__desc { color: var(--ink-soft); margin: 0 0 var(--space-4); } .rb-path__go { font-family: var(--font-cta-primary); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-cta); color: var(--red); } /* ---- Scroll-reveal utility (subtle; honors reduced-motion via token) ----- SAFETY: the hidden state is gated behind html.rb-js, which is set by a tiny inline script. No JS (or a JS failure) → no .rb-js → content stays FULLY VISIBLE. The reveal is pure enhancement, never a visibility dependency. */ .rb-reveal { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } html.rb-js .rb-reveal { opacity: 0; transform: translateY(var(--reveal-shift)); } html.rb-js .rb-reveal.is-in { opacity: 1; transform: none; } /* ---- Chrome reservation — kill FOUC/flash before Web Components upgrade ---- The nav is an OVERLAY (reserves no space — the dark hero sits under it), so it needs no pre-upgrade box. The footer is in-flow, so reserve its box + dark bg. */ rb-nav:not(:defined) { display: block; } rb-footer:not(:defined) { display: block; min-height: 220px; background: var(--black); } /* Nav clearance for pages WITHOUT a dark self-padding hero (i.e. ): put .rb-pad-nav on the first section (or body) so content clears the fixed bar. Dark-hero pages instead pad their hero by calc(var(--nav-h) + var(--section-y)). */ .rb-pad-nav { padding-top: var(--nav-h); } /* ---- PRIMITIVE: funnel shell (.rb-funnel — see rb-funnel.js) ------------- */ .rb-funnel { display: block; max-width: var(--container-text); margin-inline: auto; background: var(--card-bg); color: var(--ink); /* pin dark text — the card may sit in a .rb-section--dark (wholesale) */ border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--space-8); } .rb-funnel__progress { height: 6px; border-radius: var(--radius-pill); background: var(--hairline); overflow: hidden; } .rb-funnel__fill { height: 100%; width: 0; background: var(--red); transition: width var(--dur) var(--ease); } .rb-funnel__meta { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-4) 0 var(--space-6); } .rb-funnel__title { font-family: var(--font-heading); font-size: var(--fs-h2); } .rb-funnel__count { font-size: var(--fs-small); color: var(--ink-faint); text-transform: uppercase; letter-spacing: var(--tracking-accent); } .rb-funnel [data-rb-step] { display: grid; gap: var(--space-5); } /* the step grid above re-asserts display over the UA [hidden] rule — restore it so only the active step shows (rb-funnel.js toggles the hidden attribute). */ .rb-funnel [data-rb-step][hidden] { display: none; } .rb-funnel label { display: grid; gap: var(--space-2); font-weight: 600; font-size: var(--fs-small); } /* a two-up row inside a step for short side-by-side fields (e.g. count + date) */ .rb-funnel .rb-funnel__row { display: grid; gap: var(--space-5); } @media (min-width: 520px) { .rb-funnel .rb-funnel__row { grid-template-columns: 1fr 1fr; } } .rb-funnel .rb-funnel__row > label { margin: 0; } /* a labelled non-