/* =====================================================================
USILENIE — USI-FIGMA-RESCUE-01 (2026-05-29)
Append-only controlled layer. Loaded LAST in head.php. Token-based,
no new !important. Fixes confirmed against the live site + Figma-v2
direction (light body / orange accent / dark header-footer-CTA / grotesk).
Scope is deliberately small: only rules that fix a verified defect.
Rollback: remove the in head.php + delete this file.
===================================================================== */
/* ---------------------------------------------------------------------
1. Outline buttons on DARK heroes / DARK CTA bands.
`.usilenie-btn--outline` / `.btn--outline` use color:var(--u2-text)
(dark ink) + a dark border, so on a dark hero (object-detail hero,
the objects/object-detail bottom CTA band) they were dark-on-dark and
nearly invisible. Give them a light treatment in dark contexts.
`.us2-btn--outline` (objects CTA "Каталог →") had NO base style at all.
--------------------------------------------------------------------- */
.u2-page-hero .usilenie-btn--outline,
.u2-page-hero .btn--outline,
.u2-page-hero .u2-btn--outline,
.u2-objects-cta-v2 .us2-btn--outline,
.u2-objects-cta-v2 .usilenie-btn--outline,
.u2-objects-cta-v2 .btn--outline {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, .42);
}
.u2-page-hero .usilenie-btn--outline:hover,
.u2-page-hero .btn--outline:hover,
.u2-page-hero .u2-btn--outline:hover,
.u2-objects-cta-v2 .us2-btn--outline:hover,
.u2-objects-cta-v2 .usilenie-btn--outline:hover,
.u2-objects-cta-v2 .btn--outline:hover {
background: rgba(255, 255, 255, .10);
border-color: #fff;
color: #fff;
}
/* CTA-band buttons (us2-btn) were a touch undersized for a primary CTA. */
.u2-objects-cta-v2 .us2-btn {
padding: 13px 26px;
font-size: 13px;
border-radius: 8px;
}
/* ---------------------------------------------------------------------
2. Dark-hero breadcrumbs were rgba(255,255,255,.48) — too faint to read
on the dark hero band. Lift the contrast a notch (still subordinate to
the H1). Applies to every dark hero (catalog/category/objects/cart/
compare/feedback/search). Loaded after visual-transplant.css so wins.
--------------------------------------------------------------------- */
.u2-bc--dark,
.u2-search-hero__crumbs {
color: rgba(255, 255, 255, .60);
}
.u2-bc--dark .u2-bc__link,
.u2-bc--dark a,
.u2-search-hero__crumbs a {
color: rgba(255, 255, 255, .66);
}
.u2-bc--dark .u2-bc__item--current,
.u2-bc--dark .u2-bc__item--current * {
color: rgba(255, 255, 255, .82);
}
/* PDP breadcrumb sits in a LIGHT crumb bar; its links were mid-grey
(rgb 110,110,120) — readable but weak. Darken slightly for contrast. */
.us-pdp5of5-crumbs #breadcrumbs,
.us-pdp5of5-crumbs #breadcrumbs a,
.us-pdp5of5-crumbs .u2-bc__link {
color: #55555f;
}
.us-pdp5of5-crumbs #breadcrumbs a:hover,
.us-pdp5of5-crumbs .u2-bc__link:hover {
color: var(--u2-accent, #cc5200);
}
/* ---------------------------------------------------------------------
3. Objects listing — branded placeholder for cards without a photo
(the majority). Keeps a consistent media block (same 16/10 ratio as
image cards) instead of a short, missing-media card. The element also
carries `.u2-object-card-v2__media` so it inherits the ratio; this just
centers the icon/label and adds a subtle branded gradient.
--------------------------------------------------------------------- */
.u2-object-card-v2__media--placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #f3f2ee 0%, #e7e5df 100%);
color: var(--card-color, #cc5200);
text-decoration: none;
border-bottom: 1px solid #e2e0da;
}
.u2-object-card-v2__media--placeholder .u2-object-card-v2__ph-icon {
opacity: .55;
}
.u2-object-card-v2__media--placeholder .u2-object-card-v2__ph-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: #8c8a84;
max-width: 80%;
text-align: center;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.u2-object-card-v2__media--placeholder:hover .u2-object-card-v2__ph-icon {
opacity: .8;
}
/* ---------------------------------------------------------------------
4. USI-RESCUE-REAL (2026-05-30): object cards = ONE brand-orange accent.
They previously rendered as a per-type RAINBOW (green/purple/blue/red/teal
topline + colored badge) that read as a foreign template. type_color() now
returns orange (badge + placeholder icon follow via --card/--badge-color);
these rules override the INDEPENDENT [data-type] topline rules in
usilenie-v2-clean.css (12193+) and put the work-type line in neutral ink.
--------------------------------------------------------------------- */
.u2-object-card-v2[data-type] .u2-object-card-v2__topline { background: #cc5200; }
.u2-object-card-v2__task { color: #5f5f68; }
.u2-object-card-v2 { border: 1px solid #e6e4de; }
.u2-object-card-v2:hover { box-shadow: 0 6px 22px rgba(12,13,16,.10); }
/* ---------------------------------------------------------------------
5. USI-PARITY-01 (2026-05-30): Figma typography parity (Phase 3a).
Loaded last so these win over 5of5/v2-clean without new !important.
--------------------------------------------------------------------- */
/* Inner-page H1 was undersized (PDP measured 26px/700) vs Figma (~37px/800).
Match usi16's [data-us-page="product"] specificity (0,2,0) so this wins
without !important; figma-rescue loads after usi16. */
[data-us-page="product"] .us-product-v6__title,
.us-product-v6__title {
font-size: clamp(26px, 4vw, 36px);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.12;
}
/* Article / SKU = orange Space-Mono on transparent (Figma) — was a dark/grey pill. */
.us-pdp-fig10__sku-tag {
background: transparent;
color: var(--u2-accent, #cc5200);
padding: 0;
border-radius: 0;
font-size: 12px;
}
.u2-card-v2 .u2-card-v2__article,
.us-product-v6__related-article {
color: var(--u2-accent, #cc5200);
font-family: var(--u2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
letter-spacing: .05em;
font-weight: 700;
}
/* ---------------------------------------------------------------------
6. USI-PARITY-01: catalog filter "Применить" buttons are orange (Figma
primary), not dark. Real per-category parametric filter already works
(?action=search&p[]=…); only the CTA colour + Сбросить stay distinct.
--------------------------------------------------------------------- */
.u2-filter-actions__apply,
.u2-filter .u2-filter__submit,
.u2-filter-panel .u2-filter__submit {
/* !important: PROVEN conflict — a legacy rule pins this button to #0c0d10 even
at (0,2,0) specificity (likely a `.usilenie-btn{background:…!important}` base).
Targeted override so the filter CTA matches the orange Figma primary. */
background: var(--u2-accent, #cc5200) !important;
color: #fff !important;
}
.u2-filter-actions__apply:hover,
.u2-filter .u2-filter__submit:hover,
.u2-filter-panel .u2-filter__submit:hover {
background: var(--u2-accent-hover, #b34800) !important;
}
/* ---------------------------------------------------------------------
7. USI-PARITY-3CBIS (2026-05-30): catalog filter → Figma look.
Real Diafan p[] checkbox inputs are KEPT — this is styling only:
larger/lighter checkbox rows, calm group blocks, orange checked state,
quiet group headers, design-system buttons. No new markup, no fake facets.
--------------------------------------------------------------------- */
.u2-filter { font-family: var(--u2-font-body, 'Inter', sans-serif); color: var(--u2-text-primary, #0c0d10); }
.u2-filter__header { padding: 2px 2px 12px; border-bottom: 1px solid #ecebe7; margin-bottom: 4px; }
.u2-filter__header-title { font-family: var(--u2-font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--u2-text-secondary, #6b7280); font-weight: 600; }
/* group blocks: airy, quiet separators, no dense Diafan chrome */
.u2-filter__details { border: 0; border-top: 1px solid #efeee9; padding: 2px 0; }
.u2-filter__summary { padding: 15px 2px; font-size: 14.5px; font-weight: 600; color: var(--u2-text-primary, #0c0d10); }
.u2-filter__summary-text { font-size: 14.5px; font-weight: 600; }
.u2-filter__summary-count { background: transparent; border: 0; color: var(--u2-text-muted, #9ca3af); font-family: var(--u2-font-mono, monospace); font-size: 12px; font-weight: 400; padding: 0 4px; min-width: 0; }
.u2-filter__chevron { color: #b6b6bd; width: 13px; height: 13px; }
.u2-filter__details-body { padding: 2px 0 10px; }
/* checkbox rows: larger, readable, generous gap (Figma ~14.5px / gap 11) */
.u2-filter__options--stack { gap: 2px; }
.u2-filter__option { padding: 0; }
.u2-filter__check-label { display: flex; align-items: center; gap: 11px; padding: 8px 2px; font-size: 14.5px; line-height: 1.3; color: #33353c; cursor: pointer; }
.u2-filter__check-label:hover { color: var(--u2-text-primary, #0c0d10); }
.u2-filter__checkbox { -webkit-appearance: auto; appearance: auto; width: 18px; height: 18px; accent-color: var(--u2-accent, #cc5200); flex: 0 0 auto; margin: 0; cursor: pointer; }
.u2-filter__option-text { font-size: 14.5px; }
/* actions: orange primary (above) + ghost reset in the design system */
.u2-filter__actions { margin-top: 18px; gap: 10px; }
.u2-filter .u2-filter__submit { border-radius: 8px; padding: 12px 16px; font-size: 13px; }
.u2-filter .u2-filter__reset { border-radius: 8px; padding: 12px 16px; font-size: 13px; background: #fff; border: 1px solid var(--u2-border, #e5e5e5); color: var(--u2-text-secondary, #6b7280); }
.u2-filter .u2-filter__reset:hover { border-color: #d0cfca; color: var(--u2-text-primary, #0c0d10); }
/* the "Наличие" group in list.php uses a sibling markup — align its rows + checkbox */
.u2-filter-group--stock .u2-filter-stock__row { display: flex; align-items: center; gap: 11px; padding: 8px 2px; font-size: 14.5px; color: #33353c; cursor: pointer; }
.u2-filter-group--stock .u2-filter-stock__cb { width: 18px; height: 18px; accent-color: var(--u2-accent, #cc5200); margin: 0; }
.u2-filter-group__title { font-family: var(--u2-font-mono, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--u2-text-secondary, #6b7280); font-weight: 600; }
/* PDP brand block: secondary link = ghost/outline so the two links read as a pair */
.us-product-v6__brand-link--secondary { background: transparent; color: var(--u2-accent, #cc5200); border: 1px solid color-mix(in srgb, var(--u2-accent, #cc5200) 32%, transparent); }
.us-product-v6__brand-link--secondary:hover { background: color-mix(in srgb, var(--u2-accent, #cc5200) 8%, transparent); border-color: var(--u2-accent, #cc5200); }
/* ---------------------------------------------------------------------
8. USI-BRANDFIX (2026-05-30): Figma brand-hero parity.
Brand page hero now carries a two-column header (title + lead + stats on
the left; brand chip + brand-specific "Запросить КП по X" CTA on the
right), matching the Figma /brands/ screen. Dark-hero context.
--------------------------------------------------------------------- */
.u2-brand-hero__grid {
display: flex;
gap: 40px;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.u2-brand-hero__main { flex: 1 1 520px; min-width: 0; }
.u2-brand-hero__aside {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
padding-top: 6px;
}
.u2-brand-hero__chip {
display: inline-flex;
align-items: center;
font-family: var(--u2-font-mono, ui-monospace, monospace);
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #fff;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 6px;
padding: 7px 13px;
}
.u2-brand-hero__cta { white-space: nowrap; }
.u2-brand-hero__cta-2 {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, .42);
}
.u2-brand-hero__cta-2:hover { background: rgba(255, 255, 255, .10); border-color: #fff; }
/* stats row */
.u2-brand-hero__stats {
display: flex;
gap: 40px;
margin-top: 22px;
flex-wrap: wrap;
}
.u2-brand-hero__stat { display: flex; flex-direction: column; gap: 4px; }
.u2-brand-hero__stat-num {
font-size: 26px;
font-weight: 800;
line-height: 1;
color: #fff;
letter-spacing: -.01em;
}
.u2-brand-hero__stat-label {
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
}
@media (max-width: 760px) {
.u2-brand-hero__grid { gap: 22px; }
.u2-brand-hero__aside { align-items: flex-start; width: 100%; }
.u2-brand-hero__cta, .u2-brand-hero__cta-2 { width: 100%; text-align: center; justify-content: center; }
.u2-brand-hero__stats { gap: 28px; }
.u2-brand-hero__stat-num { font-size: 22px; }
}
/* USI-BRANDFIX: filter header bar — the title was dark ink (usi16) on the dark
(#0c0d10) head bar, so "Фильтры" was almost invisible. Light it up + uppercase
to match the Figma "ФИЛЬТРЫ" label. */
.u2-shop-filter-sidebar__head .u2-shop-filter-sidebar__title {
text-transform: uppercase;
letter-spacing: .08em;
color: #fff;
font-family: var(--u2-font-mono, ui-monospace, monospace);
font-size: 12.5px;
font-weight: 700;
}