/* ============================================================ WOSKY.XYZ — STYLES Token system: colors live in CSS variables, swapped by [data-theme] on . Type: Fraunces (display) + JetBrains Mono (everything else — nav, labels, body). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root, [data-theme="dark"] { --bg: #100f17; --bg-panel: #1a1826; --bg-panel-2: #201d2f; --text: #ece7f5; --muted: #948eab; --border: #2b2740; --accent: #e8ab3f; --accent-soft: rgba(232, 171, 63, 0.14); --shadow: rgba(0, 0, 0, 0.35); } [data-theme="light"] { --bg: #f6f2ea; --bg-panel: #ffffff; --bg-panel-2: #efe9db; --text: #201c2b; --muted: #6c6579; --border: #e3dcc9; --accent: #c9891f; --accent-soft: rgba(201, 137, 31, 0.13); --shadow: rgba(90, 70, 30, 0.12); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background 0.25s ease, color 0.25s ease; } ::selection { background: var(--accent-soft); color: var(--text); } a { color: inherit; text-decoration: none; } .wrap { max-width: 620px; margin: 0 auto; padding: 48px 24px 80px; } /* ---------- header / brandmark ---------- */ .brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; } .brand-mark { font-family: 'Fraunces', serif; font-weight: 600; font-style: italic; font-size: 20px; letter-spacing: 0.02em; color: var(--text); } .brand-mark .glyph { color: var(--accent); font-style: normal; margin: 0 6px; } .theme-toggle { border: 1px solid var(--border); background: var(--bg-panel); color: var(--muted); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 15px; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle:active { transform: scale(0.92); } /* ---------- nav ---------- */ nav.pillnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; } nav.pillnav a { font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } nav.pillnav a:hover { color: var(--text); border-color: var(--accent); } nav.pillnav a.active { color: var(--bg); background: var(--accent); border-color: var(--accent); } /* ---------- divider glyph ---------- */ .divider { text-align: center; color: var(--border); letter-spacing: 10px; font-size: 12px; margin: 36px 0; user-select: none; } .divider span { color: var(--accent); } /* ---------- hero (home) ---------- */ .hero { text-align: center; padding: 20px 0 8px; } .avatar { position: relative; width: 92px; height: 92px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; background: var(--bg-panel-2); border: 1px solid var(--border); display: grid; place-items: center; font-family: 'Fraunces', serif; font-size: 30px; color: var(--accent); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent-soft); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; transform: scale(0.9); } .avatar:hover::after { opacity: 1; transform: scale(1); } .status-dot { position: absolute; bottom: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-panel); background: #6fbf73; } .status-dot[data-status="away"] { background: #e0b23c; } .status-dot[data-status="offline"] { background: #7a7488; } .hero h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 34px; margin: 0 0 6px; letter-spacing: -0.01em; } .hero .tagline { color: var(--muted); font-size: 14px; margin: 0 0 4px; } .hero .domain { font-size: 12px; color: var(--accent); letter-spacing: 0.04em; } /* ---------- cards (home) ---------- */ .cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 36px; } .card { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 8px 20px var(--shadow); } .card .card-label { font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; } .card .card-desc { font-size: 12px; color: var(--muted); } .card .arrow { color: var(--accent); font-size: 16px; transition: transform 0.2s ease; } .card:hover .arrow { transform: translateX(3px); } .card.soon { opacity: 0.55; cursor: default; } .card.soon:hover { transform: none; box-shadow: none; border-color: var(--border); } .card.soon .arrow { display: none; } /* ---------- about page ---------- */ .about-header { display: flex; gap: 20px; align-items: center; margin-bottom: 8px; } .about-header .avatar { margin: 0; flex-shrink: 0; width: 84px; height: 84px; } .about-header h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px; margin: 0 0 4px; } .about-header .role { color: var(--muted); font-size: 13px; } .facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0; font-size: 13px; color: var(--muted); } .facts span b { color: var(--text); font-weight: 500; } .bio p { margin: 0 0 14px; font-size: 14px; } .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin: 30px 0 12px; } .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--bg-panel); } .langs { display: flex; flex-direction: column; gap: 10px; } .lang-row { display: flex; align-items: center; gap: 12px; font-size: 12px; } .lang-row .lang-name { width: 100px; flex-shrink: 0; color: var(--muted); } .lang-bar { flex: 1; height: 5px; border-radius: 4px; background: var(--bg-panel-2); overflow: hidden; } .lang-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; } .socials { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; margin-top: 8px; } .socials a { color: var(--text); border-bottom: 1px dashed var(--border); padding-bottom: 1px; } .socials a:hover { color: var(--accent); border-color: var(--accent); } .socials .sep { color: var(--border); margin: 0 10px; } .empty-note { font-size: 13px; color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; padding: 14px 16px; } /* ---------- footer ---------- */ footer { margin-top: 60px; text-align: center; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; } /* ---------- responsive ---------- */ @media (max-width: 480px) { .about-header { flex-direction: column; text-align: center; } .facts { justify-content: center; } .hero h1 { font-size: 28px; } } /* ---------- motion respect ---------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }