/* ============================================================ Pellucid Theme — Single source of truth for all sites ============================================================ */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); /* ========== PELLUCID THEMES (data-theme set on ) ========== */ /* Default: Pellucid cyan — calm, crystal clear */ :root, [data-theme="default"] { --ps-scrollbar-thumb: rgba(255, 255, 255, 0.15); --ps-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); --ps-bg-primary: #0a0f14; --ps-bg-secondary: #111820; --ps-bg-card: #162030; --ps-text-primary: #e8f0f7; --ps-text-secondary: #8b9fb5; --ps-text-tertiary: #5c728a; --ps-accent: #6dd4e8; --ps-accent-hover: #4fb8cc; --ps-accent-glow: rgba(109, 212, 232, 0.15); --ps-border: rgba(109, 212, 232, 0.1); --ps-border-subtle: rgba(139, 159, 181, 0.08); --ps-surface: #162030; --ps-background: #0a0f14; /* Unprefixed aliases for website backward compat */ --bg-primary: #0a0f14; --bg-secondary: #111820; --bg-card: #162030; --text-primary: #e8f0f7; --text-secondary: #8b9fb5; --text-tertiary: #5c728a; --accent: #6dd4e8; --accent-hover: #4fb8cc; --accent-glow: rgba(109, 212, 232, 0.15); --accent-dark: #4fb8cc; --border: rgba(109, 212, 232, 0.1); --border-subtle: rgba(139, 159, 181, 0.08); --glass: rgba(22, 32, 48, 0.6); } /* Light: clean, airy */ [data-theme="light"] { --ps-scrollbar-thumb: rgba(0, 0, 0, 0.15); --ps-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25); --ps-bg-primary: #f5f7fa; --ps-bg-secondary: #e8ecf2; --ps-bg-card: #ffffff; --ps-text-primary: #1a202c; --ps-text-secondary: #4a5568; --ps-text-tertiary: #718096; --ps-accent: #4fb8cc; --ps-accent-hover: #3d9db3; --ps-accent-glow: rgba(79, 184, 204, 0.2); --ps-border: rgba(0, 0, 0, 0.08); --ps-border-subtle: rgba(0, 0, 0, 0.05); --ps-surface: #ffffff; --ps-background: #f5f7fa; --bg-primary: #f5f7fa; --bg-secondary: #e8ecf2; --bg-card: #ffffff; --text-primary: #1a202c; --text-secondary: #4a5568; --text-tertiary: #718096; --accent: #4fb8cc; --accent-hover: #3d9db3; --accent-glow: rgba(79, 184, 204, 0.2); --accent-dark: #3d9db3; --border: rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.05); --glass: rgba(255, 255, 255, 0.6); } /* Dark: pure dark, minimal */ [data-theme="dark"] { --ps-scrollbar-thumb: rgba(255, 255, 255, 0.15); --ps-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); --ps-bg-primary: #0a0a0a; --ps-bg-secondary: #141414; --ps-bg-card: #1a1a1a; --ps-text-primary: #f5f5f5; --ps-text-secondary: #a0a0a0; --ps-text-tertiary: #737373; --ps-accent: #6dd4e8; --ps-accent-hover: #4fb8cc; --ps-accent-glow: rgba(109, 212, 232, 0.12); --ps-border: rgba(255, 255, 255, 0.08); --ps-border-subtle: rgba(255, 255, 255, 0.05); --ps-surface: #1a1a1a; --ps-background: #0a0a0a; --bg-primary: #0a0a0a; --bg-secondary: #141414; --bg-card: #1a1a1a; --text-primary: #f5f5f5; --text-secondary: #a0a0a0; --text-tertiary: #737373; --accent: #6dd4e8; --accent-hover: #4fb8cc; --accent-glow: rgba(109, 212, 232, 0.12); --accent-dark: #4fb8cc; --border: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.05); --glass: rgba(26, 26, 26, 0.6); } /* ========== Global Reset ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--ps-bg-primary); color: var(--ps-text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } html, body { overflow-x: hidden; width: 100%; position: relative; } /* ========== Heading Font ========== */ h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; } /* ========== Universal Nav Body Offset ========== */ body.has-universal-nav { padding-top: 64px; } /* ========== Scrollbar: minimalistic, visible on hover only ========== */ * { scrollbar-width: thin; scrollbar-color: transparent transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; } *:hover::-webkit-scrollbar-thumb { background: var(--ps-scrollbar-thumb); } *::-webkit-scrollbar-thumb:hover { background: var(--ps-scrollbar-thumb-hover); } /* ========== Floating Feedback Button ========== */ .v2-feedback-wrap { position: fixed; right: 0; transform: translateY(-50%); z-index: 1200; display: flex; flex-direction: row; align-items: center; gap: 12px; padding-right: 8px; user-select: none; } .v2-feedback-wrap-left { right: auto; left: 0; padding-right: 0; padding-left: 8px; flex-direction: row-reverse; } .v2-feedback-button { border: none; border-radius: 8px 0 0 8px; padding: 10px 12px; background: var(--ps-accent); color: #06121a; font-weight: 700; cursor: grab; box-shadow: 0 8px 20px rgba(0,0,0,0.25); position: relative; display: flex; align-items: flex-start; justify-content: center; min-height: 80px; } .v2-feedback-button-left { border-radius: 0 8px 8px 0; } .v2-feedback-button:active { cursor: grabbing; } .v2-feedback-button-text { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.4px; padding-top: 33.33%; pointer-events: none; } .v2-feedback-menu { position: absolute; right: 100%; top: 50%; transform: translateY(-50%) translateX(12px); background: rgba(10, 15, 20, 0.92); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 160px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .v2-feedback-menu-left { right: auto; left: 100%; transform: translateY(-50%) translateX(-12px); } .v2-feedback-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); } .v2-feedback-menu-left.is-open { transform: translateY(-50%) translateX(0); } .v2-feedback-menu button { background: transparent; border: none; color: var(--ps-text-primary); text-align: left; padding: 6px 10px; border-radius: 8px; cursor: pointer; } .v2-feedback-menu button:hover { background: rgba(255,255,255,0.08); }