/* ============================================================ Рационарий — marketing landing Rebuilt on the shared design system (app + panel + landing). Static HTML/CSS, no framework. Fonts are self-hosted (no CDN, GDPR-clean); Material Symbols ship as an inline SVG sprite. ============================================================ */ /* ---- Self-hosted fonts (variable) --------------------------------------- */ @font-face { font-family: 'Newsreader'; src: url('/fonts/Newsreader.ttf') format('truetype-variations'); font-weight: 300 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesque'; src: url('/fonts/HankenGrotesk.ttf') format('truetype-variations'); font-weight: 300 800; font-style: normal; font-display: swap; } /* ============================================================ Design tokens (light) — mirror of tokens/*.css ============================================================ */ :root { /* Sage brand scale */ --sage-900: #2E3D28; --sage-800: #3C5133; --sage-700: #4C6841; --sage-600: #5F7A54; --sage-500: #7C9A72; --sage-200: #DDE7D8; --sage-100: #EDF2EA; --sage-50: #F4F7F1; /* Warm neutrals */ --paper: #F7F4EC; --paper-dim: #F0ECE0; --surface: #FFFFFF; --line: #E7E2D5; --line-strong: #D8D2C2; --ink-900: #23291F; --ink-700: #4A5442; --ink-500: #727C68; --ink-300: #9AA290; /* Accents */ --honey-600: #B67A1E; --status-ok-bg: #E7F0E4; --status-ok-border: #BBD3B2; --status-ok-text: #2C5A38; --status-ok-solid: #3E7D4F; /* Semantic aliases */ --color-bg: var(--paper); --color-bg-sunken: var(--paper-dim); --color-surface: var(--surface); --color-text: var(--ink-900); --color-text-secondary: var(--ink-700); --color-text-muted: var(--ink-500); --color-border: var(--line); --color-divider: var(--line); --color-primary: var(--sage-600); --color-primary-hover: var(--sage-700); --color-primary-tint: var(--sage-100); --color-on-primary: #FFFFFF; --color-link: var(--sage-700); --color-link-hover: var(--sage-800); --color-focus-ring: color-mix(in srgb, var(--sage-600) 45%, transparent); /* Typography */ --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-sans: 'Hanken Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --tracking-eyebrow: 0.14em; /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* Shadows (warm, soft) */ --shadow-sm: 0 1px 3px rgba(35,41,31,0.06), 0 1px 2px rgba(35,41,31,0.04); --shadow-md: 0 2px 8px rgba(35,41,31,0.07), 0 1px 3px rgba(35,41,31,0.05); --shadow-lg: 0 8px 24px rgba(35,41,31,0.10), 0 2px 6px rgba(35,41,31,0.05); --wrap: 1080px; } /* ============================================================ Dark theme — set data-theme="dark" on ============================================================ */ [data-theme="dark"] { --paper: #14180F; --paper-dim: #1B2016; --surface: #20261B; --line: #333B2B; --line-strong: #45503A; --ink-900: #ECEFE4; --ink-700: #C3CBB6; --ink-500: #8F9880; --ink-300: #6C7560; --sage-100: #26311F; --sage-200: #2B3723; --status-ok-bg: #1E2B1B; --status-ok-border: #3B5232; --status-ok-text: #A9CF9F; --status-ok-solid: #6FA877; --color-primary: #8FAE83; --color-primary-hover: #A2BE96; --color-primary-tint: #26311F; --color-on-primary: #14180F; --color-link: #A2BE96; --color-link-hover: #B7CFAD; --color-focus-ring: color-mix(in srgb, #8FAE83 45%, transparent); --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 2px 10px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.35); --shadow-lg: 0 10px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.40); } /* ============================================================ Base ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } a { color: var(--color-link); text-decoration: none; } a:hover { color: var(--color-link-hover); } img { max-width: 100%; } ::selection { background: var(--sage-200); } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); border-radius: 4px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } .muted { color: var(--color-text-muted); } h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); } .eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 11px; font-weight: 600; color: var(--color-primary); margin: 0 0 12px; } /* Icons (inline SVG sprite) */ .ic { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.15em; flex: none; } /* ============================================================ Buttons ============================================================ */ .btn { --btn-fs: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: var(--btn-fs); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; padding: 12px 18px; border-radius: var(--radius-pill); border: 1px solid transparent; transition: filter .14s, transform .14s, background .14s; } .btn:active { transform: scale(.975); } .btn .ic { font-size: 1.2em; } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover { color: var(--color-on-primary); filter: brightness(.94); } .btn-outlined { background: transparent; color: var(--color-primary); border-color: var(--color-border); } .btn-outlined:hover { background: var(--color-primary-tint); color: var(--color-primary); } .btn-sm { --btn-fs: 13px; padding: 9px 14px; } .btn-lg { --btn-fs: 16px; padding: 14px 22px; } .btn-block { width: 100%; } .btn[disabled], .btn.is-disabled { opacity: .6; cursor: default; pointer-events: none; } /* ============================================================ Header / nav (sticky, translucent) ============================================================ */ .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); } .brand:hover { color: var(--color-text); } .brand-tile { width: 32px; height: 32px; border-radius: 9px; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .brand-tile.small { width: 26px; height: 26px; border-radius: 7px; font-size: 16px; } .brand-name { font-family: var(--font-serif); font-weight: 500; font-size: 19px; } .nav-links { display: flex; gap: 24px; align-items: center; } .nav-links a { color: var(--color-text-secondary); font-size: 15px; } .nav-links a:hover { color: var(--color-primary); } .topbar-right { display: flex; align-items: center; gap: 14px; } .icon-btn { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; display: inline-flex; padding: 6px; border-radius: var(--radius-sm); font-size: 20px; } .icon-btn:hover { color: var(--color-text); background: var(--color-primary-tint); } .menu-btn { display: none; } /* Mobile dropdown panel */ .mobile-nav { display: none; border-top: 1px solid var(--color-border); background: var(--color-bg); } .mobile-nav a { display: block; padding: 14px 20px; color: var(--color-text-secondary); font-size: 16px; border-bottom: 1px solid var(--color-divider); } .topbar.open .mobile-nav { display: block; } /* ============================================================ Hero ============================================================ */ .hero { padding: 64px 0 48px; } .hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: 48px; align-items: center; } .hero h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.08; margin: 0 0 20px; max-width: 16ch; } .lede { font-size: 18px; line-height: 1.55; color: var(--color-text-secondary); max-width: 54ch; margin: 0 0 28px; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .disclaimer-inline { margin-top: 24px; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); max-width: 64ch; } .hero-visual { display: flex; justify-content: center; } /* Phone mock */ .phone { width: 288px; border-radius: 30px; background: var(--color-bg); box-shadow: var(--shadow-lg), 0 0 0 7px #1B2116, 0 0 0 8px #2E3D28; overflow: hidden; } .phone-notch { height: 34px; } .phone-body { padding: 0 16px 18px; } .phone-body .eyebrow { margin: 0 0 6px; } .phone-hello { font-size: 24px; margin: 0 0 16px; } .mini-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .mini-stats { padding: 14px; margin-bottom: 12px; display: flex; gap: 18px; } .mini-stats .cap { font-size: 12px; color: var(--color-text-muted); } .mini-stats .num { font-family: var(--font-serif); font-weight: 500; font-size: 26px; } .mini-stats .num.ok { color: var(--color-primary); } .mini-divider { width: 1px; background: var(--color-divider); } .mini-list { overflow: hidden; } .mini-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .mini-row + .mini-row { border-top: 1px solid var(--color-divider); } .mini-row .lead { color: var(--color-primary); font-size: 18px; } .mini-row .title { flex: 1; font-size: 14px; font-weight: 500; } .chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--status-ok-bg); border: 1px solid var(--status-ok-border); color: var(--status-ok-text); } /* ============================================================ Section scaffolding ============================================================ */ .section { padding: 56px 0; } .section-alt { background: var(--color-bg-sunken); } .section h2 { font-size: clamp(26px, 3.4vw, 32px); margin: 0 0 28px; } /* Features */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .feature-icon { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; background: var(--color-primary-tint); color: var(--color-primary); align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px; } .card h3 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; margin: 0 0 8px; } .card p { color: var(--color-text-secondary); margin: 0; font-size: 15px; line-height: 1.55; } /* How it works */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .step-num { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--color-primary); color: var(--color-primary); align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 500; font-size: 18px; margin-bottom: 14px; } .step h3 { font-family: var(--font-sans); font-weight: 600; font-size: 16px; margin: 0 0 6px; } .step p { color: var(--color-text-secondary); margin: 0; line-height: 1.55; } /* ============================================================ Specialists + download ============================================================ */ .spec-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 36px; align-items: start; } .spec-lead { font-size: 18px; line-height: 1.55; color: var(--color-text-secondary); max-width: 56ch; margin: 0 0 22px; } .spec-lead + .btn { margin-bottom: 26px; } /* Roster preview */ .roster { overflow: hidden; padding: 0; } .roster-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); } .roster-tile { width: 22px; height: 22px; border-radius: 6px; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .roster-head span:last-child { font-size: 13px; font-weight: 600; } .roster-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; } .roster-row + .roster-row { border-top: 1px solid var(--color-divider); } .roster-row .pt { flex: 1; font-size: 13px; font-weight: 500; color: var(--color-primary); } .roster-row .phase { font-size: 12px; color: var(--color-text-muted); min-width: 92px; } .adherence { display: inline-flex; align-items: center; gap: 6px; } .bar { width: 40px; height: 6px; border-radius: 999px; background: var(--color-bg-sunken); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--status-ok-solid); } .bar.mid > span { background: var(--honey-600); } .adherence .pct { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; min-width: 30px; text-align: right; } /* Download card */ .download h3 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; margin: 0 0 6px; } .download .stores { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .download .contact { font-size: 13px; line-height: 1.5; color: var(--color-text-muted); margin: 16px 0 0; } /* ============================================================ Footer ============================================================ */ .footer { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: 32px 0; } .footer-inner { display: flex; flex-direction: column; gap: 14px; } .footer-brand { display: inline-flex; align-items: center; gap: 8px; } .footer-links { display: flex; gap: 18px; flex-wrap: wrap; } .footer-links a, .linklike { color: var(--color-text-secondary); font-size: 13px; } .footer-links a:hover, .linklike:hover { color: var(--color-primary); } .linklike { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-sans); } .copyright { font-size: 13px; color: var(--color-text-muted); margin: 0; } /* ============================================================ Cookie banner ============================================================ */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .cookie-inner { max-width: var(--wrap); margin: 0 auto; padding: 16px 18px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .cookie-inner p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); max-width: 66ch; } .cookie-actions { display: flex; gap: 10px; } /* ============================================================ Legal pages (privacy / cookies) ============================================================ */ .legal { max-width: 760px; margin: 0 auto; padding: 40px 20px 64px; } .legal .back { display: inline-block; font-size: 14px; margin-bottom: 20px; } .legal h1 { font-size: clamp(28px, 4vw, 36px); margin: 0 0 6px; } .legal h2 { font-size: 20px; margin: 32px 0 10px; } .legal p, .legal li { color: var(--color-text-secondary); line-height: 1.6; } .legal .updated { color: var(--color-text-muted); font-size: 14px; margin: 0 0 24px; } .legal ul { padding-left: 20px; } .legal li { margin-bottom: 8px; } .legal strong { color: var(--color-text); } .legal table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 14px; } .legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--color-border); color: var(--color-text-secondary); } .legal th { background: var(--color-bg-sunken); color: var(--color-text); font-weight: 600; } .legal .placeholder { background: color-mix(in srgb, var(--honey-600) 14%, transparent); color: var(--color-text); border-radius: 4px; padding: 0 4px; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; } .spec-grid { grid-template-columns: 1fr; } .nav-links { display: none; } .menu-btn { display: inline-flex; } /* The "Скачать" CTA lives in the dropdown menu on mobile — avoid a duplicated, overflowing button in the bar. */ .topbar-right > .btn { display: none; } } @media (max-width: 420px) { .brand-name { font-size: 17px; } .hero .cta-row .btn { flex: 1 1 auto; } }