/* ========================================================= Easton Mason — Portfolio Clean, minimal, developer-flavored design system. Signature: monospace "code comment" eyebrows + wordmark, used sparingly against a quiet, legible layout. ========================================================= */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap"); /* --------------------------------------------------------- 1. Design tokens --------------------------------------------------------- */ :root { /* Color — Amethyst Night (default) */ --bg: #16131f; --bg-raised: #1d1930; --bg-muted: #221c36; --ink: #eeeaf7; --ink-soft: #b7afcb; --line: #332b4a; --line-strong: #4a3f6b; --accent: #a78bfa; --accent-strong: #c4b5fd; --accent-soft: #241e3d; --on-accent: #16131f; --focus-ring: var(--accent); color-scheme: dark; /* Type */ --font-display: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Spacing scale */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1.25rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4.5rem; /* Layout */ --content-width: 1120px; --measure: 68ch; --radius: 12px; --radius-sm: 8px; } /* Light mode — "Violet ink", same purple family as Amethyst Night, just flipped light. Activated by [data-theme="light"] on , set by script.js and persisted in localStorage. */ :root[data-theme="light"] { --bg: #faf9fc; --bg-raised: #ffffff; --bg-muted: #f1eef8; --ink: #17151f; --ink-soft: #514d5e; --line: #e4e0ed; --line-strong: #ccc5de; --accent: #5b3fa6; --accent-strong: #432e7d; --accent-soft: #ede7f9; --on-accent: #ffffff; --focus-ring: var(--accent); color-scheme: light; } /* --------------------------------------------------------- 2. Reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } html, body { min-height: 100%; width: 100%; } body { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--bg); line-height: 1.6; overflow-x: hidden; transition: background-color 0.2s ease, color 0.2s ease; } img { max-width: 100%; display: block; } ul { list-style: none; } a { color: inherit; } /* --------------------------------------------------------- 3. Accessibility base --------------------------------------------------------- */ /* Visible, high-contrast focus ring everywhere — never remove focus outlines without replacing them. */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; top: -999px; left: 1rem; z-index: 1000; background: var(--ink); color: var(--bg); padding: 0.85rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Respect reduced-motion preferences site-wide */ @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; } } /* --------------------------------------------------------- 4. Typography --------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; } p { color: var(--ink-soft); line-height: 1.75; max-width: var(--measure); } p + p { margin-top: 1rem; } strong { color: var(--ink); font-weight: 600; } /* Section eyebrow + title pairing — the site's signature motif */ .section-title { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); margin-bottom: var(--space-3); text-align: left; } /* The "// " comment mark is the page's single signature flourish — reserved for the one main heading per page, not repeated on every section title. */ h1.section-title::before { content: "// "; color: var(--accent); } .section-subtitle { font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; color: var(--ink); margin-bottom: var(--space-3); text-align: left; } /* --------------------------------------------------------- 5. Layout primitives --------------------------------------------------------- */ main, section { position: relative; } .container { width: min(100%, calc(100% - 2.5rem)); margin: 0 auto; } main { width: min(var(--content-width), calc(100% - 2.5rem)); margin: var(--space-4) auto var(--space-6); } main section { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); } main section p { max-width: var(--measure); } .content { display: flex; flex-direction: column; gap: 1.25rem; } /* --------------------------------------------------------- 6. Header / navigation --------------------------------------------------------- */ header { margin-bottom: var(--space-4); } .nav-container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 1rem 1.5rem; } .brand { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); text-decoration: none; white-space: nowrap; } .brand span { color: var(--accent); } .nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin: 0; } .nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .nav-links li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.85rem; border-radius: var(--radius-sm); color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.15s ease, background-color 0.15s ease; } .nav-links li a:hover { color: var(--accent-strong); background: var(--accent-soft); } .nav-links a.active { color: var(--accent-strong); font-weight: 600; } /* Mobile menu toggle button */ .mobile-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none; } .mobile-toggle svg { width: 20px; height: 20px; min-width: 20px; flex-shrink: 0; display: block; forced-color-adjust: none; } .mobile-toggle:hover { background: transparent; border-color: var(--accent); color: var(--accent); } .mobile-toggle .icon-close { display: none; } .mobile-toggle[aria-expanded="true"] .icon-menu { display: none; } .mobile-toggle[aria-expanded="true"] .icon-close { display: block; } /* Light/dark theme toggle */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none; } .theme-toggle:hover { background: transparent; border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; min-width: 18px; flex-shrink: 0; display: block; forced-color-adjust: none; } .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } /* --------------------------------------------------------- 7. Buttons --------------------------------------------------------- */ a.button, button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } a.button svg { width: 18px; height: 18px; min-width: 18px; flex-shrink: 0; display: block; } a.button:hover, button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-1px); } a.button:active, button:active { transform: translateY(0); } /* Links inside body copy */ a:not(.button) { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: var(--line-strong); } a:not(.button):hover { text-decoration-color: currentColor; } /* --------------------------------------------------------- 8. Hero --------------------------------------------------------- */ .intro { text-align: left; background: var(--bg-raised); } .intro .section-title, .intro h1 { text-align: left; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); } .intro h1 span { color: var(--accent); } .intro p { font-size: 1.1rem; text-align: left; margin-left: 0; } .hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5); align-items: center; } .hero-content { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: var(--space-3) 0; } .hero-avatar { display: flex; justify-content: center; align-items: center; padding: var(--space-3); background: var(--bg-muted); } .hero-avatar-image { width: 100%; max-width: 320px; height: auto; border-radius: var(--radius-sm); } /* --------------------------------------------------------- 9. Cards & feature grid --------------------------------------------------------- */ .card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); } .feature-grid article { background: var(--bg-muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3); transition: border-color 0.15s ease, transform 0.15s ease; } .feature-grid article:hover { border-color: var(--accent); transform: translateY(-2px); } .feature-grid article h3 { font-family: var(--font-body); font-size: 1.05rem; color: var(--ink); margin-bottom: 0.6rem; } .feature-grid article h4 { font-family: var(--font-display); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: var(--space-2); margin-bottom: 0.5rem; } .feature-grid article p { text-align: left; max-width: none; margin: 0; } .feature-grid article ul { margin-top: 0.75rem; } .feature-grid article li { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; } .feature-grid article .hero-buttons { margin-top: var(--space-3); margin-bottom: 0; } /* Stat callouts in the "Highlights" section get a bigger, accented number */ .stats .feature-grid article { text-align: center; } .stats .feature-grid article h3 { font-size: 2.25rem; color: var(--accent); margin-bottom: 0.25rem; } .stats .feature-grid article p { color: var(--ink-soft); font-size: 0.95rem; text-align: center; margin: 0 auto; } /* --------------------------------------------------------- 10. Section variants --------------------------------------------------------- */ .profile-list { list-style: none; max-width: var(--measure); margin-top: var(--space-3); } .profile-list li { font-size: 1rem; color: var(--ink-soft); line-height: 1.7; padding: 0.75rem 1rem; margin-bottom: 0.6rem; background: var(--bg-muted); border-left: 3px solid var(--accent); border-radius: 6px; } .focus { background: var(--accent-soft); border-color: var(--accent); } .focus .container { margin-top: var(--space-3); } .focus .button { width: fit-content; } /* Generic lists elsewhere in body copy */ ul:not(.nav-links):not(.profile-list):not(.hero-buttons) { list-style: disc; padding-left: 1.4rem; max-width: var(--measure); color: var(--ink-soft); line-height: 1.75; } ul:not(.nav-links):not(.profile-list):not(.hero-buttons) li { font-size: 1rem; color: var(--ink-soft); } /* Resume page iframe frame */ .resume-frame { padding: var(--space-2); } .resume-frame iframe { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); min-height: 500px; } /* --------------------------------------------------------- 11. Footer --------------------------------------------------------- */ .site-footer, footer { padding: var(--space-4) 0 var(--space-2); color: var(--ink-soft); text-align: center; font-size: 0.9rem; } .site-footer p, footer p { max-width: none; margin: 0 auto; } /* --------------------------------------------------------- 12. Responsive --------------------------------------------------------- */ @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-avatar { order: -1; } } @media (max-width: 720px) { main { margin: var(--space-3) auto var(--space-5); } main section { padding: var(--space-3); } .hero-buttons { flex-direction: column; align-items: stretch; } .hero-buttons .button { width: 100%; } .feature-grid { grid-template-columns: 1fr; } .nav-container { justify-content: space-between; } .mobile-toggle { display: flex; } .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0.25rem; padding-top: 0.75rem; margin-top: 0.75rem; border-top: 1px solid var(--line); } .nav-links.active { display: flex; } .nav-links li a { width: 100%; } } /* Never let long words or code-like text break layout on narrow screens */ p, li, h1, h2, h3 { overflow-wrap: break-word; } /* Belt-and-suspenders: some browsers need an explicit color declared alongside forced-color-adjust: none to guarantee these icons paint under forced-colors / high-contrast mode, rather than just being exempted and left to fall back on nothing. */ @media (forced-colors: active) { .theme-toggle svg, .mobile-toggle svg { forced-color-adjust: none; color: CanvasText; } }