/* ============================================================================
ЮМЕДИА · DESIGN FOUNDATION CSS
remont3.ru redesign · v1.0
Один файл — вся фундаментальная стилистика.
Подключите:
ЗАВИСИМОСТИ (добавьте в ):
СОДЕРЖАНИЕ:
1. Reset + base
2. Design tokens (colors, type, spacing, radii, shadows, motion)
3. Layout (.container, .section-card)
4. Typography (.eyebrow, .h1, .h2, .h3, .body, .caption, .kicker)
5. Buttons (.btn, .btn--cta, .btn--brand, .btn--ghost)
6. Icon button (.iconbtn)
7. Chip (.chip)
8. Field / search (.field)
9. Badge (.badge)
10. Card (.card)
11. Speech bubble (.bubble)
12. Person card (.person)
13. Yellow phone CTA (.phone-cta)
14. Breadcrumbs (.crumbs)
15. Trust strip (.trust-strip)
16. Responsive (mobile-first overrides)
17. Utilities
============================================================================ */
/* ─── 2 · DESIGN TOKENS ──────────────────────────────────────────────────── */
:root {
/* 2.1 · COLORS ────────────────────────────────────────────────────────── */
/* Brand · raspberry (логотип «ю», аватары, акценты H1, бейджи «фикс цена») */
--brand: #E5106A;
--brand-deep: #B40A53;
--brand-soft: #FFE5EF;
--brand-line: #FBC0D7;
/* CTA · жёлтый (главные кнопки, телефонные плашки) */
--cta: #FFE15D;
--cta-deep: #F5C518;
--cta-soft: #FFF6CC;
/* Ink · текст / активные state */
--ink: #0D0D0F;
--ink-2: #2A2A2E;
--muted: #6B6B72;
--muted-2: #A1A1A7;
/* Surfaces */
--bg: #FFFFFF;
--surface: #FAFAFB;
--surface-2: #F2F2F4;
--border: #E8E8EC;
--border-strong: #D4D4D8;
--divider: #EFEFF2;
/* Semantic */
--success: #16A34A;
--success-soft: #E7F7EC;
--warning: #D97706;
--danger: #DC2626;
/* External brand colors (для соц. иконок — НЕ для UI) */
--tg-blue: #2AABEE;
--max-grad-1: #5856D6;
--max-grad-2: #3B82F6;
/* On-color */
--on-brand: #FFFFFF;
--on-cta: #0D0D0F;
--on-ink: #FFFFFF;
/* 2.2 · TYPOGRAPHY ────────────────────────────────────────────────────── */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--text-xs: 12px;
--text-sm: 13px;
--text-base: 15px;
--text-md: 17px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 44px;
--text-5xl: 58px;
--text-6xl: 72px;
--leading-tight: 1.05;
--leading-snug: 1.2;
--leading-normal: 1.4;
--leading-relaxed: 1.55;
--track-tight: -0.02em;
--track-tighter: -0.035em;
--track-tightest: -0.045em;
--track-normal: 0;
--track-wide: 0.08em;
--track-uppercase: 0.1em;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold:800;
--weight-black: 900;
/* 2.3 · SPACING (4px scale) ───────────────────────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* 2.4 · RADIUS ────────────────────────────────────────────────────────── */
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 14px;
--radius-xl: 16px;
--radius-2xl: 18px;
--radius-3xl: 22px;
--radius-section: 24px;
--radius-pill: 999px;
/* 2.5 · SHADOWS ───────────────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(14, 14, 18, 0.04);
--shadow-sm: 0 2px 6px rgba(14, 14, 18, 0.05), 0 1px 2px rgba(14, 14, 18, 0.04);
--shadow-md: 0 8px 20px -4px rgba(14, 14, 18, 0.08), 0 2px 6px rgba(14, 14, 18, 0.04);
--shadow-lg: 0 24px 48px -12px rgba(14, 14, 18, 0.18);
--shadow-card: 0 30px 70px -30px rgba(14, 14, 18, 0.18), 0 4px 12px -6px rgba(14, 14, 18, 0.06);
--shadow-brand: 0 8px 24px -6px rgba(229, 16, 106, 0.4);
--shadow-cta: 0 2px 0 var(--cta-deep);
/* 2.6 · MOTION ────────────────────────────────────────────────────────── */
--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-1: 120ms;
--dur-2: 180ms;
--dur-3: 250ms;
/* 2.7 · LAYOUT ────────────────────────────────────────────────────────── */
--container: 1280px;
--container-px: 40px;
--container-px-md: 24px;
--container-px-sm: 16px;
}
/* ─── 3 · LAYOUT PRIMITIVES ──────────────────────────────────────────────── */
.container-v2 {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding-left: var(--container-px);
padding-right: var(--container-px);
}
/* Карточка-обёртка для секции (как в hero/brands) */
.section-card {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-section);
box-shadow: var(--shadow-card);
overflow: hidden;
}
/* ─── 4 · TYPOGRAPHY ─────────────────────────────────────────────────────── */
/* Eyebrow — малиновая пилюля с пульсирующей точкой */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--brand-soft);
color: var(--brand);
padding: 7px 14px 7px 10px;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: var(--weight-extrabold);
letter-spacing: var(--track-wide);
text-transform: uppercase;
width: fit-content;
}
.eyebrow .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 4px rgba(229, 16, 106, 0.18);
}
/* Заголовки */
.h-display {
margin: 0;
font-size: var(--text-6xl);
font-weight: var(--weight-black);
letter-spacing: var(--track-tightest);
line-height: var(--leading-tight);
color: var(--ink);
text-wrap: balance;
}
.h1 {
margin: 0;
font-size: var(--text-5xl);
font-weight: var(--weight-black);
letter-spacing: var(--track-tightest);
line-height: 0.98;
color: var(--ink);
text-wrap: balance;
}
.h2 {
margin: 0;
font-size: var(--text-4xl);
font-weight: var(--weight-black);
letter-spacing: var(--track-tighter);
line-height: 1;
color: var(--ink);
text-wrap: balance;
}
.h3 {
margin: 0;
font-size: var(--text-xl);
font-weight: var(--weight-extrabold);
letter-spacing: var(--track-tighter);
line-height: var(--leading-snug);
color: var(--ink);
}
.h4 {
margin: 0;
font-size: var(--text-md);
font-weight: var(--weight-bold);
letter-spacing: var(--track-tight);
line-height: var(--leading-snug);
color: var(--ink);
}
/* Подсветка ключевого слова в заголовке (em) — малиновый цвет + жёлтый маркер снизу */
.h1 em,
.h2 em,
.h-display em {
font-style: normal;
color: var(--brand);
position: relative;
display: inline-block;
}
.h1 em::after,
.h2 em::after,
.h-display em::after {
content: '';
position: absolute;
left: -2%;
right: -2%;
bottom: 5%;
height: 14%;
background: var(--cta);
z-index: -1;
border-radius: 2px;
}
/* Body / caption / kicker */
.body {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--ink-2);
}
.body--lg { font-size: 16px; }
.body--sm { font-size: var(--text-sm); }
.caption {
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--muted);
}
/* Кикер — маленький заголовок секции с малиновой полоской */
.kicker {
font-size: var(--text-xs);
font-weight: var(--weight-extrabold);
letter-spacing: var(--track-uppercase);
text-transform: uppercase;
color: var(--muted);
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
}
.kicker::before {
content: '';
width: 22px;
height: 2px;
background: var(--brand);
display: inline-block;
}
.link {
color: var(--brand);
font-weight: var(--weight-bold);
}
.link:hover { text-decoration: underline; }
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* ─── 5 · BUTTONS ────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 54px;
padding: 0 22px;
border-radius: var(--radius-lg);
font-family: inherit;
font-size: var(--text-base);
font-weight: var(--weight-bold);
letter-spacing: var(--track-tight);
border: none;
cursor: pointer;
text-decoration: none;
transition: transform var(--dur-1) var(--ease),
background var(--dur-2) var(--ease),
box-shadow var(--dur-2) var(--ease),
color var(--dur-2) var(--ease);
white-space: nowrap;
}
/* Primary CTA · жёлтая с press-down тенью */
.btn--cta {
background: var(--cta);
color: var(--on-cta);
box-shadow: var(--shadow-cta);
}
.btn--cta:hover { transform: translateY(-1px); }
.btn--cta:active { transform: translateY(1px); box-shadow: 0 0 0 var(--cta-deep); }
/* Малиновая иконка-кружок внутри жёлтой кнопки (телефон) */
.btn--cta .btn-ico {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--brand);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
/* Brand · малиновая */
.btn--brand {
background: var(--brand);
color: var(--on-brand);
box-shadow: var(--shadow-brand);
}
.btn--brand:hover { background: var(--brand-deep); transform: translateY(-1px); }
/* Ghost · контурная чёрная */
.btn--ghost {
background: var(--bg);
color: var(--ink);
border: 1.5px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: #fff; }
/* Soft · нейтральная */
.btn--soft {
background: var(--surface-2);
color: var(--ink);
}
.btn--soft:hover { background: var(--surface); }
/* Sizes */
.btn--sm { height: 40px; padding: 0 16px; font-size: var(--text-sm); border-radius: var(--radius-md); }
.btn--lg { height: 60px; padding: 0 28px; font-size: var(--text-md); }
.btn--block { width: 100%; }
/* ─── 6 · ICON BUTTON ────────────────────────────────────────────────────── */
.iconbtn {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--bg);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.iconbtn:hover { border-color: var(--ink); transform: translateY(-1px); }
.iconbtn--round { border-radius: 50%; }
.iconbtn--lg { width: 48px; height: 48px; }
/* ─── 7 · CHIP / TAB ─────────────────────────────────────────────────────── */
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 9px 16px;
background: var(--surface-2);
color: var(--ink-2);
border-radius: var(--radius-pill);
border: 1px solid transparent;
font-family: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: -0.005em;
cursor: pointer;
white-space: nowrap;
transition: all var(--dur-2) var(--ease);
}
.chip:hover { background: var(--surface); border-color: var(--border); }
.chip[data-active="true"],
.chip--active {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.chip .count {
font-size: var(--text-xs);
color: var(--muted-2);
font-weight: var(--weight-bold);
}
.chip[data-active="true"] .count,
.chip--active .count { color: rgba(255, 255, 255, 0.55); }
/* ─── 8 · INPUT / SEARCH ─────────────────────────────────────────────────── */
.field {
display: flex;
align-items: center;
gap: 10px;
background: var(--surface);
border: 1.5px solid transparent;
border-radius: var(--radius-lg);
padding: 12px 16px;
transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.field:focus-within {
background: var(--bg);
border-color: var(--ink);
}
.field svg { color: var(--muted-2); flex: 0 0 auto; }
.field input {
border: none;
outline: none;
background: transparent;
flex: 1;
font-size: var(--text-sm);
color: var(--ink);
min-width: 0;
}
.field input::placeholder { color: var(--muted-2); }
.field kbd {
font-size: 11px;
font-weight: var(--weight-semibold);
color: var(--muted);
background: var(--bg);
border: 1px solid var(--border);
padding: 2px 6px;
border-radius: var(--radius-xs);
font-family: inherit;
}
/* ─── 9 · BADGE ──────────────────────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--radius-pill);
font-size: 10px;
font-weight: var(--weight-extrabold);
letter-spacing: var(--track-wide);
text-transform: uppercase;
line-height: 1.2;
}
.badge--ink { background: var(--ink); color: #fff; }
.badge--brand { background: var(--brand); color: #fff; }
.badge--cta { background: var(--cta); color: var(--ink); }
.badge--soft { background: var(--brand-soft); color: var(--brand); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--outline { background: var(--bg); color: var(--ink); border: 1px solid var(--border); }
/* ─── 10 · CARD ──────────────────────────────────────────────────────────── */
.card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 18px 20px;
}
.card--soft { background: var(--surface); }
.card--brand { background: var(--brand-soft); border-color: var(--brand-line); }
.card--cta { background: var(--cta-soft); border-color: var(--cta-deep); }
.card--elev { box-shadow: var(--shadow-md); border-color: transparent; }
.card--clickable {
transition: all var(--dur-2) var(--ease);
cursor: pointer;
}
.card--clickable:hover {
border-color: var(--ink);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* ─── 11 · SPEECH BUBBLE (Hero SEO-облачко) ──────────────────────────────── */
.bubble {
position: relative;
background: var(--bg);
border: 2px solid var(--brand-line);
border-radius: var(--radius-2xl);
padding: 22px 24px;
}
/* Хвостик снизу слева (для desktop hero) */
.bubble::after {
content: '';
position: absolute;
bottom: -12px;
left: 56px;
width: 20px;
height: 20px;
background: var(--bg);
border-right: 2px solid var(--brand-line);
border-bottom: 2px solid var(--brand-line);
transform: rotate(45deg);
border-bottom-right-radius: 3px;
}
/* Альтернативный хвостик сверху (для mobile) — добавьте class .bubble--top */
.bubble--top::after {
bottom: auto;
top: -10px;
left: 40px;
border: none;
border-left: 2px solid var(--brand-line);
border-top: 2px solid var(--brand-line);
border-top-left-radius: 3px;
border-bottom-right-radius: 0;
}
.bubble-row {
display: flex;
gap: 14px;
align-items: flex-start;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--surface-2);
}
.bubble-row:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
.bubble-row .ico {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background: var(--brand-soft);
color: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
}
.bubble-row p {
margin: 0;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--ink-2);
}
.bubble-row p b { color: var(--ink); font-weight: var(--weight-bold); }
/* ─── 12 · PERSON CARD (мастер / эксперт) ────────────────────────────────── */
.person {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-2xl);
padding: 16px 18px;
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
transition: all var(--dur-2) var(--ease);
}
.person:hover {
border-color: var(--ink);
background: var(--bg);
transform: translateY(-1px);
box-shadow: 0 16px 30px -16px rgba(14, 14, 18, 0.12);
}
.person-photo {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: var(--weight-extrabold);
font-size: 22px;
flex: 0 0 auto;
position: relative;
box-shadow: 0 4px 12px -2px rgba(229, 16, 106, 0.4);
}
.person-photo--online::after {
content: '';
position: absolute;
bottom: 2px;
right: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--success);
border: 3px solid var(--surface);
}
.person:hover .person-photo--online::after { border-color: var(--bg); }
.person-info { flex: 1; min-width: 0; }
.person-info .row1 {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: 4px;
flex-wrap: wrap;
}
.person-info .name {
font-size: var(--text-md);
font-weight: var(--weight-extrabold);
letter-spacing: var(--track-tight);
color: var(--ink);
}
.person-info .role {
font-size: var(--text-sm);
color: var(--muted);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.person-info .role .sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--border-strong);
}
.person-arrow {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
transition: all var(--dur-2) var(--ease);
}
.person:hover .person-arrow {
background: var(--ink);
color: #fff;
border-color: var(--ink);
transform: translateX(2px);
}
/* ─── 13 · YELLOW PHONE CTA (фирменный приём) ───────────────────────────── */
.phone-cta {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--cta);
padding: 6px 18px 6px 6px;
border-radius: var(--radius-pill);
text-decoration: none;
color: var(--ink);
box-shadow: var(--shadow-cta), 0 8px 24px -10px rgba(245, 197, 24, 0.6);
transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.phone-cta:hover {
transform: translateY(-1px);
box-shadow: 0 3px 0 var(--cta-deep), 0 12px 28px -10px rgba(245, 197, 24, 0.7);
}
.phone-cta-pulse {
width: 40px;
height: 40px;
background: var(--brand);
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex: 0 0 auto;
}
.phone-cta-pulse::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--brand);
opacity: 0.4;
animation: phone-pulse 1.8s ease-out infinite;
}
@keyframes phone-pulse {
0% { transform: scale(0.85); opacity: 0.6; }
100% { transform: scale(1.25); opacity: 0; }
}
.phone-cta-num {
display: flex;
flex-direction: column;
line-height: 1;
}
.phone-cta-num .label {
font-size: 10px;
font-weight: var(--weight-bold);
letter-spacing: var(--track-wide);
text-transform: uppercase;
color: var(--ink-2);
opacity: 0.7;
margin-bottom: 4px;
}
.phone-cta-num .number {
font-size: 18px;
font-weight: var(--weight-extrabold);
letter-spacing: var(--track-tight);
font-variant-numeric: tabular-nums;
}
/* ─── 14 · BREADCRUMBS ───────────────────────────────────────────────────── */
.crumbs {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 14px var(--container-px);
background: var(--surface);
border-top: 1px solid var(--border);
font-size: var(--text-sm);
}
.crumbs a { color: var(--muted); transition: color var(--dur-2); }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { color: var(--border-strong); display: inline-flex; }
.crumbs .current { color: var(--ink); font-weight: var(--weight-semibold); }
.crumbs-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 14px;
color: var(--muted);
font-size: var(--text-xs);
}
.crumbs-right .item { display: inline-flex; align-items: center; gap: 6px; }
.crumbs .live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
/* ─── 15 · TRUST STRIP ───────────────────────────────────────────────────── */
.trust-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border);
background: var(--surface);
}
.trust-strip .item {
padding: 18px 22px;
display: flex;
align-items: center;
gap: 14px;
border-right: 1px solid var(--border);
}
.trust-strip .item:last-child { border-right: none; }
.trust-strip .ico {
width: 42px;
height: 42px;
border-radius: var(--radius-md);
background: var(--ink);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.trust-strip .v {
font-size: var(--text-md);
font-weight: var(--weight-extrabold);
letter-spacing: var(--track-tight);
color: var(--ink);
line-height: 1;
margin-bottom: 4px;
}
.trust-strip .v small {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--muted);
margin-left: 4px;
}
.trust-strip .l {
font-size: var(--text-xs);
color: var(--muted);
line-height: 1.3;
}
/* ─── 16 · RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
:root {
--container-px: var(--container-px-md);
--text-5xl: 40px;
--text-4xl: 32px;
}
.trust-strip { grid-template-columns: repeat(2, 1fr); }
.trust-strip .item:nth-child(2n) { border-right: none; }
.trust-strip .item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 640px) {
:root {
--container-px: var(--container-px-sm);
--text-5xl: 34px;
--text-4xl: 26px;
--text-3xl: 24px;
}
.btn { height: 50px; padding: 0 18px; }
.person-photo { width: 56px; height: 56px; font-size: 20px; }
.bubble::after {
/* Хвостик уезжает наверх на mobile, если bubble идёт под другим элементом */
}
}
/* ─── 17 · UTILITIES (используйте sparingly) ─────────────────────────────── */
.u-stack { display: flex; flex-direction: column; }
.u-row { display: flex; flex-direction: row; align-items: center; }
.u-between { justify-content: space-between; }
.u-center { align-items: center; justify-content: center; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-grow { flex: 1; }
.u-shrink-0 { flex-shrink: 0; }
.u-hidden { display: none !important; }
.u-sr-only {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}