/* ============================================================================ dlobrai.co — shared design kit ---------------------------------------------------------------------------- The house style for the dlobrai.co family (home, photos, music). Extracted from the photos site so every site reads as one family. Contains the domain-agnostic layer only: design tokens, reset/base, and the header + theme-toggle shell. Page-specific layout lives in each site's own CSS. Single source of truth: kit/theme.css in the dlobrai.co monorepo. Each site vendors/serves a copy; keep them in sync from here. ============================================================================ */ /* ── Design Tokens ── The palette is theme-driven. The default `:root` set is the dark theme. Light values live in the two blocks below: one applied when the OS asks for a light scheme (and the user hasn't pinned a theme), one applied when the user explicitly picks light via the toggle (`data-theme="light"`). A `data-theme="dark"` on pins dark even under an OS light scheme. */ :root { color-scheme: dark; --bg: #0b0b0c; --bg-soft: #0f0f11; --surface: #141417; --surface-2: #1a1a1e; --border: #232328; --border-soft: #1a1a1e; --text: #ececed; --text-strong: #ffffff; --text-dim: #9a9aa2; --text-faint: #66666e; --accent: #d8a657; --accent-bright: #e9bd7a; --accent-soft: rgba(216, 166, 87, 0.14); --input-bg: #111111; --input-border: #2a2a2a; --input-border-focus: #444444; --scrollbar-thumb: #2a2a30; --scrollbar-thumb-hover: #3a3a42; --btn-primary-bg: #e8e8e8; --btn-primary-bg-hover: #ffffff; --btn-primary-text: #0a0a0a; --success: #7cb3a3; --success-bright: #a0d8c8; --danger: #e06c75; --header-bg: rgba(11, 11, 12, 0.72); --header-fade-top: rgba(8, 8, 9, 0.55); --radius: 14px; --radius-sm: 10px; --header-h: 66px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --shadow: 0 8px 30px rgba(0, 0, 0, 0.45); } /* Light palette — shared by the OS-light fallback and the explicit toggle. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f6f6f4; --bg-soft: #fbfbf9; --surface: #ffffff; --surface-2: #f0f0ec; --border: #e3e3dd; --border-soft: #ebebe6; --text: #1c1c20; --text-strong: #0a0a0c; --text-dim: #5c5c64; --text-faint: #8c8c94; --accent: #b97e26; --accent-bright: #a86f1c; --accent-soft: rgba(185, 126, 38, 0.12); --input-bg: #ffffff; --input-border: #d9d9d2; --input-border-focus: #b6b6ad; --scrollbar-thumb: #d0d0c9; --scrollbar-thumb-hover: #bcbcb4; --btn-primary-bg: #1c1c20; --btn-primary-bg-hover: #000000; --btn-primary-text: #ffffff; --success: #2f8a73; --success-bright: #1f6d59; --danger: #c4434f; --header-bg: rgba(250, 250, 248, 0.82); --header-fade-top: rgba(255, 255, 255, 0.72); --shadow: 0 8px 30px rgba(0, 0, 0, 0.10); } } :root[data-theme="light"] { color-scheme: light; --bg: #f6f6f4; --bg-soft: #fbfbf9; --surface: #ffffff; --surface-2: #f0f0ec; --border: #e3e3dd; --border-soft: #ebebe6; --text: #1c1c20; --text-strong: #0a0a0c; --text-dim: #5c5c64; --text-faint: #8c8c94; --accent: #b97e26; --accent-bright: #a86f1c; --accent-soft: rgba(185, 126, 38, 0.12); --input-bg: #ffffff; --input-border: #d9d9d2; --input-border-focus: #b6b6ad; --scrollbar-thumb: #d0d0c9; --scrollbar-thumb-hover: #bcbcb4; --btn-primary-bg: #1c1c20; --btn-primary-bg-hover: #000000; --btn-primary-text: #ffffff; --success: #2f8a73; --success-bright: #1f6d59; --danger: #c4434f; --header-bg: rgba(250, 250, 248, 0.82); --header-fade-top: rgba(255, 255, 255, 0.72); --shadow: 0 8px 30px rgba(0, 0, 0, 0.10); } /* ── Reset & Base ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--bg); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } body { font-family: var(--font-sans); background: radial-gradient(1200px 600px at 50% -200px, rgba(216,166,87,0.05), transparent 70%), var(--bg); background-attachment: fixed; color: var(--text); line-height: 1.6; min-height: 100vh; letter-spacing: -0.011em; } a { color: var(--text); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--text-strong); } ::selection { background: var(--accent-soft); color: var(--text-strong); } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea { font-family: inherit; font-size: inherit; } /* ── Site Header ── */ /* Floats over the page; idles translucent, solidifies on hover/focus. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: linear-gradient(to bottom, var(--header-fade-top), transparent); transition: background 0.25s ease, backdrop-filter 0.25s ease; } .site-header::after { /* invisible hover catch-zone so the bar wakes up near the top edge */ content: ''; position: absolute; inset: 0 0 -24px 0; pointer-events: none; } .site-header:hover, .site-header:focus-within { background: var(--header-bg); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); } /* Header controls idle dim, brighten when the bar is active. */ .site-header .site-logo, .site-header nav a { opacity: 0.65; transition: opacity 0.2s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .site-header:hover .site-logo, .site-header:hover nav a, .site-header:focus-within .site-logo, .site-header:focus-within nav a { opacity: 1; } .site-logo { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--text-strong); border-radius: 10px; transition: opacity 0.15s ease; } .site-logo svg { width: 23px; height: 23px; } .site-logo:hover { opacity: 0.8; } .site-header nav { display: flex; align-items: center; gap: 6px; } .site-header nav a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; color: var(--text-dim); border: 1px solid transparent; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .site-header nav a svg { width: 19px; height: 19px; } .site-header nav a:hover { color: var(--text-strong); background: var(--surface); border-color: var(--border); } /* ── Theme toggle — styled like a nav icon button. ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; color: var(--text-dim); border: 1px solid transparent; background: none; cursor: pointer; opacity: 0.65; transition: opacity 0.2s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .site-header:hover .theme-toggle, .site-header:focus-within .theme-toggle { opacity: 1; } .theme-toggle:hover { color: var(--text-strong); background: var(--surface); border-color: var(--border); } .theme-toggle svg { width: 19px; height: 19px; } @media (hover: none) { .theme-toggle { opacity: 1; } } /* Show the icon for the theme you'd switch TO: moon in light, sun in dark. Default (dark) shows the sun; light shows the moon. */ .theme-toggle .theme-icon-moon { display: none; } .theme-toggle .theme-icon-sun { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle .theme-icon-sun { display: none; } :root:not([data-theme="dark"]) .theme-toggle .theme-icon-moon { display: block; } } :root[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } /* ── Masthead ── The family's page masthead: a Fraunces wordmark over a muted tagline. Shared by every site so the front matter reads the same everywhere. */ .masthead { margin-bottom: clamp(2.5rem, 7vw, 4rem); } .wordmark { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; font-size: clamp(2.9rem, 11vw, 4.75rem); line-height: 0.98; letter-spacing: -0.025em; color: var(--text-strong); } .tagline { margin-top: 1.1rem; max-width: 34ch; color: var(--text-dim); font-size: 1.05rem; line-height: 1.5; } /* ── Screen-reader-only text ── For headings the visual design omits but assistive tech should still get. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Focus visibility (keyboard) ── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }