/* ============================================================ Sedaye Vakil — Dark Theme Unlayered overrides — loaded AFTER the Tailwind build, so these rules win over @layer utilities/components without !important. Strategy: the whole site is driven by `var(--color-neutral-*)` and `var(--color-primary-*)` (both component CSS and Tailwind v4 utilities compile to these vars). Re-mapping the neutral scale under `html.sv-dark` inverts foreground/background site-wide. A handful of targeted rules patch the few places that use literal white (`.bg-white`) or hardcoded colors. Active when carries the `sv-dark` class. The class is set before first paint by the inline bootstrap script in header.php (default follows the OS `prefers-color-scheme`, overridable via the header toggle). ============================================================ */ :root { color-scheme: light; } html.sv-dark { color-scheme: dark; /* ── Neutral scale, inverted ── Low indices (page/surface backgrounds) become dark; high indices (text) become light. This single re-map flips most of the UI. */ --color-neutral-0: #1b1b2b; /* card / panel surfaces (was #fff) */ --color-neutral-50: #121120; /* page background */ --color-neutral-100: #232333; /* muted fills (search bar, chips) */ --color-neutral-200: #313147; /* borders / dividers */ --color-neutral-300: #42425c; --color-neutral-400: #5d5d77; --color-neutral-500: #9a9ab2; /* secondary text */ --color-neutral-600: #bcbccc; --color-neutral-700: #d6d6e2; /* nav links */ --color-neutral-800: #eef0f6; /* primary text (was #1A1A2E) */ --color-neutral-900: #ffffff; /* ── Primary (crimson), brightened for dark backgrounds ── The brand wine-red (#8B1538 / #6b1129) is too muddy on a dark surface, so the core ramp is lifted to a brighter crimson (500 ≈ #b41f47). White text on 500 stays high-contrast for buttons. Tint surfaces (50/100/200) used as light pink backgrounds in light mode are darkened instead. */ --color-primary-50: #251019; /* faint crimson tint surface */ --color-primary-100: #321420; /* hover tint */ --color-primary-200: #4a1c2e; --color-primary-300: #c76b86; --color-primary-400: #cf5e7e; --color-primary-500: #b41f47; /* brand main (was #8B1538) */ --color-primary-600: #9d1a3d; /* button hover */ --color-primary-700: #8b1538; /* (was #6b1129) */ /* Brand-tinted shadows are nearly invisible on dark; deepen elevation with plain dark shadows instead. */ --shadow-card: 0 2px 16px 0 rgba(0, 0, 0, 0.45); --shadow-card-hover: 0 12px 40px 0 rgba(0, 0, 0, 0.55); --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 16px 0 rgba(0, 0, 0, 0.45); --shadow-lg: 0 4px 24px 0 rgba(0, 0, 0, 0.5); --shadow-xl: 0 8px 40px 0 rgba(0, 0, 0, 0.55); } /* ── Literal `bg-white` surfaces → dark panel ── `bg-white` compiles to var(--color-white) (#fff), which we deliberately do NOT remap (text-white on buttons/hero must stay white). So flip the background utility by class instead. */ html.sv-dark .bg-white { background-color: var(--color-neutral-0); } /* Page body (carries `bg-white` from body_class) → darkest background. */ html.sv-dark body { background-color: var(--color-neutral-50); color: var(--color-neutral-800); } /* ── Header & sticky nav (translucent hardcoded whites) ── */ html.sv-dark #sv-header { background-color: var(--color-neutral-0); border-color: var(--color-neutral-200); } html.sv-dark .sv-primary-nav { background: color-mix(in srgb, var(--color-neutral-0) 92%, transparent); border-block-end-color: var(--color-neutral-200); } /* ── Accent text legibility ── primary-500 (#8B1538) stays the button color, but as TEXT on a dark surface it's too dark. Lighten the crimson where it's used as a foreground accent. */ html.sv-dark .sv-header-search > svg, html.sv-dark .sv-nav a:hover, html.sv-dark .sv-nav .current-menu-item > a, html.sv-dark .sv-nav .current_page_item > a, html.sv-dark .sv-mobile-drawer__title, html.sv-dark .sv-prose a, html.sv-dark .sv-prose h2 { color: #e07d99; } html.sv-dark .sv-prose a:hover { color: #eca7b9; } /* Crimson left-border accents read fine but soften slightly. */ html.sv-dark .sv-prose h2, html.sv-dark .sv-prose blockquote { border-color: #b15873; } /* Search "mark" highlight: light pink on dark crimson. */ html.sv-dark .sv-search-suggest__title mark { color: #fbe3ea; background: var(--color-primary-700); } /* Search-suggest chips use primary-800 as *text* — too dark on the dark panel. Lighten it, and keep the active/hover state white-on-crimson. */ html.sv-dark .sv-search-suggest__type, html.sv-dark .sv-search-suggest__view-all { color: #e07d99; } html.sv-dark .sv-search-suggest__item.is-active .sv-search-suggest__type, html.sv-dark .sv-search-suggest__link:hover .sv-search-suggest__type { color: #fff; } /* ── Article cards: a clear dark card in every context ── Two problems in dark mode: (a) inside the crimson `.sv-always-dark` homepage carousel the cards stayed white; (b) on normal dark pages the card surface was too close to the page background to read as a card. Fix: re-assert the inverted palette ON the card element itself, so its utility-class children (text-neutral-800/500, text-primary-500, the bg-neutral-200 image area) theme as dark-with-light-text regardless of any `.sv-always-dark` ancestor. Then give the card a distinct elevated surface, border and shadow. Custom properties declared on the card win over the ones inherited from `.sv-always-dark`, so this works inside the carousel too. */ html.sv-dark .sv-article-card { --color-neutral-0: #20202f; --color-neutral-50: #121120; --color-neutral-100: #232333; --color-neutral-200: #34344a; --color-neutral-300: #42425c; --color-neutral-400: #5d5d77; --color-neutral-500: #9a9ab2; --color-neutral-600: #bcbccc; --color-neutral-700: #d6d6e2; --color-neutral-800: #eef0f6; --color-neutral-900: #ffffff; --color-primary-50: #251019; --color-primary-100: #321420; --color-primary-200: #4a1c2e; --color-primary-500: #e07d99; } /* `.sv-article-card.bg-white` beats the global `.bg-white` flip; the `.sv-always-dark .bg-white` rule excludes article cards via :not(), so the card paints dark in the crimson carousel too. */ html.sv-dark .sv-article-card.bg-white { background-color: var(--color-neutral-0); border: 1px solid var(--color-neutral-200); box-shadow: none; } html.sv-dark .sv-article-card.bg-white:hover { border-color: #50506a; box-shadow: none; } /* Date badge: keep link accents pink for legibility, but the pill background should stay brand crimson — not the same token used for text-primary-500. */ html.sv-dark .sv-article-card .bg-primary-500.text-white { background-color: #b41f47; } /* ── Carousel dots (pill variant only) ── `carousel.php` uses `bg-neutral-800` with white dots — perfect in light mode, but the neutral re-map flips neutral-800 to a light color, leaving white dots on a light pill. Re-pin that pill to a dark surface. The homepage article carousel dots are transparent (no pill); a global rule would paint a light bar inside `.sv-always-dark` where neutral-200 is still a light token. */ html.sv-dark .sv-carousel-dots.bg-neutral-800 { background-color: var(--color-neutral-200); } /* ── Ghost watermark numbers ── `text-primary-500` at 7% opacity disappears on the dark surface. Use a lighter crimson and a touch more opacity so they stay subtly visible. */ html.sv-dark .sv-ghost-number { color: #e07d99; opacity: 0.16; } /* ── Landing icon tiles (category/service pages) ── Light mode uses a pale pink tile (`bg-primary-50`). In dark mode repaints to a solid near-black surface with a brighter icon accent. Covers box cards, benefit cards, hero bullets, and image fallbacks via `.sv-icon-tile`. */ html.sv-dark .sv-icon-tile { background-color: #0f0f1a; color: #e07d99; } html.sv-dark .group:hover .sv-icon-tile, html.sv-dark article:hover .sv-icon-tile { background-color: #1a1a2e; color: #f0a0b8; } /* ── Sticky contact tooltip ── Its background is a hardcoded #fff (tooltip body + the arrow ::after), so the text flips light via tokens but sits on white. Repaint on the dark surface; the token-based border/close-button adapt on their own. */ html.sv-dark .sv-sticky-contact__tooltip { background: var(--color-neutral-0); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5); } html.sv-dark .sv-sticky-contact__tooltip::after { background: var(--color-neutral-0); } /* ── Logo: swap to the dedicated dark variant (assets/img/logo-dark.webp) ── Both s are rendered in the header & footer; CSS shows the right one. */ .sv-logo-dark { display: none; } html.sv-dark .sv-logo-light { display: none; } html.sv-dark .sv-logo-dark { display: block; } /* ── Generic light/dark asset swap ── Render both variants; CSS shows the right one (e.g. the "about" image). */ .sv-dark-only { display: none; } html.sv-dark .sv-light-only { display: none; } html.sv-dark .sv-dark-only { display: block; } /* ── Intentionally-dark sections (e.g. "فرآیند همکاری") ── These are already dark-on-light by design and must look identical in both themes. Re-assert the original light-mode token values inside them so the neutral/primary re-map above doesn't flip their dark background or light text. Mark such a section with `sv-always-dark`. */ html.sv-dark .sv-always-dark { --color-primary-50: #FBF4F6; --color-primary-100: #F7EBEF; --color-primary-200: #EDCBD5; --color-primary-300: #D99EB0; --color-primary-400: #C0607C; --color-primary-500: #8B1538; --color-primary-600: #7A1230; --color-primary-700: #6B1129; --color-primary-800: #4A0E20; --color-primary-900: #3D0A19; --color-neutral-0: #FFFFFF; --color-neutral-50: #FAFAFA; --color-neutral-100: #F7F7F8; --color-neutral-200: #ECECEE; --color-neutral-300: #D4D4D8; --color-neutral-400: #A1A1AA; --color-neutral-500: #6B7280; --color-neutral-600: #4B5563; --color-neutral-700: #374151; --color-neutral-800: #1A1A2E; --color-neutral-900: #0F0F1A; } /* The section paints its own dark background — neutralize the .bg-white flip for any genuinely-white cards nested inside it. Article cards are excluded: they theme as dark "islands" (see .sv-article-card above) even here. */ html.sv-dark .sv-always-dark .bg-white:not(.sv-article-card) { background-color: #ffffff; } /* ── Crimson stat bands (landing pages) ── Labels use `text-primary-100` (a light pink in light mode). The dark-theme token re-map turns primary-100 into a dark tint, so sub-labels disappear on `bg-primary-700`. Re-pin them to white on these intentionally crimson bands. */ html.sv-dark .bg-primary-700.text-white .text-primary-100 { color: #ffffff; } /* ── White-ending gradients in dark mode ── `from-white` / `to-white` / `via-white/95` set their stop to var(--color-white) (#fff), producing a bright block on landing pages (top fade, image fallbacks, "read more" fades). Re-point the gradient stop to the dark surface so the fade blends into the dark UI. Covers all such gradients site-wide without per-element markup. */ html.sv-dark .to-white { --tw-gradient-to: var(--color-neutral-0); } html.sv-dark .from-white { --tw-gradient-from: var(--color-neutral-0); } html.sv-dark .via-white\/95 { --tw-gradient-via: color-mix(in oklab, var(--color-neutral-0) 95%, transparent); }