From 9eea6550ad018773c5c12a26581eac9cac585fa9 Mon Sep 17 00:00:00 2001 From: dvorakmortonxd Date: Thu, 22 Oct 2026 23:22:05 +0000 Subject: [PATCH] Add 2026-dark theme and set as default --- README.md | 11 +- app.ini.example | 4 +- install.sh | 4 +- templates/custom/header.tmpl | 7 +- themes/theme-2026-dark.css | 638 +++++++++++++++++++++++++++++++++++ 5 files changed, 652 insertions(+), 12 deletions(-) create mode 100644 themes/theme-2026-dark.css diff --git a/README.md b/README.md index 8258201..42b7f7e 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,8 @@ GitHub/GitLab-style logged-out homepage. | Theme | Notes | | --- | --- | -| `aurora-light` | **Default.** Soft slate base, blue primary, teal links | +| `2026-dark` | **Default.** Obsidian-midnight dark with electric cyan, emerald-teal, violet & coral accents, crisp 1px specular borders, and ambient glow (inspired by Omarchy, JetBrains, GitHub, GitLab, CachyOS, Hack Club & Lovable) | +| `aurora-light` | Soft slate base, blue primary, teal links | | `aurora-dark` | Neutral-charcoal dark variant | | `gruvbox-dark` / `gruvbox-light` | Gruvbox palette with the soft-UI layer | | `gruvbox-soft-dark` | Legacy alias for `gruvbox-dark` | @@ -48,8 +49,8 @@ upgrade Forgejo and want the newer built-in palettes. ```ini [ui] - THEMES = forgejo-auto,forgejo-light,forgejo-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal - DEFAULT_THEME = aurora-light + THEMES = forgejo-auto,forgejo-light,forgejo-dark,2026-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal + DEFAULT_THEME = 2026-dark ``` 3. Hard-refresh the browser (`Ctrl+Shift+R`). Forgejo serves custom CSS with a @@ -59,8 +60,8 @@ upgrade Forgejo and want the newer built-in palettes. ## Navbar dark/light toggle `templates/custom/header.tmpl` injects a neumorphic sun/moon switch into the -navbar (left of *Register* when logged out). It flips between `aurora-light` -and `aurora-dark`, stores the choice in `localStorage` under `dxd-theme`, and +navbar (left of *Register* when logged out). It flips between `2026-dark` +and `aurora-light`, stores the choice in `localStorage` under `dxd-theme-2026`, and applies it before the page paints. ## Security / no secrets diff --git a/app.ini.example b/app.ini.example index 9fb0753..11b38bf 100644 --- a/app.ini.example +++ b/app.ini.example @@ -4,5 +4,5 @@ [ui] APP_NAME = GitDXD -THEMES = forgejo-auto,forgejo-light,forgejo-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal -DEFAULT_THEME = aurora-light +THEMES = forgejo-auto,forgejo-light,forgejo-dark,2026-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal +DEFAULT_THEME = 2026-dark diff --git a/install.sh b/install.sh index 1b46aab..9fb2de4 100755 --- a/install.sh +++ b/install.sh @@ -30,7 +30,7 @@ echo echo "Next, add this to app.ini and restart Forgejo:" echo echo " [ui]" -echo " THEMES = forgejo-auto,forgejo-light,forgejo-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal" -echo " DEFAULT_THEME = aurora-light" +echo " THEMES = forgejo-auto,forgejo-light,forgejo-dark,2026-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal" +echo " DEFAULT_THEME = 2026-dark" echo echo "Then hard-refresh the browser (Ctrl+Shift+R)." diff --git a/templates/custom/header.tmpl b/templates/custom/header.tmpl index 365ee46..b005729 100644 --- a/templates/custom/header.tmpl +++ b/templates/custom/header.tmpl @@ -69,8 +69,8 @@ (function () { "use strict"; var LIGHT = "aurora-light"; - var DARK = "aurora-dark"; - var KEY = "dxd-theme"; + var DARK = "2026-dark"; + var KEY = "dxd-theme-2026"; function themeLink() { return document.querySelector('link[rel="stylesheet"][href*="/css/theme-"]'); @@ -87,12 +87,13 @@ function mode() { var link = themeLink(); - if (!link) return "light"; + if (!link) return "dark"; return /-light\.css/.test(link.getAttribute("href")) ? "light" : "dark"; } /* Apply the saved preference before the page paints, so there is no flash. */ try { + localStorage.removeItem("dxd-theme"); var saved = localStorage.getItem(KEY); if (saved === "dark") apply(DARK); else if (saved === "light") apply(LIGHT); diff --git a/themes/theme-2026-dark.css b/themes/theme-2026-dark.css new file mode 100644 index 0000000..660f7c5 --- /dev/null +++ b/themes/theme-2026-dark.css @@ -0,0 +1,638 @@ +/* + * theme-2026-dark.css ("2026 dark") + * ───────────────────────────────────────────────────────────────────────── + * Default theme for GitDXD (2026). + * + * Inspired by: + * • Omarchy — deep obsidian-midnight ink, crisp 1px hairlines, TUI clarity + * • CachyOS — electric cyan (#38bdf8) & emerald-teal (#2dd4bf) aurora glow + * • JetBrains — high-contrast dark surfaces, multi-stop electric gradients, + * and crisp JetBrains Mono code typography + * • GitHub/GitLab — clean Primer/Pajamas dark hierarchy, readable diffs & pills + * • Hack Club — vibrant coral-rose (#fb7185 / #ec3750) & warm amber accents + * • Lovable — 2026 Bento card elevation, top-edge specular rim, ambient glow + */ + +@import url("./_base-forgejo-dark.css"); +@import url("./theme-neumorphism.css"); + +:root { + color-scheme: dark; + --is-dark-theme: true; + + /* ── Typography ─────────────────────────────────────────────────── */ + --fonts-proportional: "Inter", "Geist", "SF Pro Text", -apple-system, + "Segoe UI", "Noto Sans", system-ui, sans-serif !important; + --fonts-monospace: "JetBrains Mono", "Berkeley Mono", "Cascadia Code", + "Fira Code", "SF Mono", "Source Code Pro", ui-monospace, + "DejaVu Sans Mono", Consolas, monospace !important; + + /* ── Obsidian & midnight-slate neutral ramp (dark → light) ──────── */ + --steel-900: #080a0f; + --steel-850: #0b0d13; + --steel-800: #0d1017; + --steel-750: #111520; + --steel-700: #151a27; + --steel-650: #1b2232; + --steel-600: #232c40; + --steel-550: #2f3b54; + --steel-500: #4b5975; + --steel-450: #697896; + --steel-400: #8b9bb8; + --steel-350: #a8b6cf; + --steel-300: #c0cce0; + --steel-250: #d5dfed; + --steel-200: #e2e8f0; + --steel-150: #edf2f7; + --steel-100: #f8fafc; + + /* ── Primary: Electric Cyan-Blue (CachyOS / JetBrains / GitHub) ─── */ + --color-primary: #38bdf8; + --color-primary-contrast: #060911; + --color-primary-dark-1: #7dd3fc; + --color-primary-dark-2: #7dd3fc; + --color-primary-dark-3: #bae6fd; + --color-primary-dark-4: #bae6fd; + --color-primary-dark-5: #e0f2fe; + --color-primary-dark-6: #e0f2fe; + --color-primary-dark-7: #f0f9ff; + --color-primary-light-1: #0ea5e9; + --color-primary-light-2: #0284c7; + --color-primary-light-3: #2563eb; + --color-primary-light-4: #1d4ed8; + --color-primary-light-5: #1e40af; + --color-primary-light-6: #1e3a8a; + --color-primary-light-7: #172554; + --color-primary-alpha-10: rgba(56, 189, 248, 0.10); + --color-primary-alpha-20: rgba(56, 189, 248, 0.20); + --color-primary-alpha-30: rgba(56, 189, 248, 0.30); + --color-primary-alpha-40: rgba(56, 189, 248, 0.40); + --color-primary-alpha-50: rgba(56, 189, 248, 0.50); + --color-primary-alpha-60: rgba(56, 189, 248, 0.60); + --color-primary-alpha-70: rgba(56, 189, 248, 0.70); + --color-primary-alpha-80: rgba(56, 189, 248, 0.80); + --color-primary-alpha-90: rgba(56, 189, 248, 0.90); + --color-primary-hover: #7dd3fc; + --color-primary-active: #0ea5e9; + + /* ── Secondary (Midnight Slate) ─────────────────────────────────── */ + --color-secondary: #1b2232; + --color-secondary-dark-1: #2f3b54; + --color-secondary-dark-2: #4b5975; + --color-secondary-dark-3: #697896; + --color-secondary-dark-4: #8b9bb8; + --color-secondary-dark-5: #a8b6cf; + --color-secondary-dark-6: #c0cce0; + --color-secondary-dark-7: #d5dfed; + --color-secondary-dark-8: #e2e8f0; + --color-secondary-dark-9: #edf2f7; + --color-secondary-dark-10: #f8fafc; + --color-secondary-dark-11: #f8fafc; + --color-secondary-dark-12: #ffffff; + --color-secondary-dark-13: #ffffff; + --color-secondary-light-1: #232c40; + --color-secondary-light-2: #151a27; + --color-secondary-light-3: #111520; + --color-secondary-light-4: #0d1017; + --color-secondary-alpha-10: rgba(27, 34, 50, 0.10); + --color-secondary-alpha-20: rgba(27, 34, 50, 0.20); + --color-secondary-alpha-30: rgba(27, 34, 50, 0.30); + --color-secondary-alpha-40: rgba(27, 34, 50, 0.40); + --color-secondary-alpha-50: rgba(27, 34, 50, 0.50); + --color-secondary-alpha-60: rgba(27, 34, 50, 0.60); + --color-secondary-alpha-70: rgba(27, 34, 50, 0.70); + --color-secondary-alpha-80: rgba(27, 34, 50, 0.80); + --color-secondary-alpha-90: rgba(27, 34, 50, 0.90); + --color-secondary-hover: #232c40; + --color-secondary-active: #2f3b54; + + /* ── Named Accents: Cyan, Violet, Coral (Hack Club), Emerald ────── */ + --color-red: #fb7185; + --color-orange: #fb923c; + --color-yellow: #fbbf24; + --color-olive: #a3e635; + --color-green: #34d399; + --color-teal: #2dd4bf; + --color-blue: #38bdf8; + --color-violet: #818cf8; + --color-purple: #a78bfa; + --color-pink: #f472b6; + --color-brown: #d6a27c; + --color-grey: #8b9bb8; + --color-black: #111520; + + --color-red-light: #fda4af; + --color-orange-light: #fdba74; + --color-yellow-light: #fde047; + --color-olive-light: #bef264; + --color-green-light: #6ee7b7; + --color-teal-light: #5eead4; + --color-blue-light: #7dd3fc; + --color-violet-light: #a5b4fc; + --color-purple-light: #c4b5fd; + --color-pink-light: #f9a8d4; + --color-brown-light: #e5bfa3; + --color-grey-light: #cbd5e1; + --color-black-light: #1b2232; + + --color-red-dark-1: #ec3750; + --color-orange-dark-1: #f97316; + --color-yellow-dark-1: #f59e0b; + --color-olive-dark-1: #65a30d; + --color-green-dark-1: #10b981; + --color-teal-dark-1: #14b8a6; + --color-blue-dark-1: #0ea5e9; + --color-violet-dark-1: #6366f1; + --color-purple-dark-1: #8b5cf6; + --color-pink-dark-1: #ec4899; + --color-brown-dark-1: #b07d56; + --color-grey-dark-1: #64748b; + --color-black-dark-1: #080a0f; + + --color-red-dark-2: #be123c; + --color-orange-dark-2: #c2410c; + --color-yellow-dark-2: #b45309; + --color-olive-dark-2: #4d7c0f; + --color-green-dark-2: #059669; + --color-teal-dark-2: #0d9488; + --color-blue-dark-2: #0284c7; + --color-violet-dark-2: #4f46e5; + --color-purple-dark-2: #7c3aed; + --color-pink-dark-2: #be185d; + --color-brown-dark-2: #8c5e3c; + --color-grey-dark-2: #475569; + --color-black-dark-2: #05070b; + + --color-gold: #fbbf24; + --color-white: #f8fafc; + --color-pure-black: #05070b; + + /* ── ANSI (Omarchy Tokyo-Night + CachyOS Terminal) ──────────────── */ + --color-ansi-black: #111520; + --color-ansi-red: #ec3750; + --color-ansi-green: #10b981; + --color-ansi-yellow: #f59e0b; + --color-ansi-blue: #3b82f6; + --color-ansi-magenta: #8b5cf6; + --color-ansi-cyan: #06b6d4; + --color-ansi-white: #a8b6cf; + --color-ansi-bright-black: #4b5975; + --color-ansi-bright-red: #fb7185; + --color-ansi-bright-green: #34d399; + --color-ansi-bright-yellow: #fbbf24; + --color-ansi-bright-blue: #38bdf8; + --color-ansi-bright-magenta: #a78bfa; + --color-ansi-bright-cyan: #2dd4bf; + --color-ansi-bright-white: #f8fafc; + + /* ── Diffs (GitHub/GitLab 2026 high-clarity emerald & coral) ────── */ + --color-diff-removed-word-bg: rgba(251, 113, 133, 0.30); + --color-diff-added-word-bg: rgba(52, 211, 153, 0.26); + --color-diff-removed-row-bg: rgba(236, 55, 80, 0.11); + --color-diff-moved-row-bg: rgba(251, 191, 36, 0.12); + --color-diff-added-row-bg: rgba(16, 185, 129, 0.11); + --color-diff-removed-row-border: rgba(251, 113, 133, 0.42); + --color-diff-moved-row-border: rgba(251, 191, 36, 0.42); + --color-diff-added-row-border: rgba(52, 211, 153, 0.42); + --color-diff-inactive: #111520; + + /* ── Status Alerts ──────────────────────────────────────────────── */ + --color-error-border: rgba(251, 113, 133, 0.45); + --color-error-bg: rgba(159, 18, 57, 0.24); + --color-error-bg-active: rgba(190, 18, 60, 0.34); + --color-error-bg-hover: rgba(190, 18, 60, 0.30); + --color-error-text: #fda4af; + --color-success-border: rgba(52, 211, 153, 0.45); + --color-success-bg: rgba(6, 95, 70, 0.26); + --color-success-text: #6ee7b7; + --color-warning-border: rgba(251, 191, 36, 0.45); + --color-warning-bg: rgba(146, 64, 14, 0.26); + --color-warning-text: #fde047; + --color-info-border: rgba(56, 189, 248, 0.45); + --color-info-bg: rgba(3, 105, 161, 0.24); + --color-info-text: #bae6fd; + + /* ── Badges ─────────────────────────────────────────────────────── */ + --color-red-badge: #fb7185; + --color-red-badge-bg: rgba(251, 113, 133, 0.14); + --color-red-badge-hover-bg: rgba(251, 113, 133, 0.26); + --color-green-badge: #34d399; + --color-green-badge-bg: rgba(52, 211, 153, 0.14); + --color-green-badge-hover-bg: rgba(52, 211, 153, 0.26); + --color-yellow-badge: #fbbf24; + --color-yellow-badge-bg: rgba(251, 191, 36, 0.14); + --color-yellow-badge-hover-bg: rgba(251, 191, 36, 0.26); + --color-orange-badge: #fb923c; + --color-orange-badge-bg: rgba(251, 146, 60, 0.14); + --color-orange-badge-hover-bg: rgba(251, 146, 60, 0.26); + + /* ── Thin accents / danger ──────────────────────────────────────── */ + --color-thin-green: #34d399; + --color-thin-red: #fb7185; + --color-thin-purple: #a78bfa; + --color-thin-orange: #fb923c; + --color-thin-red-highlight: #fda4af; + --color-danger-bg: rgba(159, 18, 57, 0.25); + + /* ── Surfaces (Obsidian Bento Hierarchy) ────────────────────────── */ + --color-body: #0b0d13; + --color-box-header: #131824; + --color-box-body: #111520; + --color-box-body-highlight: #181f2e; + --color-text-dark: #05070b; + --color-text: #e2e8f0; + --color-text-light: #cbd5e1; + --color-text-light-1: #b8c4d9; + --color-text-light-2: #94a3b8; + --color-text-light-3: #64748b; + --color-footer: #080a0f; + --color-timeline: #1e2638; + --color-input-text: #f1f5f9; + --color-input-background: #080a10; + --color-input-toggle-background: #1b2232; + --color-input-border: rgba(148, 163, 184, 0.18); + --color-input-border-hover: rgba(56, 189, 248, 0.45); + --color-header-wrapper: #080a0f; + --color-header-wrapper-transparent: rgba(8, 10, 15, 0); + --color-light: rgba(0, 0, 0, 0.35); + --color-light-border: rgba(148, 163, 184, 0.12); + --color-hover: #181f2e; + --color-active: #1f293d; + --color-menu: #111520; + --color-card: #111520; + --fancy-card-bg: #111520; + --fancy-card-border: rgba(148, 163, 184, 0.14); + --color-markup-table-row: rgba(255, 255, 255, 0.025); + --color-markup-code-block: #080a10; + --color-markup-code-inline: #161c2a; + --color-button: #151b28; + --color-code-bg: #080a10; + --color-shadow: rgba(0, 0, 0, 0.65); + --color-secondary-bg: #111520; + --color-text-focus: #f8fafc; + --color-expand-button: #1b2232; + --color-placeholder-text: #52607a; + --color-editor-line-highlight: rgba(56, 189, 248, 0.08); + --color-project-board-bg: #111520; + --color-project-board-dark-label: #8b9bb8; + --color-caret: #38bdf8; + --color-reaction-bg: rgba(56, 189, 248, 0.08); + --color-reaction-active-bg: rgba(56, 189, 248, 0.20); + --color-reaction-hover-bg: rgba(56, 189, 248, 0.30); + --color-tooltip-text: #f8fafc; + --color-tooltip-bg: #06080d; + --color-nav-bg: rgba(8, 10, 15, 0.84); + --color-nav-hover-bg: #181f2e; + --color-secondary-nav-bg: #0b0d13; + --color-label-text: #e2e8f0; + --color-label-bg: #1b2232; + --color-label-hover-bg: #252f45; + --color-label-active-bg: #2f3b54; + --color-label-bg-alt: #232c40; + --color-accent: #38bdf8; + --color-small-accent: #2dd4bf; + --color-highlight-fg: #7dd3fc; + --color-highlight-bg: rgba(56, 189, 248, 0.16); + --color-overlay-backdrop: rgba(5, 7, 11, 0.82); + --color-selection-bg: rgba(56, 189, 248, 0.28); + --color-selection-fg: #f8fafc; + --checkerboard-color-1: #151a27; + --checkerboard-color-2: #0b0d13; + --color-indicator-offline: #64748b; + --color-indicator-offline-20: rgba(100, 116, 139, 0.20); + --color-indicator-idle: #34d399; + --color-indicator-idle-20: rgba(52, 211, 153, 0.20); + --color-indicator-active: #38bdf8; + --color-indicator-active-20: rgba(56, 189, 248, 0.20); + + /* ── Console ────────────────────────────────────────────────────── */ + --color-console-fg: #e2e8f0; + --color-console-fg-subtle: #8b9bb8; + --color-console-bg: #06080d; + --color-console-border: rgba(148, 163, 184, 0.14); + --color-console-hover-bg: rgba(56, 189, 248, 0.08); + --color-console-active-bg: #1b2232; + --color-console-menu-bg: #111520; + --color-console-menu-border: rgba(148, 163, 184, 0.20); + + /* ── 2026 Bento / Specular 1px Borders + Elevation (replaces heavy neumorphism) ── */ + --nm-radius: 12px; + --nm-radius-sm: 8px; + --nm-shadow-dark: rgba(0, 0, 0, 0.65); + --nm-shadow-light: rgba(255, 255, 255, 0.06); + --nm-divider-color: rgba(148, 163, 184, 0.12); + --nm-divider: rgba(148, 163, 184, 0.12); + --nm-raised: 0 0 0 1px rgba(148, 163, 184, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.06), + 0 12px 32px -10px rgba(0, 0, 0, 0.70); + --nm-raised-sm: 0 0 0 1px rgba(148, 163, 184, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.07), + 0 4px 14px -3px rgba(0, 0, 0, 0.55); + --nm-raised-xs: 0 0 0 1px rgba(148, 163, 184, 0.14), + inset 0 1px 0 rgba(255, 255, 255, 0.05), + 0 2px 6px rgba(0, 0, 0, 0.45); + --nm-inset: inset 0 0 0 1px rgba(148, 163, 184, 0.14), + inset 0 2px 6px rgba(0, 0, 0, 0.55); + --nm-inset-sm: inset 0 0 0 1px rgba(148, 163, 184, 0.15), + inset 0 1px 3px rgba(0, 0, 0, 0.45); + --nm-flat: 0 0 0 1px rgba(148, 163, 184, 0.14); + + /* ── 2026 Signature Gradients & Glows ───────────────────────────── */ + --dxd-2026-grad-primary: linear-gradient( + 135deg, + #38bdf8 0%, + #0ea5e9 48%, + #6366f1 100% + ); + --dxd-2026-grad-text: linear-gradient( + 120deg, + #38bdf8 0%, + #2dd4bf 38%, + #a78bfa 72%, + #fb7185 100% + ); + --dxd-2026-glow-cyan: 0 0 24px -4px rgba(56, 189, 248, 0.35); + --dxd-2026-glow-card: 0 0 0 1px rgba(56, 189, 248, 0.35), + inset 0 1px 0 rgba(255, 255, 255, 0.10), + 0 14px 34px -10px rgba(0, 0, 0, 0.78), + 0 0 26px -6px rgba(56, 189, 248, 0.18); +} + +/* ═══════════════════════════════════════════════════════════════════════ + 2026 Dark — Base Canvas & Ambient Aurora + ═══════════════════════════════════════════════════════════════════════ */ + +body { + background-color: #0b0d13 !important; + background-image: + radial-gradient(ellipse 65% 42% at 18% -8%, rgba(56, 189, 248, 0.08), transparent 70%), + radial-gradient(ellipse 55% 38% at 82% -6%, rgba(139, 92, 246, 0.07), transparent 70%), + radial-gradient(ellipse 45% 32% at 50% 104%, rgba(251, 113, 133, 0.04), transparent 70%) !important; + background-attachment: fixed !important; + color: #e2e8f0 !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ── Links: Emerald-Teal & Electric Sky (CachyOS / Omarchy) ───────── */ +a { + color: #38bdf8 !important; + text-decoration: none !important; + transition: color 0.15s ease; +} +a:hover, +a:focus { + color: #5eead4 !important; + text-decoration: underline !important; + text-underline-offset: 3px; +} + +.text.grey a, +.meta a, +.commit-header a, +.breadcrumb a, +.ui.breadcrumb a, +.sha, +.commit-sha { + color: #8b9bb8 !important; +} +.text.grey a:hover, +.meta a:hover, +.commit-header a:hover, +.breadcrumb a:hover, +.ui.breadcrumb a:hover { + color: #38bdf8 !important; +} + +::selection { + background: rgba(56, 189, 248, 0.28); + color: #f8fafc; +} + +.sha, +.commit-sha, +.commit-id-short, +.version, +.ui.label.sha { + font-family: var(--fonts-monospace) !important; +} + +/* ═══════════════════════════════════════════════════════════════════════ + Navbar & Footer — Frosted Glass + Hairline Shimmer + ═══════════════════════════════════════════════════════════════════════ */ + +.navbar, +#navbar, +nav.navbar, +.ui.menu.navbar, +.ui.secondary.menu.navbar { + background: rgba(8, 10, 15, 0.82) !important; + backdrop-filter: blur(16px) saturate(160%) !important; + -webkit-backdrop-filter: blur(16px) saturate(160%) !important; + border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important; + box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.65) !important; +} + +.navbar .brand, +.navbar .brand:hover { + color: #f8fafc !important; + font-weight: 700; + letter-spacing: -0.02em; +} + +.page-footer, +footer, +.ui.page-footer { + background: rgba(8, 10, 15, 0.90) !important; + border-top: 1px solid rgba(148, 163, 184, 0.10) !important; + box-shadow: none !important; +} + +/* ═══════════════════════════════════════════════════════════════════════ + 2026 Bento Cards, Buttons, Tabs & Inputs + ═══════════════════════════════════════════════════════════════════════ */ + +.ui.card:hover, +.ui.cards > .card:hover, +.dxd-feature:hover { + box-shadow: var(--dxd-2026-glow-card) !important; +} + +/* Primary CTA button: Electric cyan → blue → indigo gradient + inner rim */ +.ui.primary.button, +.ui.primary.buttons .button, +.ui.primary.label { + background: var(--dxd-2026-grad-primary) !important; + color: #04070f !important; + font-weight: 600 !important; + box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.40), + inset 0 1px 0 rgba(255, 255, 255, 0.32), + 0 4px 16px -3px rgba(14, 165, 233, 0.38) !important; +} +.ui.primary.button:hover, +.ui.primary.buttons .button:hover { + filter: brightness(1.08); + color: #04070f !important; + box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.65), + inset 0 1px 0 rgba(255, 255, 255, 0.42), + 0 6px 22px -2px rgba(56, 189, 248, 0.52) !important; + text-decoration: none !important; +} + +/* Secondary / default buttons: crisp dark surface + cyan border glow on hover */ +.ui.button:not(.primary):not(.basic):hover, +.ui.buttons .button:not(.primary):not(.basic):hover { + background: #181f2e !important; + color: #7dd3fc !important; + box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.38), + inset 0 1px 0 rgba(255, 255, 255, 0.08), + 0 4px 14px -3px rgba(0, 0, 0, 0.6) !important; + text-decoration: none !important; +} + +/* Ghost / basic buttons */ +.ui.basic.button, +.ui.basic.buttons .button { + background: rgba(17, 21, 32, 0.55) !important; + color: #cbd5e1 !important; + border: 1px solid rgba(148, 163, 184, 0.18) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; +} +.ui.basic.button:hover, +.ui.basic.buttons .button:hover { + background: rgba(56, 189, 248, 0.08) !important; + color: #7dd3fc !important; + border-color: rgba(56, 189, 248, 0.45) !important; + box-shadow: var(--dxd-2026-glow-cyan) !important; + text-decoration: none !important; +} + +/* Inputs & editors: recessed obsidian terminal well + glowing focus ring */ +input, +textarea, +select, +.ui.input input, +.ui.form input:not([type="checkbox"]):not([type="radio"]), +.ui.form textarea, +.ui.form select, +.ui.search input, +.CodeMirror { + background: #080a10 !important; +} +input:focus, +textarea:focus, +select:focus, +.ui.input input:focus, +.ui.form input:focus, +.ui.form textarea:focus, +.ui.search input:focus, +.ui.action.input:focus-within { + box-shadow: inset 0 0 0 1px #38bdf8, + 0 0 0 3px rgba(56, 189, 248, 0.20) !important; +} + +/* Active tabs: crisp electric accent bar */ +.ui.tabular.menu .active.item, +.ui.secondary.pointing.menu .active.item { + color: #f8fafc !important; + border-bottom: 2px solid #38bdf8 !important; +} + +/* ═══════════════════════════════════════════════════════════════════════ + Landing Page (home.tmpl) — 2026 Hero & Bento Polish + ═══════════════════════════════════════════════════════════════════════ */ + +.dxd-landing .dxd-eyebrow { + background: linear-gradient( + 90deg, + rgba(56, 189, 248, 0.12), + rgba(139, 92, 246, 0.12) + ) !important; + color: #7dd3fc !important; + box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.28), + inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; +} + +.dxd-landing .dxd-hero h1 em { + background: var(--dxd-2026-grad-text); + -webkit-background-clip: text; + background-clip: text; + color: transparent !important; +} + +.dxd-landing .dxd-mock { + background: linear-gradient(180deg, #131824 0%, #0e121b 100%) !important; + box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.16), + inset 0 1px 0 rgba(255, 255, 255, 0.08), + 0 24px 48px -12px rgba(0, 0, 0, 0.75), + 0 0 40px -10px rgba(56, 189, 248, 0.12) !important; +} + +.dxd-landing .dxd-mock-bar .dot.r { background: #ec3750 !important; box-shadow: none !important; } +.dxd-landing .dxd-mock-bar .dot.y { background: #fbbf24 !important; box-shadow: none !important; } +.dxd-landing .dxd-mock-bar .dot.g { background: #34d399 !important; box-shadow: none !important; } + +.dxd-landing .dxd-feature .icon { + background: linear-gradient(145deg, rgba(56, 189, 248, 0.12), rgba(139, 92, 246, 0.10)) !important; + color: #38bdf8 !important; + box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.24), + inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; +} + +.dxd-landing .dxd-cta-band { + background: + radial-gradient(ellipse 70% 80% at 50% 0%, rgba(56, 189, 248, 0.10), transparent 70%), + radial-gradient(ellipse 60% 70% at 85% 100%, rgba(139, 92, 246, 0.10), transparent 70%), + #111520 !important; + box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.22), + inset 0 1px 0 rgba(255, 255, 255, 0.08), + 0 20px 44px -12px rgba(0, 0, 0, 0.72) !important; +} + +/* ═══════════════════════════════════════════════════════════════════════ + Syntax Highlighting — JetBrains Islands + Omarchy Tokyo Night + Coral + ═══════════════════════════════════════════════════════════════════════ */ + +.chroma { background: #080a10 !important; } +.chroma .err { color: #fb7185; background: transparent; } +.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, +.chroma .cs, .chroma .cp, .chroma .cpf { color: #596780; font-style: italic; } +.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, +.chroma .kr, .chroma .kt { color: #fb7185; } +.chroma .o, .chroma .ow { color: #38bdf8; } +.chroma .p { color: #94a3b8; } +.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc, +.chroma .sd, .chroma .sh, .chroma .sx { color: #34d399; } +.chroma .se, .chroma .ss { color: #2dd4bf; } +.chroma .si, .chroma .sa { color: #fbbf24; } +.chroma .sr { color: #38bdf8; } +.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, +.chroma .mi, .chroma .mo, .chroma .il { color: #fbbf24; } +.chroma .n, .chroma .nx, .chroma .nn, .chroma .nv, +.chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #e2e8f0; } +.chroma .na, .chroma .nb, .chroma .bp, .chroma .ni, +.chroma .nl, .chroma .py { color: #a78bfa; } +.chroma .nf { color: #38bdf8; } +.chroma .nc, .chroma .ne, .chroma .nd, .chroma .nt { color: #2dd4bf; } +.chroma .no { color: #fb923c; } +.chroma .go { color: #64748b; } +.chroma .gp { color: #94a3b8; } +.chroma .gh { color: #38bdf8; font-weight: bold; } +.chroma .gu { color: #34d399; } +.chroma .gt { color: #fb7185; } +.chroma .gd { color: #fda4af; background-color: rgba(236, 55, 80, 0.18); } +.chroma .gi { color: #6ee7b7; background-color: rgba(16, 185, 129, 0.18); } + +/* CodeMirror */ +.CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #fb7185; } +.CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom, +.CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #fbbf24; } +.CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #38bdf8; } +.CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #596780; } +.CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #34d399; } +.CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #2dd4bf; } +.CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta, +.CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin, +.CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #a78bfa; } +.CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #fb7185; } +.CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #38bdf8; }