/* ============================================================ Tronax — site styles Dark-first electric aesthetic with a glowing wordmark. Theme is driven by prefers-color-scheme and overridable via the [data-theme] attribute on . ============================================================ */ /* ---------- Fonts (self-hosted, woff2) ---------- */ @font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/chakra-petch-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/chakra-petch-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/sora-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/sora-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/sora-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); } /* ---------- Theme tokens ---------- */ :root { --accent: #22d3ee; /* overridden inline from config */ --font-display: 'Chakra Petch', system-ui, sans-serif; --font-body: 'Sora', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --radius: 14px; --maxw: 720px; } /* Dark theme (default + explicit) */ :root, :root[data-theme='dark'] { color-scheme: dark; --bg: #05070b; --bg-2: #080c13; --grid: rgba(120, 160, 200, 0.05); --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.10); --border-hi: rgba(255, 255, 255, 0.20); --text: #e8eef7; --text-dim: #8896ac; --wordmark: #f2f6fc; --glow-1: color-mix(in srgb, var(--accent) 90%, transparent); --glow-2: color-mix(in srgb, var(--accent) 55%, transparent); --halo: color-mix(in srgb, var(--accent) 22%, transparent); --shadow: 0 18px 50px -20px rgba(0,0,0,0.8); } /* Light theme */ :root[data-theme='light'] { color-scheme: light; --bg: #eceff5; --bg-2: #f6f8fc; --grid: rgba(20, 40, 80, 0.05); --surface: rgba(12, 22, 44, 0.035); --surface-2: rgba(12, 22, 44, 0.06); --border: rgba(12, 22, 44, 0.12); --border-hi: rgba(12, 22, 44, 0.28); --text: #121a28; --text-dim: #57637b; --wordmark: #0d1422; --glow-1: color-mix(in srgb, var(--accent) 55%, transparent); --glow-2: color-mix(in srgb, var(--accent) 30%, transparent); --halo: color-mix(in srgb, var(--accent) 16%, transparent); --shadow: 0 18px 44px -22px rgba(20,40,80,0.35); } /* Follow the OS when no explicit choice is stored */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #eceff5; --bg-2: #f6f8fc; --grid: rgba(20, 40, 80, 0.05); --surface: rgba(12, 22, 44, 0.035); --surface-2: rgba(12, 22, 44, 0.06); --border: rgba(12, 22, 44, 0.12); --border-hi: rgba(12, 22, 44, 0.28); --text: #121a28; --text-dim: #57637b; --wordmark: #0d1422; --glow-1: color-mix(in srgb, var(--accent) 55%, transparent); --glow-2: color-mix(in srgb, var(--accent) 30%, transparent); --halo: color-mix(in srgb, var(--accent) 16%, transparent); --shadow: 0 18px 44px -22px rgba(20,40,80,0.35); } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .4s ease, color .4s ease; } a { color: inherit; text-decoration: none; } ::selection { background: var(--halo); } /* Atmospheric background: layered radial glow + faint grid */ .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 50% 18%, var(--halo) 0%, transparent 55%), radial-gradient(80% 60% at 50% 120%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); } .bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 90% at 50% 35%, #000 0%, transparent 75%); mask-image: radial-gradient(120% 90% at 50% 35%, #000 0%, transparent 75%); } /* ---------- Layout ---------- */ main { min-height: 100svh; display: grid; place-items: center; padding: 48px 20px; } .hero { width: 100%; max-width: var(--maxw); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px; } /* ---------- Wordmark with glow ---------- */ .wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 16vw, 8.5rem); line-height: 0.95; letter-spacing: 0.06em; margin: 0; color: var(--wordmark); text-shadow: 0 0 8px var(--glow-1), 0 0 26px var(--glow-2), 0 0 60px var(--glow-2); animation: breathe 5.5s ease-in-out infinite; } .wordmark .dot { color: var(--accent); text-shadow: 0 0 18px var(--glow-1); } @keyframes breathe { 0%, 100% { text-shadow: 0 0 8px var(--glow-1), 0 0 24px var(--glow-2), 0 0 50px var(--glow-2); } 50% { text-shadow: 0 0 12px var(--glow-1), 0 0 34px var(--glow-2), 0 0 78px var(--glow-2); } } .tagline { margin: -10px 0 0; font-size: clamp(0.95rem, 2.6vw, 1.15rem); color: var(--text-dim); font-weight: 400; max-width: 48ch; letter-spacing: 0.01em; } /* ---------- Social row ---------- */ .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 4px; } .social { --size: 54px; width: var(--size); height: var(--size); display: grid; place-items: center; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; backdrop-filter: blur(6px); transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease, color .22s ease, background-color .22s ease, box-shadow .22s ease; } /* Button-element socials (copy-buttons, PGP badge) inherit .social fully */ button.social { font: inherit; padding: 0; } .social .ico { width: 22px; height: 22px; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .social:hover, .social:focus-visible { transform: translateY(-4px); color: var(--accent); border-color: var(--border-hi); background: var(--surface-2); box-shadow: 0 10px 30px -12px var(--glow-2), 0 0 0 1px var(--halo) inset; outline: none; } /* PGP pill (standalone fallback when no email social exists) */ .pgp-btn { display: inline-flex; align-items: center; gap: 9px; height: 54px; padding: 0 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-family: var(--font-mono); font-size: .9rem; font-weight: 500; letter-spacing: .04em; cursor: pointer; transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease, color .22s ease, background-color .22s ease, box-shadow .22s ease; } .pgp-btn .ico { width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url('/static/icons/pgp.svg') center / contain no-repeat; mask: url('/static/icons/pgp.svg') center / contain no-repeat; } .pgp-btn:hover, .pgp-btn:focus-visible { transform: translateY(-4px); color: var(--accent); border-color: var(--border-hi); background: var(--surface-2); box-shadow: 0 10px 30px -12px var(--glow-2), 0 0 0 1px var(--halo) inset; outline: none; } /* Email + PGP grouped pair */ .social-group { display: flex; } .social-group > .social:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: none; } .social-group > .pgp-badge { width: 42px; border-radius: 0 var(--radius) var(--radius) 0; border-left: 1px solid var(--border); } .social-group > .pgp-badge .ico { width: 18px; height: 18px; } .social-group:hover > .social, .social-group:hover > .pgp-badge { border-color: var(--border-hi); } .social-group { transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease; border-radius: var(--radius); } .social-group:hover { transform: translateY(-4px); box-shadow: 0 10px 30px -12px var(--glow-2); } /* Suppress individual lift inside the group */ .social-group > .social:hover, .social-group > .pgp-badge:hover { transform: none; box-shadow: none; } .social-group > .pgp-badge:hover { color: var(--accent); } /* ---------- Theme toggle ---------- */ .theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 20; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); backdrop-filter: blur(6px); transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--border-hi); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .moon { display: none; } :root[data-theme='dark'] .theme-toggle .moon, :root:not([data-theme]) .theme-toggle .moon { display: block; } :root[data-theme='dark'] .theme-toggle .sun, :root:not([data-theme]) .theme-toggle .sun { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-toggle .moon { display: none; } :root:not([data-theme]) .theme-toggle .sun { display: block; } } :root[data-theme='light'] .theme-toggle .sun { display: block; } :root[data-theme='light'] .theme-toggle .moon { display: none; } /* ---------- Footer ---------- */ .foot { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); opacity: .6; font-family: var(--font-mono); } .foot a:hover { color: var(--accent); } /* ---------- PGP modal ---------- */ .modal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 20px; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(4px); } .modal[open], .modal.show { display: grid; } .modal-card { width: 100%; max-width: 460px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 18px; padding: 26px; box-shadow: var(--shadow); animation: pop .2s ease; } @keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-card h2 { font-family: var(--font-display); font-weight: 600; margin: 0 0 4px; letter-spacing: .04em; font-size: 1.2rem; } .modal-card h2 .pgp-for { font-family: var(--font-mono); font-weight: 400; font-size: .88rem; color: var(--accent); letter-spacing: 0; } .modal-card p { margin: 0 0 16px; color: var(--text-dim); font-size: .9rem; } .fingerprint { font-family: var(--font-mono); font-size: .82rem; line-height: 1.6; word-break: break-all; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .modal-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } /* ---------- Buttons (shared) ---------- */ .btn { font-family: var(--font-body); font-size: .9rem; font-weight: 600; padding: 10px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color .18s ease, background-color .18s ease, transform .12s ease; } .btn:hover { border-color: var(--border-hi); background: var(--surface-2); } .btn:active { transform: translateY(1px); } .btn-accent { border-color: transparent; background: var(--accent); color: #04121a; } .btn-accent:hover { filter: brightness(1.08); background: var(--accent); } /* ---------- Toast (copy feedback) ---------- */ .toast { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 60; padding: 10px 18px; border-radius: 10px; font-size: .85rem; font-weight: 600; background: var(--bg-2); border: 1px solid var(--accent); color: var(--text); box-shadow: 0 10px 30px -10px var(--glow-2); animation: pop .2s ease; font-family: var(--font-mono); letter-spacing: .02em; } /* ---------- Entrance animation ---------- */ .reveal { opacity: 0; transform: translateY(14px); animation: fadeup .7s ease forwards; } @keyframes fadeup { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }