/* ============================================================ Hot Star — Colour tokens Core brand palette (the disciplined 5) + a playful "menu" accent set used sparingly for category tiles. ============================================================ */ :root { /* --- Core brand ------------------------------------------ */ --hs-navy: #08377E; /* deepest brand blue — dark grounds, headings */ --hs-blue: #1C51A4; /* PRIMARY brand blue — hero, nav, buttons */ --hs-sky: #588BDA; /* secondary blue — subheads, tints */ --hs-yellow: #FBCE3A; /* signal yellow — CTAs, prices, highlights */ --hs-pink: #D976AF; /* accent magenta — playful sections */ /* Tints / shades of the core (for surfaces & hovers) */ --hs-blue-700: #164186; /* pressed / darker blue */ --hs-blue-300: #7FA4DC; /* light blue */ --hs-blue-100: #C3D6E2; /* pale sky tile / card ground */ --hs-yellow-600:#E9B415; /* darker yellow (hover) */ --hs-navy-900: #052A63; /* extra-deep navy */ /* --- Playful "menu" accents (decorative, use 1 per block) */ --hs-lime: #C6E44B; --hs-coral: #F27875; --hs-purple: #CF6CE7; /* --- Neutrals -------------------------------------------- */ --hs-ink: #16181D; /* near-black body ink */ --hs-graphite: #4A4F58; /* secondary text */ --hs-mist: #8A9099; /* muted / captions */ --hs-line: #E3E7EC; /* hairline borders */ --hs-cream: #FBF7EF; /* warm off-white surface */ --hs-white: #FFFFFF; /* ============================================================ Semantic aliases — reference these in components ============================================================ */ --text-strong: var(--hs-navy); --text-body: var(--hs-ink); --text-muted: var(--hs-graphite); --text-on-blue: var(--hs-white); --text-on-yellow:var(--hs-navy); --text-price: var(--hs-navy); --surface-page: var(--hs-white); --surface-hero: var(--hs-blue); --surface-band: var(--hs-yellow); --surface-card: var(--hs-white); --surface-card-alt: var(--hs-blue-100); --surface-dark: var(--hs-navy); --brand-primary: var(--hs-blue); --brand-accent: var(--hs-yellow); --brand-pop: var(--hs-pink); --action-bg: var(--hs-yellow); --action-fg: var(--hs-navy); --action-bg-hover: var(--hs-yellow-600); --action-ring: var(--hs-navy); --border-strong: var(--hs-navy); --border-subtle: var(--hs-line); --focus-ring: var(--hs-blue); } /* ============================================================ Hot Star — Typography tokens Playfair Display = editorial serif for the big hero statements. Poppins = the workhorse: heavy for punchy headlines, regular for body & UI. Headlines are loud, UPPERCASE and tight. ============================================================ */ :root { --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif; /* Roles */ --font-hero: var(--font-serif); /* DELICIOUS FRIED CHICKEN */ --font-headline: var(--font-sans); /* THAT'S GOOD FOR THE SOUL */ --font-body: var(--font-sans); --font-ui: var(--font-sans); /* Weights */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-x: 800; /* @kind font */ --fw-black: 900; /* @kind font */ /* Fluid type scale (min .. max) */ --fs-display: clamp(3.5rem, 8vw, 7rem); /* @kind font */ --fs-h1: clamp(2.5rem, 5.5vw, 4.5rem); /* @kind font */ --fs-h2: clamp(1.9rem, 3.6vw, 3rem); /* @kind font */ --fs-h3: clamp(1.4rem, 2.4vw, 2rem); /* @kind font */ --fs-lead: clamp(1.1rem, 1.5vw, 1.375rem); /* @kind font */ --fs-body: 1rem; /* @kind font */ --fs-sm: 0.875rem; /* @kind font */ --fs-xs: 0.75rem; /* @kind font */ /* Line heights */ --lh-tight: 0.95; /* @kind font */ --lh-snug: 1.1; /* @kind font */ --lh-normal: 1.55; /* @kind font */ /* Tracking */ --ls-tight: -0.01em; /* @kind font */ --ls-normal: 0; /* @kind font */ --ls-label: 0.06em; /* uppercase labels @kind font */ --ls-caps: 0.02em; /* @kind font */ } /* ============================================================ Hot Star — Spacing & layout tokens 8-pt base rhythm; generous section padding to match the airy, poster-like marketing layouts. ============================================================ */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --gutter: 24px; /* grid gutter */ --section-pad-y: clamp(48px, 8vw, 128px); --container: 1200px; /* max content width */ --container-narrow: 780px; } /* ============================================================ Hot Star — Radius, shadow, border & motion tokens The brand look is FLAT and BOLD: solid colour blocks, thick navy outlines, small-to-medium radii, minimal soft shadows. Signature device = the zig-zag "chevron" section divider. ============================================================ */ :root { /* Radii — tiles are gently rounded, chips/pills are round */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; /* menu tiles */ --radius-lg: 22px; --radius-pill:999px; /* Borders — the brand uses confident, thick outlines */ --border-w: 2px; /* @kind spacing */ --border-w-bold: 3px; /* @kind spacing */ --border-color: var(--hs-navy); /* Shadows — used lightly; brand prefers flat blocks. Offset "sticker" shadow is the one signature depth cue. */ --shadow-none: none; --shadow-sm: 0 2px 8px rgba(8,55,126,0.10); --shadow-md: 0 10px 28px rgba(8,55,126,0.14); --shadow-sticker: 6px 6px 0 var(--hs-navy); /* hard offset "sticker" */ /* Motion — snappy, slightly bouncy, never sluggish */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur: 200ms; /* @kind other */ --dur-slow: 340ms; /* @kind other */ /* Zig-zag chevron divider (used as a bottom border on bands). Apply with: background + clip-path via .hs-zigzag utility. */ --zig-size: 28px; /* @kind other */ } /* Signature chevron/zig-zag edge — put on a full-bleed band. The element's own background shows the zig-zag against the next section. Size via --zig-size. */ .hs-zigzag-bottom { -webkit-mask: linear-gradient(#000 0 0); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--zig-size)), 97.5% 100%, 95% calc(100% - var(--zig-size)), 92.5% 100%, 90% calc(100% - var(--zig-size)), 87.5% 100%, 85% calc(100% - var(--zig-size)), 82.5% 100%, 80% calc(100% - var(--zig-size)), 77.5% 100%, 75% calc(100% - var(--zig-size)), 72.5% 100%, 70% calc(100% - var(--zig-size)), 67.5% 100%, 65% calc(100% - var(--zig-size)), 62.5% 100%, 60% calc(100% - var(--zig-size)), 57.5% 100%, 55% calc(100% - var(--zig-size)), 52.5% 100%, 50% calc(100% - var(--zig-size)), 47.5% 100%, 45% calc(100% - var(--zig-size)), 42.5% 100%, 40% calc(100% - var(--zig-size)), 37.5% 100%, 35% calc(100% - var(--zig-size)), 32.5% 100%, 30% calc(100% - var(--zig-size)), 27.5% 100%, 25% calc(100% - var(--zig-size)), 22.5% 100%, 20% calc(100% - var(--zig-size)), 17.5% 100%, 15% calc(100% - var(--zig-size)), 12.5% 100%, 10% calc(100% - var(--zig-size)), 7.5% 100%, 5% calc(100% - var(--zig-size)), 2.5% 100%, 0 calc(100% - var(--zig-size)) ); }