margin — scoped to the utility pages (main.wrap) so their plain stacked sections breathe. Public pages (home, about, work, projects, contact) have sections with their own padding and borders, so a global section margin just creates ghost gaps. */ main.wrap section { margin: 48px 0; } ul.plain { list-style: none; padding: 0; margin: 0; } ul.plain li { margin: 0 0 14px; padding-left: 18px; position: relative; } ul.plain li::before { content: '—'; position: absolute; left: 0; color: var(--rule); } /* Run button (diagnostic & tools) */ .run-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; } .run-button { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 20px; background: var(--accent); color: var(--bg); border: 1px solid var(--accent); border-radius: 0; cursor: pointer; transition: background 0.15s, color 0.15s; } .run-button:hover { background: transparent; color: var(--accent); } .run-button:active { transform: translateY(1px); } .run-button:disabled { opacity: 0.55; cursor: progress; } .run-status { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } /* Terminal */ .terminal { margin-top: 28px; border: 1px solid var(--rule); border-radius: 0; background: #0a0a0a; color: #e8e8e8; font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55; overflow: hidden; } .terminal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; background: #141414; border-bottom: 1px solid #232323; } .terminal__title { color: #8b93a3; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .terminal__title::before { content: '$ '; color: #ff7a2f; } .terminal__ctrls { color: #5b6671; font-size: 13px; letter-spacing: 0.28em; user-select: none; } .terminal__body { margin: 0; padding: 16px 18px 18px; white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow-y: auto; font-family: inherit; } .terminal__line { display: inline; } .terminal__line--prompt { color: #ff7a2f; } .terminal__line--dim { color: #6a6a6a; } .terminal__line--ok { color: #7ddc8a; } .terminal__line--warn { color: #ffcc66; } .terminal__line--fail { color: #ff7a85; } @keyframes terminal-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .terminal__body::after { content: '▌'; color: var(--accent); animation: terminal-cursor 1s steps(2) infinite; margin-left: 2px; } /* Footer — single-row status bar */ .site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg); border-top: 1px solid var(--rule); font-family: 'JetBrains Mono', monospace; color: var(--muted); } body { padding-bottom: 52px; } .site-footer .wrap { max-width: none; padding: 10px 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .site-footer__center { display: flex; justify-content: center; } .site-footer__center a { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.14em; color: var(--ink); text-decoration: none; transition: color 0.12s; } .site-footer__center a:hover { color: var(--accent); } .site-footer__right { justify-content: flex-end; } /* Dev-only Tools pill — injected by portfolio.js when on localhost. */ .dev-pill { position: fixed; right: 18px; bottom: 60px; z-index: 60; padding: 7px 14px; background: var(--bg); border: 1px solid var(--accent); color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: background 0.15s, color 0.15s; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .dev-pill::before { content: '/ '; opacity: 0.55; } .dev-pill:hover { background: var(--accent); color: var(--bg); } @media (max-width: 760px) { /* Mobile footer collapses to a stacked layout (~96px tall vs 52px on desktop). Bump body padding-bottom so the last paragraph of any page isn't hidden under the fixed footer. */ body { padding-bottom: 96px; } .site-footer .wrap { grid-template-columns: 1fr; text-align: center; gap: 8px; } .site-footer__right { justify-content: center; flex-wrap: wrap; } } .site-footer__id { display: flex; align-items: center; gap: 12px; color: var(--muted); white-space: nowrap; } .site-footer__id .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; box-shadow: 0 0 8px var(--accent); animation: status-pulse 1.8s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } .site-footer__right { display: flex; align-items: center; gap: 18px; } .theme-toggle { background: none; border: 0; /* Padding + negative margin keeps the visual size at 18×18 while giving a 30×30 tap target. WCAG 2.5.5 / 2.2 AA wants ≥24×24. */ padding: 6px; margin: -6px; cursor: pointer; color: var(--muted); display: inline-flex; width: 30px; height: 30px; transition: color 0.15s; } .theme-toggle:hover { color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; } [data-theme='light'] .theme-toggle .icon-sun, [data-theme='dark'] .theme-toggle .icon-moon { display: none; } @media (max-width: 600px) { main.wrap { padding-top: 44px; } h1 { font-size: 36px; } .lede { font-size: 16px; } } /* Respect users who prefer reduced motion. Disable infinite background animations site-wide (status-pulse, terminal-cursor). Per-page animations like home-loc-pulse are already gated locally. */ @media (prefers-reduced-motion: reduce) { .site-footer__id .status-dot, .terminal__body::after { animation: none; } } /* ------------------------------------------------------------------ */ /* Brutalist page hero — shared across /about/, /work/, /projects/, */ /* /contact/. (/index.html has its own split-grid `.home-hero`.) */ /* */ /* Pattern: eyebrow `>` prompt → two-line H1 (second line in accent */ /* with hanging indent) → optional lede → optional bordered chip. */ /* ------------------------------------------------------------------ */ .page-hero { padding: 72px 32px 48px; max-width: none; font-family: 'JetBrains Mono', monospace; } .page-hero__pre { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; line-height: 1; } .page-hero__pre::before { content: '> '; color: var(--accent); } .page-hero__title { margin: 0 0 28px; font-weight: 700; font-size: var(--hero-size); line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; color: var(--ink); } .page-hero__title span { display: block; } .page-hero__title span:nth-child(2) { color: var(--accent); padding-left: 0.4em; } .page-hero__sub { font-size: 17px; line-height: 1.5; max-width: 56ch; margin: 0; color: var(--ink); } .page-hero__honest { display: inline-block; margin-top: 18px; padding: 8px 14px; border: 1px solid var(--ink); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* Narrow lede + relative positioning — used on /contact/. */ .page-hero--narrow { position: relative; } .page-hero--narrow .page-hero__sub { max-width: 50ch; } @media (max-width: 700px) { .page-hero { padding: 52px 22px 36px; } }