/* ============================================= ENVISION — Base Typography & Global Styles Builds on variables.css and reset.css ============================================= */ /* ---- Google Fonts ---- */ /* Loaded via in HTML for non-blocking rendering. See index.html and gallery/index.html sections. */ /* ---- Body ---- */ body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-surface); } /* ---- Headings ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: inherit; } h1 { font-size: var(--text-hero); } h2 { font-size: var(--text-section); } h3 { font-size: var(--text-subsection); } h4 { font-size: var(--text-lg); } h5 { font-size: var(--text-base); } h6 { font-size: var(--text-sm); } /* ---- Paragraphs ---- */ p { margin-bottom: var(--space-4); line-height: var(--leading-relaxed); } p:last-child { margin-bottom: 0; } .text-large { font-size: var(--text-lg); } /* ---- Links ---- */ a { color: var(--color-gold); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-gold-light); } /* ---- Blockquote ---- */ blockquote { font-family: var(--font-accent); font-style: italic; font-size: var(--text-lg); border-left: 3px solid var(--color-gold); padding-left: var(--space-4); margin-block: var(--space-6); color: var(--color-text-secondary); } /* ---- Selection ---- */ ::selection { background-color: var(--color-gold); color: var(--color-ink); } /* ---- Focus Override ---- */ :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; } /* ---- Utility Classes ---- */ .text-accent { color: var(--color-gold); } .text-on-dark { color: var(--color-text-on-dark); } .text-secondary { color: var(--color-text-secondary); } .text-center { text-align: center; } .text-right { text-align: right; } .uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); } .font-accent { font-family: var(--font-accent); } .opacity-50 { opacity: 0.5; } .opacity-70 { opacity: 0.7; } /* Screen-reader only — visually hidden but accessible */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip-to-content link becomes visible on focus */ .visually-hidden:focus { position: fixed; top: var(--space-2); left: var(--space-2); width: auto; height: auto; padding: var(--space-3) var(--space-6); margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; background-color: var(--color-gold); color: var(--color-ink); font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); border-radius: var(--radius-sm); z-index: 9999; outline: 2px solid var(--color-ink); outline-offset: 2px; }