/* ========================================================================== Со.Знание — design tokens ========================================================================== */ :root { --bg: #0a295f; --bg-deep: #082152; --text: #f4f2f5; --muted: #98aedf; --dim: #6482b8; --link: #a3bcf3; --border: rgba(140, 170, 235, 0.3); --line: rgba(140, 170, 235, 0.38); --accent: #079bff; --card-bg: rgba(20, 60, 150, 0.32); --tint: rgba(7, 155, 255, 0.1); --radius-card: 0.5rem; --radius-img: 0.625rem; --radius-pill: 62.4375rem; --container: 104rem; --gutter: 4.5rem; --heading-indent: 6.875rem; --font-display: "Canela Thin", "Times New Roman", serif; --font-body: "Neutral Face", "SZ Sans", "Helvetica Neue", Arial, sans-serif; /* The brand face is caps-only; running text that must stay readable in normal case uses this. */ --font-text: "SZ Sans", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif; --tracking: 0.02em; --section-space: 3rem; } /* One scale on every screen: below 1664 px wide the page is the plain 16 px design; from there up everything (type, spacing, images) grows in proportion to the window, so a 1920 or 2560 px screen shows the same picture as a 1664 px one, just larger. The container is 104 rem = the full width at that scale. */ html { font-size: 16px; } @media (min-width: 1664px) { html { font-size: clamp(16px, 0.9615vw, 34px); } } @media (max-width: 1024px) { :root { --gutter: 3rem; --section-space: 3rem; --heading-indent: 3.75rem; } } @media (max-width: 768px) { :root { --gutter: 1.75rem; --section-space: 2.75rem; --heading-indent: 0px; } } @media (max-width: 390px) { :root { --gutter: 1.25rem; --section-space: 2.5rem; } } .section--spacing-compact { --section-space: 1.5rem; } .section--spacing-spacious { --section-space: 7.5rem; } @media (max-width: 768px) { .section--spacing-compact { --section-space: 1.25rem; } .section--spacing-spacious { --section-space: 5.5rem; } } /* ========================================================================== Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; letter-spacing: var(--tracking); overflow-x: hidden; -webkit-font-smoothing: antialiased; /* Keeps the fixed cookie-settings button (rendered by so-znanie-core in wp_footer) from covering the footer's copyright/legal links when a page is shorter than the viewport. */ padding-bottom: calc(6rem + env(safe-area-inset-bottom)); } /* Front page doesn't need bottom padding since Contacts section contains the footer */ body.home { padding-bottom: 0 !important; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3 { letter-spacing: 0.005em; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p { margin: 0; } address { font-style: normal; } .skip-link { position: absolute; left: -624.9375rem; top: 0; z-index: 100; background: var(--accent); color: #03101f; padding: 0.75rem 1.25rem; border-radius: 0 0 0.5rem 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 0.1875rem; } .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .section-heading { display: flex; align-items: flex-start; padding-left: var(--heading-indent); } .section-heading__number { font-size: 0.75rem; line-height: 1; color: var(--dim); min-width: 1.25rem; padding-top: 0.375rem; } .section-heading__title { font-family: var(--font-display); font-weight: 100; font-size: clamp(2.125rem, 5.5vw, 4rem); line-height: 0.95; margin: 0; text-transform: uppercase; } .section-link { color: var(--link); font-size: 1.25rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; } .section-link:hover { opacity: 0.8; } .sz-arrow { display: block; flex-shrink: 0; } .section-link .sz-arrow { width: 1.375rem; height: 0.875rem; margin-left: 0.375rem; transition: transform 0.2s ease; } .section-link:hover .sz-arrow { transform: translateX(0.1875rem); } .arrow-btn { width: 3rem; height: 3rem; border: 1px solid rgba(190, 210, 255, 0.45); border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--text); font-size: 1.25rem; flex-shrink: 0; transition: border-color 0.2s ease, color 0.2s ease; } .arrow-btn:hover { border-color: var(--accent); color: var(--text); } .arrow-btn:disabled { opacity: 0.4; cursor: default; } .btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1.25rem 1.75rem; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 0.9375rem; color: var(--text); transition: border-color 0.2s ease, background 0.2s ease; } .btn:hover { border-color: var(--accent); background: rgba(7, 155, 255, 0.08); } /* ========================================================================== Reveal-on-scroll (guarded by prefers-reduced-motion) ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s ease, transform 0.7s ease; } .js .reveal.is-visible { opacity: 1; transform: none; } } /* ========================================================================== Header / navigation Desktop: logo, inline links, language label. <= 64rem: the same