/* ========================================================= BangkokByStation — base stylesheet (mobile-first) Table of contents: 1. Custom properties / design tokens 2. Reset & base elements 3. Utilities 4. Buttons & form controls 5. Header & navigation 6. Hero 7. Transit lines 8. Promo banners 9. Why section 10. Blog 11. Footer ========================================================= */ /* ---------- 1. Custom properties ---------- */ :root { /* Brand colors */ --color-primary: #0064A8; --color-primary-dark: #004D82; --color-accent: #77CC00; --color-accent-dark: #5FA300; /* Text */ --color-text: #2F2F2F; --color-text-soft: #1F1F1F; --color-muted: #6B6B6B; --color-white: #FFFFFF; /* Surfaces */ --color-bg: #FFFFFF; --color-bg-soft: #F2F9FD; --color-bg-tint: #EAF6FB; --color-border: #E2E8F0; /* Status */ --color-danger: #C0392B; /* Transit line colors */ --line-sukhumvit: #66CC33; --line-silom: #006666; --line-gold: #C79F30; --line-blue: #0066CC; --line-purple: #663399; --line-yellow: #FFCC00; --line-pink: #FF99CC; --line-arl: #660033; /* Type */ --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-script: 'Caveat', cursive; /* Layout */ --container-max: 1400px; --container-pad: 1.25rem; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --shadow-sm: 0 6px 18px rgba(0, 40, 70, .08); --shadow-md: 0 14px 34px rgba(0, 40, 70, .12); /* Motion */ --transition-fast: 220ms cubic-bezier(.4, 0, .2, 1); --transition-med: 400ms cubic-bezier(.16, 1, .3, 1); --ease-smooth: cubic-bezier(.16, 1, .3, 1); } /* ---------- 2. Reset & base elements ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-base); color: var(--color-text); background: var(--color-bg); line-height: 1.55; -webkit-font-smoothing: antialiased; animation: page-fade-in .5s var(--ease-smooth) both; } /* Horizontal-overflow clipping (decorative swirls/blobs that bleed past their container edge, wide off-canvas carousels, etc.) used to live on html/body above - moved to #main instead. Per spec, giving an element overflow-x:hidden while leaving overflow-y unset forces the browser to compute overflow-y as auto too (not visible), and ANY ancestor with a non-"visible" overflow breaks position:sticky for every descendant relative to the viewport - .site-header is position:sticky (see below) but was never actually sticking because of exactly this, on html/body, two of its ancestors. #main is a *sibling* of
/