/* ========================================================================= BytesByBlinken Portfolio - Editorial Design System ------------------------------------------------------------------------- Tokens, primitives, and components for index.html and blog.html. Theme is controlled via [data-theme="dark" | "light"] on . ========================================================================= */ /* ----------------------------------------------------------------- 1. Tokens ----------------------------------------------------------------- */ :root { /* Type families */ --font-display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif; --font-text: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Type scale */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; --fs-5xl: 3.75rem; /* Line heights */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --lh-relaxed: 1.75; /* Spacing scale (4px grid) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-12: 7rem; /* Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* Shadows (theme-tunable) */ --shadow-sm: 0 1px 2px rgba(15, 18, 22, 0.08), 0 2px 6px rgba(15, 18, 22, 0.06); --shadow-md: 0 8px 24px rgba(15, 18, 22, 0.10); --shadow-lg: 0 20px 48px rgba(15, 18, 22, 0.16); /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 480ms; /* Layout */ --container: 1140px; --header-h: 72px; /* --- Dark theme (default) --- */ --bg-page: #0f1216; --bg-surface: #161b22; --bg-surface-2: #1c222b; --bg-elevated: #20262f; --text-primary: #f3efe6; --text-secondary: #c8c2b4; --text-muted: #8d8778; --border-subtle: rgba(243, 239, 230, 0.10); --border-strong: rgba(243, 239, 230, 0.22); --accent: #e29148; --accent-strong: #f0a25c; --accent-soft: rgba(226, 145, 72, 0.16); --focus-ring: rgba(240, 162, 92, 0.55); --success: #6dbf7a; --warning: #e6a93a; --danger: #d96a6a; /* Backwards-compatible aliases used by blog.html inline scripts/styles. */ --bg-primary: var(--bg-page); --bg-secondary: var(--bg-surface); --bg-tertiary: var(--bg-surface-2); --border-primary: var(--border-subtle); --border-secondary: var(--border-strong); --shadow-primary: rgba(0, 0, 0, 0.35); --shadow-secondary: rgba(0, 0, 0, 0.18); --card-bg: var(--bg-surface); --card-bg-secondary: var(--bg-surface-2); --overlay-bg: rgba(243, 239, 230, 0.06); --overlay-bg-secondary: rgba(243, 239, 230, 0.12); --accent-color: var(--accent); --accent-hover: var(--accent-strong); --border-color: var(--border-subtle); } [data-theme="light"] { --bg-page: #f8f5ee; --bg-surface: #ffffff; --bg-surface-2: #f1ece1; --bg-elevated: #ffffff; --text-primary: #14181f; --text-secondary: #3a4151; --text-muted: #6b7180; --border-subtle: rgba(20, 24, 31, 0.10); --border-strong: rgba(20, 24, 31, 0.22); --accent: #b3541e; --accent-strong: #8e3f12; --accent-soft: rgba(179, 84, 30, 0.10); --focus-ring: rgba(179, 84, 30, 0.45); --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06), 0 2px 6px rgba(20, 24, 31, 0.04); --shadow-md: 0 6px 20px rgba(20, 24, 31, 0.08); --shadow-lg: 0 18px 40px rgba(20, 24, 31, 0.12); --shadow-primary: rgba(20, 24, 31, 0.14); --shadow-secondary: rgba(20, 24, 31, 0.06); --overlay-bg: rgba(20, 24, 31, 0.05); --overlay-bg-secondary: rgba(20, 24, 31, 0.10); } /* ----------------------------------------------------------------- 2. Reset + base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-text); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary); background-color: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } /* Keeps scrollable content in a predictable layer below the sticky header */ main { position: relative; z-index: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--accent-strong); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0 0 var(--space-4); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); margin: 0 0 var(--space-4); line-height: var(--lh-tight); letter-spacing: -0.015em; } h1 { font-size: var(--fs-4xl); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } ::selection { background: var(--accent-soft); color: var(--text-primary); } /* ----------------------------------------------------------------- 3. Layout primitives ----------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); } .section { padding: var(--space-10) 0; } .section-muted { background: var(--bg-surface-2); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .section-header { max-width: 720px; margin: 0 0 var(--space-8); } .section-title { font-size: var(--fs-3xl); margin-bottom: var(--space-3); } .section-lead { color: var(--text-secondary); font-size: var(--fs-md); line-height: var(--lh-relaxed); margin: 0; max-width: 60ch; } .eyebrow { display: inline-block; font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3); } /* ----------------------------------------------------------------- 4. Buttons ----------------------------------------------------------------- */ .btn, button.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-text); font-size: var(--fs-base); font-weight: 600; line-height: 1; padding: 0.85em 1.5em; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--overlay-bg); color: var(--text-primary); transform: translateY(-1px); } .btn-sm { padding: 0.55em 1em; font-size: var(--fs-sm); } /* ----------------------------------------------------------------- 5. Header / navigation ----------------------------------------------------------------- */ /* Only the primary site chrome should be sticky. In-page `
` / `.projects-header` elements must stay in normal flow — otherwise they pick up sticky + a high z-index and the section body (cards, writing list) paints underneath, which looks like intro copy and content “bleeding” together. */ body > header { position: sticky; top: 0; z-index: 1000; } #navbar { /* Solid fill so headings and cards scrolling underneath never show through */ background: var(--bg-page); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-5); transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); } /* Brand | center links | theme — admin (blog) on a full-width row below */ #navbar .nav-shell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4); row-gap: var(--space-3); width: 100%; max-width: var(--container); margin: 0 auto; } .nav-brand { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); text-decoration: none; padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm); white-space: nowrap; background: var(--bg-page); position: relative; z-index: 1; } .nav-brand:hover { color: var(--accent); } .nav-menu { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; min-width: 0; } .nav-end { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); background: var(--bg-page); position: relative; z-index: 1; } #admin-login-nav[hidden] { display: none !important; } #admin-login-nav, #admin-panel-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; background: var(--bg-page); position: relative; z-index: 1; } .projects-page-header .eyebrow { text-transform: none; letter-spacing: 0.08em; } .blog-header .eyebrow { text-transform: none; letter-spacing: 0.08em; } /* Blog: admin controls on their own row so they never overlap links or the theme toggle */ .admin-login-nav, .admin-panel-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); margin-top: var(--space-1); border-top: 1px solid var(--border-subtle); } #navbar .nav-menu a { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--bg-page); position: relative; z-index: 1; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } #navbar .nav-menu a:hover { color: var(--text-primary); background: var(--overlay-bg); } .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--bg-page); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text-primary); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; position: relative; z-index: 1; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .theme-toggle-btn:hover { background: var(--overlay-bg); transform: rotate(-12deg); } .theme-icon { transition: transform var(--dur-base) var(--ease); } /* ----------------------------------------------------------------- 6. Hero ----------------------------------------------------------------- */ #welcome-section { padding: var(--space-12) 0 var(--space-10); background: radial-gradient(900px 500px at 85% 0%, var(--accent-soft), transparent 65%), var(--bg-page); border-bottom: 1px solid var(--border-subtle); } #welcome-section .container { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-9); align-items: center; } .hero-text .eyebrow { margin-bottom: var(--space-4); text-transform: none; letter-spacing: 0.08em; } #work .eyebrow, #contact .eyebrow { text-transform: none; letter-spacing: 0.08em; } #welcome-section h1 { font-size: clamp(2.4rem, 5vw, var(--fs-5xl)); line-height: 1.05; margin: 0 0 var(--space-5); letter-spacing: -0.02em; color: var(--text-primary); } #welcome-section h1 em { font-style: italic; color: var(--accent); } #welcome-section p.hero-lead { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-secondary); max-width: 56ch; margin: 0 0 var(--space-6); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .hero-portrait { position: relative; display: flex; justify-content: center; } #logo { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); background: var(--bg-surface); } .hero-meta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); } .hero-meta strong { color: var(--text-primary); font-weight: 600; } /* ----------------------------------------------------------------- 7. Proof strip ----------------------------------------------------------------- */ .proof-strip { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); padding: var(--space-6) 0; } .proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } .proof-item { display: flex; flex-direction: column; gap: var(--space-1); } .proof-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); font-weight: 600; } .proof-value { font-size: var(--fs-md); color: var(--text-primary); line-height: var(--lh-snug); } /* ----------------------------------------------------------------- 8. Featured / selected work (homepage) ----------------------------------------------------------------- */ #work { padding: var(--space-10) 0 var(--space-12); background: var(--bg-page); } #projects { padding: var(--space-10) 0; background: var(--bg-page); } #work .projects-header { margin-bottom: var(--space-8); } .work-archive-link { display: inline-block; margin-top: var(--space-3); font-family: var(--font-text); font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .work-archive-link:hover { color: var(--accent); border-bottom-color: var(--accent); } .projects-header { max-width: 720px; margin-bottom: var(--space-8); } .projects-intro { color: var(--text-secondary); font-size: var(--fs-md); line-height: var(--lh-relaxed); } .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-6); } .project-card, .project-tile { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); opacity: 1; position: relative; min-height: 100%; } .project-card:hover, .project-tile:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .project-tile.hidden { opacity: 0; transform: scale(0.96); pointer-events: none; } /* Homepage work layout — placed after base .project-card so flagship grid wins */ #work .project-card--flagship { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; width: 100%; margin-bottom: var(--space-8); flex-direction: unset; } #work .project-card--flagship .project-media { aspect-ratio: auto; min-height: 320px; height: 100%; } #work .project-card--flagship .project-body { justify-content: center; padding: var(--space-7) var(--space-8); } #work .project-card--flagship .project-status { align-self: flex-start; margin-bottom: var(--space-2); } #work .project-card--flagship h3 { font-size: var(--fs-2xl); } #work .work-grid-supporting { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-bottom: var(--space-8); align-items: stretch; } #work .work-grid-supporting .project-card, #work .work-grid-supporting .project-tile { height: 100%; } .project-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-surface-2); overflow: hidden; } .project-media img, .project-card img, .project-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform var(--dur-slow) var(--ease); } .project-card:hover img, .project-tile:hover img { transform: scale(1.03); } .project-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); flex: 1; } .project-tile .project-body > * { margin: 0; } .project-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .project-tile h3, .project-card .project-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); margin: 0; line-height: var(--lh-snug); text-align: left; } .project-role { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; } .project-tile p, .project-card p { color: var(--text-secondary); font-size: var(--fs-base); line-height: var(--lh-relaxed); margin: 0; text-align: left; } .project-tile ul { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; padding-left: var(--space-5); list-style: disc; } .project-tile ul li { margin-bottom: var(--space-2); } .project-tile h4 { font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted); margin: var(--space-2) 0 var(--space-1); text-align: left; } /* Badges */ .project-badge { position: absolute; top: var(--space-3); left: var(--space-3); padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-strong); z-index: 2; backdrop-filter: blur(4px); } .project-badge.web, .project-badge.javascript, .project-badge.game, .project-badge.unity { background: var(--bg-surface); color: var(--text-primary); } .project-badge.web::before, .project-badge.javascript::before, .project-badge.game::before, .project-badge.unity::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); } .project-badge.game::before { background: #c75a76; } .project-badge.unity::before { background: #4aa3c7; } .project-badge.javascript::before { background: #d2a23a; } /* Tech stack */ .tech-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; justify-content: flex-start; } .tech-tag { font-family: var(--font-text); font-size: var(--fs-xs); color: var(--text-secondary); background: var(--overlay-bg); border: 1px solid var(--border-subtle); padding: 4px 10px; border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .tech-tag:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text-primary); } /* Status pill */ .project-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; border: 1px solid var(--border-subtle); background: var(--overlay-bg); color: var(--text-secondary); margin: 0; } .project-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); } .project-status.alpha::before { background: var(--warning); } .project-status.beta::before { background: var(--accent); } .project-status.production::before { background: var(--success); } .project-status.prelaunch::before { background: var(--warning); } .project-status.dev::before { background: var(--text-muted); } /* Project link */ .project-link { align-self: flex-start; margin-top: var(--space-3); font-weight: 600; color: var(--accent); border-bottom: 1px solid transparent; padding-bottom: 2px; } .project-link:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); } /* Legacy: button-wrapped anchors inside project tiles */ .project-tile button, .project-buttons { align-self: flex-start; margin-top: var(--space-3); } .project-tile button { background: transparent; color: var(--accent); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.6em 1.2em; font-family: var(--font-text); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .project-tile button:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-1px); } .project-tile button a { color: inherit; text-decoration: none; display: inline-block; } .project-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* No projects message */ .no-projects-message { grid-column: 1 / -1; text-align: center; padding: var(--space-8); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-secondary); background: var(--overlay-bg); } /* Projects archive page */ .projects-page { padding: var(--space-10) 0 var(--space-12); background: var(--bg-page); } .projects-page-header { max-width: 720px; margin-bottom: var(--space-8); } .projects-page-header h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, var(--fs-4xl)); margin-bottom: var(--space-3); color: var(--text-primary); letter-spacing: -0.015em; } .projects-page-header p { color: var(--text-secondary); font-size: var(--fs-md); line-height: var(--lh-relaxed); margin: 0; max-width: 60ch; } .project-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); } .projects-subsection { margin-bottom: var(--space-10); } .projects-subsection:last-of-type { margin-bottom: 0; } .projects-page .project-tile.hidden { display: none; } .project-media--placeholder { display: grid; place-items: center; background: linear-gradient(135deg, var(--bg-surface-2), var(--bg-surface)); } .project-placeholder-label { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 600; color: var(--text-muted); opacity: 0.35; letter-spacing: 0.08em; user-select: none; } .project-link--github { color: var(--text-secondary); } .project-link--github:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); } /* ----------------------------------------------------------------- 9. Capabilities (skills, replacing percent bars) ----------------------------------------------------------------- */ #skills-section { padding: var(--space-10) 0; background: var(--bg-surface-2); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); } .skills-container { display: contents; } #skills-section h2 { font-size: var(--fs-3xl); text-align: left; color: var(--text-primary); margin-bottom: var(--space-3); text-shadow: none; letter-spacing: -0.015em; } .skills-intro { color: var(--text-secondary); font-size: var(--fs-md); line-height: var(--lh-relaxed); max-width: 60ch; margin: 0 0 var(--space-8); } .capabilities, .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin: 0; } .capability, .skill-category { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .capability:hover, .skill-category:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .capability h3, .skill-category h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); margin: 0; } .capability-summary { color: var(--text-secondary); font-size: var(--fs-base); line-height: var(--lh-relaxed); margin: 0; } .capability-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-2) 0 0; } .capability-tags li { font-size: var(--fs-xs); color: var(--text-secondary); background: var(--overlay-bg); border: 1px solid var(--border-subtle); padding: 4px 10px; border-radius: var(--radius-pill); } /* Legacy skill-bar markup, restyled to look like a focus/level row instead of an animated percent bar. The inline JS that animates `.skill-progress` width still runs without harm. */ .skill-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); } .skill-item:last-child { border-bottom: none; } .skill-name { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; } .skill-bar { display: none; } .skill-level { display: inline-flex; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; letter-spacing: 0.06em; } .skill-progress { display: none; } .skills-footer { margin-top: var(--space-7); color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; } /* ----------------------------------------------------------------- 10. Writing teaser (homepage) ----------------------------------------------------------------- */ #writing { padding: var(--space-10) 0; } .writing-list { display: grid; gap: var(--space-5); margin: 0 0 var(--space-7); } .writing-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--border-subtle); display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-5); align-items: baseline; } .writing-item:first-child { padding-top: 0; } .writing-item:last-child { border-bottom: none; } .writing-date { font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.16em; } .writing-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; margin: 0 0 var(--space-2); line-height: var(--lh-snug); } .writing-title a { color: var(--text-primary); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .writing-title a:hover { color: var(--accent); border-bottom-color: var(--accent); } .writing-summary { color: var(--text-secondary); font-size: var(--fs-base); line-height: var(--lh-relaxed); margin: 0; } /* ----------------------------------------------------------------- 10b. Contact (homepage) ----------------------------------------------------------------- */ #contact { padding: var(--space-12) 0 var(--space-10); background: var(--bg-page); border-top: 1px solid var(--border-subtle); } #contact .section-header { margin-bottom: 0; } #contact .eyebrow { margin-bottom: var(--space-4); } #contact h2 { margin-bottom: var(--space-5); } #contact .section-lead { margin-bottom: var(--space-8); } .contact-email { display: inline-block; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, var(--fs-3xl)); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-7); border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .contact-email:hover { color: var(--accent); border-bottom-color: var(--accent); } .contact-social { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); padding-bottom: var(--space-4); } .contact-social a { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); } .contact-social a:hover { color: var(--accent); } /* ----------------------------------------------------------------- 11. Footer ----------------------------------------------------------------- */ .site-footer, footer { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); padding: var(--space-8) 0 var(--space-5); color: var(--text-secondary); } .site-footer .container { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; } .footer-brand { display: flex; flex-direction: column; gap: var(--space-3); } #footer-logo { width: 64px; height: auto; border-radius: var(--radius-md); transition: transform var(--dur-fast) var(--ease); } #footer-logo:hover { transform: scale(1.05); } .footer-tagline { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; max-width: 38ch; } .footer-links, .footer-contact { display: flex; flex-direction: column; gap: var(--space-2); } .footer-links a { color: var(--text-secondary); font-size: var(--fs-sm); transition: color var(--dur-fast) var(--ease); } .footer-links a:hover { color: var(--accent); } .footer-eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted); margin: 0; } .footer-email { font-family: var(--font-display); font-size: var(--fs-md); color: var(--text-primary); border-bottom: 1px solid var(--border-strong); align-self: flex-start; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .footer-email:hover { color: var(--accent); border-bottom-color: var(--accent); } .footer-bar { border-top: 1px solid var(--border-subtle); margin-top: var(--space-7); padding-top: var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: 0.04em; } .site-footer--minimal { padding: var(--space-8) 0 var(--space-7); text-align: center; } .site-footer--minimal .container { display: block; } .site-footer--minimal p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); } /* Legacy footer used on blog.html (simpler layout) */ footer:not(.site-footer) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: center; padding: var(--space-7) var(--space-5) var(--space-5); text-align: center; } footer:not(.site-footer) > div { display: flex; align-items: center; justify-content: center; } footer:not(.site-footer) p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); } footer:not(.site-footer) #footer-logo { width: 48px; } /* ----------------------------------------------------------------- 12. Blog page ----------------------------------------------------------------- */ .blog { padding: var(--space-9) 0 var(--space-10); max-width: 880px; margin: 0 auto; width: 100%; } .blog-header { text-align: left; margin-bottom: var(--space-8); padding: 0 var(--space-5); } .blog-header h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, var(--fs-4xl)); margin-bottom: var(--space-3); color: var(--text-primary); letter-spacing: -0.015em; } .blog-header p { color: var(--text-secondary); font-size: var(--fs-md); line-height: var(--lh-relaxed); margin: 0 0 var(--space-5); max-width: 60ch; } /* Month navigation */ .month-navigation { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; } .month-navigation::before { content: "Filter by month"; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted); font-weight: 600; } .month-dropdown { appearance: none; -webkit-appearance: none; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.55em 2.4em 0.55em 1em; font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .month-dropdown:hover, .month-dropdown:focus-visible { border-color: var(--accent); } .month-dropdown option { background: var(--bg-surface); color: var(--text-primary); } /* Blog posts container */ #blog-posts-container, .blog-posts-container { padding: 0 var(--space-5); display: grid; gap: var(--space-7); } .blog-tile, .blog-post { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .blog-tile:hover, .blog-post:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .blog-tile h2, .blog-post h2 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; color: var(--text-primary); line-height: var(--lh-snug); margin: 0 0 var(--space-3); text-shadow: none; letter-spacing: -0.01em; } .post-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text-muted); align-items: center; } .post-author, .post-date { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-style: normal; color: var(--text-muted); } .post-author + .post-date::before { content: "·"; margin-right: var(--space-2); color: var(--text-muted); opacity: 0.85; } .post-content { color: var(--text-primary); line-height: var(--lh-relaxed); font-size: var(--fs-md); margin: 0 0 var(--space-5); } .post-content p { margin: 0 0 var(--space-4); } .post-content strong { color: var(--text-primary); font-weight: 700; } .post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); } .tag { font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); background: var(--overlay-bg); border: 1px solid var(--border-subtle); padding: 4px 10px; border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .tag:hover { background: var(--accent-soft); border-color: var(--accent); } .no-posts, .no-posts-message { text-align: center; padding: var(--space-8); background: var(--overlay-bg); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-secondary); } .no-posts h3 { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--space-2); color: var(--text-primary); } .no-posts p { margin: 0; color: var(--text-muted); } /* ----------------------------------------------------------------- 13. Comments ----------------------------------------------------------------- */ .comments-section { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); } .comments-section h3 { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-primary); margin-bottom: var(--space-5); } .comments-container { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); } .comment { background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); } .comment-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); } .comment-author { font-weight: 600; color: var(--text-primary); } .comment-date { font-size: var(--fs-sm); color: var(--text-muted); font-style: normal; } .comment-content p { margin: 0; color: var(--text-secondary); line-height: var(--lh-relaxed); } .comment-actions { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: var(--space-2); } .no-comments { padding: var(--space-6); text-align: center; color: var(--text-muted); border: 1px dashed var(--border-subtle); border-radius: var(--radius-md); background: var(--overlay-bg); font-style: italic; } /* ----------------------------------------------------------------- 14. Forms (shared by new-post / edit-post / comment-form) ----------------------------------------------------------------- */ .new-post-form, .edit-post-form, .comment-form { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-7); margin: 0 var(--space-5) var(--space-7); box-shadow: var(--shadow-sm); } .new-post-form h2, .edit-post-form h2, .comment-form h4 { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-primary); margin: 0 0 var(--space-5); text-align: left; } .form-group { margin-bottom: var(--space-4); } .form-group label { display: block; font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); letter-spacing: 0.02em; } .form-group input, .form-group textarea, .comment-form input, .comment-form textarea { width: 100%; padding: 0.75em 1em; font-family: var(--font-text); font-size: var(--fs-base); color: var(--text-primary); background: var(--bg-page); border: 1px solid var(--border-strong); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .form-group input::placeholder, .form-group textarea::placeholder, .comment-form input::placeholder, .comment-form textarea::placeholder { color: var(--text-muted); } .form-group input:focus, .form-group textarea:focus, .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-group textarea, .comment-form textarea { min-height: 140px; resize: vertical; line-height: var(--lh-relaxed); } .comment-form textarea { min-height: 90px; } .comment-form .optional-field { border-style: dashed; } .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .submit-btn, .submit-comment-btn { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--radius-md); padding: 0.75em 1.5em; font-family: var(--font-text); font-weight: 600; font-size: var(--fs-base); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .submit-btn:hover, .submit-comment-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); transform: translateY(-1px); } .submit-comment-btn { width: 100%; } .cancel-btn { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.75em 1.5em; font-family: var(--font-text); font-weight: 600; font-size: var(--fs-base); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .cancel-btn:hover { background: var(--overlay-bg); border-color: var(--text-primary); } /* ----------------------------------------------------------------- 15. Admin (login form, admin panel, comment management) ----------------------------------------------------------------- */ .admin-login-form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .admin-login-form input { padding: 0.45em 0.7em; font-size: var(--fs-xs); font-family: var(--font-text); color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); width: 110px; transition: border-color var(--dur-fast) var(--ease); } .admin-login-form input::placeholder { color: var(--text-muted); } .admin-login-form input:focus { outline: none; border-color: var(--accent); } .admin-login-btn, .admin-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.45em 0.85em; font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); white-space: nowrap; } .admin-login-btn:hover, .admin-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: none; box-shadow: none; } .admin-btn.secondary { background: transparent; } /* Comment management panel */ .comment-management-panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-7); margin: 0 var(--space-5) var(--space-7); box-shadow: var(--shadow-sm); } .comment-management-panel h2 { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-primary); margin: 0 0 var(--space-5); text-align: left; } .comment-filters { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; } .filter-btn { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 0.45em 1em; font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .filter-btn:hover { border-color: var(--accent); color: var(--accent); } .filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .comments-list { max-height: 480px; overflow-y: auto; padding-right: var(--space-2); display: grid; gap: var(--space-3); } .comment-item { background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-left-width: 3px; border-radius: var(--radius-md); padding: var(--space-4); transition: border-color var(--dur-fast) var(--ease); } .comment-item.pending { border-left-color: var(--warning); } .comment-item.approved { border-left-color: var(--success); } .comment-email { font-size: var(--fs-xs); color: var(--text-muted); background: var(--overlay-bg); border: 1px solid var(--border-subtle); padding: 2px 8px; border-radius: var(--radius-pill); } .comment-status { padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; } .comment-status.pending { background: rgba(230, 169, 58, 0.18); color: var(--warning); } .comment-status.approved { background: rgba(109, 191, 122, 0.18); color: var(--success); } .approve-btn, .reject-btn, .delete-comment-btn, .edit-post-btn, .delete-post-btn { border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); border-radius: var(--radius-sm); padding: 0.45em 0.9em; font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .approve-btn { color: var(--success); border-color: rgba(109, 191, 122, 0.45); } .approve-btn:hover { background: rgba(109, 191, 122, 0.14); border-color: var(--success); } .reject-btn { color: var(--danger); border-color: rgba(217, 106, 106, 0.45); } .reject-btn:hover { background: rgba(217, 106, 106, 0.14); border-color: var(--danger); } .delete-comment-btn, .delete-post-btn { color: var(--danger); border-color: rgba(217, 106, 106, 0.45); } .delete-comment-btn:hover, .delete-post-btn:hover { background: rgba(217, 106, 106, 0.14); border-color: var(--danger); } .edit-post-btn { color: var(--accent); border-color: rgba(226, 145, 72, 0.45); } .edit-post-btn:hover { background: var(--accent-soft); border-color: var(--accent); } .post-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); justify-content: flex-end; } .close-btn { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.6em 1.4em; font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); display: inline-flex; align-items: center; margin-top: var(--space-4); } .close-btn:hover { background: var(--overlay-bg); border-color: var(--text-primary); } /* Hide the legacy archive panel that newer markup doesn't ship anymore. */ .archive-navigation { display: none; } /* ----------------------------------------------------------------- 16. Animations + reduced motion ----------------------------------------------------------------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .hero-text, .hero-portrait { animation: fadeUp 600ms var(--ease) both; } .hero-portrait { animation-delay: 120ms; } .project-card, .project-tile { animation: fadeUp 480ms var(--ease) both; animation-delay: calc(var(--animation-order, 0) * 80ms); } .capability, .skill-category { animation: fadeUp 480ms var(--ease) both; } .skill-category:nth-child(1) { animation-delay: 60ms; } .skill-category:nth-child(2) { animation-delay: 120ms; } .skill-category:nth-child(3) { animation-delay: 180ms; } .skill-category:nth-child(4) { animation-delay: 240ms; } .blog-tile, .blog-post { animation: fadeUp 480ms var(--ease) both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------- 17. Responsive ----------------------------------------------------------------- */ @media (max-width: 960px) { #welcome-section .container { grid-template-columns: 1fr; gap: var(--space-7); } .hero-portrait { order: -1; justify-content: flex-start; } #logo { max-width: 220px; border-radius: var(--radius-lg); } #work .project-card--flagship { grid-template-columns: 1fr; } #work .project-card--flagship .project-media { min-height: 0; height: auto; aspect-ratio: 16 / 9; } #work .work-grid-supporting { grid-template-columns: 1fr; } .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer .container { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .writing-item { grid-template-columns: 1fr; gap: var(--space-1); } } @media (max-width: 720px) { :root { --space-9: 3rem; --space-10: 4rem; } body { font-size: var(--fs-base); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } header { position: static; } #navbar { padding: var(--space-3) var(--space-4); } #navbar .nav-shell { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; } .nav-brand { grid-column: 1; grid-row: 1; } .nav-end { grid-column: 2; grid-row: 1; } .nav-menu { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } #admin-login-nav, #admin-panel-nav { grid-column: 1 / -1; grid-row: 3; } .admin-login-form input { width: 100%; flex: 1; } #welcome-section { padding: var(--space-9) 0 var(--space-8); } .proof-grid { grid-template-columns: 1fr; gap: var(--space-4); } .project-body { padding: var(--space-4) var(--space-5) var(--space-5); } .blog, .blog-header, #blog-posts-container, .new-post-form, .edit-post-form, .comment-form, .comment-management-panel { padding-left: var(--space-4); padding-right: var(--space-4); } .new-post-form, .edit-post-form, .comment-form, .comment-management-panel { margin-left: var(--space-4); margin-right: var(--space-4); } .blog-tile, .blog-post { padding: var(--space-5); } .form-actions { flex-direction: column; align-items: stretch; } .form-actions .submit-btn, .form-actions .cancel-btn { width: 100%; } .site-footer .container, footer:not(.site-footer) { grid-template-columns: 1fr; text-align: left; } footer:not(.site-footer) > div { justify-content: center; } } @media (max-width: 420px) { .hero-actions .btn { flex: 1 1 100%; } .month-navigation { flex-direction: column; align-items: flex-start; } .post-meta { gap: var(--space-2); } }