/* * ============================================================ * DESIGN TOKENS * Global CSS custom properties (variables) for the entire site. * Change a value here to update it everywhere. * ============================================================ */ /* --- Fonts --- */ /* Latin fonts, self-hosted (were loaded from fonts.googleapis.com: one less third-party request on every page). */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/Anton-1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/Fraunces-2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/Fraunces-2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/Fraunces-2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/Inter-3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/Inter-3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/JetBrainsMono-4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/JetBrainsMono-4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/JetBrainsMono-4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Potk'; src: url('../assets/fonts/Potk.woff2') format('woff2'), url('../assets/fonts/Potk.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Kalameh'; src: url('../assets/fonts/Kalameh-Thin.woff2') format('woff2'), url('../assets/fonts/Kalameh-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Kalameh'; src: url('../assets/fonts/Kalameh-ExtraLight.woff2') format('woff2'), url('../assets/fonts/Kalameh-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Kalameh'; src: url('../assets/fonts/Kalameh-Light.woff2') format('woff2'), url('../assets/fonts/Kalameh-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Kalameh'; src: url('../assets/fonts/Kalameh-Regular.woff2') format('woff2'), url('../assets/fonts/Kalameh-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Kalameh'; src: url('../assets/fonts/Kalameh-Medium.woff2') format('woff2'), url('../assets/fonts/Kalameh-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Kalameh'; src: url('../assets/fonts/Kalameh-SemiBold.woff2') format('woff2'), url('../assets/fonts/Kalameh-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Kalameh'; src: url('../assets/fonts/Kalameh-Bold.woff2') format('woff2'), url('../assets/fonts/Kalameh-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Kalameh'; src: url('../assets/fonts/Kalameh-ExtraBold.woff2') format('woff2'), url('../assets/fonts/Kalameh-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Kalameh'; src: url('../assets/fonts/Kalameh-Black.woff2') format('woff2'), url('../assets/fonts/Kalameh-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } :root { /* ---- Color Palette (brand core — reused by both themes below) ---- */ --primary-navy: #1A365D; /* Deep luxury navy */ --primary-navy-dark: #0F172A; /* Very dark navy for footer / dark sections */ --bg-base: #FFFFFF; --neutral-border: #E2E8F0; --neutral-soft-bg: #F8FAFC; --accent-gold: #5D0D18; /* Regal burgundy */ --accent-gold-hover: #821D2A; --accent-soft-bg: rgba(93, 13, 24, 0.08); /* soft accent tint — badge/icon-circle backgrounds */ /* ---- Text ---- */ --ink: #1A365D; --ink-soft: #55657B; /* ---- Button Gradient ---- */ --grad-btn-start: #821D2A; --grad-btn-end: #5D0D18; /* ---- Glassmorphism ---- No `backdrop-filter` anywhere in this codebase anymore (see css/header.css's header comment for the full performance reasoning) — these are now plain translucent solid colors, not "glass" in the blur sense. Kept the name (every component below already references it) and bumped the opacity up from what blur used to need: a blurred background can get away with more transparency because the blur itself softens whatever busy content shows through; a flat translucent color needs more opacity to keep text/icons on top legible without that softening. */ --glass-bg: rgba(255, 255, 255, 0.9); --glass-bg-hover: rgba(255, 255, 255, 0.97); --glass-border: rgba(226, 232, 240, 0.8); --glass-border-highlight: rgba(255, 255, 255, 1); --glass-shadow: 0 10px 30px 0 rgba(26, 54, 93, 0.06); --glass-shadow-hover: 0 15px 40px 0 rgba(26, 54, 93, 0.12); /* ---- Extended surface / semantic tokens ---- These sit on top of the brand palette above so both the homepage's original selectors (which reference the brand vars directly) and any new component (which should prefer the semantic names below) stay in sync automatically when the theme changes. */ --color-surface: #FFFFFF; /* solid card / panel surfaces (info-card, footer panel) */ --color-surface-elevated: #FFFFFF; /* surfaces raised above --color-surface (footer-btn highlight) */ --header-glass-bg: rgba(255, 255, 255, 0.94); --btn-outline-bg: rgba(255, 255, 255, 0.92); --btn-outline-bg-hover: #FFFFFF; --ink-muted: #64748B; /* tertiary text — de-emphasized but ≥4.5:1 on the light surfaces (WCAG AA) */ --ink-disabled: #B8C2D1; /* disabled text — legible but unmistakably inactive */ --color-text-primary: var(--ink); --color-text-secondary: var(--ink-soft); --color-text-muted: var(--ink-muted); --color-text-disabled: var(--ink-disabled); --color-text-inverse: #F8FAFC; /* Neutral "highlight" surface — Level 4 in the elevation ladder below, for a selected/active element that isn't already carrying the accent color itself (e.g. the centered team-carousel card). */ --color-surface-highlight: #EDF2FB; --color-accent: var(--accent-gold); --color-accent-hover: var(--accent-gold-hover); --color-border: var(--neutral-border); --color-success: #17794F; --color-success-bg: #EAFBF2; --color-warning: #B7791F; --color-warning-bg: #FFFBEB; --color-error: #C0362C; --color-error-bg: #FEF0EF; --color-input-bg: #FFFFFF; --color-input-border: var(--neutral-border); --color-overlay: rgba(15, 23, 42, 0.5); --feature-content-bg: rgba(255, 255, 255, 0.95); /* ---- Typography ---- */ --font-body: 'Kalameh', sans-serif; --font-display-fa: 'Kalameh', sans-serif; --font-display-latin:'Fraunces', Georgia, serif; --font-mono: 'JetBrains Mono', 'Kalameh', monospace; /* ---- Spacing scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---- Border Radii ---- */ --radius-sm: 16px; --radius-md: 24px; --radius-lg: 40px; --radius-pill: 100px; /* ---- Shadows ---- */ --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.04); --shadow-md: 0 15px 35px rgba(26, 54, 93, 0.08); --shadow-lg: 0 25px 60px rgba(26, 54, 93, 0.14); /* ---- Transitions ---- */ --transition-fast: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-base: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-theme: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* * ============================================================ * DARK THEME * Activated via [data-theme="dark"] on (see the inline * no-flash script in and js/theme.js). Every homepage * selector already consumes the brand variables above, so * redeclaring them here re-themes the entire site — including * every existing page — without touching component CSS files. * ============================================================ */ [data-theme="dark"] { /* * A premium deep-navy/electric-blue system — cinematic and luminous * rather than a flat "dark background + colored buttons" theme. Blue is * the dominant, primary interactive accent (buttons, focus states, * active/selected states, icons, key highlights); the brand's existing * burgundy accent (--accent-gold, kept under its original name so every * existing selector re-themes automatically) is preserved but pulled * back to a secondary role — decorative highlights, badges, hover * borders, attention-oriented UI — so it never competes with blue for * dominance. A warm gold (--color-warning) is preserved for the rare * sparing "special/attention" accent. Roughly 80–85% of the palette is * the navy/blue/neutral system below; burgundy + gold together make up * the small remaining accent share. * * 5-level surface elevation ladder, each rung strictly lighter (and * bluer) than the one below it, so a card always reads as raised above * its own section instead of blending into it: * * L0 --bg-base #0A0F1E page canvas — deep blue-black, * never flat #000, always a * subtle blue undertone * L1 --primary-navy-dark #111A2E "signature dark" panels: * footer, placement banner, * hero philosophy box, etc. * L2 --neutral-soft-bg / * --color-surface #16213A standard cards & panels * L3 --color-surface-elevated #1E2D4D hover / raised / focused * L4 --color-surface-highlight #28395F active / selected element */ --bg-base: #0A0F1E; --primary-navy-dark: #111A2E; --neutral-soft-bg: #16213A; --color-surface-elevated: #1E2D4D; --color-surface-highlight: #28395F; --primary-navy: #F1F5F9; /* headings — near-white, same tone as body text, one coherent "primary text" identity */ --neutral-border: rgba(148, 163, 184, 0.16); /* cool blue-gray hairline, visible against every surface above without ever reading as bright */ /* The existing burgundy accent, deepened and desaturated a touch from its previous near-neon pink-red so it reads as rich/controlled — a secondary color, never the primary one — rather than competing with the new electric blue below. Still the same variable every existing badge/link/hover-border/underline selector already reads from. */ --accent-gold: #D9526E; --accent-gold-hover: #E67A93; --accent-soft-bg: rgba(217, 82, 110, 0.14); /* soft accent tint — badge/icon-circle backgrounds */ /* The new primary accent — electric/royal blue. Used directly by a handful of selectors that need "the accent, not the burgundy one" (see components.css/footer.css/theme.css), and drives the primary button gradient below, which is what makes it the dominant color a visitor actually sees across every "شروع/رزرو/..." CTA on the site. */ --accent-blue: #4C8DFF; --accent-blue-hover: #7BAAFF; /* Text hierarchy: one cool near-white hue at four opacities — primary → secondary → muted → disabled — rather than four unrelated grays, so the whole hierarchy still reads as one coherent identity while each step stays clearly legible against the navy surfaces above. */ --ink: #F1F5F9; --ink-soft: rgba(226, 232, 240, 0.75); --ink-muted: rgba(148, 163, 184, 0.62); --ink-disabled: rgba(100, 116, 139, 0.55); /* Primary button gradient — this is what actually makes "primary buttons are blue" true across the whole site: every .btn-cta already reads its background from these two variables (شروع یادگیری, رزرو جلسه رایگان, the header's ورود/ثبت‌نام, ...), so re-pointing them here is a single, clean, site-wide change with no component CSS touched. */ --grad-btn-start: #5B9CFF; --grad-btn-end: #2158D6; /* See the :root block's comment above these same names — no `backdrop-filter` anywhere anymore, so these are solid smoky-navy translucent colors, opacity raised from their old blur-era values to stay legible without the blur that used to soften whatever scrolled behind them. */ --glass-bg: rgba(15, 23, 42, 0.9); --glass-bg-hover: rgba(30, 45, 77, 0.94); --glass-border: rgba(148, 163, 184, 0.14); --glass-border-highlight: rgba(255, 255, 255, 0.06); --glass-shadow: 0 10px 30px 0 rgba(2, 6, 16, 0.5); /* A layered shadow plus a soft blue ambient glow — not just a darker shadow — so a hovered card reads as "lit from within," not merely "elevated." */ --glass-shadow-hover: 0 20px 45px 0 rgba(2, 6, 16, 0.6), 0 0 40px 0 rgba(76, 141, 255, 0.14); --color-surface: #16213A; --header-glass-bg: rgba(10, 15, 30, 0.9); --btn-outline-bg: rgba(17, 26, 46, 0.88); --btn-outline-bg-hover: #1E2D4D; --color-text-inverse: #F8FAFC; --color-success: #34C98A; --color-success-bg: rgba(52, 201, 138, 0.14); /* Warm luminous gold — preserved as its own sparing "special/attention" accent, distinct from both the primary blue and the secondary burgundy. */ --color-warning: #E8B84B; --color-warning-bg: rgba(232, 184, 75, 0.14); --color-error: #F0716A; --color-error-bg: rgba(240, 113, 106, 0.16); --color-input-bg: #0E1626; --color-input-border: rgba(148, 163, 184, 0.28); --color-overlay: rgba(4, 8, 18, 0.72); --feature-content-bg: rgba(17, 26, 46, 0.94); --shadow-sm: 0 4px 15px rgba(2, 6, 16, 0.35); --shadow-md: 0 15px 35px rgba(2, 6, 16, 0.45); --shadow-lg: 0 25px 60px rgba(2, 6, 16, 0.6); }