/* ========================================================================== Luxorium — Colors & Type -------------------------------------------------------------------------- The system is restrained. Two voices in type (editorial serif + humanist sans), a deep neutral palette, and ONE warm-metallic accent used rarely. ========================================================================== */ /* ---------- Webfonts ----------------------------------------------------- We rely on Google Fonts at runtime because the codebase ships no font files yet (placeholder only). All three families cover the locales we need (Latin, Cyrillic, Georgian via Noto). ------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Sans+Georgian:wght@300;400;500;600;700&family=Antonio:wght@300;400;500;600&display=swap'); :root { /* ---------- Color: Neutrals (the room) -------------------------------- */ --lux-ink: #0E0E0E; /* near-black, hero surfaces, type on light */ --lux-ink-soft: #1A1A1A; /* secondary dark surface */ --lux-graphite: #2B2B2B; /* dividers on dark, hover states */ --lux-stone-900: #3D3A36; /* warm dark brown-grey */ --lux-stone-700: #6B655D; /* muted earth */ --lux-stone-500: #948D82; /* mid neutral, captions */ --lux-stone-300: #C9C2B6; /* warm light, subtle borders */ --lux-stone-200: #E0DBD1; /* lifted backgrounds */ --lux-stone-100: #EFEAE0; /* page background, warm "limewash" */ --lux-canvas: #F7F3EB; /* tinted off-white, cards/sections */ --lux-paper: #FBF9F4; /* lightest off-white, modals */ --lux-pure: #FFFFFF; /* ---------- Color: Accent (used rarely) ------------------------------- Deep interior green — the "expensive green" you'd see on a panelled library wall or a Milanese drawing room. Calmer than emerald, deeper than sage. Brass aliases preserved for backwards compatibility. --------------------------------------------------------------------- */ --lux-verde-900: #1F2C26; /* deepest, near-ink */ --lux-verde-700: #2C4136; /* hover / pressed */ --lux-verde: #34503F; /* THE accent — primary CTAs, focus rings */ --lux-verde-soft: #6E8B78; /* muted sage for secondary surfaces */ --lux-verde-100: #E2E7DF; /* whisper accent for tinted bgs */ /* Aliases — older code referencing brass tokens still resolves */ --lux-brass-900: var(--lux-verde-900); --lux-brass-700: var(--lux-verde-700); --lux-brass: var(--lux-verde); --lux-brass-soft: var(--lux-verde-soft); --lux-brass-100: var(--lux-verde-100); /* ---------- Color: Italian flag (logo + heritage moments only) ------- */ --lux-flag-green: #1B7B3F; --lux-flag-red: #C8102E; /* ---------- Color: Semantic ------------------------------------------ */ --lux-success: #4A6E3F; --lux-warning: #B8935E; /* warm brass for warnings only */ --lux-error: #8B2A1F; /* desaturated red, never bright */ --lux-info: #3D3A36; /* ---------- Tokens: Foreground / Background pairs (light surface) --- */ --fg-1: var(--lux-ink); /* primary text */ --fg-2: var(--lux-stone-900); /* secondary text */ --fg-3: var(--lux-stone-700); /* tertiary / captions */ --fg-muted: var(--lux-stone-500); /* placeholders, meta */ --fg-accent: var(--lux-verde-700); /* accent text */ --fg-on-accent: var(--lux-paper); /* text on verde surface */ --fg-on-dark: var(--lux-stone-100); /* text on ink surface */ --bg-page: var(--lux-stone-100); --bg-paper: var(--lux-paper); --bg-canvas: var(--lux-canvas); --bg-raised: var(--lux-pure); --bg-inverse: var(--lux-ink); --bg-accent: var(--lux-verde); --bg-accent-soft: var(--lux-verde-100); --border-hair: rgba(14,14,14,0.08); /* almost invisible */ --border-soft: rgba(14,14,14,0.14); --border-strong: rgba(14,14,14,0.32); --border-accent: var(--lux-verde); --border-on-dark: rgba(255,255,255,0.12); /* ---------- Type: Families ------------------------------------------- */ --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --font-body: 'Noto Sans', 'Noto Sans Georgian', 'Helvetica Neue', Arial, sans-serif; --font-eyebrow: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* ---------- Type: Scale (fluid where it matters) --------------------- */ --text-xs: 0.6875rem; /* 11 — micro labels */ --text-sm: 0.8125rem; /* 13 — captions, meta */ --text-base: 1rem; /* 16 — body */ --text-md: 1.125rem; /* 18 — large body / lead */ --text-lg: 1.375rem; /* 22 — sub-headlines */ --text-xl: 1.75rem; /* 28 — H4 */ --text-2xl: 2.25rem; /* 36 — H3 */ --text-3xl: 3rem; /* 48 — H2 */ --text-4xl: 4rem; /* 64 — H1 */ --text-display: clamp(3.5rem, 7vw + 1rem, 8.5rem); /* hero serif */ --text-eyebrow: 0.6875rem; /* small caps eyebrow */ /* ---------- Type: Leading & tracking --------------------------------- */ --leading-tight: 1.04; /* display serif */ --leading-snug: 1.18; /* H1–H3 */ --leading-normal: 1.5; /* body */ --leading-loose: 1.7; /* long-form editorial */ --tracking-tight: -0.02em; /* display serif */ --tracking-snug: -0.005em; /* headlines */ --tracking-normal: 0; --tracking-wide: 0.06em; /* eyebrows */ --tracking-widest: 0.22em; /* small caps logo-style */ /* ---------- Spacing (8px base) --------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; /* default section padding */ --space-12: 200px; /* generous editorial breathing room */ /* ---------- Radii (almost square — restraint) ------------------------ */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; /* default for inputs, small cards */ --radius-lg: 10px; /* large cards (rare) */ --radius-pill: 999px; --radius-circle: 50%; /* ---------- Elevation: shadows are subtle and warm-toned ------------- */ --shadow-1: 0 1px 2px rgba(46, 38, 28, 0.04), 0 1px 1px rgba(46, 38, 28, 0.03); --shadow-2: 0 4px 12px rgba(46, 38, 28, 0.06), 0 1px 2px rgba(46, 38, 28, 0.04); --shadow-3: 0 12px 32px rgba(46, 38, 28, 0.08), 0 2px 6px rgba(46, 38, 28, 0.04); --shadow-lift: 0 24px 60px rgba(46, 38, 28, 0.14), 0 8px 18px rgba(46, 38, 28, 0.06); --shadow-inset-hair: inset 0 0 0 1px rgba(14,14,14,0.06); --shadow-focus: 0 0 0 2px var(--lux-paper), 0 0 0 4px var(--lux-verde); /* ---------- Motion (cinematic, slow-out) ----------------------------- */ --ease-out-cinema: cubic-bezier(0.2, 0.7, 0.1, 1); --ease-in-cinema: cubic-bezier(0.6, 0, 0.8, 0.4); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 520ms; --dur-cinema: 720ms; } /* ========================================================================== Semantic element styles — drop into a page and headings / body inherit the system without per-page tuning. ========================================================================== */ html, body { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2 { font-family: var(--font-display); font-weight: 400; color: var(--fg-1); margin: 0; text-wrap: balance; } h3, h4 { font-family: var(--font-body); font-weight: 500; color: var(--fg-1); margin: 0; text-wrap: balance; } h1 { font-size: var(--text-4xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); font-weight: 500; } h4 { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: 500; letter-spacing: -0.005em; } h5, h6 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); line-height: var(--leading-snug); margin: 0; } .lux-display { font-family: var(--font-display); font-weight: 300; font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; } .lux-display--italic { font-style: italic; font-weight: 300; } p { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-2); margin: 0 0 var(--space-4) 0; text-wrap: pretty; max-width: 64ch; } .lux-lead { font-family: var(--font-body); font-weight: 300; font-size: var(--text-md); line-height: var(--leading-loose); color: var(--fg-2); max-width: 56ch; } .lux-eyebrow { font-family: var(--font-eyebrow); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--fg-3); } .lux-eyebrow-mark { display: inline-flex; align-items: center; gap: 10px; } .lux-eyebrow-mark::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6; } .lux-caption { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-3); } .lux-meta { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg-muted); } a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-base) var(--ease-out-cinema), border-color var(--dur-base) var(--ease-out-cinema); } a:hover { color: var(--fg-accent); border-color: var(--fg-accent); } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-canvas); padding: 0.1em 0.35em; border-radius: var(--radius-xs); } ::selection { background: var(--lux-verde); color: var(--lux-paper); }