/* sl33p.org — global styles Component-specific styling lives in *.razor.css (CSS isolation). */ :root { --bg: #ffffff; --red: #d90404; --black: #111111; --muted: #444444; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace; --maxw: 1280px; --gutter: clamp(1.25rem, 4vw, 4rem); /* themed surfaces (overridden in dark mode) */ --card-bg: #ffffff; --card-border: #ededed; --card-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.28); --ghost: rgba(17, 17, 17, 0.045); /* faint giant background word */ --grain-blend: multiply; --grain-opacity: 0.08; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--black); font-family: var(--font-mono); font-weight: 400; line-height: 1.5; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, p { margin: 0; } a { color: var(--red); text-decoration: none; } img, svg { display: block; max-width: 100%; } /* Visible keyboard focus everywhere */ :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; } /* Skip link for keyboard / screen-reader users */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.5rem 0.875rem; background: var(--black); color: var(--bg); } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* ---- Blazor loading + error UI ---- */ .loading-progress { position: fixed; display: block; inset: 0; margin: auto; width: 5rem; height: 5rem; } .loading-progress circle { fill: none; stroke: #eaeaea; stroke-width: 0.5rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--red); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: fixed; inset: 0; display: grid; place-content: center; font-family: var(--font-mono); color: var(--muted); } .loading-progress-text::after { content: var(--blazor-load-percentage-text, 'Loading'); } #blazor-error-ui { color: var(--black); background: #ffeaea; border-top: 2px solid var(--red); bottom: 0; box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1); display: none; left: 0; padding: 0.75rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ---- Entrance keyframes (global so every component can reference them) ---- */ @keyframes brush-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---- Paper-grain overlay ---- Fixed full-screen SVG fractal-noise, multiplied over the page so the white reads as printed paper and the red as ink. Decorative, non-interactive. */ .grain { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* ---- Dark / inverted variant ---- Driven by [data-theme] on (set by the inline script in index.html, which defaults to the OS preference and is flipped by the toggle button). */ :root[data-theme="dark"] { --bg: #0c0c0c; --black: #f4f4f4; --muted: #9a9a9a; --card-bg: #141414; --card-border: #262626; --card-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8); --ghost: rgba(244, 244, 244, 0.05); --grain-blend: screen; /* multiply vanishes on black */ --grain-opacity: 0.05; } :root[data-theme="dark"] #blazor-error-ui { background: #2a0d0d; } @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; } }