:root { /* Primary brand color: Peking University red */ --pku-red: #8B0012; --pku-red-dark: #6B000E; --pku-red-light: #A81024; /* Accent: warm gold for decorative elements */ --gold: #C9A84C; --gold-light: #E8D5A3; /* Neutral backgrounds */ --cream: #FAF7F2; --warm-gray: #F5F0EB; /* Text hierarchy: dark → body → muted */ --text-dark: #1A1A1A; --text-body: #3D3D3D; --text-muted: #6B6B6B; --white: #FFFFFF; /* Borders & shadows for depth */ --border-subtle: rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08); /* Border radius scale */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* Max content width for consistent centering */ --max-width: 1200px; /* Standard transition curve — smooth easing */ --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Layout constants — single source of truth */ --header-height: 72px; --logo-size: 46px; --nav-mobile-width: 280px; --hero-arrow-size: 44px; /* Hero slide gradient backgrounds */ --hero-slide-1: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); --hero-slide-2: linear-gradient(135deg, #2d1b69 0%, #1a1a2e 50%, #0f2027 100%); --hero-slide-3: linear-gradient(135deg, #1b0a1a 0%, #2d1b3d 50%, #1a1a2e 100%); /* Grid column widths — adjust for responsive behavior */ --col-chip: 340px; --col-goal: 300px; --col-join-us: 240px; --col-contact-card: 220px; --col-gallery: 300px; --col-member: 280px; } /* ═══════════════════════════════════════════════════════════════════ [2/7] CSS RESET & BASE STYLES Box-sizing: border-box ensures padding is included in width. Smooth scrolling enables native CSS scroll-behavior (anchor links). ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } /* ── Anti-flash for i18n handled via inline