/* ========================================================================== Atma Club — design tokens, reset, typography ========================================================================== */ /* Golos Text loaded via Google Fonts in each page's . Evolventa (headings) is the brand's existing custom font — self-hosted here to match. */ @font-face { font-family: 'Evolventa'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Evolventa-Regular.woff') format('woff'); } @font-face { font-family: 'Evolventa'; font-style: oblique; font-weight: 400; font-display: swap; src: url('../fonts/Evolventa-Oblique.woff') format('woff'); } @font-face { font-family: 'Evolventa'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Evolventa-Bold.woff') format('woff'); } @font-face { font-family: 'Evolventa'; font-style: oblique; font-weight: 700; font-display: swap; src: url('../fonts/Evolventa-BoldOblique.woff') format('woff'); } :root { /* Color */ --color-marigold: #E77611; --color-horizon-rose: #FFB675; --color-terracotta-rose: #D96A4F; --color-sand: #F5EDE2; --color-mist: #FAF6F0; --color-ember: #2A211C; --color-ember-60: rgba(42, 33, 28, 0.6); --color-ember-35: rgba(42, 33, 28, 0.35); --color-ember-12: rgba(42, 33, 28, 0.12); --color-white: #FFFFFF; /* Gradients */ --gradient-dawn: linear-gradient(89deg, var(--color-marigold) 0%, var(--color-horizon-rose) 100%); --gradient-veil: linear-gradient(100deg, rgba(42, 33, 28, 0.68) 0%, rgba(42, 33, 28, 0.38) 38%, rgba(42, 33, 28, 0) 65%), linear-gradient(180deg, rgba(42, 33, 28, 0.1) 0%, rgba(42, 33, 28, 0.4) 45%, rgba(42, 33, 28, 0.88) 100%); /* Type */ --font-display: 'Evolventa', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-display-xl: clamp(2.5rem, 4.5vw + 1rem, 4.5rem); --fs-display-lg: clamp(2rem, 3vw + 1rem, 3rem); --fs-display-md: clamp(1.5rem, 2vw + 0.8rem, 2.25rem); --fs-body-lg: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); --fs-body: 1.0625rem; --fs-body-sm: 0.9375rem; --fs-caption: 0.8125rem; --lh-tight: 1.1; --lh-snug: 1.35; --lh-normal: 1.6; /* Spacing — breath-paced rhythm */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; --section-pad-y: clamp(3.5rem, 8vw, 9rem); --section-pad-x: clamp(1.25rem, 5vw, 3rem); /* Layout */ --container-max: 1180px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; /* Shadow — warm, not grey */ --shadow-soft: 0 12px 32px -8px rgba(42, 33, 28, 0.18); --shadow-lift: 0 20px 48px -12px rgba(42, 33, 28, 0.28); /* Motion */ --ease-breath: cubic-bezier(0.45, 0, 0.55, 1); --duration-breath: 4s; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-ember); background: var(--color-mist); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); margin: 0; color: var(--color-ember); } h1 { font-size: var(--fs-display-xl); } h2 { font-size: var(--fs-display-lg); } h3 { font-size: var(--fs-display-md); } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } /* Visible keyboard focus */ :focus-visible { outline: 2px solid var(--color-marigold); outline-offset: 3px; border-radius: 4px; } .eyebrow { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-terracotta-rose); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }