/* * Geotest.ru design tokens. * * Base layer = Casebook/gear-impulse variables.css, unchanged, so any * component copied from Casebook keeps working without edits. * The second block is additions specific to this marketing site * (typography scale, grid, and a few colors Casebook doesn't define). */ :root { /* ============ Casebook/gear-impulse base (unchanged) ============ */ /* Тени */ --shadow-1: 0px 0px 2px 0px rgba(0,0,0,.12), 0px 1px 2px 0px rgba(0,0,0,.14); --shadow-2: 0px 0px 2px 0px rgba(0,0,0,.12), 0px 2px 4px 0px rgba(0,0,0,.14); --shadow-3: 0px 0px 2px 0px rgba(0,0,0,.12), 0px 4px 8px 0px rgba(0,0,0,.14); --shadow-4: 0px 0px 2px 0px rgba(0,0,0,.12), 0px 8px 16px 0px rgba(0,0,0,.14); --shadow-5: 0px 0px 8px 0px rgba(0,0,0,.2), 0px 14px 28px 0px rgba(0,0,0,.24); /* Радиусы */ --radius-10: 10px; --radius-20: 20px; /* Серая палитра */ --color-grey-30: rgba(77,77,77,1); --color-grey-52: rgba(133,133,133,1); --color-grey-70: rgba(178,178,178,1); --color-grey-74: rgba(189,189,189,1); --color-grey-78: rgba(199,199,199,1); --color-grey-80: rgba(204,204,204,1); --color-grey-82: rgba(209,209,209,1); --color-grey-88: rgba(189,189,189,1); --color-grey-90: rgba(230,230,230,1); --color-grey-92: rgba(235,235,235,1); --color-grey-94: rgba(240,240,240,1); --color-grey-96: rgba(245,245,245,1); --color-grey-white: rgba(255,255,255,1); --color-text-black: rgba(33,33,33,1); --color-white-transparent-85: rgba(255,255,255,.85); --color-grey-90-transparent-85: rgba(230,230,230,.85); --color-grey-80-transparent-85: rgba(204,204,204,.85); /* Синяя палитра */ --color-blue-40: rgba(10,59,87,1); --color-blue-60: rgba(14,86,129,1); --color-blue-70: rgba(15,97,148,1); --color-blue-80: rgba(10,109,174,1); --color-blue-90: rgba(29,137,211,1); --color-blue-160: rgba(233,243,252,1); --color-orange-star: rgba(242,153,74,1); /* Семантические статусы */ --color-success-bg: #DCFCE7; --color-success-text: #15803D; --color-info-bg: #E9F3FC; --color-info-text: #0A6DAE; --color-white-bg: #FFFFFF; --color-white-text: #212121; --color-white-border: #D1D1D1; --color-neutral-bg: #F0F0F0; --color-neutral-text: #7A7A7A; --color-warning-bg: #FFEDD5; --color-warning-text: #C2410C; --color-attention-bg: #FEF9C3; --color-attention-text:#A16207; --color-danger-bg: #FEE2E2; --color-danger-text: #DC2626; --color-special-bg: #EDE9FE; --color-special-text: #7C3AED; /* Типографика (базовая) */ --main-font: 'Nunito Sans', sans-serif; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Алиасы */ --primary-color: var(--color-blue-80); --primary-hover-color: var(--color-blue-70); --primary-pressed-color: var(--color-blue-40); --primary-disabled-color: var(--color-grey-94); --background-color: #FFF; --background-hover-color: var(--color-grey-94); --background-pressed-color: var(--color-grey-90); --background-alt-color: #F8F8F8; --surface-color: #ffffff; --text-color: #212529; --text-color-light: #6c757d; --border-color: var(--color-grey-82); --error-color: #E43434; --success-color: #28a745; /* ============ Geotest.ru marketing-site additions ============ */ --radius-3: 3px; --color-grey-40: rgba(102,102,102,1); /* #666666 */ --color-grey-20: rgba(51,51,51,1); /* #333333 */ --color-grey-46: rgba(117,117,117,1); /* #757575 */ --color-blue-120: rgba(155,214,252,1); /* #9bd6fc */ --color-blue-tint-bg: rgba(245,248,250,1); /* #f5f8fa */ --color-status-stable-bg: rgba(114,162,121,.12); --color-status-stable-text: #30713a; --color-status-beta-bg: #fae2cc; --color-status-beta-text: #bd5f0c; --color-status-legacy-bg: #f0f0f0; --color-slate: #475569; --color-grey-96-transparent-80: rgba(245,245,245,.8); --color-card-border: var(--color-grey-90); --shadow-header: 0px 3px 15px 0px rgba(0,0,0,.02); --font-logo: 'Open Sans', sans-serif; --font-unbounded: 'Unbounded', sans-serif; --font-golos: 'Golos Text', sans-serif; /* Сетка страницы */ --container-max: 1520px; --container-margin-desktop: 200px; --container-margin-mobile: 16px; --header-height: 64px; --container-gutter: clamp(var(--container-margin-mobile), 5vw, var(--space-40)); --bp-mobile-max: 767px; --bp-tablet-max: 1199px; --container-margin-tablet: var(--space-24); --container-margin-laptop: var(--space-48); --hero-top-offset: calc(var(--header-height) + var(--space-24)); --space-section-gap: 140px; /* Шкала отступов */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-120: 120px; --space-pill-block: 6px; --space-pill-inline: 10px; /* Шкала заголовков/текста — десктоп */ --text-h1-desktop: var(--font-weight-bold) 40px/52px var(--main-font); --text-h2-desktop: var(--font-weight-bold) 32px/40px var(--main-font); --text-h3-desktop: var(--font-weight-bold) 28px/36px var(--main-font); --text-h4-desktop: var(--font-weight-bold) 24px/32px var(--main-font); --text-h5-desktop: var(--font-weight-bold) 20px/28px var(--main-font); --text-h6-desktop: var(--font-weight-bold) 16px/22px var(--main-font); --text-large-desktop: var(--font-weight-regular) 16px/22px var(--main-font); --text-medium-desktop: var(--font-weight-regular) 14px/20px var(--main-font); --text-medium-semibold-desktop: var(--font-weight-semibold) 14px/20px var(--main-font); --text-medium-bold-desktop: var(--font-weight-bold) 14px/20px var(--main-font); --text-small-desktop: var(--font-weight-regular) 12px/16px var(--main-font); --text-small-semibold-desktop: var(--font-weight-semibold) 12px/16px var(--main-font); --text-xs-desktop: var(--font-weight-regular) 10px/14px var(--main-font); /* Шкала заголовков/текста — мобайл */ --text-display1-mobile: var(--font-weight-bold) 40px/48px var(--main-font); --text-display2-mobile: var(--font-weight-bold) 36px/44px var(--main-font); --text-h1-mobile: var(--font-weight-bold) 28px/36px var(--main-font); --text-h2-mobile: var(--font-weight-bold) 24px/32px var(--main-font); --text-h3-mobile: var(--font-weight-bold) 22px/28px var(--main-font); --text-h4-mobile: var(--font-weight-bold) 20px/26px var(--main-font); --text-h5-mobile: var(--font-weight-bold) 18px/24px var(--main-font); --text-h6-mobile: var(--font-weight-semibold) 16px/22px var(--main-font); --text-h6-bold-mobile: var(--font-weight-extrabold) 16px/22px var(--main-font); --text-large-mobile: var(--font-weight-regular) 16px/24px var(--main-font); --text-medium-mobile: var(--font-weight-regular) 14px/20px var(--main-font); --text-medium-semibold-mobile: var(--font-weight-semibold) 14px/20px var(--main-font); --text-medium-bold-mobile: var(--font-weight-bold) 14px/20px var(--main-font); --text-small-mobile: var(--font-weight-regular) 12px/16px var(--main-font); --text-small-semibold-mobile: var(--font-weight-semibold) 12px/16px var(--main-font); --text-small-bold-mobile: var(--font-weight-extrabold) 12px/16px var(--main-font); --text-xs-mobile: var(--font-weight-regular) 10px/14px var(--main-font); --text-xs-semibold-mobile: var(--font-weight-semibold) 10px/14px var(--main-font); --text-display-desktop: var(--font-weight-bold) 48px/52px var(--main-font); }