/* ============================================================================ KROMA KOBRA — Portfolio stylesheet ---------------------------------------------------------------------------- HOW THIS FILE IS ORGANIZED 1. Theme tokens (:root) -> change colors / fonts / spacing HERE first 2. Base / resets 3. Layout helpers (container, section, grid) 4. Site header + nav (injected by /js/site.js) 5. Site footer (injected by /js/site.js) 6. Buttons + generic UI 7. Cards 8. Homepage / hero 9. Topics + articles 10. About / Contact 11. Utilities + responsive tweaks Almost every visual choice is driven by the CSS variables in section 1, so you can re-skin the whole site by editing a handful of values. ============================================================================ */ /* ============================================================================ 1. THEME TOKENS — edit these to restyle the entire site ============================================================================ */ :root { /* ---- Brand palette -------------------------------------------------- */ --crimson: #dc143c; /* primary accent (the "crimson" secondary color) */ --crimson-bright: #ff2e55; /* hover / glow variant */ --crimson-dim: #8f0d27; /* pressed / subtle borders */ --crimson-glow: rgba(220, 20, 60, 0.35); /* used for shadows + glows */ /* ---- Dark theme surfaces ------------------------------------------- */ --bg: #0a0a0d; /* page background (near-black) */ --bg-soft: #101117; /* slightly raised sections */ --bg-card: #14151c; /* cards, terminal, panels */ --bg-card-hi: #1a1c25; /* card hover / nested surfaces */ --border: #23252f; /* hairline borders */ --border-hi: #32343f; /* hover borders */ /* ---- Text ---------------------------------------------------------- */ --text: #e8e9ee; /* primary text */ --text-muted: #9aa0ad; /* secondary text */ --text-faint: #5f636f; /* captions / hints */ /* ---- Typography ---------------------------------------------------- Avenir is a licensed font that ships on Apple devices. It is NOT on Google Fonts, so we list it first and fall back to a very similar geometric sans (Nunito Sans, loaded in each page's ) so the site looks consistent everywhere. If you own an Avenir web license, drop the files in /assets/fonts and add an @font-face block below. */ --font-sans: "Avenir Next", "Avenir", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- Layout knobs -------------------------------------------------- */ --max-width: 1120px; /* content width cap */ --radius: 14px; /* default corner radius */ --radius-sm: 8px; --header-h: 68px; /* fixed header height (reserved) */ --gap: clamp(1rem, 3vw, 2rem); /* ---- Effects ------------------------------------------------------- */ --shadow: 0 10px 40px rgba(0, 0, 0, 0.45); --transition: 180ms ease; } /* ============================================================================ 2. BASE / RESETS ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Subtle ambient background: a faint grid + two crimson glows. Purely decorative; remove this block for a flat background. */ background-image: radial-gradient(900px 500px at 85% -10%, rgba(220, 20, 60, 0.10), transparent 60%), radial-gradient(700px 500px at -5% 10%, rgba(220, 20, 60, 0.06), transparent 55%), linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: auto, auto, 44px 44px, 44px 44px; background-position: 0 0, 0 0, 0 0, 0 0; background-attachment: fixed; } /* Re-tint the grid so it stays extremely subtle */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg); opacity: 0.86; pointer-events: none; } img, svg { display: block; max-width: 100%; } a { color: var(--crimson-bright); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--crimson); } h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.5em; } code, pre, kbd, samp { font-family: var(--font-mono); } ::selection { background: var(--crimson); color: #fff; } /* Custom scrollbar (WebKit) */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 99px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--crimson-dim); } /* ============================================================================ 3. LAYOUT HELPERS ============================================================================ */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); } /* Push page content below the fixed header */ .page { padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem)); padding-bottom: 5rem; min-height: 100vh; } .section { padding-block: clamp(2.5rem, 6vw, 4.5rem); } /* Small label that sits above a heading, e.g. "// PROJECTS" */ .eyebrow { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--crimson); margin: 0 0 0.9rem; } .lead { color: var(--text-muted); font-size: 1.1rem; max-width: 60ch; } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } /* ============================================================================ 4. SITE HEADER + NAV (markup is injected by /js/site.js) ============================================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 100; display: flex; align-items: center; background: rgba(10, 10, 13, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* ---- Logo (left side) ---- */ .brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--text); font-weight: 800; } .brand:hover { color: var(--text); } .brand__mark { width: 34px; height: 34px; flex: none; } .brand__name { font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: 0.04em; white-space: nowrap; } .brand__name .accent { color: var(--crimson); } /* ---- Nav (right side) ---- */ .nav { display: flex; align-items: center; gap: 0.25rem; } .nav a { position: relative; padding: 0.5rem 0.85rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.95rem; font-weight: 600; transition: color var(--transition), background var(--transition); } .nav a:hover { color: var(--text); background: var(--bg-card-hi); } /* Active page link */ .nav a.is-active { color: var(--text); } .nav a.is-active::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.18rem; height: 2px; background: var(--crimson); border-radius: 2px; } /* ---- Mobile menu toggle (hidden on desktop) ---- */ .nav-toggle { display: none; background: none; border: 1px solid var(--border-hi); color: var(--text); width: 42px; height: 42px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.2rem; } /* ============================================================================ 5. SITE FOOTER (markup is injected by /js/site.js) ============================================================================ */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-soft); padding-block: 2.5rem; } .site-footer .container { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; } .site-footer__brand { font-family: var(--font-mono); color: var(--text); font-weight: 700; } .site-footer__meta { color: var(--text-faint); font-size: 0.9rem; } .site-footer__links { display: flex; gap: 1.25rem; } .site-footer__links a { color: var(--text-muted); font-size: 0.92rem; font-weight: 600; } .site-footer__links a:hover { color: var(--crimson); } /* ============================================================================ 6. BUTTONS + GENERIC UI ============================================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.8rem 1.4rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.98rem; cursor: pointer; border: 1px solid transparent; transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--crimson); color: #fff; box-shadow: 0 6px 22px var(--crimson-glow); } .btn--primary:hover { background: var(--crimson-bright); color: #fff; box-shadow: 0 8px 30px var(--crimson-glow); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border-hi); } .btn--ghost:hover { border-color: var(--crimson); color: var(--text); } /* Mono "chip" / tag */ .tag { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; padding: 0.25rem 0.6rem; border-radius: 99px; color: var(--crimson-bright); background: rgba(220, 20, 60, 0.10); border: 1px solid rgba(220, 20, 60, 0.25); } /* ============================================================================ 7. CARDS ============================================================================ */ .card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: transform var(--transition), border-color var(--transition), background var(--transition); } a.card:hover { transform: translateY(-4px); border-color: var(--crimson-dim); background: var(--bg-card-hi); } .card h3 { color: var(--text); margin-bottom: 0.4rem; } .card p { color: var(--text-muted); margin: 0; } /* Icon bubble used on cards */ .card__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(220, 20, 60, 0.10); border: 1px solid rgba(220, 20, 60, 0.22); color: var(--crimson-bright); margin-bottom: 1rem; font-size: 1.3rem; } /* ============================================================================ 8. HOMEPAGE / HERO ============================================================================ */ .hero { position: relative; min-height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2rem, 6vw, 4rem); } /* Decorative matrix-rain canvas painted by /js/home.js */ #matrix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.18; pointer-events: none; -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000 40%, transparent 100%); mask-image: radial-gradient(70% 70% at 60% 40%, #000 40%, transparent 100%); } .hero > * { position: relative; z-index: 1; } .hero__kicker { font-family: var(--font-mono); color: var(--crimson); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; } .hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); margin: 0.5rem 0 0.3rem; } .hero h1 .accent { color: var(--crimson); } .hero__alias { font-family: var(--font-mono); color: var(--text-muted); font-size: clamp(1rem, 2.5vw, 1.25rem); margin-bottom: 1.3rem; } .hero__alias .blink { color: var(--crimson); animation: blink 1.1s steps(1) infinite; } .hero p.lead { margin-bottom: 2rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; } @keyframes blink { 50% { opacity: 0; } } /* ---- Terminal card (right side of hero) ---- */ .terminal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; font-family: var(--font-mono); font-size: 0.92rem; } .terminal__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; background: var(--bg-soft); border-bottom: 1px solid var(--border); } .terminal__dot { width: 12px; height: 12px; border-radius: 99px; } .terminal__dot--r { background: #ff5f57; } .terminal__dot--y { background: #febc2e; } .terminal__dot--g { background: #28c840; } .terminal__title { margin-left: 0.6rem; color: var(--text-faint); font-size: 0.8rem; } .terminal__body { padding: 1.25rem 1.2rem; min-height: 280px; line-height: 1.8; } .terminal__body .prompt { color: var(--crimson); } .terminal__body .path { color: #5fb3ff; } .terminal__body .out { color: var(--text-muted); } .terminal__body .ok { color: #28c840; } .terminal__cursor { display: inline-block; width: 9px; height: 1.05em; background: var(--crimson); vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; } /* ---- "What I do" feature strip ---- */ .features { border-top: 1px solid var(--border); } /* ============================================================================ 9. TOPICS + ARTICLES ============================================================================ */ /* Topic grid (Tutorials landing) reuses .card + .grid */ .topic-icon { font-size: 1.6rem; } /* Article-list page (e.g. /topics/cybersecurity) */ .article-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.75rem; } .article-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-weight: 600; transition: border-color var(--transition), background var(--transition), transform var(--transition); } .article-list a:hover { border-color: var(--crimson-dim); background: var(--bg-card-hi); transform: translateX(4px); } .article-list .num { font-family: var(--font-mono); color: var(--crimson); margin-right: 0.85rem; } .article-list .arrow { color: var(--text-faint); } /* A single article ("prose" = readable long-form text column) */ .prose { max-width: 72ch; } .prose h2 { margin-top: 2.2rem; font-size: 1.6rem; } .prose h3 { margin-top: 1.6rem; font-size: 1.25rem; color: var(--text); } .prose p, .prose li { color: var(--text); } .prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin-bottom: 0.4rem; } .prose strong { color: var(--text); } .prose blockquote { margin: 1.5rem 0; padding: 0.6rem 1.2rem; border-left: 3px solid var(--crimson); background: var(--bg-card); color: var(--text-muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .prose code:not(pre code) { background: var(--bg-card); border: 1px solid var(--border); padding: 0.1rem 0.4rem; border-radius: 5px; font-size: 0.9em; color: var(--crimson-bright); } .prose pre { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; overflow-x: auto; font-size: 0.9rem; line-height: 1.6; } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } /* Breadcrumb + back link */ .breadcrumb { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-faint); margin-bottom: 1.5rem; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--crimson); } .breadcrumb .sep { margin: 0 0.5rem; opacity: 0.5; } /* "Empty for now" placeholder block (Projects page, empty topics) */ .placeholder { text-align: center; padding: clamp(3rem, 8vw, 6rem) 1.5rem; border: 1px dashed var(--border-hi); border-radius: var(--radius); background: rgba(255, 255, 255, 0.01); } .placeholder__icon { font-size: 2.6rem; margin-bottom: 0.8rem; } .placeholder h3 { color: var(--text); } .placeholder p { color: var(--text-muted); margin: 0 auto; max-width: 46ch; } /* ============================================================================ 10. ABOUT / CONTACT ============================================================================ */ /* About: two-column intro */ .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } /* "Stack" / quick facts panel */ .facts { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; } .facts h3 { font-family: var(--font-mono); font-size: 0.95rem; color: var(--crimson); letter-spacing: 0.05em; } .facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1rem; } .facts dt { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.85rem; } .facts dd { margin: 0; color: var(--text); } /* Contact: handle cards */ .handles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; } .handle { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: border-color var(--transition), transform var(--transition), background var(--transition); } .handle:hover { border-color: var(--crimson-dim); transform: translateY(-3px); background: var(--bg-card-hi); color: var(--text); } .handle__icon { width: 40px; height: 40px; flex: none; color: var(--crimson-bright); } .handle__icon svg { width: 100%; height: 100%; } .handle__label { font-weight: 700; } .handle__sub { color: var(--text-muted); font-size: 0.86rem; font-family: var(--font-mono); } /* ============================================================================ 11. UTILITIES + RESPONSIVE ============================================================================ */ .center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .stack > * + * { margin-top: 1rem; } .muted { color: var(--text-muted); } /* Reveal-on-scroll: elements with [data-reveal] fade up when visible. Handled by /js/site.js. Falls back to visible if JS is off. */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; } [data-reveal].is-visible { opacity: 1; transform: none; } /* ---- Tablet ---- */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .about-grid { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } } /* ---- Mobile: collapse the nav into a toggle menu ---- */ @media (max-width: 680px) { body { font-size: 16px; } .nav-toggle { display: inline-grid; place-items: center; } .nav { position: fixed; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.2rem; padding: 0.8rem; background: rgba(10, 10, 13, 0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transform: translateY(-130%); transition: transform 240ms ease; } .nav.is-open { transform: translateY(0); } .nav a { padding: 0.85rem 1rem; } .nav a.is-active::after { display: none; } .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } }