/* Base / Reset / Typography */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Poppins:wght@300;400;500;600&display=swap'); /* Modern CSS reset (trimmed) */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { height: 100%; width: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--color-text-medium); background: var(--color-bg-white); line-height: var(--leading-relaxed); min-height: 100vh; overflow-x: hidden; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } img, svg, video, canvas { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; } a { color: inherit; text-decoration: none; } ul, ol { padding-left: 1.25rem; } /* Accessibility */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; } [hidden] { display: none !important; } .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; } /* Container */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } @media (min-width: 768px) { .container { padding-inline: var(--container-padding-md); } } @media (min-width: 1024px) { .container { padding-inline: var(--container-padding-lg); } } /* Typography utilities */ .headline-hero { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3rem); font-weight: var(--font-semibold); line-height: var(--leading-tight); color: var(--color-text-dark); letter-spacing: var(--tracking-tight); } .headline-hero strong { font-weight: var(--font-bold); } .headline-section { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: var(--color-text-dark); } .headline-section--light { color: var(--color-text-light); } .body-text { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-medium); } .section-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-medium); border: 1px solid var(--color-border-accent); border-radius: var(--radius-full); padding: 4px 16px; display: inline-block; margin-bottom: var(--space-4); } .section-label--light { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.3); } /* Sections spacing */ section { padding-block: var(--section-padding-y-mobile); } @media (min-width: 1024px) { section { padding-block: var(--section-padding-y-desktop); } } /* Reveal on scroll Default: visible when JS isn't available (graceful fallback). When the page adds the `animate-reveal` class on , elements will animate in. */ .reveal { opacity: 1; transform: none; } .animate-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--transition-enter), transform var(--transition-enter); } .animate-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); } .animate-reveal .reveal:nth-child(2) { transition-delay: .1s; } .animate-reveal .reveal:nth-child(3) { transition-delay: .2s; } .animate-reveal .reveal:nth-child(4) { transition-delay: .3s; } /* Scroll indicator */ @keyframes bounce-down { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} } .scroll-indicator { animation: bounce-down 2s ease-in-out infinite; } /* Utilities */ .text-center{ text-align:center; } .mt-4{ margin-top: var(--space-4); } .mt-6{ margin-top: var(--space-6); } .mb-6{ margin-bottom: var(--space-6); } .mb-8{ margin-bottom: var(--space-8); } .visually-muted{ color: rgba(0,0,0,.6); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }