/* Батыр кілем жуу — shared styles (non-Tailwind-expressible bits) */ :root { --color-primary: #059669; --color-primary-dark: #047857; --color-primary-light: #34d399; --color-secondary: #10b981; --color-accent: #d97706; --color-accent-dark: #b45309; --color-bg: #f5faf6; --color-surface: #ffffff; --color-fg: #16241c; --color-muted-fg: #5b6b62; --color-border: #dce8df; --color-destructive: #dc2626; --color-whatsapp: #25d366; } 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 { font-family: 'Inter', system-ui, sans-serif; background-color: var(--color-bg); color: var(--color-fg); } .font-heading { font-family: 'Manrope', 'Inter', system-ui, sans-serif; } /* Bilingual content toggling: default document language is Russian. Kazakh strings live in [data-lang="kk"] and are hidden until . */ [data-lang] { display: inline; } :root html:not([data-lang='kk']) [data-lang='kk'], html:not([data-lang='kk']) [data-lang='kk'] { display: none !important; } html[data-lang='kk'] [data-lang='ru'] { display: none !important; } span[data-lang], div[data-lang], p[data-lang] { display: inherit; } html:not([data-lang='kk']) span[data-lang='kk'], html:not([data-lang='kk']) div[data-lang='kk'], html:not([data-lang='kk']) p[data-lang='kk'] { display: none !important; } html[data-lang='kk'] span[data-lang='ru'], html[data-lang='kk'] div[data-lang='ru'], html[data-lang='kk'] p[data-lang='ru'] { display: none !important; } /* Focus visibility (accessibility §1) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--color-primary-dark); outline-offset: 2px; border-radius: 4px; } /* Touch feedback without layout shift (perf/interaction rules) */ .tap-feedback { transition: background-color 180ms ease, opacity 180ms ease, box-shadow 180ms ease; touch-action: manipulation; } .tap-feedback:active { opacity: 0.85; } .press-scale { transition: transform 150ms ease, box-shadow 150ms ease; touch-action: manipulation; } .press-scale:active { transform: scale(0.97); } /* Fade-up reveal on scroll — subtle, respects reduced motion via block above */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease-out, transform 500ms ease-out; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Safe-area aware floating action button */ .fab-safe { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); right: calc(1.25rem + env(safe-area-inset-right, 0px)); } /* Sticky mobile CTA bar safe-area padding */ .sticky-cta-safe { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); } /* Prevent iOS auto-zoom on inputs (readable-font-size rule: 16px min) */ input, select, textarea { font-size: 16px; } .text-balance { text-wrap: balance; } /* Soft edge shadow for hero text over the background video — improves perceived legibility at glyph edges regardless of the underlying video frame's brightness. */ .hero-text-shadow { text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); }