:root { --color-bg: #f8fafc; --color-surface: #ffffff; --color-text: #1e293b; --color-text-muted: #64748b; --color-border: #e2e8f0; --color-accent: #4338ca; --color-accent-contrast: #ffffff; --color-success-bg: #ecfdf5; --color-success-text: #047857; --color-error-bg: #fef2f2; --color-error-text: #b91c1c; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: Georgia, 'Iowan Old Style', serif; --font-mono: ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace; --radius: 0.5rem; --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); --container-width: 960px; } @media (prefers-color-scheme: dark) { :root { --color-bg: #0f172a; --color-surface: #1e293b; --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-border: #334155; --color-accent: #818cf8; --color-accent-contrast: #0f172a; --color-success-bg: #052e2b; --color-success-text: #34d399; --color-error-bg: #450a0a; --color-error-text: #fca5a5; } } /* * Public site theme: "Cinematic" — applied via a .theme-cinematic class on * in includes/header.php only. Admin pages never get this class, so * they keep the neutral tool theme above untouched. Because every component * below (.card, .btn, form inputs, .tag, tables, flash messages) is already * built on the --color-* custom properties, redefining the tokens here is * enough to re-skin most of the site; the rules after that add the parts * that aren't token-driven (typography, letter-spacing, hover motion). */ .theme-cinematic { --color-bg: #0b0b0d; --color-surface: #16151a; --color-text: #ece7de; --color-text-muted: #9c968c; --color-border: #2b2932; --color-accent: #c9974a; --color-accent-contrast: #0b0b0d; --color-success-bg: #16261d; --color-success-text: #86d3a4; --color-error-bg: #2a1519; --color-error-text: #f0919a; --font-serif: 'Fraunces', Georgia, 'Iowan Old Style', serif; --radius: 2px; --shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7); --container-width: 1080px; /* Viewfinder corner brackets — an autofocus-square motif reused as a static frame (hero, contact form) and as a hover "focus lock" on cards. One gradient stack, referenced wherever the brackets appear. */ --corner-size: 22px; --corner-thickness: 2px; --focus-corners: linear-gradient(to right, var(--color-accent) var(--corner-thickness), transparent 0), linear-gradient(to bottom, var(--color-accent) var(--corner-thickness), transparent 0), linear-gradient(to left, var(--color-accent) var(--corner-thickness), transparent 0), linear-gradient(to bottom, var(--color-accent) var(--corner-thickness), transparent 0), linear-gradient(to right, var(--color-accent) var(--corner-thickness), transparent 0), linear-gradient(to top, var(--color-accent) var(--corner-thickness), transparent 0), linear-gradient(to left, var(--color-accent) var(--corner-thickness), transparent 0), linear-gradient(to top, var(--color-accent) var(--corner-thickness), transparent 0); background: var(--color-bg); text-rendering: optimizeLegibility; } .theme-cinematic .grain { position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .theme-cinematic h1, .theme-cinematic h2, .theme-cinematic h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; } .theme-cinematic .kicker { display: block; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; font-weight: 600; color: var(--color-accent); margin-bottom: 0.75rem; } .theme-cinematic .site-header { background: rgba(11, 11, 13, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .theme-cinematic .brand { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; } .theme-cinematic .site-header nav a { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.12em; font-weight: 500; } .theme-cinematic .site-header nav a:hover { background: transparent; color: var(--color-accent); } .theme-cinematic .site-header nav a.active { color: var(--color-accent); } .theme-cinematic .btn-primary, .theme-cinematic .btn-secondary { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; font-weight: 600; } .theme-cinematic .btn-secondary { border-color: var(--color-accent); color: var(--color-accent); } .theme-cinematic .btn-secondary:hover { background: rgba(201, 151, 74, 0.12); } .theme-cinematic .card { transition: transform 0.25s ease, border-color 0.25s ease; } .theme-cinematic .card:hover { border-color: var(--color-accent); transform: translateY(-2px); } .theme-cinematic .card .thumb { aspect-ratio: 2.35 / 1; overflow: hidden; transition: transform 0.4s ease; } .theme-cinematic .card:hover .thumb { transform: scale(1.03); } .theme-cinematic .tag { background: transparent; border-color: var(--color-accent); color: var(--color-accent); } .theme-cinematic .hero { padding-block: 2rem 4rem; } .theme-cinematic .hero h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); font-style: italic; } .theme-cinematic .hero .hud { display: flex; align-items: center; justify-content: center; margin: 0 0 1rem; } .theme-cinematic .divider { display: flex; align-items: center; justify-content: center; color: var(--color-accent); margin-block: 3rem; font-size: 0.875rem; } .theme-cinematic .divider::before, .theme-cinematic .divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .theme-cinematic .divider span { padding-inline: 1rem; display: inline-flex; } .theme-cinematic .divider svg { display: block; } /* Viewfinder frame — static corner brackets around the hero and the contact form. */ .theme-cinematic .focus-frame { position: relative; background-image: var(--focus-corners); background-repeat: no-repeat; background-size: var(--corner-size) var(--corner-size); background-position: top left, top left, top right, top right, bottom right, bottom right, bottom left, bottom left; padding: 1.5rem; } /* .hero already sets its own vertical rhythm — keep that instead of the generic .focus-frame padding fighting it over padding-top/bottom. */ .theme-cinematic .hero.focus-frame { padding-block: 2rem 4rem; } /* Focus-lock — the same brackets appear on a card as if the lens just racked focus onto it. A pseudo-element so it never affects layout. */ .theme-cinematic .card { position: relative; } .theme-cinematic .card::after { content: ''; position: absolute; inset: 0.5rem; pointer-events: none; background-image: var(--focus-corners); background-repeat: no-repeat; background-size: 16px 16px; background-position: top left, top left, top right, top right, bottom right, bottom right, bottom left, bottom left; opacity: 0; transition: opacity 0.25s ease; } .theme-cinematic .card:hover::after { opacity: 1; } /* HUD readout — camera-display typography for technical/meta labels. */ .theme-cinematic .hud { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .theme-cinematic .spec-sheet { display: block; line-height: 2; padding: 1rem 1.25rem; margin-bottom: 1.5rem; border: 1px solid var(--color-border); color: var(--color-text-muted); } .theme-cinematic .spec-sheet .hud-label { color: var(--color-accent); } .theme-cinematic .rec-dot { display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em; border-radius: 50%; background: var(--color-accent); animation: rec-pulse 2s ease-in-out infinite; } @keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .theme-cinematic .frame-number { display: block; margin-bottom: 0.4rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; color: var(--color-text-muted); } /* Sprocket strip — a thin film-perforation band under the header. */ .theme-cinematic .sprocket-strip { height: 8px; background-image: repeating-linear-gradient( to right, var(--color-border) 0, var(--color-border) 5px, transparent 5px, transparent 14px ); opacity: 0.7; } * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } img { max-width: 100%; display: block; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: 1.5rem; } h1, h2, h3 { line-height: 1.25; } h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 0.5rem; } h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); } /* Site header / nav */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding-block: 1rem; } .brand { font-weight: 700; font-size: 1.125rem; color: var(--color-text); } .brand:hover { text-decoration: none; } .site-header nav { display: flex; flex-wrap: wrap; gap: 0.25rem; } .site-header nav a { padding: 0.4rem 0.75rem; border-radius: var(--radius); color: var(--color-text-muted); font-size: 0.9375rem; } .site-header nav a:hover { background: var(--color-bg); text-decoration: none; color: var(--color-text); } .site-header nav a.active { color: var(--color-accent); font-weight: 600; } .site-main { flex: 1; padding-block: 2.5rem; } .site-footer { border-top: 1px solid var(--color-border); padding-block: 1.5rem; color: var(--color-text-muted); font-size: 0.875rem; } /* Hero */ .hero { text-align: center; padding-block: 1rem 3rem; } .hero .lede { color: var(--color-text-muted); font-size: 1.125rem; max-width: 40rem; margin-inline: auto; } .hero .cta-row { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } /* Buttons */ .btn { display: inline-block; padding: 0.6rem 1.25rem; border-radius: var(--radius); font-weight: 600; font-size: 0.9375rem; border: 1px solid transparent; cursor: pointer; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--color-accent); color: var(--color-accent-contrast); } .btn-primary:hover { opacity: 0.9; } .btn-secondary { background: transparent; border-color: var(--color-border); color: var(--color-text); } .btn-secondary:hover { background: var(--color-surface); } .btn-danger { background: #dc2626; color: #ffffff; } .btn-danger:hover { background: #b91c1c; } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8125rem; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 0.875rem; cursor: pointer; } .btn-icon:hover { background: var(--color-bg); } /* Admin: row actions, tables, image previews */ .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .row-actions form { margin: 0; } .table-wrap { overflow-x: auto; } .image-preview { display: block; max-width: 200px; border-radius: var(--radius); border: 1px solid var(--color-border); margin-bottom: 0.75rem; } /* Sections */ section + section { margin-top: 3rem; } .section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .section-title a { font-size: 0.9375rem; white-space: nowrap; } /* Grids and cards */ .grid { display: grid; gap: 1.5rem; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); } .card h2, .card h3 { margin-top: 0; } .card .thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; } .card .links { margin-top: 0.75rem; display: flex; gap: 1rem; flex-wrap: wrap; } .muted, .card time { color: var(--color-text-muted); font-size: 0.875rem; } /* Off-screen but still in the DOM/tab order for screen readers if needed — used for form-spam honeypot fields. */ .visually-hidden { position: absolute; left: -9999px; top: -9999px; } .tags { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.8125rem; color: var(--color-text-muted); } /* Rich text (post body / resume content) */ .post-body, .resume-content { margin-top: 1.5rem; } .post-body :where(h1, h2, h3, h4) { margin-top: 1.5em; } .post-body p, .resume-content p { margin: 0 0 1em; } .post-body img, .resume-content img { border-radius: var(--radius); margin-block: 1em; } .post-body blockquote, .resume-content blockquote { border-left: 3px solid var(--color-accent); margin: 1em 0; padding: 0.25em 1em; color: var(--color-text-muted); } .post-body pre, .resume-content pre, .post-body code, .resume-content code { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .post-body pre, .resume-content pre { padding: 1em; overflow-x: auto; } .post-body code, .resume-content code { padding: 0.15em 0.4em; } /* Forms */ form { max-width: 40rem; } form.form-wide { max-width: none; } form label { display: block; font-weight: 600; margin-bottom: 1rem; } form input[type="text"], form input[type="email"], form input[type="url"], form input[type="password"], form textarea { display: block; width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font: inherit; } form input:focus, form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; } form input[type="checkbox"] { width: auto; display: inline-block; margin-right: 0.4em; } /* Fallback styling only for submit buttons that don't opt into the .btn system — :not(.btn) keeps this from out-specificity-ing .btn-danger, .btn-icon, .btn-sm, etc. on buttons that already declare a variant. */ form button[type="submit"]:not(.btn) { background: var(--color-accent); color: var(--color-accent-contrast); border: none; padding: 0.65rem 1.5rem; border-radius: var(--radius); font-weight: 600; font-size: 0.9375rem; cursor: pointer; } form button[type="submit"]:not(.btn):hover { opacity: 0.9; } /* Flash messages */ .flash { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: 0.9375rem; } .flash-success { background: var(--color-success-bg); color: var(--color-success-text); } .flash-error { background: var(--color-error-bg); color: var(--color-error-text); } /* Tables (shared with admin) */ table { width: 100%; border-collapse: collapse; margin-top: 1rem; } th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border); } th { color: var(--color-text-muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; } tbody tr:hover { background: var(--color-surface); } /* Auth pages (login) */ .auth-page { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; min-height: 100vh; } .auth-card { width: 100%; max-width: 24rem; } .auth-card .brand { display: block; text-align: center; margin-bottom: 1.5rem; } .auth-card h1 { text-align: center; font-size: 1.5rem; margin-bottom: 1.5rem; } .auth-card form { max-width: none; } .auth-card button[type="submit"] { width: 100%; margin-top: 0.5rem; } .auth-back { font-size: 0.875rem; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }