/* Theme variables (light + dark). Keeps backward-compatible aliases for legacy CSS. */ :root { --font-size: 16px; --background: #ffffff; --foreground: #1e293b; --card: #ffffff; --card-foreground: #1e293b; --popover: #ffffff; --popover-foreground: #1e293b; --primary: #0d9488; --primary-foreground: #ffffff; --secondary: #f0fdfa; --secondary-foreground: #0d9488; --muted: #f8fafc; --muted-foreground: #64748b; --accent: #ccfbf1; --accent-foreground: #0d9488; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #e2e8f0; --input: transparent; --input-background: #f8fafc; --switch-background: #cbd5e1; --font-weight-medium: 500; --font-weight-normal: 400; --ring: #0d9488; --chart-1: #0d9488; --chart-2: #14b8a6; --chart-3: #2dd4bf; --chart-4: #5eead4; --chart-5: #99f6e4; --radius: 0.5rem; --sidebar: #f8fafc; --sidebar-foreground: #1e293b; --sidebar-primary: #0d9488; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #f0fdfa; --sidebar-accent-foreground: #0f766e; --sidebar-border: #e2e8f0; --sidebar-ring: #0d9488; /* Teal palette */ --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4; --teal-300: #5eead4; --teal-400: #2dd4bf; --teal-500: #14b8a6; --teal-600: #0d9488; --teal-700: #0f766e; --teal-800: #115e59; --teal-900: #134e4a; /* Back-compat aliases used by existing CSS */ --bg: var(--background); --bg-soft: var(--teal-50); --bg-deep: var(--teal-100); --panel: var(--card); --text: var(--foreground); --muted: var(--muted-foreground); --accent: var(--primary); --accent-2: var(--chart-4); --accent-soft: rgba(15,118,110,0.12); --accent-border: rgba(15,118,110,0.32); --header-offset: 84px; --section-peek: 56px; --section-gap: 14px; } /* Dark theme variables — applied when has class="dark" */ .dark { /* Exact admin dark-mode tokens */ --background: #0a1514; --bg: #0a1514; --bg-soft: rgba(10,21,20,0.6); --bg-deep: #071b2a; --foreground: #e0f7f5; --card: #0f2220; --card-foreground: #e0f7f5; --popover: #0f2220; --popover-foreground: #e0f7f5; --primary: #2dd4bf; --primary-foreground: #0a1514; --secondary: #115e59; --secondary-foreground: #5eead4; --muted: #134e4a; --muted-foreground: #5eead4; --accent: #0f766e; --accent-foreground: #5eead4; --destructive: #ff6b6b; --destructive-foreground: #ffffff; --border: #115e59; --input-background: #0f2220; --switch-background: #115e59; --ring: #2dd4bf; --chart-1: #2dd4bf; --chart-2: #5eead4; --chart-3: #99f6e4; --chart-4: #14b8a6; --chart-5: #0d9488; --sidebar: #0a1817; --sidebar-foreground: #e0f7f5; --sidebar-primary: #2dd4bf; --sidebar-primary-foreground: #0a1514; --sidebar-accent: #115e59; --sidebar-accent-foreground: #5eead4; --sidebar-border: #115e59; --sidebar-ring: #2dd4bf; /* Teal palette (dark) */ --teal-50: #0b4c45; --teal-100: #0f766e; --teal-200: #14b8a6; --teal-300: #2dd4bf; --teal-400: #5eead4; --teal-500: #99f6e4; --teal-600: #ccfbf1; --teal-700: #f0fdfa; --teal-800: #e6fff9; --teal-900: #ffffff; } * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-padding-top: var(--header-offset); } html { scroll-behavior: smooth; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 18px; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 55%, var(--bg-deep) 100%); background-attachment: fixed; color: var(--text); line-height: 1.65; padding-top: var(--header-offset); } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } button, input[type="button"], input[type="submit"], input[type="reset"], a, [role="button"] { cursor: pointer; } .container { width: min(1100px, calc(100% - 32px)); margin: 0 auto; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(232, 243, 242, 0.96); border-bottom: 0; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08); transform: translateZ(0); will-change: transform; isolation: isolate; } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); border: 1px solid var(--border); color: var(--accent); letter-spacing: 0.5px; } .brand-name { font-size: 18px; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: inherit; } .nav { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .nav a { color: var(--muted); font-weight: 600; padding: 8px 10px; border-radius: 10px; font-size: 16px; } .nav a:hover { color: var(--text); background: rgba(15, 23, 42, 0.06); text-decoration: none; } main { padding: 36px 0 20px; background: transparent; } main section[id] { scroll-margin-top: calc(var(--header-offset) + 8px); } .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.92); color: var(--text); font-weight: 700; font-size: 17px; } .button.primary { background: var(--accent); border-color: rgba(15, 118, 110, 0.55); color: #ffffff; } .button:hover { text-decoration: none; filter: brightness(1.08); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 18px; } .card { grid-column: span 6; padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--border); } .card h2, .card h3 { margin: 0 0 10px; } .card p { margin: 0; color: var(--muted); font-size: 17px; } .list { margin: 10px 0 0; padding-left: 18px; color: var(--muted); } .muted { color: var(--muted); } .site-footer { border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.82); } .footer-inner { padding: 18px 0; } .footer-title { margin: 0; font-weight: 800; } .footer-text { margin: 6px 0 10px; color: var(--muted); } .footer-meta { margin: 0; color: rgba(15, 23, 42, 0.55); font-size: 14px; } .back-to-top { position: fixed; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(15, 118, 110, 0.45); background: rgba(15, 118, 110, 0.95); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease; z-index: 1001; } .back-to-top-label { position: absolute; right: 50px; bottom: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.65); color: rgba(15, 23, 42, 0.75); font-size: 12px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12); opacity: 0; transform: translateY(4px); transition: opacity 100ms ease, transform 100ms ease; pointer-events: none; } .back-to-top-label.is-visible { opacity: 1; transform: translateY(0); } .back-to-top:hover { filter: brightness(1.08); } .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .field { display: grid; gap: 6px; margin-top: 12px; } .field label { color: rgba(15, 23, 42, 0.85); font-weight: 700; font-size: 15px; } .field input { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.95); color: var(--text); outline: none; font-size: 17px; } .field select { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.95); color: var(--text); outline: none; font-size: 17px; } .field input:focus { border-color: rgba(15, 118, 110, 0.45); } .field select:focus { border-color: rgba(15, 118, 110, 0.45); } .field-help { margin: 8px 0 0; font-size: 14px; color: rgba(15, 23, 42, 0.70); } .field-help.error { color: rgba(239, 68, 68, 0.85); font-weight: 700; } .input-invalid { border-color: rgba(239, 68, 68, 0.55) !important; } .input-valid { border-color: rgba(34, 197, 94, 0.55) !important; } .field-help.success { color: rgba(34, 197, 94, 0.85); font-weight: 700; } .rs-toast-stack { position: fixed; top: 18px; right: 18px; z-index: 6000; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 24px)); pointer-events: none; } .rs-toast { pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; border-radius: 12px; border: 1px solid transparent; padding: 12px 12px; box-shadow: 0 12px 26px rgba(15, 23, 42, 0.22); opacity: 0; transform: translateY(-8px) scale(0.98); transition: opacity 170ms ease, transform 170ms ease; } .rs-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); } .rs-toast.is-leaving { opacity: 0; transform: translateY(-8px) scale(0.98); } .rs-toast--success { background: #e7f8ec; border-color: #8ad1a2; color: #0f5c2f; } .rs-toast--error { background: #fdeaea; border-color: #f4a5a5; color: #8f1f1f; } .rs-toast--warning { background: #fff5e7; border-color: #f8cf89; color: #8b5b05; } .rs-toast--info { background: #eaf3ff; border-color: #a9c9ff; color: #1f4c92; } .rs-toast-icon { min-width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; border: 1px solid currentColor; line-height: 1; } .rs-toast-text { min-width: 0; } .rs-toast-title { margin: 0; font-size: 12px; font-weight: 900; line-height: 1.2; } .rs-toast-message { margin-top: 2px; font-size: 13px; line-height: 1.35; word-break: break-word; } .rs-toast-close { border: none; background: transparent; color: inherit; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; padding: 0; } .rs-toast-close:hover { background: rgba(15, 23, 42, 0.08); } @media (max-width: 768px) { .menu-toggle { display: block; margin-left: auto; } .header-inner { flex-wrap: wrap; } .nav { display: none; flex-direction: column; width: 100%; padding-top: 1rem; gap: 0.8rem; } .nav.is-open { display: flex; } .container { width: min(100% - 20px, 1100px); } } @media (max-width: 640px) { body { font-size: 16px; } main { padding: 24px 0 16px; } .container { width: min(100% - 16px, 1100px); } .header-inner { flex-direction: column; align-items: flex-start; } .nav { width: 100%; justify-content: flex-start; gap: 8px; } .nav a { font-size: 15px; padding: 6px 8px; } .grid { grid-template-columns: 1fr; } .card { grid-column: 1 / -1; } .card { padding: 14px; } .back-to-top { right: 12px; bottom: 12px; width: 38px; height: 38px; } .rs-toast-stack { top: 12px; right: 12px; width: min(420px, calc(100vw - 16px)); } }