/* ============================================================ MOLVERN LABS — Global Styles ============================================================ */ /* ── Font Loading ─────────────────────────────────────────── */ /* Fonts loaded via tags in HTML for non-blocking rendering. See: Space Grotesk, Inter (Google Fonts) + Geist (CDN) */ /* ── Body ─────────────────────────────────────────────────── */ body { font-family: var(--font-body); font-size: var(--text-body-md); line-height: var(--text-body-md-lh); color: var(--color-text-primary); background-color: var(--color-white); overflow-x: hidden; } html { scroll-behavior: smooth; } @media (pointer: coarse) { html { scroll-behavior: auto !important; } } /* ── Selection ────────────────────────────────────────────── */ ::selection { background-color: var(--color-blue); color: var(--color-white); } ::-moz-selection { background-color: var(--color-blue); color: var(--color-white); } /* ── Scrollbar (Webkit) ───────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-navy-deep); } ::-webkit-scrollbar-thumb { background: var(--color-gray-600); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-gray-500); } /* Firefox scrollbar */ html { scrollbar-width: thin; scrollbar-color: var(--color-gray-600) var(--color-navy-deep); } /* ── Links ────────────────────────────────────────────────── */ a { transition: color var(--duration-normal) var(--ease-out); } a:hover { color: var(--color-blue); } /* ── Focus Styles ─────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; border-radius: var(--radius-sm); } /* ── Container ────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } .container--narrow { max-width: var(--container-narrow); } .container--tight { max-width: var(--container-tight); } /* ── Section ──────────────────────────────────────────────── */ .section { padding-top: var(--space-section); padding-bottom: var(--space-section); } /* ── Typography Utilities ─────────────────────────────────── */ .text-display-xl { font-family: var(--font-headline); font-size: var(--text-display-xl); font-weight: var(--text-display-xl-weight); line-height: var(--text-display-xl-lh); letter-spacing: var(--text-display-xl-ls); } .text-display-lg { font-family: var(--font-headline); font-size: var(--text-display-lg); font-weight: var(--text-display-lg-weight); line-height: var(--text-display-lg-lh); letter-spacing: var(--text-display-lg-ls); } .text-display-md { font-family: var(--font-headline); font-size: var(--text-display-md); font-weight: var(--text-display-md-weight); line-height: var(--text-display-md-lh); letter-spacing: var(--text-display-md-ls); } .text-heading-lg { font-family: var(--font-headline); font-size: var(--text-heading-lg); font-weight: var(--text-heading-lg-weight); line-height: var(--text-heading-lg-lh); letter-spacing: var(--text-heading-lg-ls); } .text-heading-md { font-family: var(--font-headline); font-size: var(--text-heading-md); font-weight: var(--text-heading-md-weight); line-height: var(--text-heading-md-lh); letter-spacing: var(--text-heading-md-ls); } .text-heading-sm { font-family: var(--font-headline); font-size: var(--text-heading-sm); font-weight: var(--text-heading-sm-weight); line-height: var(--text-heading-sm-lh); letter-spacing: var(--text-heading-sm-ls); } .text-body-lg { font-size: var(--text-body-lg); line-height: var(--text-body-lg-lh); } .text-body-md { font-size: var(--text-body-md); line-height: var(--text-body-md-lh); } .text-body-sm { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); } .text-label { font-family: var(--font-label); font-size: var(--text-label-md); font-weight: var(--text-label-md-weight); line-height: var(--text-label-md-lh); letter-spacing: var(--text-label-md-ls); text-transform: uppercase; } /* ── Color Utilities ──────────────────────────────────────── */ .text-white { color: var(--color-white) !important; } .text-muted { color: var(--color-gray-400); } .text-secondary { color: var(--color-gray-500); } .text-blue { color: var(--color-blue); } .bg-navy { background-color: var(--color-navy); } .bg-navy-deep { background-color: var(--color-navy-deep); } .bg-navy-light { background-color: var(--color-navy-light); } .bg-white { background-color: var(--color-white); } .bg-surface { background-color: var(--color-surface); } /* ── Screen Reader Only ───────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }