/* ========================================================================= site.css: the one shared stylesheet for every public page of biteout.app. Loaded first, before any page CSS (web/layouts/app.blade.php does it for every page that extends it; a standalone page adds the same two links: /css/fonts.css then /css/site.css). The rules come from the design spec of 18 Oct 2026 and copy the partner portal: a calm black page, grey blocks, white words, one green button. Page CSS keeps LAYOUT ONLY and reads the variables below; it does not define colours, radii or type of its own. TOKENS (custom properties on :root; the site is dark only) Colour --canvas #000 page --surface #1C1C1E blocks --raised #2C2C2E secondary buttons, fields, chips --line #38383A hairlines --line-strong #545458 control borders, empty stars --text #FFF --text-2 #B3B3B3 sentences, values --text-3 #9E9E9E muted (the floor for readable text) --text-4 #6E6E73 placeholders and disabled only --green #53F293 primary button, links, selection, Live --green-press #3DD67C hover/pressed green --green-tint --on-green #000 text on green --warn / --warn-tint --danger / --danger-tint --promo #F8E480 paid placement only --pressed (overlay) --scrim --photo-scrim (the one gradient, text over photos) --shadow-overlay (menus and dropdowns only) Type --font --fs-micro 12 --fs-caption 13 --fs-body 16 --fs-headline 18 --fs-title 24 --fs-display 28 --fs-hero 48 --fs-hero-phone 32 (the home hero h1 under 768) Radius --radius-thumb 8 --radius-field 12 --radius-card 16 --radius-sheet 30 --radius-pill 999 Space --space-4 --space-8 --space-12 --space-16 --space-20 --space-24 --space-32 --space-48 --gutter (20, 32 from 1024) --max-width 1200 --header-h (56, 64 from 768) Motion --dur-fast 150ms --dur-med 250ms --dur-slow 400ms --ease-enter (easeOutCubic) --ease-exit (easeInCubic) BREAKPOINTS: 480, 768 and 1024 only. Write mobile first: @media (min-width: 480px) / (min-width: 768px) / (min-width: 1024px) and when a max-width is unavoidable use 479.98px / 767.98px / 1023.98px so the two sides never overlap. TYPE CLASSES (Poppins 500 to 800; nothing under 12px) .bo-hero 48/800 (home hero h1 only; 32 on phones) .bo-display 28/800 -0.5 .bo-title 24/800 -0.5 .bo-headline 18/700 .bo-body 16/500 text-2 .bo-caption 13/600 text-2 .bo-micro 12/600 .bo-eyebrow 12/600 uppercase +0.8 tracking, text-2 (never green) .bo-section-heading 24/800, 28 from 768 (an h2 over a section) .bo-section-sub 16/500 text-2 under it, max 640 wide LAYOUT .bo-container max 1200, side gutters .bo-section vertical rhythm for a page section (48 / 64) COMPONENTS Button Get the app --primary green fill, black 16/700 label, 50 tall, hover green-press --secondary raised fill, white label --text no fill, green 16/600 label, 44 tall --danger no fill, danger label (never a red fill) --sm 40 tall, 13px label (header, dense rows) --block full width One primary per screen. Pill 7 reviews raised fill, 12/600 text-2 --outline (1px line-strong, no fill) --live (green dot, tint) --warn --danger --promo (PROMOTED kicker, uppercase) Deal pill रू 200 off green, black 12/700 --lg 13px --none: the no-deal pill (same size, transparent, 1px line-strong, text-2 label) Card
surface, radius 16, padding 16 a.bo-card / .bo-card--link: tappable, pressed overlay on hover --flush: no padding (a photo on top, then .bo-card__body) Stars five stars, filled white, empty line-strong, any fraction; --size sets the star size (default 14px). one star in a meta line, in that line's colour. Chip Momo raised, text-2 label; selected (.is-selected, aria-pressed="true" or aria-current): white fill, black label. Never green. .bo-chips: a wrapping row of chips; .bo-chips--scroll: one straight horizontally scrolling line. Store
badges Download on theApp Store …
black badge, white text, 1px line border (as on /join). Field (also select, textarea) raised, no border, radius 12, 50 tall, 16px (no iOS zoom); focus: a text-3 edge (a text field matches :focus-visible on every tap, so it never takes the heavy white ring).
+977
a phone number. Crumbs