/* Loch Labs — global tokens, reset, base typography, and shared animation primitives. Component-specific styles live in scoped .razor.css next to their components. Edit those, not this file. */ /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* --- Design tokens --- */ :root { --cream: #ECECEC; --ink: #111111; --ink2: rgba(0, 0, 0, 0.62); --ink3: rgba(0, 0, 0, 0.42); --blue: #1A3F55; --blue-hover: #0F2D40; --blue-tint: rgba(26, 63, 85, 0.06); --serif: 'Lora', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif; --line: 0.5px solid rgba(0, 0, 0, 0.1); } /* --- Page shell --- */ html, body { background: var(--cream); color: var(--ink); font-family: var(--sans); } body { max-width: 780px; margin: 0 auto; padding: 0 2.5rem 6rem; } /* --- Base typography --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; outline: none; } a { color: inherit; text-decoration: none; } /* --- Color-scheme overrides (set on by JS or future picker) --- */ body.cream { --cream: #F4EFE4; --ink: #1a1a1a; } body.white { --cream: #FFFFFF; --ink: #111111; } body.cg1 { --cream: #F4F4F4; --ink: #111111; } body.cg2 { --cream: #F0F0F0; --ink: #111111; } body.cg3 { --cream: #ECECEC; --ink: #111111; } body.cg4 { --cream: #E7E7E7; --ink: #111111; } body.teal { --cream: #F2F3F5; --ink: #111111; --blue: #1A6575; --blue-hover: #0F4F5F; --blue-tint: rgba(26, 101, 117, 0.07); } /* --- Shared animation primitives --- */ @keyframes fu { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .fu { animation: fu 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } .d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.20s; } .d3 { animation-delay: 0.35s; } .d4 { animation-delay: 0.50s; } .d5 { animation-delay: 0.65s; } .d6 { animation-delay: 0.80s; } .d7 { animation-delay: 0.95s; } .d8 { animation-delay: 1.10s; } .d9 { animation-delay: 1.25s; } .d10 { animation-delay: 1.40s; } .d11 { animation-delay: 1.55s; } .d12 { animation-delay: 1.70s; } .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.in { opacity: 1; transform: none; } @keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Blazor framework styles (do not move into a component; needed before any component renders) --- */ #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto 0 auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--blue, #1b6ec2); 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: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }