/* css/theme.css * * Design system — "Ledger" identity. * A precision-engineering aesthetic built for a developer portfolio: deep * graphite ink, a brushed-brass signal accent (in place of the generic * near-black/acid-green combo), a serif display face for editorial weight, * and monospace used deliberately for metadata — the vocabulary of a build * log, not a hacker terminal. * * Everything the Tailwind CDN build can't express on its own: * * 1. A REAL light theme ("blueprint paper"). The pages hardcode dark palette * classes (bg-darkBg, text-slate-200, bg-slate-900, border-slate-800, ...), * so the theme toggle used to flip a `.dark` class that changed nothing * visible. Instead of rewriting every class on every page, the light * theme remaps those exact utility classes when is NOT `.dark`. * 2. Accessibility: visible focus rings, a skip link, reduced-motion support. * 3. Shared component classes: eyebrow labels, buttons, cards, the hero * terminal shell, toasts, back-to-top, offline banner. * 4. Print styles for articles. * * Loaded on every page AFTER the Tailwind CDN script so these rules win. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { --accent: #d6963d; --accent-strong: #b87a2a; --signal: #4fa3b8; --ink: #0a0c10; } html { scroll-behavior: smooth; } body { font-feature-settings: "ss01" 1, "cv01" 1; } /* Serif display face — used with restraint, on headlines only. */ .font-display { font-family: "Fraunces", ui-serif, Georgia, serif; font-optical-sizing: auto; letter-spacing: -0.01em; } /* Eyebrow / ledger label — small bracketed mono tag used as a structural device across every section header, tying the pages together as entries in one continuous build log rather than disconnected page templates. */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ""; width: 1rem; height: 1px; background: currentColor; opacity: 0.6; } html:not(.dark) .eyebrow { color: #8a5a1e; } /* --------------------------------------------------------------------------- * LIGHT THEME — "Blueprint paper": cool, muted, slightly blue-grey — a * deliberate departure from the warm-cream default. * Only applies when has no `.dark` class. * ------------------------------------------------------------------------ */ html:not(.dark) { color-scheme: light; } html:not(.dark) body { background-color: #f1f2f6; color: #1c2029; } /* Backgrounds */ html:not(.dark) .bg-darkBg { background-color: #f1f2f6 !important; } html:not(.dark) .bg-darkBg\/80 { background-color: rgb(241 242 246 / 0.85) !important; } html:not(.dark) .bg-slate-950, html:not(.dark) .bg-slate-900, html:not(.dark) .bg-darkCard { background-color: #ffffff !important; } html:not(.dark) .bg-slate-900\/90 { background-color: rgb(255 255 255 / 0.92) !important; } html:not(.dark) .bg-slate-900\/60, html:not(.dark) .bg-slate-900\/40, html:not(.dark) .bg-slate-950\/40, html:not(.dark) .bg-slate-950\/20, html:not(.dark) .bg-slate-950\/60, html:not(.dark) .bg-slate-950\/80 { background-color: #e8eaef !important; } html:not(.dark) .bg-slate-800 { background-color: #e3e5ec !important; } html:not(.dark) .bg-slate-800\/70 { background-color: #e3e5ec !important; } html:not(.dark) .bg-slate-800\/60 { background-color: #e3e5ec !important; } /* Text */ html:not(.dark) .text-white { color: #12141c !important; } html:not(.dark) .text-slate-200 { color: #1c2029 !important; } html:not(.dark) .text-slate-300 { color: #333846 !important; } html:not(.dark) .text-slate-400 { color: #4b5163 !important; } html:not(.dark) .text-slate-500 { color: #676e82 !important; } html:not(.dark) .text-slate-600 { color: #9199ad !important; } html:not(.dark) .text-slate-700 { color: #c7cbd6 !important; } /* Borders */ html:not(.dark) .border-slate-800, html:not(.dark) .border-slate-900, html:not(.dark) .border-slate-700 { border-color: #dfe2ea !important; } /* Hover states that assumed a dark canvas */ html:not(.dark) .hover\:text-white:hover { color: #12141c !important; } html:not(.dark) .hover\:bg-slate-700:hover, html:not(.dark) .hover\:bg-slate-800:hover { background-color: #e3e5ec !important; } html:not(.dark) .hover\:border-slate-700:hover { border-color: #c7cbd6 !important; } /* The accent stays brass in both themes, but brass-on-white needs to be darker to stay AA-readable at small sizes. */ html:not(.dark) .text-accent { color: #8a5a1e !important; } html:not(.dark) .bg-accent { background-color: #8a5a1e !important; } html:not(.dark) .bg-accent .fa-solid, html:not(.dark) .bg-accent i { color: inherit; } html:not(.dark) .border-accent { border-color: #8a5a1e !important; } html:not(.dark) .text-slate-900 { color: #ffffff !important; } /* Code blocks keep a dark surface in light mode — code reads better that way and it matches the highlight.js atom-one-dark theme the posts load. */ html:not(.dark) pre, html:not(.dark) .code-block-wrapper, html:not(.dark) .code-block-wrapper .bg-slate-950\/60 { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #1e293b !important; } html:not(.dark) .code-block-wrapper .text-slate-400 { color: #94a3b8 !important; } html:not(.dark) pre code { color: #e2e8f0 !important; } /* Terminal keeps its dark shell in light mode too — it's a console, and a console on a white card reads as a broken element rather than a deliberate one. The surfaces have to be pinned as well as the text: overriding only the text colour left pale grey type sitting on a white card. #terminalShell is the outer wrapper; its two children are the title bar and the prompt row, which carry their own background utilities. */ html:not(.dark) #terminalShell { background-color: #020617 !important; border-color: #1e293b !important; } html:not(.dark) #terminalShell > div:first-child { background-color: #0f172a !important; border-bottom-color: #1e293b !important; } html:not(.dark) #terminalShell > div:last-child { background-color: #020617 !important; border-top-color: #1e293b !important; } html:not(.dark) #terminalShell .text-slate-500 { color: #94a3b8 !important; } html:not(.dark) #terminalBody, html:not(.dark) #terminalShell > div:last-child, html:not(.dark) #terminalInput { color: #e2e8f0 !important; } html:not(.dark) #terminalBody .text-slate-500 { color: #94a3b8 !important; } html:not(.dark) #terminalBody .text-slate-400 { color: #cbd5e1 !important; } html:not(.dark) #terminalBody .text-slate-300 { color: #f1f5f9 !important; } html:not(.dark) #terminalBody .text-white { color: #ffffff !important; } /* --------------------------------------------------------------------------- * ACCESSIBILITY * ------------------------------------------------------------------------ */ /* Keyboard-only focus ring — mouse clicks stay clean. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: 0.75rem; top: -100px; z-index: 200; background: var(--accent); color: #1a1002; font-weight: 700; font-size: 0.8125rem; padding: 0.5rem 0.9rem; border-radius: 0.5rem; transition: top 0.15s ease-in-out; } .skip-link:focus { top: 0.75rem; } @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; } } /* --------------------------------------------------------------------------- * SIGNATURE COMPONENTS * ------------------------------------------------------------------------ */ /* Primary CTA — brushed-brass fill, dark ink label. */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(180deg, #e2a24e, var(--accent)); color: #1a1002; font-weight: 700; font-size: 0.875rem; padding: 0.75rem 1.5rem; border-radius: 0.6rem; box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.25) inset, 0 10px 24px -10px rgb(214 150 61 / 0.45); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } /* Secondary CTA — hairline outline, quiet until hovered. */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: transparent; border: 1px solid; font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1.5rem; border-radius: 0.6rem; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } /* Ledger card — the base surface used for stat blocks, competency tiles, and project cards site-wide. */ .card-ledger { position: relative; border-radius: 0.85rem; transition: border-color 0.2s ease, transform 0.2s ease; } .card-ledger::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgb(214 150 61 / 0), rgb(214 150 61 / 0)); pointer-events: none; transition: background 0.2s ease; } /* Numbered ledger index — small mono digit used in stat rows / timelines. */ .ledger-index { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6875rem; font-weight: 600; color: var(--signal); letter-spacing: 0.06em; } html { scroll-behavior: smooth; } /* --------------------------------------------------------------------------- * SHARED UI: toasts, back-to-top, offline banner * ------------------------------------------------------------------------ */ #toastStack { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem); z-index: 120; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 2rem); } @media (min-width: 768px) { #toastStack { bottom: 1.5rem; } } .toast { pointer-events: auto; font-size: 0.8125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0.6rem 1rem; border-radius: 0.6rem; background: #0f172a; color: #e2e8f0; border: 1px solid #1e293b; box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.6); opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; } .toast.is-visible { opacity: 1; transform: translateY(0); } .toast[data-variant="success"] { border-color: rgb(16 185 129 / 0.5); color: #6ee7b7; } .toast[data-variant="error"] { border-color: rgb(244 63 94 / 0.5); color: #fda4af; } #backToTop { position: fixed; right: 1rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem); z-index: 60; width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: grid; place-items: center; background: #1e293b; color: #e2e8f0; border: 1px solid #334155; box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.8); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } #backToTop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } #backToTop:hover { color: var(--accent); border-color: var(--accent); } @media (min-width: 768px) { #backToTop { bottom: 1.5rem; right: 1.5rem; } } html:not(.dark) #backToTop { background: #ffffff; color: #334155; border-color: #e2e8f0; } #offlineBanner { position: fixed; top: 0; left: 0; right: 0; z-index: 130; background: #b45309; color: #fff7ed; font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; padding: 0.4rem 1rem; transform: translateY(-100%); transition: transform 0.2s ease; } #offlineBanner.is-visible { transform: translateY(0); } /* Terminal scrollbar polish */ #terminalBody::-webkit-scrollbar, #cmdkResults::-webkit-scrollbar { width: 8px; } #terminalBody::-webkit-scrollbar-thumb, #cmdkResults::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 8px; } /* Prevent background scroll while the command palette is open */ body.cmdk-open { overflow: hidden; } /* --------------------------------------------------------------------------- * PRINT * ------------------------------------------------------------------------ */ @media print { nav, footer, #backToTop, #toastStack, #readingProgress, #commentsRoot, .no-print { display: none !important; } body { background: #fff !important; color: #000 !important; padding: 0 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; } }