/* ========================================================= LIFRANC — GLOBAL DESIGN SYSTEM ========================================================= FONT Inter Tight BREAKPOINTS 360 / 640 / 960 / 1200 / 1920 COLORS Black — #191919 White — #FFF9F9 Gray — #303030 GRID 360 → 6 columns / 5px margin / 5px gutter 640 → 8 columns / 10px margin / 5px gutter 960 → 8 columns / 20px margin / 5px gutter 1200 → 12 columns / 20px margin / 5px gutter 1920 → 12 columns / 20px margin / 5px gutter ========================================================= */ /* ========================================================= 01. GLOBAL TOKENS BASE — 360 ========================================================= */ :root { /* ===================================================== FONT ===================================================== */ --lf-font: "Inter Tight", sans-serif; /* ===================================================== COLORS ===================================================== */ --lf-black: #191919; --lf-white: #FFF9F9; --lf-gray: #303030; /* ===================================================== TEXT COLORS ===================================================== */ --lf-text-dark: var(--lf-black); --lf-text-light: var(--lf-white); --lf-text-dark-muted: rgba(25, 25, 25, 0.50); --lf-text-light-muted: rgba(255, 249, 249, 0.50); /* ===================================================== BACKGROUNDS ===================================================== */ --lf-bg-dark: var(--lf-black); --lf-bg-light: var(--lf-white); --lf-bg-gray: var(--lf-gray); /* ===================================================== BORDERS ===================================================== */ --lf-border-dark: rgba(25, 25, 25, 0.18); --lf-border-light: rgba(255, 249, 249, 0.18); /* ===================================================== GRID 360 ===================================================== */ --lf-grid-columns: 6; --lf-grid-margin: 5px; --lf-grid-gutter: 5px; /* ===================================================== H1 360: 18px / 100% Normal ===================================================== */ --lf-h1-size: 22px; --lf-h1-line: 1; --lf-h1-tracking: 0em; --lf-h1-weight: 400; /* ===================================================== H2 360: 16px / 100% Normal ===================================================== */ --lf-h2-size: 20px; --lf-h2-line: 1; --lf-h2-tracking: 0em; --lf-h2-weight: 400; /* ===================================================== BODY / НАБОРНЫЙ 360: 12px / 125% Normal ===================================================== */ --lf-body-size: 14px; --lf-body-line: 1.25; --lf-body-tracking: 0em; --lf-body-weight: 400; /* ===================================================== CAPTION / ПОДПИСИ 360: 10px / 120% Normal ===================================================== */ --lf-caption-size: 10px; --lf-caption-line: 1.2; --lf-caption-tracking: 0em; --lf-caption-weight: 400; /* ===================================================== BUTTON / КНОПКИ 360: 14px / 155% Semibold ===================================================== */ --lf-button-size: 14px; --lf-button-line: 1.55; --lf-button-tracking: 0em; --lf-button-weight: 600; } /* ========================================================= 02. 640 ========================================================= */ @media (min-width: 640px) { :root { /* GRID */ --lf-grid-columns: 8; --lf-grid-margin: 10px; /* H1 */ --lf-h1-size: 24px; /* H2 */ --lf-h2-size: 22px; /* BODY */ --lf-body-size: 16px; /* CAPTION */ --lf-caption-size: 12px; /* BUTTON */ --lf-button-size: 16px; } } /* ========================================================= 03. 960 ========================================================= */ @media (min-width: 960px) { :root { /* GRID */ --lf-grid-columns: 8; --lf-grid-margin: 20px; /* H1 */ --lf-h1-size: 24px; /* H2 Отдельного значения нет: наследуем 22px от 640 */ --lf-h2-size: 24px; /* BODY */ --lf-body-size: 18px; /* CAPTION Отдельного значения нет: наследуем 12px от 640 */ /* BUTTON */ --lf-button-size: 16px; } } /* ========================================================= 04. 1200 ========================================================= */ @media (min-width: 1200px) { :root { /* GRID */ --lf-grid-columns: 12; --lf-grid-margin: 20px; /* H1 */ --lf-h1-size: 36px; /* H2 */ --lf-h2-size: 22px; /* BODY */ --lf-body-size: 20px; /* CAPTION */ --lf-caption-size: 12px; /* BUTTON */ --lf-button-size: 18px; } } /* ========================================================= 05. 1920 ========================================================= */ @media (min-width: 1920px) { :root { /* GRID */ --lf-grid-columns: 12; --lf-grid-margin: 20px; /* TYPOGRAPHY Отдельных значений для 1920 нет. Наследуем значения 1200: H1 — 32px H2 — 24px BODY — 20px CAPTION — 12px /* CAPTION */ --lf-caption-size: 16px; --lf-h1-size: 38px; --lf-h2-size: 28px; /* BUTTON */ --lf-button-size: 18px; } } /* ========================================================= 06. TYPOGRAPHY CLASSES ========================================================= */ /* H1 */ .lf-h1 { margin: 0; font-family: var(--lf-font); font-size: var(--lf-h1-size); line-height: var(--lf-h1-line); letter-spacing: var(--lf-h1-tracking); font-weight: var(--lf-h1-weight); } /* H2 */ .lf-h2 { margin: 0; font-family: var(--lf-font); font-size: var(--lf-h2-size); line-height: var(--lf-h2-line); letter-spacing: var(--lf-h2-tracking); font-weight: var(--lf-h2-weight); } /* BODY / НАБОРНЫЙ */ .lf-body { margin: 0; font-family: var(--lf-font); font-size: var(--lf-body-size); line-height: var(--lf-body-line); letter-spacing: var(--lf-body-tracking); font-weight: var(--lf-body-weight); } /* CAPTION / ПОДПИСИ */ .lf-caption { margin: 0; font-family: var(--lf-font); font-size: var(--lf-caption-size); line-height: var(--lf-caption-line); letter-spacing: var(--lf-caption-tracking); font-weight: var(--lf-caption-weight); } /* BUTTON */ .lf-button-text { font-family: var(--lf-font); font-size: var(--lf-button-size); line-height: var(--lf-button-line); letter-spacing: var(--lf-button-tracking); font-weight: var(--lf-button-weight); } /* ========================================================= 07. CONTAINER Только внешние поля страницы. Не задаёт padding компонентов. ========================================================= */ .lf-container { width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--lf-grid-margin); padding-right: var(--lf-grid-margin); box-sizing: border-box; } /* ========================================================= 08. GRID Чистая глобальная сетка. ВАЖНО: .lf-grid сама НЕ решает, сколько колонок занимает конкретный элемент. Это определяется уже внутри конкретного блока. ========================================================= */ .lf-grid { width: 100%; display: grid; grid-template-columns: repeat( var(--lf-grid-columns), minmax(0, 1fr) ); column-gap: var(--lf-grid-gutter); box-sizing: border-box; } /* ========================================================= 09. UTILITY — FULL WIDTH Элемент занимает всю сетку. ========================================================= */ .lf-grid-full { grid-column: 1 / -1; } /* ========================================================= 10. BOX SIZING Только для элементов нашей дизайн-системы. Не вмешиваемся глобально в Tilda. ========================================================= */ .lf-container, .lf-container *, .lf-grid, .lf-grid * { box-sizing: border-box; }