/* ImChill1n portfolio — Blazor + MudBlazor. Dark, minimal, one warm accent. Type: Archivo (display/sans) + Geist Mono. */ :root { --bg: #0c0c0e; --surface: #131316; --surface-2: #17171b; --border: #26262c; --border-soft: #1e1e23; --text: #e7e7ea; --muted: #8c8c95; --faint: #5c5c66; --accent: #ff6b3d; --accent-soft: rgba(255, 107, 61, 0.14); --accent-line: rgba(255, 107, 61, 0.42); --stamp: #c6c6c6; --font-sans: 'Archivo', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { min-height: 100vh; overflow-x: hidden; } /* Ambient: a couple of very soft warm/neutral pools + faint grid */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(48rem 40rem at 12% -8%, rgba(255, 107, 61, 0.06), transparent 60%), radial-gradient(52rem 44rem at 92% 4%, rgba(255, 255, 255, 0.03), transparent 62%), linear-gradient(var(--bg), var(--bg)); } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: #0c0c0e; } /* ---- Scrollbar ---- */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid var(--bg); } *::-webkit-scrollbar-thumb:hover { background: #33333b; } /* ---- Type helpers ---- */ .display { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; } .mono { font-family: var(--font-mono); } .caps { text-transform: uppercase; letter-spacing: 0.16em; } .accent { color: var(--accent); } .muted { color: var(--muted); } /* ---- Boot / loading screen (pre-Blazor) ---- The bar + number read Blazor's own --blazor-load-percentage / -text (set on during download), so they reflect real progress. js in index.html narrates the phase steps. */ .app-boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2rem; background: radial-gradient(40rem 34rem at 50% -10%, rgba(255, 107, 61, 0.07), transparent 60%), var(--bg); z-index: 100; padding: 1.5rem; } .app-boot__mark { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.03em; font-size: 1.5rem; color: var(--text); } .app-boot__mark sup { color: var(--accent); font-size: 0.55em; } .app-boot__panel { width: min(20rem, 82vw); } .app-boot__pct { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.03em; font-size: 3rem; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .app-boot__pct::after { content: var(--blazor-load-percentage-text, "0%"); } .app-boot__track { margin-top: 1rem; height: 3px; width: 100%; background: #26262c; border-radius: 999px; overflow: hidden; } .app-boot__fill { height: 100%; width: var(--blazor-load-percentage, 0%); min-width: 2%; background: var(--accent); border-radius: 999px; box-shadow: 0 0 12px -2px var(--accent); transition: width 0.12s ease-out; } /* On completion the script snaps the bar full so a fast boot never leaves it short. */ .app-boot__fill.is-complete { width: 100%; transition: none; } .app-boot__status { margin: 0.85rem 0 0; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.72rem; color: var(--muted); min-height: 1em; } .app-boot__steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .app-boot__step { display: flex; align-items: center; gap: 0.6rem; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.7rem; color: var(--faint); transition: color 0.3s ease; } .app-boot__dot { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: #33333b; flex-shrink: 0; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .app-boot__step.is-done { color: var(--muted); } .app-boot__step.is-done .app-boot__dot { background: var(--muted); } .app-boot__step.is-active { color: var(--text); } .app-boot__step.is-active .app-boot__dot { background: var(--accent); transform: scale(1.25); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---- Blazor error UI ---- */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; padding: 0.75rem 1.25rem; background: #17171b; border-top: 1px solid var(--accent-line); color: var(--text); font-family: var(--font-mono); font-size: 0.8rem; box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.8); } #blazor-error-ui .reload { color: var(--accent); text-decoration: underline; } #blazor-error-ui .dismiss { cursor: pointer; float: right; } /* ---- Reveal on scroll (IntersectionObserver via component) ---- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } } /* ---- Layout container ---- */ .wrap { margin-inline: auto; width: 100%; max-width: 64rem; padding-inline: 1rem; } @media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } } .wrap--narrow { max-width: 48rem; } .wrap--wide { max-width: 72rem; } .page-pad { padding-top: 7rem; padding-bottom: 4rem; } @media (min-width: 640px) { .page-pad { padding-top: 8rem; } } /* ---- Surfaces ---- */ .card { position: relative; border-radius: 18px; background: var(--surface); border: 1px solid var(--border-soft); box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.85); } .card--pad { padding: 1.5rem; } @media (min-width: 640px) { .card--pad { padding: 1.75rem; } } .card--hover { transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; } .card--hover:hover { border-color: var(--border); transform: translateY(-2px); } .rule { height: 1px; background: var(--border-soft); border: 0; } /* accent hairline that some cards get on hover */ .card--accent:hover { border-color: var(--accent-line); } /* ---- Buttons (bespoke, mono) ---- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; padding: 0.6rem 1.25rem; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .btn-accent { background: var(--accent); color: #0c0c0e; border: 1px solid var(--accent); } .btn-accent:hover { transform: translateY(-2px); filter: brightness(1.05); } .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); } .btn-ghost:hover { color: var(--text); border-color: var(--faint); } /* ---- Kicker / section heads ---- */ .kicker { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .kicker .accent { color: var(--accent); } /* ---- Sweeping underline link ---- */ .sweep { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1); padding-bottom: 2px; } .sweep:hover, .sweep:focus-visible { background-size: 100% 1.5px; } /* ---- Long-form writeup prose ---- */ .prose { font-size: 0.95rem; line-height: 1.85; color: var(--muted); } .prose > * + * { margin-top: 1.15rem; } .prose h2 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; font-size: 1.5rem; color: var(--text); margin-top: 2.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .prose h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.1rem; color: var(--text); margin-top: 1.75rem; } .prose strong { color: var(--text); font-weight: 600; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.3rem; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li + li { margin-top: 0.4rem; } .prose li::marker { color: var(--faint); } .prose code { font-family: var(--font-mono); font-size: 0.85em; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-soft); border-radius: 0.4rem; padding: 0.1rem 0.35rem; } .prose pre { background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border-soft); border-radius: 0.9rem; padding: 1.1rem 1.25rem; overflow-x: auto; } .prose pre code { background: none; border: none; padding: 0; } .prose blockquote { border-left: 2px solid var(--accent-line); padding-left: 1rem; color: var(--muted); font-style: italic; } /* ---- float-in for hero headers ---- */ @keyframes float-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .float-in { animation: float-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ---- Lightbox (created by js/site.js) ---- */ .site-lightbox { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 2rem; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.2s ease; cursor: zoom-out; } .site-lightbox.is-open { opacity: 1; } .site-lightbox img { max-width: min(100%, 1100px); max-height: 90vh; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9); }