/* ========================================================================== PUPUSAS LOCAS — DESIGN TOKENS All colors, fonts, spacing and sizes live here. Change a value once and it updates across the whole site. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. BRAND COLORS — sampled from the logo ------------------------------------------------------------------------ */ --color-blue: #018DFB; /* "Pupusas Locas" lettering, hummingbird */ --color-blue-dark: #0070CC; /* hover / text on light backgrounds (AA) */ --color-blue-light: #E0F1FF; --color-blue-glow: #2BA3FF; /* lighter shade, same hue */ --color-blue-deep: #014F8C; /* darker shade, same hue */ --color-blue-night: #012E52; /* darkest shade, same hue */ --color-blue-sky: #8CCBFF; /* soft accent on dark blue */ --color-blue-mist: #EAF5FF; /* very light section background */ --color-orange: #FC7002; /* Starburst, letter shadow, halo */ --color-orange-dark: #C45500; /* hover / text on light backgrounds (AA) */ --color-orange-light: #FFEBDC; --color-green: #2D7D04; /* Hummingbird body */ --color-green-dark: #226003; --color-green-light: #E3F2D9; --color-black: #000000; /* Logo outlines */ /* ------------------------------------------------------------------------ 2. INSPIRATION PALETTE — added as reference images come in ------------------------------------------------------------------------ */ /* Reference #1 — taco landing page (orange header, colorful cards) */ --color-orange-red: #E8560C; /* Header bar (white text passes AA large) */ --color-lime: #8DC21F; /* Card background, fresh accents */ --color-red: #DC3A1E; /* Card background, chili accents */ --color-amber: #F3900F; /* Warm highlight */ --color-yellow: #FFC21A; /* Hero title accent, starburst badge */ --color-charcoal: #2A2A2A; /* Headings on light backgrounds */ --color-paper: #F8F2E4; /* Off-white page background */ /* Reference #2 — split promo cards (amber + blue, painted edges) */ --color-card-amber: #F2A413; /* Online ordering card */ --color-card-blue: var(--color-blue); /* Rewards card */ /* Reference #3 — dark product showcase: uses the logo-blue family */ /* Reference #4 — white card with diagonal amber panel (About Us) */ --color-sunset: #F7A928; /* Diagonal panel */ --color-sunset-dark: #D96A00; /* Headline on white (AA for large text) */ /* Reference #5 — product cards row */ --color-sunny: #FFF1C2; /* Cheerful circle accent */ /* Reference #6 — orange-to-blue long gradient (Favorites) */ --color-royal-orange: #F26A12; --color-royal-orange-dark: #D9520A; --color-royal-peach: #F5A04A; /* soft middle stop */ --color-royal-cream: #EAD9BE; /* Big headline text */ /* Reference #7 — orange-to-yellow fiesta (Footer) */ --color-fiesta-orange: #F4721E; --color-fiesta-yellow: #F7B92B; --color-fiesta-cream: #FDEBCB; --color-fiesta-leaf: #E8491D; /* ------------------------------------------------------------------------ 3. NEUTRALS ------------------------------------------------------------------------ */ --color-white: #FFFFFF; --color-cream: #FFF4E0; /* Warm background (used in icons & OG image) */ --color-ink: #1A1A1A; /* Main text */ --color-gray-700: #444444; --color-gray-500: #767676; /* Minimum gray for AA text on white */ --color-gray-200: #E6E6E6; /* ------------------------------------------------------------------------ 4. SEMANTIC COLORS (use these in components, not the raw ones) ------------------------------------------------------------------------ */ --bg-body: var(--color-paper); --bg-alt: var(--color-cream); --text-body: var(--color-ink); --text-muted: var(--color-gray-700); --text-on-dark: var(--color-white); --link: var(--color-blue-dark); --link-hover: var(--color-orange-dark); --focus-ring: var(--color-orange); /* Note: white text on --color-blue / --color-orange does NOT pass AA for body text; use it only for large, bold text (24px+ or 19px+ bold). */ /* ------------------------------------------------------------------------ 5. TYPOGRAPHY ------------------------------------------------------------------------ */ --font-display: "Lilita One", "Arial Black", system-ui, sans-serif; --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Fluid type scale: min @ 360px → max @ 1440px */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.17vw, 1rem); --fs-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem); --fs-md: clamp(1.125rem, 1.06rem + 0.33vw, 1.375rem); --fs-lg: clamp(1.375rem, 1.24rem + 0.67vw, 1.875rem); --fs-xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.75rem); --fs-2xl: clamp(2.25rem, 1.8rem + 2.2vw, 4rem); --fs-3xl: clamp(2.75rem, 2rem + 3.7vw, 5.5rem); --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; --lh-tight: 1.1; --lh-snug: 1.3; --lh-base: 1.6; /* ------------------------------------------------------------------------ 6. SPACING (8px base) ------------------------------------------------------------------------ */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --section-padding: clamp(3rem, 2rem + 5vw, 6rem); /* ------------------------------------------------------------------------ 7. LAYOUT ------------------------------------------------------------------------ */ --container-max: 1240px; --container-narrow: 820px; --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); --header-height: 72px; /* Breakpoints (reference only — CSS vars can't be used inside @media) sm: 480px | md: 768px | lg: 1024px | xl: 1280px */ /* ------------------------------------------------------------------------ 8. SHAPE, SHADOW & MOTION ------------------------------------------------------------------------ */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.18); --shadow-pop: 6px 6px 0 var(--color-orange); /* Logo-style offset shadow */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms cubic-bezier(0.22, 1, 0.36, 1); /* ------------------------------------------------------------------------ 9. COMPONENT: HEADER / NAV ------------------------------------------------------------------------ */ --header-bg: var(--color-orange-red); --header-text: var(--color-white); --header-height-desktop: 88px; --header-edge-height: 14px; /* Torn-paper bottom edge */ --logo-width-mobile: 150px; --logo-width-desktop: 240px; --nav-link-underline: var(--color-cream); --nav-panel-bg: var(--color-paper); --btn-green-bg: var(--color-green); --btn-green-hover: var(--color-green-dark); /* Shared torn-paper edge shape (header bottom, hero bottom) */ --torn-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V6L1184 13L1170 12L1149 3L1135 9L1122 10L1109 10L1099 9L1079 9L1063 13L1050 12L1039 12L1030 5L1015 11L1005 2L989 3L974 5L956 13L942 13L930 7L918 2L905 6L888 9L875 3L863 2L843 12L835 7L826 4L815 11L795 3L783 4L775 7L767 5L757 2L736 4L726 12L714 3L698 6L684 12L674 6L654 6L640 2L631 10L623 2L612 8L595 10L586 4L576 3L568 13L555 6L541 6L531 2L511 2L496 13L477 10L460 6L444 7L433 12L415 13L403 5L393 3L374 6L359 8L340 3L319 8L306 8L292 11L272 8L261 6L250 3L241 3L231 8L211 5L202 9L181 4L168 2L152 2L142 6L126 11L111 6L100 7L92 6L80 3L60 11L45 10L28 6L11 4L1 3L0 6Z'/%3E%3C/svg%3E"); /* ------------------------------------------------------------------------ 10. COMPONENT: BUTTONS ------------------------------------------------------------------------ */ --btn-order-bg: var(--color-orange-red); --btn-order-hover: #CC4A08; --btn-border: var(--color-ink); /* ------------------------------------------------------------------------ 11. COMPONENT: HERO ------------------------------------------------------------------------ */ --hero-bg: var(--color-blue-dark); --hero-bg-glow: var(--color-blue); --hero-bg-edge: var(--color-blue-deep); --hero-split: var(--color-orange); /* Diagonal right panel */ --hero-title: var(--color-white); --hero-accent: var(--color-yellow); --hero-min-height: clamp(600px, 88vh, 820px); /* ------------------------------------------------------------------------ 12. COMPONENT: PROMO CARDS (Order Online + Rewards) ------------------------------------------------------------------------ */ --promo-order-bg: var(--color-card-amber); --promo-rewards-bg: var(--color-card-blue); --promo-text: var(--color-ink); --coupon-bg: var(--color-white); --coupon-accent: var(--color-orange-red); /* ------------------------------------------------------------------------ 13. COMPONENT: VOTED #1 SHOWCASE ------------------------------------------------------------------------ */ --fav-bg: var(--color-blue-deep); --fav-bg-edge: var(--color-blue-night); --fav-bg-glow: var(--color-blue-dark); --fav-panel: var(--color-blue); --fav-kicker: var(--color-blue-sky); --fav-text: var(--color-white); --fav-pill-dark: var(--color-blue-dark); --fav-accent: var(--color-yellow); /* ------------------------------------------------------------------------ 14. COMPONENT: ABOUT US ------------------------------------------------------------------------ */ --about-card-bg: var(--color-white); --about-panel: var(--color-sunset); --about-heading: var(--color-sunset-dark); --about-text: var(--color-gray-700); /* ------------------------------------------------------------------------ 15. COMPONENT: OUR FAVORITES (dish cards) ------------------------------------------------------------------------ */ --favs-bg: linear-gradient(90deg, var(--color-royal-orange-dark) 0%, var(--color-royal-orange) 16%, var(--color-royal-peach) 38%, var(--color-blue-glow) 56%, var(--color-blue) 66%, var(--color-blue-dark) 82%, var(--color-blue-deep) 100%); --favs-title: var(--color-white); --favs-accent: var(--color-royal-cream); --dish-radius: 26px; /* ------------------------------------------------------------------------ 16. COMPONENT: LOYALTY PROGRAM (sign-up form embed) ------------------------------------------------------------------------ */ --loyalty-bg: var(--color-blue-dark); /* White text passes AA */ --loyalty-glow: var(--color-blue); --loyalty-title: var(--color-yellow); --loyalty-title-shadow: var(--color-orange-red); --form-bg: var(--color-white); --form-border: var(--color-ink); /* ------------------------------------------------------------------------ 16b. COMPONENT: GOOGLE REVIEWS ------------------------------------------------------------------------ */ --reviews-bg: var(--color-blue-mist); --reviews-card-bg: var(--color-white); --reviews-featured: linear-gradient(160deg, var(--color-blue) 0%, var(--color-blue-dark) 55%, var(--color-blue-deep) 100%); --reviews-star: var(--color-yellow); --reviews-accent: var(--color-blue-dark); /* ------------------------------------------------------------------------ 16c. PAGE: MENU (menu.html — styles in css/menu.css) ------------------------------------------------------------------------ */ --menu-tabs-bg: rgba(248, 242, 228, 0.94); /* paper, slightly see-through */ --menu-tabs-height: 66px; /* used for scroll offset + sticky images */ --menu-thumb-size: 78px; --menu-alt-bg: var(--color-white); --menu-drinks-bg: var(--color-blue); --menu-drinks-edge: var(--color-blue-deep); /* ------------------------------------------------------------------------ 17. COMPONENT: MAP (radar-style reveal) ------------------------------------------------------------------------ */ --map-bg: var(--color-paper); --map-accent: var(--color-orange-red); --map-reveal-time: 1.4s; /* ------------------------------------------------------------------------ 18. COMPONENT: FOOTER (orange-to-yellow fiesta) ------------------------------------------------------------------------ */ --footer-top: var(--color-fiesta-orange); --footer-bottom: var(--color-fiesta-yellow); --footer-text: var(--color-ink); --footer-box-bg: var(--color-white); --footer-accent: var(--color-blue); --footer-bottom-bg: var(--color-fiesta-cream); /* Floating action menu */ --fab-bg: var(--color-orange-red); --fab-bg-hover: var(--btn-order-hover); --z-header: 100; --z-overlay: 200; --z-modal: 300; }