/* ============================================================ Joshua Titi — portfolio theme Light/dark via [data-theme] on . Tokens drive everything. ============================================================ */ :root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --container: 1080px; --radius: 14px; --radius-sm: 8px; --transition: 0.2s ease; /* Accent: each theme sets only --accent; the strong/soft shades derive from it via color-mix, so a single custom accent (the picker) drives all three. */ --accent: #2563eb; --accent-strong: color-mix(in srgb, var(--accent) 80%, #000); --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); } /* ---------- Light theme ---------- */ [data-theme='light'] { --bg: #ffffff; --bg-alt: #f6f8fb; --surface: #ffffff; --surface-2: #f1f5f9; --text: #0f172a; --text-muted: #475569; --text-faint: #94a3b8; --border: #e2e8f0; --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06); --nav-bg: rgba(255, 255, 255, 0.8); --accent: #2563eb; } /* ---------- Dark theme ---------- */ [data-theme='dark'] { --bg: #0b1120; --bg-alt: #0f172a; --surface: #111a2e; --surface-2: #1a2540; --text: #e8edf6; --text-muted: #9fb0c9; --text-faint: #64748b; --border: #243049; --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35); --nav-bg: rgba(11, 17, 32, 0.8); --accent: #60a5fa; } /* ---------- Midnight theme (near-black, violet accent) ---------- */ [data-theme='midnight'] { --bg: #0a0a0f; --bg-alt: #12121c; --surface: #161624; --surface-2: #1f1f33; --text: #e6e6f5; --text-muted: #a3a3c2; --text-faint: #6b6b8c; --border: #2a2a44; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5); --nav-bg: rgba(10, 10, 15, 0.8); --accent: #a78bfa; } /* ---------- Solarized theme (warm light, cyan-blue accent) ---------- */ [data-theme='solarized'] { --bg: #fdf6e3; --bg-alt: #eee8d5; --surface: #fdf6e3; --surface-2: #eee8d5; --text: #073642; --text-muted: #586e75; --text-faint: #93a1a1; --border: #e3dcc4; --shadow: 0 1px 3px rgba(101, 123, 131, 0.12), 0 8px 24px rgba(101, 123, 131, 0.12); --nav-bg: rgba(253, 246, 227, 0.8); --accent: #268bd2; } /* ---------- Forest theme (deep green, emerald accent) ---------- */ [data-theme='forest'] { --bg: #0d1410; --bg-alt: #121d16; --surface: #15211a; --surface-2: #1d2e24; --text: #e3efe6; --text-muted: #9fc0ab; --text-faint: #6a8a76; --border: #243a2d; --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45); --nav-bg: rgba(13, 20, 16, 0.8); --accent: #34d399; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--transition), color var(--transition); } h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.02em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-strong); } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ---------- Loading splash ---------- */ .app-loading { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; background: var(--bg); color: var(--text-faint); font-family: sans-serif; } .app-loading-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } /* In-flow loading used inside pages (keeps the footer below it, unlike the fixed full-screen boot loader in MainLayout). */ .loading-block { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; min-height: 320px; padding: 3rem 1rem; color: var(--text-muted); } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; cursor: pointer; border: 1px solid transparent; transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition); } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-strong); color: #fff; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Navbar ---------- */ .navbar { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .navbar-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 700; flex-shrink: 0; } .brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 0.85rem; letter-spacing: 0.02em; } .brand-name { font-size: 1rem; white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: 1.1rem; } .nav-links a { color: var(--text-muted); font-size: 0.93rem; font-weight: 500; white-space: nowrap; } .nav-links a:hover { color: var(--text); } .nav-cta { padding: 0.45rem 0.95rem; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--accent-soft); color: var(--accent) !important; font-weight: 600 !important; } .nav-cta:hover { background: var(--accent); color: #fff !important; } .nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .nav-user { color: var(--text-muted); font-size: 0.88rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 1.05rem; cursor: pointer; transition: all var(--transition); } .icon-btn:hover { border-color: var(--accent); color: var(--accent); } .menu-toggle { display: none; } /* Apps dropdown — groups the standalone app pages so the bar stays uncrowded. Opens on hover/focus (no JS); collapses to a flat inline list on mobile. */ .nav-dropdown { position: relative; } .nav-dropdown-label { display: none; } .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 0.3rem; background: transparent; border: none; cursor: pointer; font-family: inherit; font-size: 0.93rem; font-weight: 500; color: var(--text-muted); padding: 0; white-space: nowrap; } .nav-dropdown-toggle:hover { color: var(--text); } .nav-dropdown .caret { font-size: 0.7rem; transition: transform var(--transition); } .nav-dropdown:hover .caret, .nav-dropdown:focus-within .caret { transform: rotate(180deg); } .nav-dropdown-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; display: flex; flex-direction: column; gap: 0.1rem; min-width: 180px; padding: 0.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } /* invisible bridge so the cursor can cross the gap without losing :hover */ .nav-dropdown-panel::before { content: ""; position: absolute; top: -0.5rem; left: 0; right: 0; height: 0.5rem; } .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-panel a { padding: 0.5rem 0.6rem; border-radius: 6px; font-size: 0.9rem; color: var(--text-muted); } .nav-dropdown-panel a:hover { background: var(--bg-alt); color: var(--text); } .nav-dropdown-panel .nav-admin-item { margin-top: 0.3rem; padding-top: 0.6rem; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent); border-radius: 0 0 6px 6px; } /* ---------- Theme picker ---------- */ .theme-menu { position: relative; } .theme-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); } .theme-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; width: 230px; padding: 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 200; } .theme-menu.open .theme-panel { opacity: 1; visibility: visible; transform: translateY(0); } .theme-panel-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin: 0.2rem 0.2rem 0.4rem; } .theme-panel-label:not(:first-child) { margin-top: 0.8rem; } .theme-options { display: flex; flex-direction: column; gap: 0.1rem; } .theme-option { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.45rem 0.5rem; background: transparent; border: none; border-radius: 6px; font-family: inherit; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; text-align: left; } .theme-option:hover { background: var(--bg-alt); color: var(--text); } .theme-option.active { color: var(--text); font-weight: 600; } .theme-option-check { display: inline-block; width: 1em; color: var(--accent); font-size: 0.85rem; } .accent-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.35rem; padding: 0 0.2rem; } .accent-swatch { aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform var(--transition); } .accent-swatch:hover { transform: scale(1.15); } .accent-swatch.active { border-color: var(--text); } .accent-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; padding: 0 0.2rem; } .accent-custom { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; } .accent-custom-chip { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); } .accent-custom input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .accent-reset { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.6rem; font-family: inherit; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; } .accent-reset:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .accent-reset:disabled { opacity: 0.5; cursor: default; } /* ---------- Sections ---------- */ .section { padding: 96px 0; } .section-alt { background: var(--bg-alt); } .section-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 2.5rem; } .section-kicker { font-family: var(--font-mono); color: var(--accent); font-size: 0.9rem; font-weight: 500; } .section-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: calc(100vh - 64px); display: flex; align-items: center; background: radial-gradient(60% 60% at 20% 10%, var(--accent-soft), transparent 70%), var(--bg); } .hero-inner { padding: 80px 24px; } .hero-eyebrow { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; } .hero-name { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 800; } .hero-headline { font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight: 600; color: var(--accent); margin-top: 0.4rem; } .hero-tagline { max-width: 620px; color: var(--text-muted); font-size: 1.15rem; margin-top: 1.2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: var(--text-faint); font-size: 1.4rem; } .hero-scroll span { cursor: pointer; animation: bob 1.8s ease-in-out infinite; display: inline-block; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; } .about-summary { font-size: 1.12rem; color: var(--text); } .about-highlights { display: flex; flex-direction: column; gap: 0.9rem; } .about-highlights li { position: relative; padding-left: 1.6rem; color: var(--text-muted); } .about-highlights li::before { content: '▹'; position: absolute; left: 0; color: var(--accent); font-weight: 700; } /* ---------- Experience timeline ---------- */ .timeline { display: flex; flex-direction: column; gap: 2.5rem; position: relative; } .timeline-item { display: grid; grid-template-columns: 24px 1fr; gap: 1.5rem; } .timeline-marker { position: relative; width: 16px; height: 16px; margin-top: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); } .timeline-item:not(:last-child) .timeline-marker::after { content: ''; position: absolute; left: 50%; top: 22px; transform: translateX(-50%); width: 2px; height: calc(100% + 2.5rem); background: var(--border); } .timeline-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: var(--shadow); } .job-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .job-title { font-size: 1.2rem; font-weight: 700; } .job-period { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-faint); } .job-company { color: var(--accent); font-weight: 600; margin-top: 0.2rem; } .job-blurb { color: var(--text-muted); margin-top: 0.8rem; } .job-group { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.8rem; } .job-group summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 0.5rem; } .job-group summary::before { content: '+'; color: var(--accent); font-weight: 700; width: 1ch; } .job-group[open] summary::before { content: '−'; } .job-group summary::-webkit-details-marker { display: none; } .job-group ul { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.55rem; } .job-group li { position: relative; padding-left: 1.4rem; color: var(--text-muted); font-size: 0.95rem; } .job-group li::before { content: '▹'; position: absolute; left: 0; color: var(--accent); } /* ---------- Skills ---------- */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; } .skill-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); } .skill-category { font-size: 1.05rem; margin-bottom: 1rem; } .skill-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip { font-family: var(--font-mono); font-size: 0.82rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } /* ---------- Projects ---------- */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; } .project-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform var(--transition), border-color var(--transition); } .project-card:hover { transform: translateY(-4px); border-color: var(--accent); } .project-name { font-size: 1.15rem; } .project-desc { color: var(--text-muted); margin-top: 0.7rem; flex: 1; } .project-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; } .project-tags li { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); background: var(--accent-soft); padding: 0.25rem 0.6rem; border-radius: 6px; } .project-links { display: flex; gap: 1rem; margin-top: 1rem; font-weight: 600; font-size: 0.9rem; } /* ---------- Education ---------- */ .education-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); max-width: 640px; } .education-degree { font-size: 1.2rem; } .education-school { color: var(--accent); font-weight: 600; margin-top: 0.4rem; } .education-location { color: var(--text-muted); margin-top: 0.2rem; } /* ---------- Contact ---------- */ .section-contact { text-align: center; } .section-contact .section-head { justify-content: center; } .contact-lead { max-width: 560px; margin: 0 auto; color: var(--text-muted); font-size: 1.1rem; } .contact-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--border); background: var(--bg-alt); } .footer-inner { max-width: var(--container); margin: 0 auto; padding: 2rem 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .footer-name { font-weight: 700; } .footer-links { display: flex; gap: 1.4rem; } .footer-links a { color: var(--text-muted); font-size: 0.92rem; } .footer-links a:hover { color: var(--accent); } .footer-copy { color: var(--text-faint); font-size: 0.85rem; } /* ---------- 404 ---------- */ .notfound { min-height: 60vh; display: flex; align-items: center; } .notfound .btn { margin-top: 1.5rem; } /* ---------- Responsive ---------- */ @media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; gap: 1.8rem; } .menu-toggle { display: inline-grid; } .nav-links { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0.5rem 24px; max-height: 0; overflow: hidden; transition: max-height var(--transition), padding var(--transition); } .nav-links.open { max-height: 600px; padding: 1rem 24px 1.5rem; } .nav-links a { width: 100%; padding: 0.7rem 0; } .nav-cta { margin-top: 0.5rem; } /* Flatten the Apps dropdown into the stacked menu (no hover popup on touch) */ .nav-dropdown { width: 100%; } .nav-dropdown-toggle { display: none; } .nav-dropdown-label { display: block; width: 100%; padding: 0.9rem 0 0.3rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .nav-dropdown-panel { position: static; min-width: 0; padding: 0; gap: 0; background: transparent; border: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .nav-dropdown-panel::before { display: none; } .nav-dropdown-panel .nav-admin-item { margin-top: 0; padding: 0.7rem 0; border-top: none; font-size: 0.9rem; border-radius: 0; } } /* ---------- Admin ---------- */ .admin-welcome { color: var(--text-muted); margin-bottom: 1.5rem; } .admin-denied { color: var(--text-muted); } .admin-tools { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem; } .admin-card h3 { margin: 0 0 0.5rem; } .admin-card p { color: var(--text-muted); margin: 0; } a.admin-card { display: block; text-decoration: none; color: inherit; transition: border-color var(--transition), transform var(--transition); } a.admin-card:hover { border-color: var(--accent); transform: translateY(-2px); } /* Admin stats overview */ .admin-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 1.75rem; } .admin-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; } .admin-stat-num { font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1; } .admin-stat-cap { font-size: 1rem; font-weight: 600; color: var(--text-faint); } .admin-stat-label { font-size: 0.85rem; color: var(--text-muted); } /* Admin game tabs (score moderation) */ .admin-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.4rem; } .admin-tab { font: inherit; cursor: pointer; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 1rem; transition: border-color var(--transition), color var(--transition); } .admin-tab:hover { border-color: var(--accent); color: var(--accent); } .admin-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* Destructive actions */ .btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; } .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; } .btn-danger:disabled { opacity: 0.6; cursor: default; } .btn-link-danger { font: inherit; cursor: pointer; background: none; border: none; padding: 0; color: #dc2626; text-decoration: underline; } .btn-link-danger:disabled { opacity: 0.5; cursor: default; } /* ---------- Resume review / editor ---------- */ .dropzone { display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 1.5rem; text-align: center; cursor: pointer; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-muted); transition: border-color var(--transition), color var(--transition); } .dropzone:hover { border-color: var(--accent); color: var(--accent); } .dropzone input[type="file"] { display: block; margin-bottom: 0.5rem; } .resume-live, .resume-stored { margin-bottom: 1.75rem; } .resume-live h3, .resume-stored h3 { font-size: 1.05rem; margin-bottom: 0.6rem; } .resume-live-name { color: var(--text); margin-bottom: 0.5rem; } .resume-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); } .resume-badge.is-published { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); } .resume-badge.is-seed { color: var(--text-muted); } .resume-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .resume-table th, .resume-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); } .resume-table th { color: var(--text-faint); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .resume-table td:last-child { text-align: right; } .resume-hint { color: var(--text-faint); font-size: 0.82rem; margin-top: 0.5rem; } .resume-row-actions { display: flex; gap: 0.4rem; justify-content: flex-end; } .resume-live-actions { margin-top: 0.75rem; } .review-summary { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-bottom: 1.5rem; color: var(--text); } .review-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; } .review-section legend { font-weight: 700; padding: 0 0.5rem; color: var(--accent); } /* Whole-section collapse: clickable legend, body hidden, outline shrinks to a bar. */ .review-section-legend { cursor: pointer; user-select: none; } .review-section-legend .collapse-caret { color: var(--accent); } .review-section.collapsed { padding-top: 0.3rem; padding-bottom: 0.5rem; } .review-section.collapsed > *:not(legend) { display: none; } .review-item, .review-subitem { border-left: 3px solid var(--border); padding: 0.5rem 0 0.5rem 1rem; margin: 0.75rem 0; } .review-subitem { margin-left: 1rem; border-left-style: dotted; } .review-item-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 0.5rem; } .review-item-toggle { cursor: pointer; user-select: none; } .review-item-title { display: flex; align-items: center; gap: 0.5rem; } .collapse-caret { color: var(--text-faint); font-size: 0.75rem; width: 1em; display: inline-block; } .review-item.collapsed { margin-bottom: 0.4rem; } .review-item.collapsed .review-item-head { margin-bottom: 0; } .review-toolbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .review-actions { display: flex; gap: 1rem; margin-top: 1rem; } .diff-field, .list-editor { margin-bottom: 1rem; } .diff-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.4rem; } .diff-badge { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0.1rem 0.5rem; } .diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; } .diff-field.changed, .list-editor.changed { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0.6rem; } .diff-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 0.3rem; } .diff-readonly { min-height: 38px; padding: 0.5rem 0.65rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font-size: 0.92rem; white-space: pre-wrap; word-break: break-word; } .diff-input { width: 100%; box-sizing: border-box; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 0.92rem; } .diff-input:focus { outline: none; border-color: var(--accent); } .diff-field.changed .diff-input { border-color: var(--accent); } .diff-revert { border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--accent); cursor: pointer; padding: 0.05rem 0.45rem; font-size: 0.7rem; } .diff-revert:hover { border-color: var(--accent); } .list-current-items { margin: 0; padding-left: 1.1rem; color: var(--text-muted); font-size: 0.9rem; } .list-current-items li { margin-bottom: 0.2rem; } .list-row { display: flex; gap: 0.4rem; margin-bottom: 0.35rem; } .list-add, .list-remove { border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; padding: 0.2rem 0.55rem; font-size: 0.78rem; } .list-add:hover { border-color: var(--accent); color: var(--accent); } .list-remove:hover { border-color: #b32121; color: #b32121; } @media (max-width: 640px) { .diff-cols { grid-template-columns: 1fr; } } /* ---------- AI review (second pass) ---------- */ .ai-review { border-color: var(--accent); } .btn-sm { padding: 0.3rem 0.7rem; font-size: 0.82rem; } .ai-heading { font-size: 0.95rem; margin: 1rem 0 0.6rem; color: var(--text); } .ai-heading-warn { color: #b32121; } .ai-clean { color: var(--text-muted); font-size: 0.9rem; margin: 0.5rem 0; } .ai-warning { display: flex; gap: 0.6rem; align-items: flex-start; border: 1px solid #e3b7b7; background: #fbeded; color: #5a1a1a; border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; } .ai-warning-head { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; } .ai-warning-body { flex: 1; } .ai-warning-body p { margin: 0.3rem 0 0; font-size: 0.9rem; } .ai-warning.applied { opacity: 0.7; border-style: dashed; } .ai-fix-preview { font-size: 0.85rem; color: #5a1a1a; font-style: italic; } .ai-warning .ai-suggestion-actions { margin-top: 0.5rem; } .ai-loc { color: var(--text-faint); font-size: 0.8rem; } .ai-snippet { display: inline-block; margin-top: 0.25rem; padding: 0.05rem 0.4rem; background: rgba(0, 0, 0, 0.06); border-radius: var(--radius-sm); font-size: 0.82rem; word-break: break-word; } .pii-badge { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; border-radius: 999px; padding: 0.12rem 0.5rem; color: #fff; white-space: nowrap; } .pii-pii { background: #b36b00; } .pii-phi { background: #b32121; } .ai-suggestion { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 0.75rem; background: var(--surface); } .ai-suggestion.applied { opacity: 0.7; border-style: dashed; } .ai-suggestion-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 0.5rem; } .ai-suggested { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } .ai-reason { font-size: 0.85rem; color: var(--text-muted); margin: 0.5rem 0 0; font-style: italic; } .ai-suggestion-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.6rem; } /* ---------- Games ---------- */ .games-intro { max-width: 680px; color: var(--text-muted); font-size: 1.08rem; margin-bottom: 2rem; } .game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; } .game-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); display: flex; flex-direction: column; } .game-card-mark { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 1.5rem; margin-bottom: 1rem; } .game-card-name { font-size: 1.2rem; } .game-card-tagline { color: var(--accent); font-weight: 600; margin-top: 0.3rem; } .game-card-desc { color: var(--text-muted); margin-top: 0.7rem; flex: 1; font-size: 0.95rem; } .game-card-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.3rem; } .games-links { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2rem; font-weight: 600; } .btn-sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; } /* ---------- Game stage (play screens) ---------- */ .game-stage { max-width: 860px; } .game-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .game-lead { max-width: 540px; color: var(--text-muted); font-size: 1.05rem; } .game-error { color: #b32121; font-weight: 500; } .game-hint { color: var(--text-faint); font-size: 0.9rem; margin-top: 0.8rem; text-align: center; } .game-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } /* Speed Math */ .sm-progress { width: 100%; max-width: 420px; color: var(--text-muted); font-size: 0.9rem; } .sm-bar { height: 6px; border-radius: 999px; background: var(--surface-2); margin-top: 0.5rem; overflow: hidden; } .sm-bar-fill { height: 100%; background: var(--accent); transition: width var(--transition); } .sm-problem { font-family: var(--font-mono); font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 600; } .sm-answer { width: 220px; max-width: 80%; text-align: center; font-family: var(--font-mono); font-size: 1.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); } .sm-answer:focus { outline: none; border-color: var(--accent); } /* Arcade name entry */ .name-input { width: 280px; max-width: 90%; text-align: center; font-size: 1.1rem; padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); } .name-input:focus { outline: none; border-color: var(--accent); } /* Result */ .game-result .result-score { font-size: clamp(3rem, 12vw, 5rem); font-weight: 800; color: var(--accent); line-height: 1; } .result-detail { color: var(--text-muted); } .result-badge { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--accent); border-radius: 999px; padding: 0.25rem 0.8rem; } /* Pong */ .pong-wrap { display: flex; flex-direction: column; align-items: center; } .pong-canvas { width: 100%; max-width: 800px; aspect-ratio: 8 / 5; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); touch-action: none; cursor: none; } /* ---------- Sign-in prompt ---------- */ .signin-prompt { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.8rem; margin-bottom: 2rem; text-align: center; } .signin-prompt p { color: var(--text-muted); margin-bottom: 1rem; } .signin-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; } /* ---------- Leaderboards ---------- */ .board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.6rem; margin-bottom: 1.6rem; } .board-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .board-title { font-size: 1.15rem; display: flex; align-items: center; gap: 0.6rem; } .board-mark { color: var(--accent); } .board-empty { color: var(--text-faint); } .board-yours { color: var(--text-muted); margin-bottom: 0.8rem; } .board-yours strong { color: var(--accent); } .board-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; } .board-table th, .board-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); } .board-table th { color: var(--text-faint); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; } .board-table td.num, .board-table th.num { text-align: right; font-family: var(--font-mono); } .board-table td.rank { color: var(--text-faint); font-family: var(--font-mono); width: 2.5rem; } .board-table td.when, .board-table th.when { text-align: right; color: var(--text-faint); white-space: nowrap; } .board-table tbody tr:last-child td { border-bottom: none; } .provider { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); margin-left: 0.4rem; } /* ---------- Dashboard ---------- */ .dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; } .dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; } .dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .dash-card-head h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; } .dash-best { display: flex; align-items: baseline; gap: 0.5rem; margin: 1rem 0 1.2rem; } .dash-best-num { font-size: 2.6rem; font-weight: 800; color: var(--accent); line-height: 1; } .dash-best-label { color: var(--text-muted); font-size: 0.9rem; } .dash-history { display: flex; flex-direction: column; gap: 0.4rem; } .dash-history li { display: flex; justify-content: space-between; font-size: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.4rem; } .dash-run-score { font-family: var(--font-mono); font-weight: 600; } .dash-run-when { color: var(--text-faint); } /* ---------- Fit Analyzer ---------- */ .fit-stage { max-width: 860px; } .section-sub { color: var(--text-muted); margin-top: 0.6rem; max-width: 640px; font-size: 1.02rem; } .fit-input { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; } .fit-textarea { width: 100%; resize: vertical; min-height: 180px; font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.5; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); } .fit-textarea:focus { outline: none; border-color: var(--accent); } .fit-input-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; } .fit-count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); } .fit-hint { font-size: 0.85rem; color: var(--text-faint); } .fit-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; } .fit-status { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.9rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); } .fit-status-dot { flex: 0 0 auto; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); } .fit-status--ok .fit-status-dot { background: #16a34a; } .fit-status--wait .fit-status-dot { background: #d97706; } .fit-privacy { margin-top: 1.1rem; font-size: 0.82rem; color: var(--text-faint); line-height: 1.5; } .fit-result { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.8rem; margin-top: 1.6rem; } .fit-loading { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; } .fit-notice { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text); border-radius: var(--radius-sm); padding: 0.8rem 1rem; margin-bottom: 1.4rem; font-size: 0.92rem; } .fit-result-head { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; } .fit-score { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid var(--accent); color: var(--accent); } .fit-score-num { font-size: 2.6rem; font-weight: 800; line-height: 1; } .fit-score-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; } .fit-score--strong { border-color: #16a34a; color: #16a34a; } .fit-score--good { border-color: var(--accent); color: var(--accent); } .fit-score--fair { border-color: #d97706; color: #d97706; } .fit-score--low { border-color: #dc2626; color: #dc2626; } .fit-result-meta { flex: 1; min-width: 240px; } .fit-source { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px; padding: 0.25rem 0.7rem; margin-bottom: 0.6rem; } .fit-source--ai { color: #fff; background: var(--accent); } .fit-source--instant { color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); } .fit-summary { color: var(--text); line-height: 1.55; } .fit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.8rem; } .fit-col-title { font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; } .fit-col-count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); } .fit-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .fit-chip { font-family: var(--font-mono); font-size: 0.8rem; padding: 0.32rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); } .fit-chip--match { color: #16a34a; background: rgba(22, 163, 74, 0.1); border-color: rgba(22, 163, 74, 0.3); } .fit-chip--gap { color: #d97706; background: rgba(217, 119, 6, 0.1); border-color: rgba(217, 119, 6, 0.3); } .fit-empty { color: var(--text-faint); font-size: 0.9rem; } .fit-talking { margin-top: 1.8rem; } .fit-points { display: flex; flex-direction: column; gap: 0.6rem; } .fit-points li { color: var(--text-muted); line-height: 1.5; padding-left: 1.2rem; position: relative; } .fit-points li::before { content: "→"; position: absolute; left: 0; color: var(--accent); } .fit-upsell { margin-top: 1.6rem; font-size: 0.88rem; color: var(--text-faint); line-height: 1.5; } @media (max-width: 600px) { .fit-columns { grid-template-columns: 1fr; } .fit-result-head { gap: 1.1rem; } } /* ---------- Resume export / ATS check ---------- */ .export-controls { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end; margin-top: 0.5rem; } .export-pick { display: flex; flex-direction: column; gap: 0.4rem; } .export-pick span { font-size: 0.8rem; color: var(--text-muted); } .export-pick select { font: inherit; padding: 0.55rem 0.8rem; min-width: 240px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); } .export-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; } .ats-result { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.8rem; margin-top: 1.6rem; } .ats-score { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--accent); color: var(--accent); margin-bottom: 1rem; } .ats-score-num { font-size: 2.1rem; font-weight: 800; line-height: 1; } .ats-score-label { font-size: 0.62rem; color: var(--text-muted); margin-top: 0.2rem; text-align: center; } .ats-score--strong { border-color: #16a34a; color: #16a34a; } .ats-score--good { border-color: var(--accent); color: var(--accent); } .ats-score--fair { border-color: #d97706; color: #d97706; } .ats-score--low { border-color: #dc2626; color: #dc2626; } .ats-summary { color: var(--text); line-height: 1.55; } .ats-findings { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; } .ats-finding { display: flex; gap: 0.8rem; align-items: baseline; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); } .ats-finding-tag { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); flex: 0 0 auto; } .ats-finding-msg { color: var(--text); line-height: 1.5; } .ats-finding--error { border-color: rgba(220, 38, 38, 0.4); background: rgba(220, 38, 38, 0.08); } .ats-finding--error .ats-finding-tag { color: #dc2626; } .ats-finding--warn { border-color: rgba(217, 119, 6, 0.4); background: rgba(217, 119, 6, 0.08); } .ats-finding--warn .ats-finding-tag { color: #d97706; } /* ---------- Resume tailoring ---------- */ .ats-delta { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; } .ats-delta-from { font-size: 1.8rem; font-weight: 700; color: var(--text-faint); } .ats-delta-arrow { color: var(--text-muted); } .ats-delta-to { font-size: 2.6rem; font-weight: 800; line-height: 1; } .ats-delta-to.fit-score--strong { color: #16a34a; } .ats-delta-to.fit-score--good { color: var(--accent); } .ats-delta-to.fit-score--fair { color: #d97706; } .ats-delta-to.fit-score--low { color: #dc2626; } .ats-delta-label { font-size: 0.72rem; color: var(--text-muted); align-self: flex-end; } .ats-keywords { margin-top: 1.6rem; } .tailor-actions { margin-top: 1.8rem; } .ats-inline { margin-top: 1.2rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .ats-inline-score { font-weight: 700; margin-right: 0.5rem; } .ats-inline-score.fit-score--strong { color: #16a34a; } .ats-inline-score.fit-score--good { color: var(--accent); } .ats-inline-score.fit-score--fair { color: #d97706; } .ats-inline-score.fit-score--low { color: #dc2626; } .ats-inline-detail { color: var(--text-muted); font-size: 0.9rem; } .ats-panel { margin-top: 0.9rem; } .ats-panel:first-of-type { margin-top: 0.4rem; } .ats-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; } .tools-block { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--border); } .tools-block > h3 { margin: 0 0 1rem; } .tailor-changes { margin-top: 1.8rem; display: flex; flex-direction: column; gap: 1rem; } .tailor-change { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 1rem; } .tailor-change-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .tailor-change-where { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); } .tailor-change-why { font-size: 0.82rem; color: var(--text-faint); font-style: italic; } .tailor-change-diff { display: grid; gap: 0.5rem; } .tailor-before, .tailor-after { padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); line-height: 1.5; font-size: 0.92rem; } .tailor-before { color: var(--text-muted); background: rgba(220, 38, 38, 0.06); border-left: 3px solid rgba(220, 38, 38, 0.4); text-decoration: line-through; text-decoration-color: rgba(220,38,38,0.4); } .tailor-after { color: var(--text); background: rgba(22, 163, 74, 0.08); border-left: 3px solid rgba(22, 163, 74, 0.5); } .tailor-save { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 1rem; } .tailor-save-label { font: inherit; padding: 0.5rem 0.75rem; min-width: 260px; flex: 0 1 320px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); } .tailor-saved { font-size: 0.88rem; color: #16a34a; } /* ---------- Posts (blog) ---------- */ /* Narrow reading column, shared by the posts list, single post, and the editor. */ .build-stage { max-width: 820px; } .posts-empty { color: var(--text-muted); } .post-list { display: flex; flex-direction: column; gap: 1rem; } .post-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform var(--transition), border-color var(--transition); } .post-item:hover { transform: translateY(-2px); border-color: var(--accent); } .post-item--pinned { border-color: var(--accent); } .post-item-link { display: block; padding: 1.4rem 1.6rem; text-decoration: none; color: inherit; } .post-item-head { display: flex; align-items: center; gap: 0.55rem; } .post-item-title { font-size: 1.2rem; margin: 0; } .post-pin { font-size: 0.95rem; line-height: 1; } .post-item-date { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: var(--text-faint); font-family: var(--font-mono); } .post-item-summary { margin-top: 0.7rem; color: var(--text-muted); line-height: 1.6; } /* Single post */ .post-article { max-width: 760px; } .post-back { margin-bottom: 1rem; } .post-back a { color: var(--text-muted); font-size: 0.9rem; } .post-back a:hover { color: var(--accent); } .post-article-head { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.8rem; } .post-article-head .post-pin { align-self: flex-start; } .post-article-title { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: 0; } /* Rendered Markdown body — shared by the post view and the editor preview */ .post-body { color: var(--text); line-height: 1.75; font-size: 1.03rem; } .post-body > :first-child { margin-top: 0; } .post-body h2 { font-size: 1.5rem; margin: 2rem 0 0.8rem; } .post-body h3 { font-size: 1.2rem; margin: 1.6rem 0 0.6rem; } .post-body p { margin: 0.9rem 0; } .post-body ul, .post-body ol { margin: 0.9rem 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; } .post-body li { line-height: 1.65; } .post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .post-body code { font-family: var(--font-mono); font-size: 0.88em; padding: 0.1rem 0.35rem; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); } .post-body pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.2rem; overflow-x: auto; margin: 1.1rem 0; } .post-body pre code { padding: 0; border: none; background: none; font-size: 0.88rem; } .post-body blockquote { margin: 1.1rem 0; padding: 0.4rem 1.1rem; border-left: 3px solid var(--accent); color: var(--text-muted); } .post-body img { max-width: 100%; border-radius: var(--radius-sm); } .post-body table { border-collapse: collapse; margin: 1.1rem 0; width: 100%; } .post-body th, .post-body td { border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left; } .post-body hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } /* Admin posts list */ .posts-admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .posts-admin-table .post-row-pin { width: 1.5rem; text-align: center; } .posts-admin-table .post-row-title { font-weight: 600; color: var(--text); } .posts-admin-table .post-row-title:hover { color: var(--accent); } .post-row--pinned { background: var(--accent-soft); } .post-row-actions { display: flex; gap: 0.9rem; justify-content: flex-end; white-space: nowrap; } .btn-link { background: none; border: none; padding: 0; cursor: pointer; color: var(--accent); font: inherit; font-size: 0.88rem; } .btn-link:disabled { opacity: 0.5; cursor: default; } .post-badge { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--border); } .post-badge--live { color: #16a34a; background: rgba(22, 163, 74, 0.1); border-color: rgba(22, 163, 74, 0.3); } .post-badge--draft { color: var(--text-muted); background: var(--surface-2); } /* Post editor */ .post-editor { display: flex; flex-direction: column; gap: 1.3rem; } .post-field { display: flex; flex-direction: column; gap: 0.4rem; } .post-field-label { font-size: 0.9rem; font-weight: 600; } .post-field-hint { font-weight: 400; color: var(--text-faint); font-size: 0.82rem; } .post-input { width: 100%; font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.5; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); resize: vertical; } .post-input:focus { outline: none; border-color: var(--accent); } .post-body-input { font-family: var(--font-mono); font-size: 0.92rem; min-height: 360px; } .post-body-tabs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; } .post-body-tab-btns { display: flex; gap: 0.4rem; } .post-tab { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); padding: 0.35rem 0.9rem; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 0.85rem; } .post-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } .post-preview-pane { min-height: 360px; padding: 1.2rem 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .post-publish-toggle { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; cursor: pointer; } .post-publish-toggle input { width: 1.1rem; height: 1.1rem; } .post-editor-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; } /* ---------- Blazor error UI (kept from template) ---------- */ #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; }