/* ============================================================================= base.css — TechieBlog element-level defaults ============================================================================= REQ-UI-048 / REQ-UI-033. Loaded THIRD, after theme.css (tokens) and trblazeui.css (framework), so the rules here intentionally sit on top of the library's reset. Keep this file small: component styling belongs in Tailwind utility classes passed through each component's `Class` parameter, never here and never in inline `style`. ========================================================================== */ html { /* Prevent the light-themed paint flash before the theme class is applied. */ background-color: var(--background); color-scheme: light; -webkit-text-size-adjust: 100%; } html.dark { color-scheme: dark; } body { margin: 0; min-height: 100vh; background-color: var(--background); color: var(--foreground); font-family: var(--tb-font-ui); line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--tb-font-heading); color: var(--foreground); } /* ----------------------------------------------------------------------------- Focus indicator — REQ-NFR-007 / WCAG 2.4.7 (Focus Visible) + 1.4.11. TrBlazeUI gives buttons and inputs a `ring` box-shadow on focus, but plain anchors (nav, footer, in-prose and card links) fell back to the 1px browser default, which is neither 2px nor guaranteed to contrast with the page. This declares one 2px `--ring` outline for every keyboard-focused element and adds an offset so the indicator is legible against dark and light backgrounds alike. `:focus-visible` keeps it off mouse clicks. `[tabindex="-1"]` is excluded on purpose: those are programmatic focus targets (skip-link landing points, the resume `

`), not keyboard stops, and must not paint a focus ring. -------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):not([tabindex="-1"]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius); } /* Programmatic focus targets are moved to by script, never by Tab, so the browser's own 1px focus ring on them is noise — it renders an outline around the resume `

` on a plain page load. Suppressing it is safe precisely because they are unreachable by Tab. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } code, pre, kbd, samp { font-family: var(--tb-font-mono); } /* --------------------------------------------------------------------------- Dark-mode correctness net (REQ-UI-033) --------------------------------------------------------------------------- The hand-written stylesheets predate dark mode and in places set a colour but not its background (or vice versa), producing unreadable text once `.dark` is on . Rather than patch each legacy rule, these defaults make any element that inherits from the page resolve to a themed pair. ------------------------------------------------------------------------- */ html.dark img:not([src$=".svg"]) { /* Slightly tame pure-white photography against a dark canvas. */ filter: brightness(0.92); } /* Anything the legacy sheets left on a hard-coded white surface. */ html.dark [class*="card"], html.dark [class*="panel"], html.dark [class*="__section"] { color: inherit; } /* --------------------------------------------------------------------------- Blazor framework error UI — themed so it is readable in both modes. ------------------------------------------------------------------------- */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; padding: 0.75rem 1.25rem 0.75rem 1.25rem; background: var(--alert-warning); color: var(--background); box-shadow: var(--shadow-lg); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: var(--destructive); color: var(--destructive-foreground); padding: 1rem; border-radius: var(--radius); } /* --------------------------------------------------------------------------- Long-form article body (post view, about, preview). Uses tokens only, so it follows the active theme in both modes. ------------------------------------------------------------------------- */ .markdown-content { line-height: 1.75; color: var(--foreground); } .markdown-content h1, .markdown-content h2, .markdown-content h3 { margin: 1.5rem 0 0.75rem; font-weight: 600; line-height: 1.3; } .markdown-content h1 { font-size: 2rem; } .markdown-content h2 { font-size: 1.5rem; } .markdown-content h3 { font-size: 1.25rem; } .markdown-content p { margin: 0.85rem 0; } .markdown-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .markdown-content code { background: var(--muted); color: var(--foreground); padding: 0.15rem 0.35rem; border-radius: calc(var(--radius) - 2px); font-size: 0.9em; } .markdown-content pre { background: var(--muted); color: var(--foreground); padding: 1rem; border-radius: var(--radius); overflow-x: auto; margin: 1rem 0; } .markdown-content pre code { background: transparent; padding: 0; } .markdown-content blockquote { border-left: 4px solid var(--primary); padding-left: 1rem; margin: 1rem 0; color: var(--muted-foreground); font-style: italic; } .markdown-content ul, .markdown-content ol { padding-left: 1.5rem; margin: 0.75rem 0; } .markdown-content img { max-width: 100%; height: auto; border-radius: var(--radius); } .markdown-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; } .markdown-content th, .markdown-content td { border: 1px solid var(--border); padding: 0.5rem; text-align: left; } .markdown-content th { background: var(--muted); font-weight: 600; } .markdown-content hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }