/* ============================================================ ПКФ Метиз — Industrial steel design system Forked from kotlov.info tokens. Editorial restraint, but warmer (steel) with a single signal accent for B2B fasteners. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ---------- Steel neutrals (warmer than kotlov) ---------- */ --bg: #F5F4F1; /* paper, warm off-white */ --bg-2: #EAE8E2; /* steel light */ --bg-3: #1B1D1F; /* graphite, inverted blocks */ --surface: #FFFFFF; /* cards */ --ink: #0E1012; /* deep graphite */ --ink-2: #2A2D31; /* body */ --ink-3: #5C6168; /* meta */ --ink-4: #8E939A; /* tertiary */ --rule: #D9D6CE; /* hairline on paper */ --rule-2: #BDB9AE; --rule-ink: #2D3035; /* hairline on dark */ /* ---------- Accent: signal palette ---------- */ --accent: #E8501C; /* signal orange — default */ --accent-ink: #C13F12; --accent-bg: #FBE7DC; --accent-on: #FFFFFF; /* Product PVC colours (real wire coatings) — used as data, not chrome */ --wire-green: #2F6E3A; --wire-blue: #1F4E8C; --wire-red: #B33027; --wire-yellow: #C99A1F; --wire-brown: #6B3A1A; --wire-zinc: #B6B7B0; /* ---------- Type ---------- */ --font-display: "Manrope", "Inter", system-ui, sans-serif; --font-sans: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --t-mega: 800 96px/0.95 var(--font-display); --t-display: 700 64px/1.02 var(--font-display); --t-h1: 700 44px/1.08 var(--font-display); --t-h2: 700 32px/1.15 var(--font-display); --t-h3: 600 20px/1.3 var(--font-sans); --t-h4: 600 16px/1.4 var(--font-sans); --t-lead: 400 19px/1.55 var(--font-sans); --t-body: 400 16px/1.6 var(--font-sans); --t-body-sm: 400 14px/1.55 var(--font-sans); --t-meta: 500 12px/1.4 var(--font-mono); --t-eyebrow: 600 11px/1.2 var(--font-mono); --t-metric: 700 56px/1 var(--font-display); --track-eyebrow: 0.14em; --track-tight: 0; --track-display: 0; /* ---------- Spacing (8pt) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --container: 1280px; --container-narrow: 720px; --gutter: 32px; --r-0: 0; --r-1: 2px; --r-2: 6px; --shadow-lift: 0 1px 2px rgba(14,17,22,.06), 0 8px 24px rgba(14,17,22,.06); --shadow-sticky: 0 2px 4px rgba(14,17,22,.10), 0 18px 40px rgba(14,17,22,.14); --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 360ms; } /* Palette variants — applied via [data-palette] on */ /* Brand accent from old site (template/options.json) — #575fcf indigo. Kept as default. */ html[data-palette="brand"] { --accent: #575FCF; --accent-ink: #3F47B6; --accent-bg: #E1E2F5; } html[data-palette="orange"] { --accent: #E76711; --accent-ink: #B94F0A; --accent-bg: #FBE2D0; } html[data-palette="red"] { --accent: #F44336; --accent-ink: #C42E22; --accent-bg: #FBDAD7; } html[data-palette="green"] { --accent: #00AD5E; --accent-ink: #007A41; --accent-bg: #D2F1E1; } html[data-palette="amber"] { --accent: #FAAF00; --accent-ink: #C58A00; --accent-bg: #FBEBC4; } html[data-palette="cyan"] { --accent: #1B9FC6; --accent-ink: #137A99; --accent-bg: #D2EEF6; } /* ============================================================ Resets / base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink-2); font: var(--t-body); font-feature-settings: "ss01", "cv11", "tnum"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: #fff; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } h1, h2, h3, h4, p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* ============================================================ Type helpers ============================================================ */ .t-mega { font: var(--t-mega); letter-spacing: var(--track-display); color: var(--ink); } .t-display { font: var(--t-display); letter-spacing: var(--track-display); color: var(--ink); } .t-h1 { font: var(--t-h1); letter-spacing: var(--track-tight); color: var(--ink); } .t-h2 { font: var(--t-h2); letter-spacing: var(--track-tight); color: var(--ink); } .t-h3 { font: var(--t-h3); color: var(--ink); } .t-h4 { font: var(--t-h4); color: var(--ink); } .t-lead { font: var(--t-lead); color: var(--ink-2); } .t-body { font: var(--t-body); color: var(--ink-2); } .t-body-sm { font: var(--t-body-sm); color: var(--ink-2); } .t-meta { font: var(--t-meta); color: var(--ink-3); } .t-eyebrow { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); color: var(--ink-3); text-transform: uppercase; } .t-metric { font: var(--t-metric); letter-spacing: var(--track-display); color: var(--ink); font-variant-numeric: tabular-nums; } .eyebrow-row { display: flex; align-items: center; gap: var(--s-3); } .eyebrow-row .rule { display: block; width: 40px; height: 1px; background: currentColor; opacity: .5; } /* ============================================================ Layout ============================================================ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--s-9) 0; } .section--tight { padding: var(--s-7) 0; } .section--dark { background: var(--bg-3); color: #E8E5DE; } .section--dark .t-display, .section--dark .t-h1, .section--dark .t-h2, .section--dark .t-h3, .section--dark .t-h4 { color: #fff; } .section--dark .t-eyebrow, .section--dark .t-meta { color: #9C9F9A; } .section--dark .t-body, .section--dark .t-body-sm, .section--dark .t-lead { color: #C9C7C0; } .section--paper { background: var(--bg); } .section--bg2 { background: var(--bg-2); } .section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-7); } .section-head .left { max-width: 720px; } .section-head h2 { margin-top: var(--s-3); } .section-head .lead { margin-top: var(--s-3); color: var(--ink-3); max-width: 520px; } /* ============================================================ Top nav ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(245,244,241,.92); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--rule); } .nav__inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-6); align-items: center; height: 72px; } .nav__brand { display: flex; align-items: center; gap: var(--s-3); font: 700 18px/1 var(--font-display); letter-spacing: var(--track-tight); color: var(--ink); } .nav__brand .mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 800 14px/1 var(--font-mono); letter-spacing: 0; } .nav__brand .since { font: 500 11px/1 var(--font-mono); color: var(--ink-3); margin-left: 4px; } .nav__links { display: flex; gap: var(--s-6); justify-content: center; } .nav__links a { font: 500 14px/1 var(--font-sans); color: var(--ink-2); padding: 8px 0; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .nav__links a:hover { color: var(--accent); border-bottom-color: var(--accent); } .nav__cta { display: flex; gap: var(--s-3); align-items: center; } .nav__phone { font: 600 15px/1 var(--font-mono); color: var(--ink); letter-spacing: 0; } .nav__phone-sub { font: 400 11px/1 var(--font-mono); color: var(--ink-3); margin-top: 2px; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; font: 600 14px/1 var(--font-sans); letter-spacing: 0; border-radius: var(--r-1); transition: all var(--dur-fast) var(--ease); white-space: nowrap; } .btn:active { transform: scale(.99); } .btn--primary { background: var(--accent); color: var(--accent-on); } .btn--primary:hover { background: var(--accent-ink); } .btn--ink { background: var(--ink); color: var(--bg); } .btn--ink:hover { background: var(--ink-2); } .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-2); } .btn--ghost:hover { border-color: var(--ink); } .btn--ghost-on-dark { background: transparent; color: #fff; border: 1px solid var(--rule-ink); } .btn--ghost-on-dark:hover { border-color: #fff; } .btn--sm { height: 36px; padding: 0 14px; font-size: 13px; } .btn--lg { height: 52px; padding: 0 24px; font-size: 15px; } .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule-2); background: transparent; border-radius: var(--r-1); transition: all var(--dur-fast) var(--ease); } .icon-btn:hover { border-color: var(--ink); } /* ============================================================ Hero ============================================================ */ .hero { position: relative; padding: var(--s-10) 0 var(--s-9); overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--rule); } .hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s-9); align-items: end; } .hero__eyebrow { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); } .hero__eyebrow .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; } .hero__title { font: var(--t-mega); letter-spacing: var(--track-display); color: var(--ink); } .hero__title .accent { color: var(--accent); text-decoration: none; background: none; border: 0; } .hero__title .small { font-size: 0.55em; font-weight: 500; color: var(--ink-3); display: block; margin-top: var(--s-3); letter-spacing: 0; } .hero__lead { margin-top: var(--s-6); max-width: 560px; font: var(--t-lead); color: var(--ink-2); } .hero__cta { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-3); } .hero__visual { position: relative; align-self: stretch; } .hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } .stat { border-top: 1px solid var(--ink); padding-top: var(--s-4); } .stat__num { font: 700 48px/1 var(--font-display); letter-spacing: var(--track-display); color: var(--ink); font-variant-numeric: tabular-nums; } .stat__num .unit { font-size: 0.5em; font-weight: 500; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; } .stat__label { margin-top: var(--s-3); font: 400 13px/1.4 var(--font-sans); color: var(--ink-3); } .hero__strip { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); align-items: start; } .strip-item__num { font: 600 14px/1 var(--font-mono); color: var(--accent); margin-bottom: 6px; } .strip-item__title { font: 600 15px/1.3 var(--font-sans); color: var(--ink); margin-bottom: 6px; } .strip-item__text { font: 400 13px/1.5 var(--font-sans); color: var(--ink-3); } /* Hero "spec card" — drawn product silhouette */ .spec-card { background: var(--surface); border: 1px solid var(--rule); padding: var(--s-6); position: relative; } .spec-card::before { content: ""; position: absolute; inset: -1px -1px auto auto; width: 88px; height: 28px; background: var(--accent); color: var(--accent-on); } .spec-card__tag { position: absolute; top: 0; right: 0; width: 88px; height: 28px; display: grid; place-items: center; font: 600 11px/1 var(--font-mono); letter-spacing: 0.06em; color: #fff; text-transform: uppercase; } .spec-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-5); } .spec-card__title { font: var(--t-h3); } .spec-card__sku { font: 500 12px/1 var(--font-mono); color: var(--ink-3); } .spec-card__visual { height: 200px; margin: 0 -8px var(--s-5); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 100%), repeating-linear-gradient(90deg, var(--bg-2) 0, var(--bg-2) 6px, var(--rule) 6px, var(--rule) 7px); position: relative; overflow: hidden; } .spec-card__rows { display: grid; gap: var(--s-2); } .spec-card__row { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-top: 1px solid var(--rule); } .spec-card__row:first-child { border-top: none; } .spec-card__row dt { font: 400 13px/1 var(--font-sans); color: var(--ink-3); } .spec-card__row dd { margin: 0; font: 600 13px/1 var(--font-mono); color: var(--ink); } .spec-card__price { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--ink); display: flex; align-items: end; justify-content: space-between; } .spec-card__price .num { font: 700 32px/1 var(--font-display); color: var(--ink); letter-spacing: var(--track-display); } .spec-card__price .unit { font: 500 13px/1 var(--font-mono); color: var(--ink-3); margin-left: 6px; } /* ============================================================ Catalog ============================================================ */ .catalog__bar { display: flex; gap: var(--s-2); flex-wrap: wrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s-4) 0; margin-bottom: var(--s-7); } .catalog__chip { padding: 8px 14px; font: 500 13px/1 var(--font-sans); color: var(--ink-2); border: 1px solid transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .catalog__chip:hover { color: var(--accent); } .catalog__chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .catalog__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .product { background: var(--surface); padding: var(--s-5); display: flex; flex-direction: column; position: relative; transition: background var(--dur-fast) var(--ease); } .product:hover { background: var(--bg); } .product__thumb { height: 180px; margin: 0 calc(-1 * var(--s-5)) var(--s-5); margin-top: calc(-1 * var(--s-5)); background: var(--bg-2); position: relative; overflow: hidden; } .product__badge { position: absolute; top: 12px; left: 12px; font: 600 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 5px 8px; } .product__badge--accent { background: var(--accent); color: var(--accent-on); } .product__cat { font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 8px; } .product__title { font: 600 16px/1.3 var(--font-sans); color: var(--ink); margin-bottom: var(--s-2); } .product__specs { font: 400 13px/1.5 var(--font-sans); color: var(--ink-3); flex: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; } .product__specs span::before { content: "·"; margin-right: 6px; color: var(--ink-4); } .product__specs span:first-child::before { content: ""; margin-right: 0; } .product__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); display: flex; align-items: end; justify-content: space-between; } .product__price .num { font: 700 22px/1 var(--font-display); color: var(--ink); letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; } .product__price .unit { font: 500 12px/1 var(--font-mono); color: var(--ink-3); margin-left: 4px; } .product__from { font: 500 10px/1 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .product__add { width: 36px; height: 36px; display: grid; place-items: center; background: var(--ink); color: var(--bg); border-radius: var(--r-1); transition: background var(--dur-fast) var(--ease); } .product__add:hover { background: var(--accent); } /* Product visuals — drawn with CSS, not stock photos */ .viz-wire { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .viz-wire::before { content: ""; width: 80%; height: 16px; background: var(--w-color, var(--wire-zinc)); border-radius: 8px; box-shadow: inset 0 -4px 6px rgba(0,0,0,.2), inset 0 4px 6px rgba(255,255,255,.15); } .viz-mesh { position: absolute; inset: 14px; background-image: repeating-linear-gradient(45deg, var(--ink-3) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, var(--ink-3) 0 1px, transparent 1px 14px); opacity: .6; } .viz-rebar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; } .viz-rebar span { display: block; width: 6px; height: 70%; background: linear-gradient(180deg, #8E908F 0%, #5C5E5D 50%, #8E908F 100%); position: relative; } .viz-rebar span::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(15deg, transparent 0 6px, rgba(0,0,0,.3) 6px 8px); } .viz-nail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; } .viz-nail span { display: block; width: 3px; height: 60%; background: linear-gradient(180deg, #B6B7B0 0%, #6E6F69 100%); border-radius: 0 0 1px 1px; position: relative; } .viz-nail span::before { content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 9px; height: 4px; background: linear-gradient(180deg, #4A4B47, #1a1b18); border-radius: 50% 50% 0 0; } .viz-barbed { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .viz-barbed::before { content: ""; width: 90%; height: 2px; background: var(--ink-3); position: relative; } .viz-barbed::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--ink-3) 1px, transparent 2px), linear-gradient(45deg, transparent 47%, var(--ink-3) 47% 53%, transparent 53%), linear-gradient(-45deg, transparent 47%, var(--ink-3) 47% 53%, transparent 53%); background-size: 30px 8px, 30px 12px, 30px 12px; background-position: center; background-repeat: repeat-x; } /* ============================================================ Why us — capabilities ============================================================ */ .caps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-ink); border-left: 1px solid var(--rule-ink); } .cap { padding: var(--s-7) var(--s-6); border-right: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); display: flex; flex-direction: column; gap: var(--s-4); } .cap__num { font: 600 12px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--accent); } .cap__title { font: 700 22px/1.2 var(--font-display); color: #fff; letter-spacing: var(--track-tight); } .cap__text { font: 400 14px/1.55 var(--font-sans); color: #BDBFB7; } .cap__metric { margin-top: auto; display: flex; align-items: baseline; gap: 8px; padding-top: var(--s-5); border-top: 1px solid var(--rule-ink); } .cap__metric .v { font: 700 28px/1 var(--font-display); color: #fff; letter-spacing: var(--track-display); } .cap__metric .u { font: 500 12px/1 var(--font-mono); color: #9C9F9A; } /* ============================================================ Suppliers ticker ============================================================ */ .suppliers { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-7); align-items: center; padding: var(--s-7) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .suppliers__row { display: flex; gap: var(--s-7); flex-wrap: wrap; align-items: center; } .supplier { display: flex; flex-direction: column; gap: 4px; padding: var(--s-2) var(--s-4); border-left: 2px solid var(--accent); } .supplier__name { font: 700 16px/1 var(--font-display); color: var(--ink); letter-spacing: var(--track-tight); } .supplier__city { font: 500 11px/1 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; } /* ============================================================ Geography ============================================================ */ .geo { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-9); } .cities { display: grid; gap: 0; } .city { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--rule); } .city:last-child { border-bottom: 1px solid var(--rule); } .city__num { font: 600 12px/1 var(--font-mono); color: var(--ink-3); } .city__name { font: 700 28px/1.1 var(--font-display); color: var(--ink); letter-spacing: var(--track-tight); } .city__name span { font: 500 12px/1 var(--font-mono); color: var(--ink-3); margin-left: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .city__meta { font: 500 13px/1.4 var(--font-mono); color: var(--ink-3); text-align: right; } /* ============================================================ Contact form / footer block ============================================================ */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: start; } .contact__info p { color: #BDBFB7; } .contact__list { display: grid; gap: var(--s-5); margin-top: var(--s-7); } .contact__row { display: grid; grid-template-columns: 90px 1fr; gap: var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--rule-ink); align-items: baseline; } .contact__row:last-child { border-bottom: 1px solid var(--rule-ink); } .contact__row dt { font: 600 11px/1 var(--font-mono); letter-spacing: 0.1em; color: #9C9F9A; text-transform: uppercase; } .contact__row dd { margin: 0; font: 500 16px/1.4 var(--font-sans); color: #fff; } .contact__row dd a:hover { color: var(--accent); } .form { background: #25282B; padding: var(--s-7); display: grid; gap: var(--s-4); border: 1px solid var(--rule-ink); } .form h3 { color: #fff; font: 700 22px/1.2 var(--font-display); letter-spacing: var(--track-tight); margin-bottom: var(--s-2); } .form p { color: #9C9F9A; font-size: 13px; margin-bottom: var(--s-3); } .field { display: grid; gap: 6px; } .field label { font: 500 11px/1 var(--font-mono); color: #9C9F9A; letter-spacing: 0.1em; text-transform: uppercase; } .field input, .field textarea, .field select { background: #1B1D1F; color: #fff; border: 1px solid var(--rule-ink); padding: 12px 14px; font: 500 14px/1.4 var(--font-sans); border-radius: var(--r-1); transition: border-color var(--dur-fast) var(--ease); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); } .field textarea { resize: vertical; min-height: 80px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .form__legal { font: 400 11px/1.4 var(--font-sans); color: #6E716A; } /* ============================================================ Footer ============================================================ */ .footer { padding: var(--s-7) 0 var(--s-5); border-top: 1px solid var(--rule-ink); background: var(--bg-3); color: #C9C7C0; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-7); margin-bottom: var(--s-7); } .footer h4 { font: 600 12px/1 var(--font-mono); color: #9C9F9A; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-4); } .footer ul { display: grid; gap: 10px; } .footer ul a { font: 400 14px/1 var(--font-sans); color: #C9C7C0; } .footer ul a:hover { color: var(--accent); } .footer__bottom { display: flex; justify-content: space-between; padding-top: var(--s-5); border-top: 1px solid var(--rule-ink); font: 500 12px/1 var(--font-mono); color: #6E716A; } /* ============================================================ Sticky callback button ============================================================ */ .sticky-cta { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: flex; align-items: center; gap: 10px; background: var(--accent); color: #fff; padding: 12px 18px; font: 600 13px/1 var(--font-sans); box-shadow: var(--shadow-sticky); border-radius: var(--r-1); transition: background var(--dur-fast) var(--ease); } .sticky-cta:hover { background: var(--accent-ink); } /* ============================================================ Density modes ============================================================ */ html[data-density="comfy"] .section { padding: calc(var(--s-9) + 32px) 0; } html[data-density="dense"] .section { padding: var(--s-7) 0; } html[data-density="dense"] .hero { padding: var(--s-9) 0 var(--s-7); } /* ============================================================ Card style variants ============================================================ */ html[data-cardstyle="bordered"] .product { background: var(--surface); } html[data-cardstyle="paper"] .product { background: transparent; } html[data-cardstyle="paper"] .product__thumb { background: var(--bg-2); } html[data-cardstyle="contrast"] .product { background: var(--ink); color: #C9C7C0; } html[data-cardstyle="contrast"] .product__title { color: #fff; } html[data-cardstyle="contrast"] .product__price .num { color: #fff; } html[data-cardstyle="contrast"] .product__cat, html[data-cardstyle="contrast"] .product__specs, html[data-cardstyle="contrast"] .product__price .unit { color: #9C9F9A; } html[data-cardstyle="contrast"] .product__foot { border-top-color: var(--rule-ink); } html[data-cardstyle="contrast"] .product__add { background: var(--accent); } /* ============================================================ Responsive (light pass — desktop-first design) ============================================================ */ @media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); } .hero__strip { grid-template-columns: repeat(2, 1fr); } .catalog__grid { grid-template-columns: repeat(2, 1fr); } .caps { grid-template-columns: repeat(2, 1fr); } .geo { grid-template-columns: 1fr; } .contact { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .nav__links { display: none; } } @media (max-width: 640px) { :root { --s-9: 64px; --s-10: 80px; --gutter: 20px; } .hero__title { font-size: 56px; } .catalog__grid { grid-template-columns: 1fr; } .caps { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .form__row { grid-template-columns: 1fr; } } /* ============================================================ Scroll reveal — staggered ============================================================ */ html { scroll-behavior: smooth; } .reveal { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: 60ms; } .reveal[data-d="2"] { transition-delay: 120ms; } .reveal[data-d="3"] { transition-delay: 180ms; } .reveal[data-d="4"] { transition-delay: 240ms; } .reveal[data-d="5"] { transition-delay: 300ms; } .reveal[data-d="6"] { transition-delay: 360ms; } /* ============================================================ Scroll progress bar ============================================================ */ .scrollbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent; z-index: 60; pointer-events: none; } .scrollbar__fill { height: 100%; width: 0%; background: var(--accent); transition: width 80ms linear; } /* ============================================================ Hero entrance ============================================================ */ @keyframes heroFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes heroLine { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } } .hero__eyebrow .dot { animation: heroPulse 2.4s var(--ease) infinite; } @keyframes heroPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,80,28,.55); } 50% { box-shadow: 0 0 0 8px rgba(232,80,28,0); } } .hero__title { animation: heroFade 720ms var(--ease) both; } .hero__title .accent { color: var(--accent); } .hero__lead { animation: heroFade 720ms var(--ease) 180ms both; } .hero__cta { animation: heroFade 720ms var(--ease) 280ms both; } .hero__stats .stat { animation: heroFade 600ms var(--ease) both; } .hero__stats .stat:nth-child(1) { animation-delay: 360ms; } .hero__stats .stat:nth-child(2) { animation-delay: 440ms; } .hero__stats .stat:nth-child(3) { animation-delay: 520ms; } .hero__stats .stat:nth-child(4) { animation-delay: 600ms; } .hero__strip .strip-item { animation: heroFade 600ms var(--ease) both; } .hero__strip .strip-item:nth-child(1) { animation-delay: 700ms; } .hero__strip .strip-item:nth-child(2) { animation-delay: 760ms; } .hero__strip .strip-item:nth-child(3) { animation-delay: 820ms; } .hero__strip .strip-item:nth-child(4) { animation-delay: 880ms; } /* ============================================================ Nav link underline draw ============================================================ */ .nav__links a { position: relative; border-bottom: none !important; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 280ms var(--ease); } .nav__links a:hover { color: var(--accent); } .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } /* ============================================================ Buttons — sheen sweep on hover ============================================================ */ .btn { position: relative; overflow: hidden; isolation: isolate; } .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-120%); transition: transform 600ms var(--ease); pointer-events: none; } .btn:hover::after { transform: translateX(120%); } .btn--ghost::after { background: linear-gradient(120deg, transparent 30%, rgba(14,16,18,.06) 50%, transparent 70%); } /* ============================================================ Product card — lift, sheen, viz wobble ============================================================ */ .product { transition: background var(--dur-fast) var(--ease), transform 280ms var(--ease), box-shadow 280ms var(--ease); will-change: transform; } .product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); z-index: 2; } .product__thumb { position: relative; overflow: hidden; } .product__thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 200px at var(--mx, 50%) var(--my, 50%), rgba(232,80,28,.12), transparent 60%); opacity: 0; transition: opacity 240ms var(--ease); pointer-events: none; } .product:hover .product__thumb::after { opacity: 1; } .product__thumb::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: skewX(-12deg); transition: transform 800ms var(--ease); pointer-events: none; z-index: 1; } .product:hover .product__thumb::before { transform: translateX(420%) skewX(-12deg); } .product__add { transition: background var(--dur-fast) var(--ease), transform 220ms var(--ease); } .product:hover .product__add { transform: rotate(90deg); background: var(--accent); } .product__title { transition: color 160ms var(--ease); } .product:hover .product__title { color: var(--accent); } /* viz subtle motion on hover */ .viz-rebar span, .viz-nail span, .viz-wire, .viz-mesh, .viz-barbed { transition: transform 600ms var(--ease); } .product:hover .viz-rebar span:nth-child(odd) { transform: translateY(-3px); } .product:hover .viz-rebar span:nth-child(even){ transform: translateY(3px); } .product:hover .viz-nail span:nth-child(2n) { transform: translateY(-2px); } .product:hover .viz-wire { transform: scale(1.04); } .product:hover .viz-mesh { transform: scale(1.03) rotate(0.6deg); } .product:hover .viz-barbed { transform: scale(1.04); } /* ============================================================ Catalog chip — animated underline ============================================================ */ .catalog__chip { position: relative; } .catalog__chip::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease); } .catalog__chip:hover::after { transform: scaleX(1); } .catalog__chip[aria-pressed="true"]::after { display: none; } .catalog__chip { transition: background 180ms var(--ease), color 180ms var(--ease); } /* ============================================================ Cap cards — cursor spotlight (dark section) ============================================================ */ .cap { position: relative; transition: background 320ms var(--ease); overflow: hidden; } .cap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(360px 240px at var(--mx, 50%) var(--my, 50%), rgba(232,80,28,.14), transparent 65%); opacity: 0; transition: opacity 240ms var(--ease); pointer-events: none; } .cap:hover::before { opacity: 1; } .cap:hover { background: rgba(255,255,255,.02); } .cap__title { transition: transform 320ms var(--ease); } .cap:hover .cap__title { transform: translateX(6px); } .cap__num { transition: color 240ms var(--ease); } .cap:hover .cap__num { color: #fff; } /* ============================================================ Suppliers — marquee ============================================================ */ .suppliers__row { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .marquee { display: flex; gap: var(--s-7); animation: marquee 28s linear infinite; width: max-content; } .suppliers:hover .marquee { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .supplier { transition: border-color 200ms var(--ease), transform 200ms var(--ease); } .supplier:hover { border-left-color: var(--ink); transform: translateY(-2px); } .supplier:hover .supplier__name { color: var(--accent); } .supplier__name { transition: color 160ms var(--ease); } /* ============================================================ City rows — slide-in arrow on hover ============================================================ */ .city { transition: padding 240ms var(--ease), background 240ms var(--ease); position: relative; cursor: pointer; } .city::after { content: "→"; position: absolute; right: -32px; top: 50%; transform: translateY(-50%); color: var(--accent); font: 600 24px/1 var(--font-display); opacity: 0; transition: opacity 220ms var(--ease), right 220ms var(--ease); } .city:hover { padding-left: 12px; padding-right: 44px; } .city:hover::after { opacity: 1; right: 8px; } .city:hover .city__name { color: var(--accent); } .city__name { transition: color 200ms var(--ease); } /* ============================================================ Form — focus ring ============================================================ */ .field input, .field textarea, .field select { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background 160ms var(--ease); } .field input:hover, .field textarea:hover, .field select:hover { border-color: #4A4D52; } .field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 3px rgba(232,80,28,.18); } /* ============================================================ Sticky CTA — entrance + pulse ============================================================ */ .sticky-cta { animation: stickyIn 320ms var(--ease) both; } @keyframes stickyIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .sticky-cta::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--accent); opacity: .35; z-index: -1; animation: stickyHalo 2.6s var(--ease) infinite; } .sticky-cta { position: fixed; } @keyframes stickyHalo { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.08); opacity: 0; } } /* ============================================================ Counter target placeholder ============================================================ */ .stat__num, .cap__metric .v { font-variant-numeric: tabular-nums; } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ============================================================ Donor-like header, city popup, mega-menu and inner pages ============================================================ */ .nav__util { border-bottom: 1px solid var(--rule); background: rgba(234,232,226,.82); } .nav__util-inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); } .nav__city { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--font-sans); color: var(--ink-3); } .nav__city strong { color: var(--ink); } .nav__city-edit { color: var(--accent); } .nav__util-right { display: flex; align-items: center; gap: var(--s-4); font: 500 12px/1 var(--font-sans); color: var(--ink-3); } .nav__util-right a:hover { color: var(--accent); } .nav__util-sep { color: var(--rule-2); } .brand-text { display: flex; align-items: baseline; gap: 3px; } .nav__search { height: 44px; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); border: 1px solid var(--rule); background: var(--surface); } .nav__search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 14px/1 var(--font-sans); } .nav__search input::placeholder { color: var(--ink-4); } .nav__phone-block { display: grid; gap: 4px; text-align: right; } .nav__menu { height: 48px; display: flex; align-items: stretch; gap: var(--s-5); border-top: 1px solid var(--rule); position: relative; } .nav__catalog-btn { min-width: 170px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); background: var(--accent); color: #fff; padding: 0 var(--s-5); font: 700 14px/1 var(--font-sans); transition: background var(--dur-fast) var(--ease); } .nav__catalog-btn:hover, .nav__catalog-btn.is-open { background: var(--accent-ink); } .burger { width: 18px; display: grid; gap: 4px; } .burger span { height: 2px; background: currentColor; } .nav__links { flex: 1; align-items: center; justify-content: flex-start; gap: var(--s-5); } .nav__links li { position: relative; height: 100%; display: flex; align-items: center; } .nav__links .caret { margin-left: 5px; font-size: 10px; color: var(--ink-4); } .nav__sub { position: absolute; top: calc(100% + 1px); left: -18px; width: 260px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sticky); padding: var(--s-2); z-index: 90; } .nav__sub li { display: block; height: auto; } .nav__sub a { display: block; padding: 11px 12px; font: 500 13px/1.25 var(--font-sans); border: 0 !important; } .nav__sub a::after { display: none; } .nav__sub-head a { color: var(--accent); background: var(--accent-bg); } .megamenu { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 1px); z-index: 80; } .megamenu__inner { width: min(960px, 100%); min-height: 430px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sticky); } .megamenu__col { width: 360px; min-height: 430px; border-right: 1px solid var(--rule); } .megamenu__cat { position: static; } .megamenu__cat-link { min-height: 48px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); font: 600 14px/1.25 var(--font-sans); color: var(--ink); } .megamenu__cat-link:hover { background: var(--accent-bg); color: var(--accent-ink); } .megamenu__chev { color: var(--ink-4); font-size: 20px; } .megamenu__panel { display: none; position: absolute; top: 1px; left: 360px; right: 1px; bottom: 1px; padding: var(--s-6); overflow: auto; background: var(--surface); } .megamenu__cat:hover .megamenu__panel { display: block; } .megamenu__panel-title { font: 700 30px/1.1 var(--font-display); color: var(--ink); letter-spacing: var(--track-tight); margin-bottom: var(--s-5); } .megamenu__panel-list { display: grid; gap: var(--s-4); } .megamenu__panel-link { font: 700 15px/1.25 var(--font-sans); color: var(--ink); } .megamenu__panel-link:hover { color: var(--accent); } .megamenu__panel-sub { margin-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2); } .megamenu__panel-sub a { padding: 6px 9px; background: var(--bg-2); color: var(--ink-3); font: 500 12px/1 var(--font-sans); } .megamenu__panel-sub a:hover { background: var(--accent); color: #fff; } .city-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--s-5); background: rgba(14,16,18,.46); backdrop-filter: blur(4px); } .city-modal { position: relative; width: min(720px, 100%); background: var(--surface); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow-sticky); padding: var(--s-7); } .city-modal__close { position: absolute; right: 16px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink-3); font-size: 24px; } .city-modal__title { margin-top: var(--s-3); font: var(--t-h1); color: var(--ink); } .city-modal__lead { max-width: 520px; margin-top: var(--s-3); color: var(--ink-3); font: var(--t-body); } .city-modal__list { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .city-card { min-height: 128px; display: grid; gap: 7px; align-content: start; text-align: left; background: var(--surface); padding: var(--s-5); position: relative; } .city-card:hover, .city-card.is-active { background: var(--accent-bg); } .city-card__name { font: 700 24px/1.1 var(--font-display); color: var(--ink); } .city-card__phone { font: 600 13px/1 var(--font-mono); color: var(--accent-ink); } .city-card__note { font: 400 13px/1.35 var(--font-sans); color: var(--ink-3); } .city-card__arrow { position: absolute; right: 18px; bottom: 16px; color: var(--accent); font: 700 22px/1 var(--font-display); } .city-modal__hint { margin-top: var(--s-4); font: 500 12px/1.4 var(--font-sans); color: var(--ink-4); } .cat-tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .cat-tile { min-height: 250px; background: var(--surface); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); transition: background var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease); } .cat-tile:hover { background: var(--bg); transform: translateY(-3px); z-index: 1; } .cat-tile__num, .cat-tile__more, .cat-page__group div span, .info-card__num { font: 600 12px/1 var(--font-mono); color: var(--ink-3); } .cat-tile__icon { color: var(--accent); } .cat-tile__title { font: 700 22px/1.15 var(--font-display); color: var(--ink); letter-spacing: var(--track-tight); } .cat-tile__sub { display: grid; gap: 6px; margin-top: auto; font: 400 13px/1.35 var(--font-sans); color: var(--ink-3); } .cat-tile__more { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); } .cat-pages { display: grid; gap: var(--s-5); } .cat-page { scroll-margin-top: 170px; display: grid; grid-template-columns: 360px 1fr; gap: var(--s-7); align-items: start; padding: var(--s-6); background: var(--surface); border: 1px solid var(--rule); } .cat-page__head { display: grid; grid-template-columns: 74px 1fr; gap: var(--s-4); align-items: center; } .cat-page__icon { width: 74px; height: 74px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent-ink); } .cat-page h3 { margin-top: 6px; font: var(--t-h2); color: var(--ink); } .cat-page p { color: var(--ink-3); max-width: 520px; } .cat-page__links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .cat-page__group { min-height: 96px; padding: var(--s-4); background: var(--bg); } .cat-page__group a { display: block; font: 700 14px/1.25 var(--font-sans); color: var(--ink); } .cat-page__group a:hover { color: var(--accent); } .cat-page__group div { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2); } .cat-page__group div span { padding: 5px 7px; background: var(--surface); } .about { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s-9); align-items: start; } .about__visual { position: sticky; top: 160px; } .about__photo { min-height: 420px; position: relative; overflow: hidden; border: 1px solid var(--rule); background: var(--bg-2); } .about__photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; filter: grayscale(.25) contrast(1.04); } .about__photo-tag { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 8px 10px; background: var(--accent); color: #fff; font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } .about__photo-grid { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; } .about__photo-grid span { border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); } .about__certs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-top: 0; } .about__cert { padding: var(--s-4); background: var(--surface); border-right: 1px solid var(--rule); font: 600 12px/1.3 var(--font-mono); color: var(--ink-3); } .about__cert:last-child { border-right: 0; } .about__list { display: grid; gap: 10px; } .about__list li { position: relative; padding-left: 22px; color: var(--ink-3); } .about__list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 8px; height: 8px; background: var(--accent); } .about__list span { color: var(--ink); font-weight: 700; } .delivery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); } .dv-block { background: var(--surface); padding: var(--s-6); } .dv-block--accent { background: var(--ink); color: #fff; } .dv-block__num { font: 700 13px/1 var(--font-mono); color: var(--accent); margin-bottom: var(--s-4); } .dv-block__title { font: var(--t-h2); color: inherit; margin-bottom: var(--s-5); } .dv-block__list { display: grid; gap: var(--s-4); } .dv-block__list li { display: grid; gap: 4px; padding-top: var(--s-3); border-top: 1px solid var(--rule); } .dv-block--accent .dv-block__list li { border-top-color: var(--rule-ink); } .dv-block__list span { font: 700 14px/1.25 var(--font-sans); color: var(--ink); } .dv-block--accent .dv-block__list span { color: #fff; } .dv-block__list em { font: 400 13px/1.4 var(--font-sans); color: var(--ink-3); } .dv-block--accent .dv-block__list em { color: #BDBFB7; } .dv-times { display: grid; gap: var(--s-4); } .dv-times div { display: grid; grid-template-columns: 82px 1fr; gap: var(--s-4); align-items: center; padding-top: var(--s-3); border-top: 1px solid var(--rule-ink); } .dv-times__v { font: 700 28px/1 var(--font-display); color: #fff; } .fleet { margin-top: var(--s-6); display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); } .fleet__head, .fleet__item { background: var(--surface); padding: var(--s-5); } .fleet__head h3 { margin-top: var(--s-2); font: var(--t-h3); color: var(--ink); } .fleet__item { display: grid; gap: 7px; } .fleet__item strong { font: 700 18px/1 var(--font-display); color: var(--ink); } .fleet__item span, .fleet__item em { font: 500 12px/1.3 var(--font-sans); color: var(--ink-3); } .art-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--s-7); align-items: start; } .articles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .article { min-height: 250px; background: var(--surface); padding: var(--s-5); display: flex; flex-direction: column; } .article:hover { background: var(--bg); } .article__meta { display: flex; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); } .article__tag, .article__date, .article__more, .news-item__date { font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .article__date, .news-item__date { color: var(--ink-4); } .article__title { font: 700 20px/1.22 var(--font-display); color: var(--ink); } .article__excerpt { margin-top: var(--s-3); color: var(--ink-3); font: 400 14px/1.5 var(--font-sans); } .article__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; } .news-aside { position: sticky; top: 160px; background: var(--surface); border: 1px solid var(--rule); padding: var(--s-6); } .news-list { display: grid; } .news-item { display: grid; gap: 8px; padding: var(--s-4) 0; border-top: 1px solid var(--rule); } .news-item__title { font: 600 14px/1.35 var(--font-sans); color: var(--ink); } .news-item__title:hover { color: var(--accent); } .page-band { scroll-margin-top: 140px; } .page-grid, .team-grid, .cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .info-card, .person, .cert-card { min-height: 220px; background: var(--surface); padding: var(--s-5); } .info-card h3, .person h3 { margin-top: var(--s-4); font: 700 21px/1.2 var(--font-display); color: var(--ink); } .info-card p, .person p, .cert-card p { margin-top: var(--s-3); color: var(--ink-3); font: 400 14px/1.5 var(--font-sans); } .person { min-height: 250px; display: flex; flex-direction: column; } .person span { font: 600 11px/1 var(--font-mono); color: var(--accent); letter-spacing: .08em; text-transform: uppercase; } .person a { margin-top: var(--s-3); font: 600 13px/1 var(--font-mono); color: var(--ink); } .person a:hover { color: var(--accent); } .jobs { display: grid; gap: var(--s-4); } .job { background: var(--surface); border: 1px solid var(--rule); padding: var(--s-6); } .job h3 { font: var(--t-h2); color: var(--ink); } .job p { max-width: 720px; margin-top: var(--s-3); color: var(--ink-3); } .job__cols { margin: var(--s-5) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } .job__cols div { display: grid; gap: 8px; } .job__cols strong { font: 700 12px/1 var(--font-mono); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; } .job__cols span { color: var(--ink-3); font: 400 14px/1.35 var(--font-sans); } .gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .gallery-tile { min-height: 190px; background: var(--surface); display: grid; place-items: center; align-content: center; gap: var(--s-3); color: var(--accent); } .gallery-tile span { font: 700 13px/1.25 var(--font-sans); color: var(--ink); } .letters { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s-7); } .letters__stack { display: grid; gap: var(--s-3); } .letters__stack article { background: var(--surface); border: 1px solid var(--rule); padding: var(--s-5); } .letters__stack span { font: 700 11px/1 var(--font-mono); color: var(--accent); } .letters__stack h3 { margin-top: var(--s-3); font: var(--t-h3); color: var(--ink); } .letters__stack p { margin-top: var(--s-2); color: var(--ink-3); } .cert-card span { display: block; font: 700 28px/1 var(--font-display); color: var(--accent); letter-spacing: var(--track-tight); } .supplier-page { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--s-7); align-items: start; } .supplier-page ul { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .supplier-page li { background: var(--surface); padding: var(--s-4); color: var(--ink); } .faq { display: grid; gap: var(--s-3); max-width: 960px; } .faq-item { background: var(--surface); border: 1px solid var(--rule); } .faq-item__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-5); text-align: left; font: 700 18px/1.3 var(--font-display); color: var(--ink); } .faq-item__plus { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent-ink); } .faq-item__body { display: none; padding: 0 var(--s-5) var(--s-5); } .faq-item__body p { max-width: 780px; color: var(--ink-3); } .faq-item.is-open .faq-item__body { display: block; } .viz-granula { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 24px); gap: 10px; place-content: center; } .viz-granula span { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(145deg, var(--accent-bg), var(--accent)); box-shadow: inset -4px -5px 8px rgba(0,0,0,.12), inset 3px 3px 7px rgba(255,255,255,.3); } .viz-granula span:nth-child(3n) { background: linear-gradient(145deg, #DAD6CB, #9F9A8D); } .viz-granula span:nth-child(4n) { background: linear-gradient(145deg, #5C6168, #1B1D1F); } @media (max-width: 1180px) { .nav__inner { grid-template-columns: auto 1fr; height: auto; padding: var(--s-4) 0; } .nav__search { grid-column: 1 / -1; order: 3; } .nav__cta { justify-content: end; } .cat-tree { grid-template-columns: repeat(2, 1fr); } .delivery-grid { grid-template-columns: 1fr; } .fleet { grid-template-columns: repeat(2, 1fr); } .fleet__head { grid-column: 1 / -1; } .art-grid, .about, .letters, .supplier-page { grid-template-columns: 1fr; } .about__visual, .news-aside { position: static; } .page-grid, .team-grid, .cert-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { :root { --t-mega: 800 46px/1 var(--font-display); --t-display: 700 38px/1.06 var(--font-display); --t-h1: 700 32px/1.1 var(--font-display); --t-h2: 700 25px/1.16 var(--font-display); } .nav__util-right, .nav__phone-block, .nav__cta .btn { display: none; } .nav__util-inner { justify-content: center; } .nav__inner { grid-template-columns: 1fr auto; gap: var(--s-3); } .nav__menu { height: auto; align-items: stretch; gap: 0; } .nav__catalog-btn { min-width: 148px; height: 48px; } .nav__links { display: none; } .megamenu { left: var(--gutter); right: var(--gutter); top: 100%; } .megamenu__inner { min-height: auto; } .megamenu__col { width: 100%; min-height: auto; border-right: 0; } .megamenu__panel { position: static; display: block; padding: 0 var(--s-4) var(--s-4) 52px; } .megamenu__panel-title { display: none; } .city-modal { padding: var(--s-6) var(--s-5); } .city-modal__list, .cat-tree, .cat-page__links, .articles, .page-grid, .team-grid, .cert-grid, .gallery-grid, .job__cols, .fleet { grid-template-columns: 1fr; } .cat-page { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5); } .cat-page__head { grid-template-columns: 58px 1fr; } .cat-page__icon { width: 58px; height: 58px; } .hero__strip, .hero__stats { grid-template-columns: 1fr; } .section-head { display: grid; align-items: start; } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { display: grid; gap: var(--s-3); } }