/* ===================================================================== theme.css — اکوآذرین shared design system - Design tokens for dark (default) and light (.light on ) - Tailwind class overrides for theme-aware backgrounds, borders, text - Utility classes used across pages (ticker, marquee, animations, etc) - Single source of truth — referenced by every *.html page ===================================================================== */ /* ============ FONTS ============ */ @font-face { font-family: "Charisma"; src: url("fonts/CharismaTF-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Charisma"; src: url("fonts/CharismaTF-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Charisma"; src: url("fonts/CharismaTF-Bold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Charisma"; src: url("fonts/CharismaTF-ExtraBold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Charisma"; src: url("fonts/CharismaTF-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Peyda"; src: url("fonts/Peyda-Thin.ttf") format("truetype"); font-weight: 100; font-display: swap; } @font-face { font-family: "Peyda"; src: url("fonts/Peyda-ExtraLight.ttf") format("truetype"); font-weight: 200; font-display: swap; } @font-face { font-family: "Peyda"; src: url("fonts/Peyda-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; } @font-face { font-family: "Peyda"; src: url("fonts/Peyda-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Peyda"; src: url("fonts/Peyda-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Peyda"; src: url("fonts/Peyda-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; } @font-face { font-family: "Peyda"; src: url("fonts/Peyda-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Peyda"; src: url("fonts/Peyda-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; } .font-peyda { font-family: "Peyda", "Charisma", "Vazirmatn", system-ui, sans-serif; } .eyebrow-peyda { font-family: "Peyda", "Charisma", "Vazirmatn", system-ui, sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em; line-height: 1.4; } @media (min-width: 768px) { .eyebrow-peyda { font-size: 15.5px; } } .label-peyda { font-family: "Peyda", "Charisma", "Vazirmatn", system-ui, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none !important; } @media (min-width: 768px) { .label-peyda { font-size: 12.5px; } } html, body { overflow-x: hidden; max-width: 100vw; } /* ============ DESIGN TOKENS ============ */ :root { --bg: #0a0a0a; --bg-2: #0f0f10; --bg-3: #141416; --card: #1a1a1c; --card-2: #222226; --card-soft: rgba(255, 255, 255, 0.02); --border: #27272a; --border-2: #3a3a3f; --text: #ffffff; --text-2: #e4e4e7; --text-mute: #a1a1aa; --text-faint: #71717a; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.6); /* semantic accents — same in both themes */ --accent: #e63946; --accent-dark: #c22735; --success: #10b981; --success-soft: #34d399; --warning: #f59e0b; --danger: #ef4444; } html.light { --bg: #f5f5f7; --bg-2: #fafafa; --bg-3: #ffffff; --card: #ffffff; --card-2: #f8f8fa; --card-soft: rgba(0, 0, 0, 0.015); --border: #e4e4e7; --border-2: #d4d4d8; --text: #0a0a0a; --text-2: #27272a; --text-mute: #52525b; --text-faint: #a1a1aa; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 20px -10px rgba(0, 0, 0, 0.1); } html, body { background: var(--bg); color: var(--text); transition: background-color 0.35s ease, color 0.35s ease; } body { font-family: "Charisma", "Peyda", "Vazirmatn", "Sahel", "IRANSans", system-ui, sans-serif; font-feature-settings: "ss01", "ss02", "ss03", "tnum"; -webkit-font-smoothing: antialiased; } body, button, input, select, textarea, kbd { font-family: inherit; } /* ============ LIGHT-MODE TAILWIND OVERRIDES ============ */ .logo-light { display: none; } html.light .logo-light { display: block !important; } html.light .logo-dark { display: none !important; } /* Backgrounds (ink scale → semantic) */ html.light .bg-ink-900 { background: var(--bg) !important; } html.light .bg-ink-850 { background: var(--bg-2) !important; } html.light .bg-ink-800 { background: var(--bg-3) !important; } html.light .bg-ink-700 { background: #ffffff !important; } html.light .bg-ink-600 { background: #f4f4f5 !important; } html.light .bg-ink-500 { background: #e4e4e7 !important; } html.light .bg-ink-800\/40 { background: rgba(250, 250, 252, 0.6) !important; } html.light .bg-ink-800\/50 { background: rgba(250, 250, 252, 0.7) !important; } html.light .bg-ink-800\/60 { background: rgba(250, 250, 252, 0.85) !important; } html.light .bg-ink-800\/70 { background: rgba(250, 250, 252, 0.92) !important; } html.light .bg-ink-800\/80 { background: rgba(255, 255, 255, 0.92) !important; } html.light .bg-ink-800\/90 { background: rgba(255, 255, 255, 0.94) !important; } html.light .bg-ink-800\/95 { background: rgba(255, 255, 255, 0.95) !important; } html.light .bg-ink-900\/40 { background: rgba(255, 255, 255, 0.85) !important; } html.light .bg-ink-900\/60 { background: rgba(255, 255, 255, 0.96) !important; } html.light .bg-ink-900\/70 { background: rgba(255, 255, 255, 0.96) !important; } html.light .bg-ink-900\/80 { background: rgba(255, 255, 255, 0.97) !important; } html.light .bg-ink-900\/90 { background: rgba(245, 245, 247, 0.92) !important; } html.light .bg-ink-700\/30 { background: rgba(244, 244, 245, 0.4) !important; } html.light .bg-ink-700\/40 { background: rgba(244, 244, 245, 0.55) !important; } html.light .bg-ink-700\/50 { background: rgba(244, 244, 245, 0.65) !important; } html.light .bg-ink-700\/60 { background: rgba(255, 255, 255, 0.95) !important; } html.light .bg-ink-700\/70 { background: rgba(255, 255, 255, 0.95) !important; } html.light .bg-ink-700\/80 { background: rgba(255, 255, 255, 0.95) !important; } /* black backgrounds → white in light */ html.light .bg-black { background: #ffffff !important; } html.light .bg-black\/20 { background: rgba(255, 255, 255, 0.4) !important; } html.light .bg-black\/25 { background: rgba(255, 255, 255, 0.45) !important; } html.light .bg-black\/30 { background: rgba(255, 255, 255, 0.55) !important; } html.light .bg-black\/40 { background: rgba(255, 255, 255, 0.65) !important; } html.light .bg-black\/50 { background: rgba(255, 255, 255, 0.75) !important; } html.light .bg-black\/60 { background: rgba(255, 255, 255, 0.8) !important; } html.light .bg-black\/70 { background: rgba(255, 255, 255, 0.85) !important; } /* zinc backgrounds — used in some chips/cards */ html.light .bg-zinc-900 { background: var(--bg-2) !important; } html.light .bg-zinc-800 { background: var(--bg-3) !important; } html.light .bg-zinc-700 { background: #f4f4f5 !important; } html.light .bg-zinc-800\/60 { background: rgba(255, 255, 255, 0.92) !important; } html.light .bg-zinc-900\/60 { background: rgba(255, 255, 255, 0.96) !important; } /* Borders */ html.light .border-ink-500 { border-color: var(--border) !important; } html.light .border-ink-400 { border-color: var(--border-2) !important; } html.light .border-ink-400\/70 { border-color: var(--border-2) !important; } html.light .border-ink-500\/60 { border-color: var(--border) !important; } html.light .border-white\/5 { border-color: rgba(0, 0, 0, 0.05) !important; } html.light .border-white\/10 { border-color: rgba(0, 0, 0, 0.08) !important; } html.light .border-white\/20 { border-color: rgba(0, 0, 0, 0.12) !important; } html.light .divide-ink-500 > * + * { border-color: var(--border) !important; } /* Text colors */ html.light .text-white { color: var(--text) !important; } html.light .text-zinc-100 { color: var(--text-2) !important; } html.light .text-zinc-200 { color: #18181b !important; } html.light .text-zinc-300 { color: #3f3f46 !important; } html.light .text-zinc-400 { color: var(--text-mute) !important; } html.light .text-zinc-500 { color: var(--text-faint) !important; } html.light .text-zinc-600 { color: #52525b !important; } html.light .text-zinc-700 { color: #27272a !important; } html.light .placeholder\:text-zinc-500::placeholder { color: #a1a1aa !important; } html.light .placeholder\:text-zinc-600::placeholder { color: #a1a1aa !important; } /* Force pure white ignoring light theme */ .text-pure-white { color: #ffffff !important; } .text-pure-white\/80 { color: rgba(255, 255, 255, 0.8) !important; } .text-pure-white\/70 { color: rgba(255, 255, 255, 0.7) !important; } /* Hover states */ html.light .hover\:bg-ink-700:hover { background: #f4f4f5 !important; } html.light .hover\:bg-ink-700\/50:hover { background: #f4f4f5 !important; } html.light .hover\:bg-ink-600:hover { background: #e4e4e7 !important; } html.light .hover\:bg-ink-800:hover { background: #fafafa !important; } html.light .hover\:border-ink-400:hover { border-color: #a1a1aa !important; } html.light .hover\:border-zinc-300:hover { border-color: #71717a !important; } html.light .hover\:bg-black\/50:hover { background: rgba(0, 0, 0, 0.06) !important; } html.light .hover\:bg-white\/5:hover { background: rgba(0, 0, 0, 0.04) !important; } html.light .hover\:bg-white\/10:hover { background: rgba(0, 0, 0, 0.06) !important; } html.light .hover\:text-white:hover { color: var(--text) !important; } /* Gradients to base bg */ html.light .from-ink-900 { --tw-gradient-from: var(--bg) !important; --tw-gradient-to: rgb(245 245 247 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.light .to-ink-900 { --tw-gradient-to: var(--bg) !important; } html.light .via-ink-900 { --tw-gradient-to: rgb(245 245 247 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--bg), var(--tw-gradient-to) !important; } /* Rings/focus */ html.light .ring-ink-900 { --tw-ring-color: #ffffff !important; } html.light .ring-white\/10 { --tw-ring-color: rgba(0, 0, 0, 0.08) !important; } /* Utility patterns that need flipped pigments */ html.light .placeholder-stripe { background-image: repeating-linear-gradient( 135deg, rgba(0, 0, 0, 0.045) 0 12px, rgba(0, 0, 0, 0) 12px 24px ), linear-gradient(180deg, #fafafb 0%, #ececef 100%) !important; } html.light .dotted-bg { background-image: radial-gradient( rgba(0, 0, 0, 0.1) 1px, transparent 1px ) !important; } /* card-hover dark border is too harsh in light → use border token */ html.light .card-hover:hover { border-color: var(--border-2) !important; } /* ============ NEWS TICKER (always dark band for visual contrast) ============ */ .ticker-shell { background: #0a0a0a; } html.light .ticker-shell { background: #ffffff !important; } .ticker-headline { color: #fafafa; } html.light .ticker-headline { color: #0a0a0a !important; } .ticker-fade-r { background: linear-gradient(to left, #0a0a0a, transparent); } .ticker-fade-l { background: linear-gradient(to right, #0a0a0a, transparent); } html.light .ticker-fade-r { background: linear-gradient(to left, #ffffff, transparent); } html.light .ticker-fade-l { background: linear-gradient(to right, #ffffff, transparent); } /* ============ NUM / TABULAR ============ */ .ltr-num, .tabular-nums { font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; } .ltr-num { direction: ltr; unicode-bidi: isolate; } .num-display { font-family: "JetBrains Mono", "Charisma", "Vazirmatn", system-ui, monospace; font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .stat-num { font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; font-weight: 700; letter-spacing: -0.015em; } /* ============ TAB / CONTENT ENTRANCE ANIMATIONS ============ */ @keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeinUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeinSoft { from { opacity: 0; } to { opacity: 1; } } .tab-anim { animation: fadein 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; } .tab-anim-card { animation: fadeinUp 0.45s cubic-bezier(0.4, 0, 0.2, 1) both; } .tab-anim-soft { animation: fadeinSoft 0.5s ease-out both; } @media (prefers-reduced-motion: reduce) { .tab-anim, .tab-anim-card, .tab-anim-soft, .ticker-track, [class*="animate-"] { animation: none !important; transition: none !important; } } /* ============ SCROLLBARS ============ */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; } /* ============ DECORATIVE ============ */ .orb-red { background: radial-gradient( closest-side, rgba(230, 57, 70, 0.55), rgba(230, 57, 70, 0) 70% ); } .orb-green { background: radial-gradient( closest-side, rgba(16, 185, 129, 0.45), rgba(16, 185, 129, 0) 70% ); } .placeholder-stripe { background-image: repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.04) 0 12px, rgba(255, 255, 255, 0) 12px 24px ), linear-gradient(180deg, #1c1c1f 0%, #141416 100%); } .dotted-bg { background-image: radial-gradient( rgba(255, 255, 255, 0.06) 1px, transparent 1px ); background-size: 24px 24px; } .hero-gradient { background: radial-gradient( 120% 80% at 20% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50% ), radial-gradient( 80% 60% at 90% 100%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 60% ), linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); } .search-glow { background: radial-gradient( closest-side, rgba(230, 57, 70, 0.18), transparent 70% ); } /* ============ TICKER MARQUEE ============ */ .ticker-track { display: flex; gap: 2.5rem; animation: tickerScroll 80s linear infinite; will-change: transform; } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(50%); } } .ticker-track:hover { animation-play-state: paused; } /* ============ PILL & CARDS ============ */ .pill-active-shadow { box-shadow: 0 8px 28px -10px rgba(16, 185, 129, 0.55), 0 0 0 1px rgba(16, 185, 129, 0.35) inset; } .card-hover { transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .card-hover:hover { transform: translateY(-2px); border-color: #3a3a3f; } /* ============ LINE CLAMP ============ */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ============ A11Y FOCUS ============ */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ============ TYPOGRAPHY ============ */ h1, h2, h3, h4 { letter-spacing: -0.012em; font-weight: 700; } /* ============ IMG/MEDIA ============ */ img { max-width: 100%; height: auto; } .map-iframe { filter: invert(90%) hue-rotate(180deg) contrast(85%) grayscale(100%); mix-blend-screen: screen; } html.light .map-iframe { filter: grayscale(100%) contrast(110%); mix-blend-screen: normal; }