/* =====================================================================
RingSteady brand system · /assets/rs-brand.css · v1 (2026-10-14)
"Steady phone. Steady work."
---------------------------------------------------------------------
Fast-food counter look: red + yellow + white, glowing menu boards,
receipts, tickets, an awning over the door. Cleaner and warmer than
the burger chains: real people, real prices, no fine print.
Read BRAND.md (same folder) before using this file. Rules of thumb:
- Every class is prefixed `rs-`. Never style bare tags on a page.
- Red is the default page color. Long reading goes on cream (.rs-bg-cream
or .rs-card) in ink, never small white text on red.
- Yellow text on red only at 19px+ bold (it is 4.2:1 on --rs-red).
- Motion is decoration only and switches off for prefers-reduced-motion.
CONTENTS
1 Tokens 11 Menu board (glowing)
2 Reset + base 12 Menu cards
3 Type 13 Cards, founder, showcase
4 Layout 14 Receipt, ticket, stamp, sticker
5 Section colors 15 Checklist, phone texts
11b The counter scene
6 Dividers 16 FAQ
7 Top bar + header 17 Forms + chips
8 Buttons + links 18 Comparison table
9 Ticker 19 Order sheet (dialog)
10 Eyebrow, tags 20 Sticky CTA, banner, footer
21 Prose, stats, reveal, utilities, motion
===================================================================== */
/* 1 ─ TOKENS ─────────────────────────────────────────────────────────── */
:root{
/* brand colors (locked) */
--rs-red:#E3121B; /* page color, primary brand red */
--rs-red-deep:#B00D14; /* header, alt sections, pressed red */
--rs-board:#6E070B; /* menu board face */
--rs-board-glow:#ff2a2a; /* neon glow around boards */
--rs-yellow:#FFD21F; /* CTA + highlights */
--rs-yellow-deep:#C99A00; /* 3D slab under yellow buttons */
--rs-white:#FFFFFF;
--rs-cream:#FFF6E0; /* reading surfaces, cards, receipts */
--rs-ink:#1A0607; /* text on cream, footer */
/* supporting neutrals (derived, use freely) */
--rs-ink-soft:#5a2a2c; /* secondary text on cream (7.9:1) */
--rs-line:#ead7b0; /* hairlines + input borders on cream */
--rs-cream-2:#FBEAC2; /* pressed/striped cream */
--rs-paper:#FFFDF7; /* receipt paper */
--rs-blush:#ffe3e3; /* secondary text on red (5:1) */
--rs-wall:#5c060a; /* dark wall behind boards */
--rs-ok:#1d7a3e; /* "added" / success on cream */
--rs-err:#a40b11; /* error text on cream */
--rs-skin:#F1B98C; /* illustration skin */
/* type */
--rs-font-display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
--rs-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--rs-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--rs-fs-hero:clamp(42px,11.6vw,84px);
--rs-fs-h2:clamp(34px,8.4vw,58px);
--rs-fs-h3:clamp(22px,5.4vw,28px);
--rs-fs-lede:clamp(18px,2.2vw,20px);
--rs-fs-body:17px;
--rs-fs-small:14.5px;
--rs-fs-micro:12px; /* mono labels, uppercase */
/* the white-on-red text shadow (signage depth). Use on display type and
on any white/yellow text sitting directly on red. */
--rs-tshadow:0 2px 0 rgba(0,0,0,.28),0 6px 18px rgba(0,0,0,.25);
--rs-tshadow-sm:0 1px 0 rgba(0,0,0,.28);
--rs-neon:0 0 6px #fff,0 0 14px var(--rs-board-glow),0 0 28px var(--rs-board-glow);
/* spacing (8pt-ish) */
--rs-s1:4px; --rs-s2:8px; --rs-s3:12px; --rs-s4:16px; --rs-s5:24px;
--rs-s6:32px; --rs-s7:48px; --rs-s8:64px; --rs-s9:96px;
--rs-section-y:clamp(56px,9vw,96px);
--rs-gutter:16px;
--rs-max:1120px;
/* radii */
--rs-r-sm:10px; --rs-r:14px; --rs-r-lg:20px; --rs-r-xl:26px; --rs-r-pill:999px;
/* shadows */
--rs-shadow-slab:0 8px 0 rgba(0,0,0,.18),0 20px 34px rgba(0,0,0,.22); /* cards on red */
--rs-shadow-soft:0 5px 0 rgba(0,0,0,.16); /* small cards */
--rs-shadow-pop:0 14px 28px rgba(0,0,0,.28);
--rs-glow:0 0 0 2px var(--rs-board-glow),0 0 22px 4px rgba(255,42,42,.65),0 0 70px 8px rgba(255,42,42,.38),inset 0 0 28px rgba(0,0,0,.5),0 22px 30px rgba(0,0,0,.35);
/* focus ring color (cream contexts flip it to ink) */
--rs-focus:var(--rs-yellow);
--rs-ease:cubic-bezier(.2,.8,.2,1);
}
/* 2 ─ RESET + BASE ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;}
html,body{overflow-x:clip;}
body{margin:0;font-family:var(--rs-font-body);font-size:var(--rs-fs-body);line-height:1.55;color:var(--rs-white);
background:var(--rs-red);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0;}
ul[class],ol[class]{list-style:none;padding:0;}
img,svg,video{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
[hidden]{display:none!important;}
::selection{background:var(--rs-yellow);color:var(--rs-ink);}
:focus-visible{outline:3px solid var(--rs-focus);outline-offset:3px;border-radius:4px;}
.rs-on-light,.rs-card,.rs-bg-cream,.rs-sheet__body,.rs-faq details,.rs-receipt,.rs-ticket{--rs-focus:var(--rs-ink);}
.rs-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.rs-skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--rs-yellow);color:var(--rs-ink);font-weight:800;padding:10px 14px;border-radius:10px;text-decoration:none;}
.rs-skip:focus{top:12px;}
/* 3 ─ TYPE ───────────────────────────────────────────────────────────── */
/* Display = Bricolage Grotesque 800, tight. Body = Inter. Labels/prices = Plex Mono 600. */
.rs-h1,.rs-h2,.rs-h3,.rs-display{font-family:var(--rs-font-display);font-weight:800;letter-spacing:-.025em;line-height:1.02;}
.rs-h1{font-size:var(--rs-fs-hero);text-shadow:var(--rs-tshadow);}
.rs-h2{font-size:var(--rs-fs-h2);text-shadow:var(--rs-tshadow);}
.rs-h3{font-size:var(--rs-fs-h3);letter-spacing:-.02em;line-height:1.08;}
.rs-lede{font-size:var(--rs-fs-lede);font-weight:600;line-height:1.45;text-shadow:var(--rs-tshadow);max-width:600px;}
.rs-small{font-size:var(--rs-fs-small);}
.rs-mono{font-family:var(--rs-font-mono);font-weight:600;}
.rs-y{color:var(--rs-yellow);} /* highlight word on red/ink. 19px+ bold only. */
.rs-r{color:var(--rs-red);} /* highlight word on cream */
.rs-ts{text-shadow:var(--rs-tshadow);}
.rs-nowrap{white-space:nowrap;}
/* text inside cream surfaces never gets the red-page shadow */
.rs-card .rs-h2,.rs-card .rs-h3,.rs-bg-cream .rs-h1,.rs-bg-cream .rs-h2,.rs-bg-cream .rs-lede,.rs-on-light .rs-h2,.rs-on-light .rs-lede{text-shadow:none;}
/* 4 ─ LAYOUT ─────────────────────────────────────────────────────────── */
.rs-wrap{width:100%;max-width:var(--rs-max);margin:0 auto;padding:0 var(--rs-gutter);}
.rs-wrap--narrow{max-width:800px;}
.rs-wrap--text{max-width:700px;}
@media(min-width:760px){:root{--rs-gutter:24px;}}
.rs-section{position:relative;padding:var(--rs-section-y) 0;}
.rs-section--tight{padding:clamp(36px,6vw,56px) 0;}
.rs-head{max-width:760px;margin-bottom:clamp(24px,4vw,40px);}
.rs-head .rs-h2{margin-top:12px;}
.rs-head .rs-lede{margin-top:14px;}
.rs-head--center{text-align:center;margin-left:auto;margin-right:auto;}
.rs-head--center .rs-lede{margin-left:auto;margin-right:auto;}
.rs-head--center .rs-eyebrow{justify-content:center;}
.rs-grid{display:grid;gap:clamp(14px,2.4vw,22px);}
@media(min-width:760px){.rs-grid--2{grid-template-columns:repeat(2,1fr);}.rs-grid--3{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){.rs-grid--4{grid-template-columns:repeat(4,1fr);}}
@media(max-width:999px){.rs-grid--4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:359px){.rs-grid--4{grid-template-columns:1fr;}}
.rs-center{text-align:center;}
.rs-stack>*+*{margin-top:var(--rs-s4);}
.rs-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
@media(max-width:429px){.rs-hide-sm{display:none!important;}}
@media(min-width:430px){.rs-only-sm{display:none!important;}}
/* 5 ─ SECTION COLORS ─────────────────────────────────────────────────── */
/* Alternate red / deep / board down a page. Cream = reading. Ink = footer-ish. */
.rs-bg-red{background:var(--rs-red);}
.rs-bg-deep{background:var(--rs-red-deep);}
.rs-bg-board{background:radial-gradient(900px 520px at 50% 0%,#8d0b12,var(--rs-board) 70%);}
.rs-bg-wall{background-color:var(--rs-red-deep);background-image:linear-gradient(rgba(0,0,0,.10) 2px,transparent 2px),linear-gradient(90deg,rgba(0,0,0,.10) 2px,transparent 2px);background-size:30px 30px;}
.rs-bg-cream{background:var(--rs-cream);color:var(--rs-ink);}
.rs-bg-ink{background:var(--rs-ink);color:#f3dede;}
.rs-bg-glow{background:radial-gradient(760px 480px at 82% 20%,rgba(255,42,42,.55),transparent 70%),var(--rs-red);}
/* 6 ─ DIVIDERS ───────────────────────────────────────────────────────── */
/* Awning: red/white scallops under the header. */
.rs-awning{position:relative;z-index:2;height:24px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.18));}
.rs-awning::before{content:"";position:absolute;inset:0;
background:repeating-linear-gradient(90deg,var(--rs-white) 0 32px,var(--rs-red-deep) 32px 64px);
-webkit-mask:linear-gradient(#000,#000) 0 0/100% 10px no-repeat,radial-gradient(16px 14px at 16px 10px,#000 97%,transparent 100%) 0 0/32px 24px repeat-x;
mask:linear-gradient(#000,#000) 0 0/100% 10px no-repeat,radial-gradient(16px 14px at 16px 10px,#000 97%,transparent 100%) 0 0/32px 24px repeat-x;}
/* Checker: diner tile strip. Use between big blocks and above the footer. */
.rs-checker{height:14px;background:conic-gradient(var(--rs-white) 25%,var(--rs-red-deep) 0 50%,var(--rs-white) 0 75%,var(--rs-red-deep) 0) 0 0/14px 14px;}
.rs-checker--ink{background:conic-gradient(var(--rs-cream) 25%,var(--rs-ink) 0 50%,var(--rs-cream) 0 75%,var(--rs-ink) 0) 0 0/14px 14px;}
/* Zig-zag: teeth of --rs-zz-from biting down into --rs-zz-to. Set both vars inline. */
.rs-zigzag{--rs-zz-from:var(--rs-red);--rs-zz-to:var(--rs-red-deep);position:relative;height:14px;background:var(--rs-zz-to);}
.rs-zigzag::before{content:"";position:absolute;inset:0;background:var(--rs-zz-from);
-webkit-mask:conic-gradient(from -45deg at 50% 100%,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/28px 100% repeat-x;
mask:conic-gradient(from -45deg at 50% 100%,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/28px 100% repeat-x;}
/* a section that should *start* with a zig-zag edge: */
.rs-edge-zz{position:relative;}
.rs-edge-zz::before{content:"";position:absolute;left:0;right:0;top:-13px;height:14px;background:inherit;
-webkit-mask:conic-gradient(from 135deg at 50% 0,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/28px 100% repeat-x;
mask:conic-gradient(from 135deg at 50% 0,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/28px 100% repeat-x;}
/* 7 ─ TOP BAR + HEADER ───────────────────────────────────────────────── */
.rs-topbar{position:sticky;top:0;z-index:50;background:var(--rs-red-deep);box-shadow:0 2px 0 rgba(0,0,0,.18);}
.rs-topbar__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;}
.rs-logo{display:inline-flex;align-items:center;flex:none;text-decoration:none;border-radius:8px;}
.rs-logo img{height:34px;width:auto;}
@media(min-width:760px){.rs-logo img{height:38px;}}
@media(max-width:380px){.rs-logo img{height:29px;}}
.rs-nav{display:flex;align-items:center;gap:6px;}
.rs-nav__link{display:none;padding:8px 10px;border-radius:9px;font-weight:700;font-size:15px;text-decoration:none;color:var(--rs-white);transition:background .15s;}
.rs-nav__link:hover{background:rgba(0,0,0,.18);}
.rs-nav__link[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--rs-yellow);border-radius:9px 9px 0 0;}
@media(min-width:860px){.rs-nav{gap:10px;}.rs-nav__link{display:inline-block;}}
.rs-lang{display:inline-flex;align-items:center;min-height:38px;padding:6px 10px;border:1.5px solid rgba(255,255,255,.45);border-radius:9px;font-weight:800;font-size:13.5px;text-decoration:none;color:var(--rs-white);}
.rs-lang:hover{background:rgba(0,0,0,.18);}
/* the phone pill: yellow, always visible. Number hides on very small phones. */
.rs-phone-pill{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 13px;border-radius:12px;background:var(--rs-yellow);color:var(--rs-ink);
font-family:var(--rs-font-display);font-weight:800;font-size:15.5px;text-decoration:none;white-space:nowrap;box-shadow:0 3px 0 var(--rs-yellow-deep);transition:transform .08s,box-shadow .08s;}
.rs-phone-pill svg{width:17px;height:17px;flex:none;}
.rs-phone-pill:active{transform:translateY(3px);box-shadow:0 0 0 var(--rs-yellow-deep);}
@media(max-width:400px){.rs-phone-pill__num{display:none;}.rs-phone-pill{padding:8px 11px;}}
/* 8 ─ BUTTONS + LINKS ────────────────────────────────────────────────── */
/* .rs-btn = the yellow 3D slab. One per view should be the primary action. */
.rs-btn{--rs-btn-bg:var(--rs-yellow);--rs-btn-fg:var(--rs-ink);--rs-btn-slab:var(--rs-yellow-deep);
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:14px 26px;
background:var(--rs-btn-bg);background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);color:var(--rs-btn-fg);
font-family:var(--rs-font-display);font-weight:800;font-size:20px;letter-spacing:-.01em;line-height:1.1;text-align:center;text-decoration:none;
border:0;border-radius:var(--rs-r);cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;
box-shadow:0 6px 0 var(--rs-btn-slab),0 14px 26px rgba(0,0,0,.28);
transition:transform .08s ease,box-shadow .08s ease,filter .15s;}
.rs-btn:hover{filter:brightness(1.05) saturate(1.05);transform:translateY(-1px);box-shadow:0 7px 0 var(--rs-btn-slab),0 16px 28px rgba(0,0,0,.3);}
.rs-btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--rs-btn-slab),0 5px 10px rgba(0,0,0,.22);filter:none;}
.rs-btn[disabled],.rs-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;}
.rs-btn .rs-arr{display:inline-block;transition:transform .15s;}
.rs-btn:hover .rs-arr{transform:translateX(3px);}
.rs-btn__tag{font-family:var(--rs-font-mono);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--rs-red-deep);background:rgba(255,255,255,.55);border-radius:7px;padding:3px 7px;}
.rs-btn--lg{min-height:64px;font-size:22px;padding:16px 30px;border-radius:16px;}
.rs-btn--sm{min-height:46px;font-size:16.5px;padding:10px 18px;border-radius:12px;box-shadow:0 4px 0 var(--rs-btn-slab),0 8px 16px rgba(0,0,0,.2);}
.rs-btn--sm:active{transform:translateY(3px);box-shadow:0 1px 0 var(--rs-btn-slab);}
.rs-btn--block{display:flex;width:100%;}
/* red slab: primary action on cream surfaces */
.rs-btn--red{--rs-btn-bg:var(--rs-red);--rs-btn-fg:#fff;--rs-btn-slab:var(--rs-red-deep);text-shadow:0 1px 0 rgba(0,0,0,.25);}
.rs-btn--red .rs-btn__tag{color:var(--rs-ink);background:var(--rs-yellow);}
/* ink slab: rare, for dark-on-yellow areas */
.rs-btn--ink{--rs-btn-bg:var(--rs-ink);--rs-btn-fg:#fff;--rs-btn-slab:#000;}
/* outline buttons: secondary action. Ghost = on red, outline = on cream. */
.rs-btn--ghost,.rs-btn--outline{background:rgba(0,0,0,.08);background-image:none;color:var(--rs-white);border:2px solid rgba(255,255,255,.75);box-shadow:none;font-size:18px;min-height:54px;}
.rs-btn--ghost:hover{background:rgba(0,0,0,.2);transform:none;box-shadow:none;}
.rs-btn--ghost:active,.rs-btn--outline:active{transform:translateY(2px);box-shadow:none;}
.rs-btn--outline{background:transparent;color:var(--rs-ink);border-color:var(--rs-ink);}
.rs-btn--outline:hover{background:rgba(26,6,7,.06);transform:none;box-shadow:none;}
/* text links */
.rs-link{font-weight:800;text-decoration:none;color:var(--rs-yellow);border-bottom:2.5px solid currentColor;padding-bottom:1px;transition:border-color .15s,color .15s;}
.rs-link:hover{border-bottom-color:transparent;}
.rs-on-light .rs-link,.rs-card .rs-link,.rs-bg-cream .rs-link,.rs-menu-card .rs-link,.rs-sheet__body .rs-link,.rs-prose .rs-link{color:var(--rs-red-deep);}
/* 9 ─ TICKER ─────────────────────────────────────────────────────────── */
/* Duplicate the item list twice inside .rs-ticker__track (2nd copy aria-hidden). */
.rs-ticker{position:relative;background:#2a0305;border-block:2px solid #000;overflow:hidden;white-space:nowrap;box-shadow:inset 0 0 18px rgba(255,42,42,.25);}
.rs-ticker__track{display:inline-flex;}
.rs-ticker__track>*{display:inline-flex;flex:none;}
.rs-ticker__item{font-family:var(--rs-font-mono);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--rs-yellow);padding:10px 0;text-shadow:0 0 8px rgba(255,210,31,.55);}
.rs-ticker__item::after{content:"\2605";color:var(--rs-board-glow);margin:0 16px;text-shadow:0 0 8px var(--rs-board-glow);font-size:11px;}
.rs-ticker__item--lead{color:#fff;}
/* 10 ─ EYEBROW, TAGS, BADGES ─────────────────────────────────────────── */
.rs-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--rs-font-mono);font-weight:600;font-size:var(--rs-fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--rs-cream);}
.rs-eyebrow::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--rs-yellow);flex:none;}
.rs-bg-cream .rs-eyebrow,.rs-card .rs-eyebrow,.rs-on-light .rs-eyebrow{color:var(--rs-red-deep);}
.rs-bg-cream .rs-eyebrow::before,.rs-card .rs-eyebrow::before,.rs-on-light .rs-eyebrow::before{background:var(--rs-red);}
/* .rs-tag: little mono labels. one-time vs /mo get different looks on purpose. */
.rs-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--rs-font-mono);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1;
color:var(--rs-ink);background:var(--rs-yellow);border-radius:7px;padding:5px 8px;white-space:nowrap;}
.rs-tag--onetime{background:var(--rs-cream);color:var(--rs-red-deep);}
.rs-tag--monthly{background:var(--rs-yellow);color:var(--rs-ink);}
.rs-tag--ghost{background:transparent;color:currentColor;box-shadow:inset 0 0 0 1.5px currentColor;}
.rs-tag--red{background:var(--rs-red);color:#fff;}
/* number badge (#1 #2 #3) */
.rs-num{display:inline-grid;place-items:center;flex:none;min-width:34px;height:34px;padding:0 6px;border-radius:50%;background:var(--rs-yellow);color:var(--rs-ink);
font-family:var(--rs-font-mono);font-weight:600;font-size:13.5px;letter-spacing:-.02em;box-shadow:0 0 12px rgba(255,210,31,.45),inset 0 -2px 0 rgba(0,0,0,.12);}
.rs-num--lg{min-width:44px;height:44px;font-size:16px;}
/* 11 ─ MENU BOARD (the glowing sign) ─────────────────────────────────── */
/* … rows …
Rows are