/* * CleanOSINT — shared theme + base components * * CANONICAL THEME SOURCE. Every page (the hub at site/index.html and all * /tools and /learn sub-pages) links this file; the theme variables below are * the single place theme colors are defined. The picker UI + persistence live * in /theme-picker.js (also canonical); the only deliberate duplicate is the * tiny pre-render snippet in each page's , which must run before paint. * Future theme edits start HERE, then bump the ?v=N query string everywhere. */ /* ===== CSS Custom Properties (themes) ===== */ :root { --color-primary: #a78bfa; --color-secondary: #6b7280; --color-accent: #c4b5fd; --on-primary: #0f0a1a; --color-bg-dark: #0f0a1a; --color-bg-mid: #1a1625; --color-bg-light: #2d2640; --color-text: #f3f4f6; --color-text-dim: #9ca3af; --color-success: #10b981; --color-error: #ef4444; --glass-bg: rgba(26, 22, 37, 0.5); --glass-border: rgba(167, 139, 250, 0.12); --glass-blur: 16px; --blob-1: 167, 139, 250; --blob-2: 107, 114, 128; --flow-1: 167, 139, 250; --flow-2: 196, 181, 253; --card-glow: 167, 139, 250; --select-bg: #1a1625; --h1-shadow: rgba(167, 139, 250, 0.3); --card-shadow: rgba(0, 0, 0, 0.3); --modal-overlay: rgba(0, 0, 0, 0.8); --hairline: rgba(255, 255, 255, 0.06); color-scheme: dark; } [data-theme="light"] { --color-primary: #7c3aed; --color-secondary: #6b7280; --color-accent: #8b5cf6; --on-primary: #ffffff; --color-bg-dark: #f0eef5; --color-bg-mid: #e8e5f0; --color-bg-light: #d9d5e6; --color-text: #1f1833; --color-text-dim: #6b6280; --color-success: #059669; --color-error: #dc2626; --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(124, 58, 237, 0.15); --blob-1: 124, 58, 237; --blob-2: 139, 92, 246; --flow-1: 124, 58, 237; --flow-2: 167, 139, 250; --card-glow: 124, 58, 237; --select-bg: #e8e5f0; --h1-shadow: rgba(124, 58, 237, 0.2); --card-shadow: rgba(124, 58, 237, 0.08); --modal-overlay: rgba(240, 238, 245, 0.9); --hairline: rgba(0, 0, 0, 0.08); color-scheme: light; } [data-theme="ocean"] { --color-primary: #0ea5e9; --color-secondary: #475569; --color-accent: #7dd3fc; --on-primary: #0d1925; --color-bg-dark: #0d1925; --color-bg-mid: #182640; --color-bg-light: #233a5a; --color-text: #f0f9ff; --color-text-dim: #94a3b8; --color-success: #10b981; --color-error: #f87171; --glass-bg: rgba(24, 38, 64, 0.5); --glass-border: rgba(14, 165, 233, 0.15); --blob-1: 14, 165, 233; --blob-2: 71, 85, 105; --flow-1: 14, 165, 233; --flow-2: 125, 211, 252; --card-glow: 14, 165, 233; --select-bg: #182640; --h1-shadow: rgba(14, 165, 233, 0.3); --card-shadow: rgba(0, 0, 0, 0.35); --modal-overlay: rgba(0, 0, 0, 0.8); --hairline: rgba(255, 255, 255, 0.07); color-scheme: dark; } [data-theme="sage"] { --color-primary: #059669; --color-secondary: #047857; --color-accent: #10b981; --on-primary: #001b12; --color-bg-dark: #f0fdf4; --color-bg-mid: #dcfce7; --color-bg-light: #bbf7d0; --color-text: #052e1f; --color-text-dim: #4a6c5e; --color-success: #059669; --color-error: #be123c; --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(5, 150, 105, 0.15); --blob-1: 5, 150, 105; --blob-2: 16, 185, 129; --flow-1: 5, 150, 105; --flow-2: 110, 231, 183; --card-glow: 5, 150, 105; --select-bg: #dcfce7; --h1-shadow: rgba(5, 150, 105, 0.2); --card-shadow: rgba(5, 150, 105, 0.08); --modal-overlay: rgba(240, 253, 244, 0.9); --hairline: rgba(0, 0, 0, 0.08); color-scheme: light; } [data-theme="rose"] { --color-primary: #e11d48; --color-secondary: #9f1239; --color-accent: #fb7185; --on-primary: #ffffff; --color-bg-dark: #fff5f6; --color-bg-mid: #fce8eb; --color-bg-light: #f5d0d6; --color-text: #1c0a10; --color-text-dim: #7a4a55; --color-success: #059669; --color-error: #be123c; --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(225, 29, 72, 0.15); --blob-1: 225, 29, 72; --blob-2: 251, 113, 133; --flow-1: 225, 29, 72; --flow-2: 251, 113, 133; --card-glow: 225, 29, 72; --select-bg: #fce8eb; --h1-shadow: rgba(225, 29, 72, 0.2); --card-shadow: rgba(225, 29, 72, 0.08); --modal-overlay: rgba(255, 245, 246, 0.9); --hairline: rgba(0, 0, 0, 0.08); color-scheme: light; } /* AA-safe accent for TEXT (links, active nav, brand, footer). The brand primary is bright enough on the dark themes but falls below AA as small text on the light themes' pale surfaces, so give those a darker shade of the same hue (each measured >4.5:1). Use for accent text only; fills and borders keep --color-primary. The dark themes inherit --color-primary. */ :root { --accent-strong: var(--color-primary); } :root[data-theme="light"] { --accent-strong: #6d28d9; } :root[data-theme="sage"] { --accent-strong: #047857; } :root[data-theme="rose"] { --accent-strong: #9f1239; } /* ===== Reset + base ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; color: var(--color-text); line-height: 1.6; overflow-x: hidden; min-height: 100vh; background: var(--color-bg-dark); } /* Subtle background — cheaper than the hub's animated blobs */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 80% 20%, rgba(var(--blob-1), 0.12), transparent 50%), radial-gradient(circle at 20% 90%, rgba(var(--blob-2), 0.1), transparent 50%); pointer-events: none; } /* ===== Top nav (shared across utility tools) ===== */ .top-nav { max-width: 1000px; margin: 0 auto; padding: 1.4rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .top-nav-brand { font-size: 1.1rem; font-weight: 700; color: var(--color-text); text-decoration: none; letter-spacing: -0.01em; } .top-nav-brand span { color: var(--accent-strong); } .top-nav-links { display: flex; gap: 1.1rem; margin-left: auto; flex-wrap: wrap; } .top-nav-links a { color: var(--color-text-dim); text-decoration: none; font-size: 0.92rem; transition: color 0.15s ease; } .top-nav-links a:hover, .top-nav-links a.active, .top-nav-links a[aria-current="page"] { color: var(--accent-strong); } /* Right-aligned slot for the hub's account control inside the shared bar */ .top-nav .top-nav-end { margin-left: 0.4rem; display: flex; align-items: center; } @media (max-width: 640px) { .top-nav { padding: 1rem 1rem; gap: 0.9rem; } .top-nav-links { gap: 0.8rem; } .top-nav-links a { font-size: 0.88rem; } } /* ===== Card (the main content surface) ===== */ .tool-container { max-width: 900px; margin: 0 auto; padding: 1rem 1.5rem 3rem; } .tool-card { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-radius: 20px; padding: 2rem 2.2rem; box-shadow: 0 8px 32px var(--card-shadow); } @media (max-width: 600px) { .tool-card { padding: 1.5rem 1.2rem; } } h1.tool-title { font-size: 1.9rem; font-weight: 700; margin-bottom: 0.3rem; color: var(--color-text); text-shadow: 0 2px 12px var(--h1-shadow); letter-spacing: -0.02em; } .tool-subtitle { color: var(--color-text-dim); margin-bottom: 1.8rem; font-size: 0.98rem; } /* ===== Form controls ===== */ .field { margin-bottom: 1.2rem; } .field label { display: block; color: var(--color-text-dim); font-size: 0.85rem; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; } .field textarea, .field input[type="text"], .field input[type="search"] { width: 100%; background: rgba(0,0,0,0.18); border: 1px solid var(--glass-border); color: var(--color-text); border-radius: 10px; padding: 0.85rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; line-height: 1.55; resize: vertical; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field textarea:focus, .field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--card-glow), 0.18); } .field textarea { min-height: 130px; } /* ===== Buttons ===== */ .btn { background: var(--color-primary); color: var(--on-primary); border: none; border-radius: 10px; padding: 0.75rem 1.4rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: filter 0.15s ease, transform 0.05s ease; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; } .btn-secondary { background: transparent; color: var(--color-text-dim); border: 1px solid var(--glass-border); } .btn-secondary:hover { color: var(--color-text); border-color: rgba(var(--card-glow), 0.4); background: rgba(var(--card-glow), 0.06); } /* ===== Result/output panel ===== */ .output { margin-top: 1.4rem; background: rgba(0,0,0,0.22); border: 1px solid var(--glass-border); border-radius: 10px; padding: 1rem 1.1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92rem; white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; color: var(--color-text); line-height: 1.55; max-height: 480px; overflow-y: auto; } .output.empty { color: var(--color-text-dim); font-style: italic; font-family: inherit; } .output-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; margin-bottom: 0.4rem; } .output-label { color: var(--color-text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } .error-box { margin-top: 1.2rem; padding: 0.85rem 1rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 10px; color: var(--color-error); font-size: 0.92rem; } /* ===== Detail rows (for JWT claims, etc.) ===== */ .kv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: 0.6rem 0; border-bottom: 1px solid var(--hairline); } .kv-row:last-child { border-bottom: none; } .kv-label { color: var(--color-text-dim); font-size: 0.88rem; flex-shrink: 0; } .kv-value { color: var(--color-text); font-weight: 500; font-size: 0.92rem; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-width: 0; overflow-wrap: anywhere; } .kv-value .meta { color: var(--color-text-dim); font-weight: 400; margin-left: 0.4rem; font-family: -apple-system, sans-serif; font-size: 0.85rem; } /* ===== Collapsible "Learn" section ===== */ .learn { margin-top: 2rem; border-top: 1px solid var(--glass-border); padding-top: 1.4rem; } .learn summary { cursor: pointer; color: var(--color-text-dim); font-size: 0.95rem; user-select: none; list-style: none; } .learn summary::-webkit-details-marker { display: none; } .learn summary::before { content: '▸ '; color: var(--accent-strong); margin-right: 0.3rem; transition: transform 0.15s ease; display: inline-block; } .learn[open] summary::before { content: '▾ '; } .learn-body { margin-top: 1rem; color: var(--color-text-dim); font-size: 0.95rem; line-height: 1.7; } .learn-body h3 { color: var(--color-text); font-size: 1rem; font-weight: 600; margin-top: 1.1rem; margin-bottom: 0.4rem; } .learn-body h3:first-child { margin-top: 0; } .learn-body p { margin-bottom: 0.7rem; } .learn-body ul { margin: 0.5rem 0 0.8rem 1.4rem; } .learn-body li { margin-bottom: 0.3rem; } .learn-body code { background: rgba(var(--card-glow), 0.12); color: var(--color-accent); padding: 0.05rem 0.4rem; border-radius: 4px; font-size: 0.88em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ===== Footer ===== */ .tool-footer { max-width: 1000px; margin: 0 auto; padding: 1.4rem 1.5rem 2.5rem; color: var(--color-text-dim); font-size: 0.85rem; text-align: center; } .tool-footer a { color: var(--accent-strong); text-decoration: none; } .tool-footer a:hover { text-decoration: underline; } /* ===== Theme picker (shared across all pages) ===== */ .theme-picker { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; } .theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; padding: 0; outline: none; } .theme-dot:hover { transform: scale(1.2); } .theme-dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .theme-dot.active { border-color: var(--color-text); box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); } .theme-dot[data-theme="default"] { background: #a78bfa; } .theme-dot[data-theme="light"] { background: #e8e5f0; } .theme-dot[data-theme="ocean"] { background: #0ea5e9; } .theme-dot[data-theme="sage"] { background: #10b981; } .theme-dot[data-theme="rose"] { background: #fb7185; } [data-theme="light"] .theme-dot, [data-theme="rose"] .theme-dot, [data-theme="sage"] .theme-dot { border-color: rgba(0, 0, 0, 0.15); } [data-theme="light"] .theme-dot.active, [data-theme="rose"] .theme-dot.active, [data-theme="sage"] .theme-dot.active { border-color: var(--color-text); box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); }