/* ============================================================ DESIGN SYSTEM — Stefano Perna Personal Website Dark theme with purple/cyan accent palette ============================================================ */ /* ------------ CSS Custom Properties (tokens) ------------ */ :root { /* Color palette */ --color-bg: #0d0d14; /* near-black with blue tint */ --color-bg-surface: #13131f; /* card / panel background */ --color-bg-elevated: #1a1a2e; /* elevated surfaces */ --color-border: #2a2a42; /* subtle borders */ --color-border-glow: #7c5cfc44; /* glowing border accent */ --color-primary: #7c5cfc; /* purple — main brand */ --color-primary-lt: #a78bfa; /* lighter purple */ --color-accent: #00e5ff; /* cyan — secondary accent */ --color-accent-lt: #67f0ff; /* lighter cyan */ --color-text: #e2e2f0; /* body text */ --color-text-muted: #8888aa; /* muted / secondary text */ --color-text-faint: #4a4a6a; /* very faint text */ --color-success: #4ade80; --color-warning: #facc15; --color-error: #f87171; /* Light theme overrides (applied via .theme-light on ) */ --color-bg-lt: #f4f4f8; --color-bg-surface-lt: #ffffff; --color-bg-elevated-lt: #eeeef6; --color-border-lt: #d0d0e4; --color-text-lt: #1a1a2e; --color-text-muted-lt: #555577; /* Typography */ --font-family-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-family-mono: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 2rem; /* 32px */ --font-size-3xl: 2.75rem; /* 44px */ --font-size-4xl: 3.5rem; /* 56px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.6; --line-height-loose: 1.8; /* Spacing scale (multiples of 4px) */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ /* Layout */ --max-width-content: 760px; --max-width-wide: 1100px; --navbar-height: 68px; /* Borders & radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full:9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-glow: 0 0 20px rgba(124,92,252,0.25); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* Z-index layers */ --z-navbar: 100; --z-overlay: 200; --z-modal: 300; } /* Light theme */ html.theme-light { --color-bg: var(--color-bg-lt); --color-bg-surface: var(--color-bg-surface-lt); --color-bg-elevated: var(--color-bg-elevated-lt); --color-border: var(--color-border-lt); --color-text: var(--color-text-lt); --color-text-muted: var(--color-text-muted-lt); } /* Improve contrast for light theme: use darker accents on white */ html.theme-light { --color-primary: #4b2db8; /* darker purple for links/accents */ --color-primary-lt: #6f51e6; /* slightly lighter purple for hover/variants */ --color-accent: #007a8a; /* darker cyan/teal for contrast */ --color-accent-lt: #009db0; /* lighter accent variant */ --color-border-glow: rgba(75,45,184,0.12); --shadow-glow: 0 0 20px rgba(75,45,184,0.12); } /* ------------ Reset & Base ------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; /* Ensure mobile browsers don't auto-scale text; provide unprefixed + vendor fallbacks */ text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { font-family: var(--font-family-sans); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-text); background-color: var(--color-bg); min-height: 100vh; transition: background-color var(--transition-slow), color var(--transition-slow); } a { color: var(--color-primary-lt); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent); } a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } img, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-text); } code, pre { font-family: var(--font-family-mono); font-size: var(--font-size-sm); } /* ------------ Layout Utilities ------------ */ .container { width: 100%; max-width: var(--max-width-wide); margin-inline: auto; padding-inline: var(--sp-6); } .container--narrow { max-width: var(--max-width-content); } .page-content { padding-top: calc(var(--navbar-height) + var(--sp-12)); padding-bottom: var(--sp-20); min-height: 100vh; } /* ------------ Navbar ------------ */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-height); background-color: rgba(13, 13, 20, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); z-index: var(--z-navbar); transition: background-color var(--transition-slow); } html.theme-light .navbar { background-color: rgba(244, 244, 248, 0.9); } .navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--max-width-wide); margin-inline: auto; padding-inline: var(--sp-6); } .navbar__brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--color-text); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); } .navbar__brand:hover { color: var(--color-primary-lt); } .navbar__logo { width: 36px; height: 36px; flex-shrink: 0; } .navbar__name { letter-spacing: -0.01em; } .navbar__nav { display: flex; align-items: center; gap: var(--sp-1); } .navbar__link { display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: color var(--transition-fast), background-color var(--transition-fast); text-decoration: none; } .navbar__link:hover { color: var(--color-text); background-color: var(--color-bg-elevated); } .navbar__link.active { color: var(--color-primary-lt); background-color: rgba(124, 92, 252, 0.12); } .navbar__actions { display: flex; align-items: center; gap: var(--sp-2); } .navbar__mobile-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--color-text); background: none; border: none; cursor: pointer; transition: background-color var(--transition-fast); } .navbar__mobile-toggle:hover { background-color: var(--color-bg-elevated); } /* Mobile nav */ @media (max-width: 768px) { .navbar__nav { display: none; position: fixed; top: var(--navbar-height); left: 0; right: 0; flex-direction: column; align-items: stretch; background-color: var(--color-bg-surface); border-bottom: 1px solid var(--color-border); padding: var(--sp-4); gap: var(--sp-1); } .navbar__nav.open { display: flex; } .navbar__mobile-toggle { display: flex; } .navbar__actions .theme-toggle { display: none; } /* shown in nav on mobile */ } /* ------------ Theme Toggle Button ------------ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--color-text-muted); background: var(--color-bg-elevated); border: 1px solid var(--color-border); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast); } .theme-toggle:hover { color: var(--color-primary-lt); border-color: var(--color-primary); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html.theme-light .theme-toggle .icon-sun { display: block; } html.theme-light .theme-toggle .icon-moon { display: none; } /* ------------ Buttons ------------ */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1; transition: all var(--transition-fast); cursor: pointer; text-decoration: none; white-space: nowrap; border: 1px solid transparent; } .btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn--primary:hover { background: var(--color-primary-lt); color: #fff; box-shadow: 0 0 16px rgba(124, 92, 252, 0.4); transform: translateY(-1px); } .btn--outline { background: transparent; color: var(--color-primary-lt); border-color: var(--color-primary); } .btn--outline:hover { background: rgba(124, 92, 252, 0.1); color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); } .btn--ghost:hover { background: var(--color-bg-elevated); color: var(--color-text); } .btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--font-size-xs); } .btn--danger { background: transparent; color: var(--color-error); border-color: var(--color-error); } .btn--danger:hover { background: rgba(248, 113, 113, 0.12); } /* ------------ Cards ------------ */ .card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-6); transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal); } .card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-glow); transform: translateY(-2px); } /* ------------ Section headings ------------ */ .section-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-lt); margin-bottom: var(--sp-3); } .section-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; margin-bottom: var(--sp-4); } .section-subtitle { font-size: var(--font-size-md); color: var(--color-text-muted); line-height: var(--line-height-loose); max-width: 56ch; } /* ------------ Tech badge / tag ------------ */ .tag { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); background: rgba(124, 92, 252, 0.12); color: var(--color-primary-lt); border: 1px solid rgba(124, 92, 252, 0.25); white-space: nowrap; } .tag--cyan { background: rgba(0, 229, 255, 0.1); color: var(--color-accent); border-color: rgba(0, 229, 255, 0.25); } /* ------------ Divider ------------ */ .divider { width: 100%; height: 1px; background: var(--color-border); margin-block: var(--sp-8); } /* ------------ Gradient text ------------ */ .gradient-text { background: linear-gradient(135deg, var(--color-primary-lt) 0%, var(--color-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ------------ Glowing dot / pulse ------------ */ .dot-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.6); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); } } /* ------------ Code block ------------ */ pre { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); overflow-x: auto; margin-block: var(--sp-4); line-height: var(--line-height-loose); } code:not(pre code) { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 6px; color: var(--color-accent-lt); } /* ------------ Footer ------------ */ .footer { background: var(--color-bg-surface); border-top: 1px solid var(--color-border); padding-block: var(--sp-8); text-align: center; } .footer__inner { max-width: var(--max-width-wide); margin-inline: auto; padding-inline: var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); } .footer__links { display: flex; gap: var(--sp-6); flex-wrap: wrap; justify-content: center; } .footer__link { color: var(--color-text-muted); font-size: var(--font-size-sm); transition: color var(--transition-fast); } .footer__link:hover { color: var(--color-primary-lt); } .footer__copy { color: var(--color-text-faint); font-size: var(--font-size-xs); } /* ------------ Page-enter animation ------------ */ .page-fade-in { animation: fadeInUp 0.5s ease both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ------------ Skeleton loader ------------ */ .skeleton { background: linear-gradient( 90deg, var(--color-bg-elevated) 25%, var(--color-border) 50%, var(--color-bg-elevated) 75% ); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-md); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ------------ Scrollbar (webkit) ------------ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } /* ------------ Selection ------------ */ ::selection { background: rgba(124, 92, 252, 0.35); color: var(--color-text); } /* ------------ Focus outline ------------ */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* ------------ Rendered Markdown content (.post-content) --- */ /* Shared between blog reading pane and admin editor preview */ .post-content h1, .post-content h2, .post-content h3, .post-content h4 { margin-top: var(--sp-8); margin-bottom: var(--sp-4); color: var(--color-text); line-height: var(--line-height-tight); } .post-content h1 { font-size: var(--font-size-xl); } .post-content h2 { font-size: var(--font-size-lg); color: var(--color-primary-lt); } .post-content h3 { font-size: var(--font-size-md); } .post-content h4 { font-size: var(--font-size-base); } .post-content p { margin-bottom: var(--sp-4); color: var(--color-text-muted); line-height: var(--line-height-loose); } .post-content strong { color: var(--color-text); font-weight: var(--font-weight-semibold); } .post-content em { color: var(--color-accent-lt); font-style: italic; } .post-content a { color: var(--color-primary-lt); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(124, 92, 252, 0.4); transition: color var(--transition-fast), text-decoration-color var(--transition-fast); } .post-content a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); } .post-content ul, .post-content ol { padding-left: var(--sp-6); margin-bottom: var(--sp-4); list-style: revert; color: var(--color-text-muted); } .post-content li { margin-bottom: var(--sp-2); line-height: var(--line-height-loose); } .post-content blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--sp-5); margin: var(--sp-6) 0; color: var(--color-text-muted); font-style: italic; } .post-content blockquote p { margin-bottom: 0; } .post-content hr { border: none; border-top: 1px solid var(--color-border); margin: var(--sp-8) 0; } .post-content img { max-width: 100%; border-radius: var(--radius-md); margin-block: var(--sp-6); } /* ------------ Responsive helpers ------------ */ @media (max-width: 768px) { .container { padding-inline: var(--sp-4); } .section-title { font-size: var(--font-size-xl); } .page-content { padding-top: calc(var(--navbar-height) + var(--sp-8)); } }