/* ========================================================================== base.css — токени дизайн-системи, ресет, типографіка ========================================================================== */ @import url('../assets/fonts/fonts.css'); :root { /* --- Палітра ------------------------------------------------------------ */ --navy: #071b2d; --navy-800: #0a2338; --navy-700: #0f2f49; --navy-600: #16405f; --gold: #c9a23a; --gold-600: #ab8629; --gold-300: #e2c877; --gold-100: #f2e8cd; --graphite: #111111; --bg: #f3f0ea; /* середній тон плитки — фолбек, поки текстура вантажиться */ --white: #ffffff; --line: #e6e2da; /* Фон-плитка. Варіант перемикається атрибутом на : data-tile="square" — великий квадратний формат (за замовчуванням); data-tile="brick" — прямокутна плитка «під цеглу». Обидві текстури безшовні, повторюються без стиків. */ --bg-tile: url('../assets/img/bg-tile-square.webp'); --bg-tile-size: 800px 800px; --bg-tile-size-sm: 460px 460px; --text: #111111; --text-muted: #56606b; --text-on-navy: rgba(255, 255, 255, 0.74); /* --- Типографіка -------------------------------------------------------- */ --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --fs-hero: clamp(2.75rem, 1.2rem + 7vw, 6.5rem); --fs-h2: clamp(1.75rem, 1rem + 3.1vw, 3.25rem); --fs-h3: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem); --fs-lead: clamp(1rem, 0.94rem + 0.32vw, 1.1875rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-eyebrow: 0.75rem; /* --- Простір ------------------------------------------------------------ */ --container: 1280px; --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem); --section-y: clamp(4rem, 2rem + 8vw, 8.5rem); /* --- Інше --------------------------------------------------------------- */ --radius: 2px; --radius-lg: 4px; --header-h: 76px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.4s; --shadow-sm: 0 1px 2px rgba(7, 27, 45, 0.06); --shadow-md: 0 18px 40px -24px rgba(7, 27, 45, 0.35); --shadow-lg: 0 40px 80px -40px rgba(7, 27, 45, 0.45); } @media (max-width: 767px) { :root { --header-h: 64px; } } /* --- Ресет ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } html[data-tile='brick'] { --bg-tile: url('../assets/img/bg-tile-brick.webp'); --bg-tile-size: 440px 300px; --bg-tile-size-sm: 300px 205px; } body { background-color: var(--bg); background-image: var(--bg-tile); background-repeat: repeat; background-size: var(--bg-tile-size); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; } h3, h4 { font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } p { text-wrap: pretty; } ::selection { background: var(--gold); color: var(--navy); } /* --- Доступність ---------------------------------------------------------- */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%); z-index: 200; background: var(--navy); color: var(--white); padding: 0.75rem 1.25rem; font-size: var(--fs-sm); transition: transform 0.2s var(--ease); } .skip-link:focus { transform: translate(-50%, 0); } @media (max-width: 700px) { body { background-size: var(--bg-tile-size-sm); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }