/* Self-hosted fonts (latin subset). Regenerate with scripts if weights change. */ @font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/cormorant-300.woff2') format('woff2'); } @font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cormorant-400.woff2') format('woff2'); } @font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cormorant-600.woff2') format('woff2'); } @font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/cormorant-700.woff2') format('woff2'); } @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/quicksand-400.woff2') format('woff2'); } @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/quicksand-500.woff2') format('woff2'); } @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/quicksand-600.woff2') format('woff2'); } @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/quicksand-700.woff2') format('woff2'); } /* * Global theme + base styles for ForAllTi.me. * * Linked into every page's (see lib/head.ts -> SHARED_HEAD). * Only theme-dependent values live here as CSS custom properties: because * custom properties inherit across shadow-DOM boundaries, every Lit component * reads these `var(--*)` values from its own shadow root. Dark mode swaps them * by toggling `.dark` on (see ui/theme.ts). * * Theme-independent colors (buttons, the fun-text gradient, links, the sleep * cycle rings) are defined directly inside each component's `static styles`. */ :root { color-scheme: light; /* Page */ --bg: #ffffff; --fg: #000000; /* Content card */ --card-bg: #f1f5f9; /* slate-100 */ --card-border: #000000; /* Sidebar overlay (when the menu is open) */ --sidebar-bg: #94a3b8; /* slate-400 */ /* Selects */ --select-bg: #f3f4f6; /* gray-100 */ --select-border: #d1d5db; /* gray-300 */ --select-fg: #111827; /* gray-900 */ /* Display + UI fonts */ --font-serif: 'Cormorant', -apple-system, serif; --font-sans: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; } html.dark { color-scheme: dark; --bg: #0f172a; /* slate-900 */ --fg: #ffffff; --card-bg: #1e293b; /* slate-800 */ --card-border: #475569; /* slate-600 */ --sidebar-bg: #334155; /* slate-700 */ --select-bg: #4b5563; /* gray-600 */ --select-border: #6b7280; /* gray-500 */ --select-fg: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 300; font-style: normal; background: var(--bg); color: var(--fg); min-height: 100vh; transition: background-color 0.2s ease, color 0.2s ease; } a { color: inherit; text-decoration: none; } /* The router outlet is a custom element (defaults to inline); make it a full-width block so pages constrain to the viewport. */ litro-outlet { display: block; width: 100%; } html { font-size: 16px; } @media (max-width: 319px) { html { font-size: 12px; } } @media (min-width: 1280px) { html { font-size: 20px; } }