Продукция CST Каталог шин
Поиск по названию, назначению, диаметру и размеру. Все карточки строятся из каталожных данных, а не из изображения страницы.
17 моделейВ текущей базе велосипедных шин. Линейки мото- и квадрошин будут добавляться после получения спецификаций CST.
Велосипедные шины
Найдено: 0
margin:0; font-size:clamp(44px,6vw,78px); line-height:.94;
letter-spacing:-.05em; font-weight:900; text-transform:uppercase;
}
#cst-catalog .cc-hero {
padding:96px 0 74px; color:#fff;
background:
radial-gradient(circle at 82% 18%,rgba(241,90,34,.25),transparent 28%),
linear-gradient(135deg,#111418,#20262c);
}
#cst-catalog .cc-hero__row {
display:grid; grid-template-columns:1fr 360px; gap:52px; align-items:end;
}
#cst-catalog .cc-hero p { max-width:690px; margin:23px 0 0; color:rgba(255,255,255,.62); font-size:18px; line-height:1.55; }
#cst-catalog .cc-hero__meta {
padding:24px; border-left:3px solid var(--orange); background:rgba(255,255,255,.05);
}
#cst-catalog .cc-hero__meta b { display:block; margin-bottom:5px; font-size:30px; }
#cst-catalog .cc-hero__meta span { color:rgba(255,255,255,.55); font-size:13px; line-height:1.45; }
#cst-catalog .cc-toolbar { position:relative; z-index:5; margin-top:-28px; }
#cst-catalog .cc-toolbar__box {
padding:18px; display:grid; grid-template-columns:1.4fr .7fr .65fr auto;
gap:10px; border:1px solid var(--line); background:#fff; box-shadow:0 18px 45px rgba(17,20,24,.1);
}
#cst-catalog .cc-field { position:relative; }
#cst-catalog .cc-field input, #cst-catalog .cc-field select {
width:100%; height:52px; padding:0 15px; border:1px solid var(--line);
border-radius:2px; color:var(--ink); background:#fff;
}
#cst-catalog .cc-field input { padding-left:44px; }
#cst-catalog .cc-field svg {
position:absolute; left:16px; top:50%; width:18px; height:18px;
transform:translateY(-50%); stroke:#70757b;
}
#cst-catalog .cc-reset {
min-width:52px; height:52px; border:1px solid var(--line); background:var(--soft);
color:#4d5359; transition:background .2s,color .2s,transform .2s;
}
#cst-catalog .cc-reset:hover { color:#fff; background:var(--ink); transform:rotate(-8deg); }
#cst-catalog :focus-visible { outline:3px solid rgba(241,90,34,.35); outline-offset:2px; }
#cst-catalog .cc-body { padding:54px 0 100px; background:var(--soft); }
#cst-catalog .cc-tabs { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:36px; }
#cst-catalog .cc-tab {
min-height:44px; padding:0 18px; border:1px solid var(--line); border-radius:30px;
color:#4f565d; background:#fff; font-size:13px; font-weight:800; text-transform:uppercase;
transition:.2s ease;
}
#cst-catalog .cc-tab:hover, #cst-catalog .cc-tab.is-active { color:#fff; border-color:var(--orange); background:var(--orange); }
#cst-catalog .cc-results-head {
display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px;
}
#cst-catalog .cc-results-head h2 { margin:0; font-size:24px; text-transform:uppercase; }
#cst-catalog .cc-count { color:#777e85; font-size:14px; }
#cst-catalog .cc-count b { color:var(--orange); }
#cst-catalog .cc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
#cst-catalog .cc-card {
min-width:0; min-height:420px; padding:0; overflow:hidden; position:relative;
display:flex; flex-direction:column; border:1px solid var(--line); border-radius:2px;
color:var(--ink); background:#fff; text-align:left;
transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
#cst-catalog .cc-card:hover {
transform:translateY(-7px); border-color:rgba(241,90,34,.65); box-shadow:0 20px 44px rgba(17,20,24,.1);
}
#cst-catalog .cc-card__visual {
height:220px; position:relative; display:grid; place-items:center; overflow:hidden;
background:
radial-gradient(circle at 72% 25%,rgba(241,90,34,.18),transparent 35%),
linear-gradient(145deg,#f6f6f3,#e8eae8);
}
#cst-catalog .cc-product-image {
width:88%; height:88%; position:relative; z-index:1; object-fit:contain;
filter:drop-shadow(0 20px 22px rgba(17,20,24,.22));
transition:transform .48s cubic-bezier(.2,.7,.2,1);
}
#cst-catalog .cc-card:hover .cc-product-image { transform:scale(1.07) rotate(2deg); }
#cst-catalog .cc-tire {
width:146px; height:146px; position:relative; display:grid; place-items:center;
border:23px solid #121519; border-radius:50%; transform:rotate(-16deg);
box-shadow:inset 0 0 0 4px #3d4247,0 25px 34px rgba(17,20,24,.22);
transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
#cst-catalog .cc-card:hover .cc-tire { transform:rotate(4deg) scale(1.06); }
#cst-catalog .cc-tire:before {
content:""; position:absolute; inset:-18px; border:5px dashed #454b51; border-radius:50%;
}
#cst-catalog .cc-tire:after { content:"CST"; color:#fff; font-size:18px; font-weight:900; transform:rotate(16deg); }
#cst-catalog .cc-card__tech {
position:absolute; left:16px; top:16px; padding:6px 9px; color:#fff; background:var(--ink);
font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
#cst-catalog .cc-card__body { flex:1; padding:22px; display:flex; flex-direction:column; }
#cst-catalog .cc-card__eyebrow { color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
#cst-catalog .cc-card h3 { margin:8px 0 9px; font-size:25px; line-height:1; text-transform:uppercase; }
#cst-catalog .cc-card p {
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
margin:0; color:#656c72; font-size:14px; line-height:1.48;
}
#cst-catalog .cc-card__foot {
margin-top:auto; padding-top:18px; display:flex; justify-content:space-between; align-items:center;
color:#5e646a; font-size:12px; border-top:1px solid var(--line);
}
#cst-catalog .cc-card__foot b { color:var(--ink); }
#cst-catalog .cc-empty {
grid-column:1/-1; padding:72px 24px; text-align:center; border:1px dashed #c9ced2; background:#fff;
}
#cst-catalog .cc-empty h3 { margin:0 0 10px; font-size:28px; text-transform:uppercase; }
#cst-catalog .cc-empty p { max-width:560px; margin:0 auto 22px; color:#697077; line-height:1.55; }
#cst-catalog .cc-btn {
min-height:50px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
border:1px solid transparent; border-radius:2px; color:#fff; background:var(--orange);
font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; transition:.22s ease;
}
#cst-catalog .cc-btn:hover { transform:translateY(-3px); background:var(--orange2); }
#cst-catalog .cc-btn--dark { background:var(--ink); }
#cst-catalog .cc-modal {
position:fixed; inset:0; z-index:999999; display:none; align-items:stretch; justify-content:flex-end;
}
#cst-catalog .cc-modal.is-open { display:flex; }
#cst-catalog .cc-modal__backdrop { position:absolute; inset:0; border:0; background:rgba(5,7,9,.72); backdrop-filter:blur(6px); }
#cst-catalog .cc-modal__panel {
width:min(720px,100%); height:100%; position:relative; z-index:1; overflow:auto; color:var(--ink); background:#fff;
animation:ccSlide .34s cubic-bezier(.2,.7,.2,1);
}
@keyframes ccSlide { from{transform:translateX(100%)} to{transform:none} }
#cst-catalog .cc-modal__top {
padding:28px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px;
border-bottom:1px solid var(--line); position:sticky; top:0; z-index:3; background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
}
#cst-catalog .cc-close {
width:44px; height:44px; border:1px solid var(--line); background:var(--soft); font-size:24px;
}
#cst-catalog .cc-modal__hero {
padding:34px 30px; display:grid; grid-template-columns:180px 1fr; gap:32px; align-items:center; background:var(--soft);
}
#cst-catalog .cc-modal__hero .cc-tire { margin:auto; }
#cst-catalog .cc-modal__media { min-width:0; }
#cst-catalog .cc-modal__image {
width:180px; height:180px; display:block; object-fit:contain;
filter:drop-shadow(0 22px 22px rgba(17,20,24,.20));
}
#cst-catalog .cc-thumbs { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
#cst-catalog .cc-thumb {
width:42px; height:42px; padding:3px; border:1px solid var(--line); background:#fff;
}
#cst-catalog .cc-thumb.is-active { border-color:var(--orange); box-shadow:0 0 0 1px var(--orange); }
#cst-catalog .cc-thumb img { width:100%; height:100%; object-fit:contain; }
#cst-catalog .cc-modal__hero h2 { margin:7px 0 11px; font-size:40px; line-height:.95; text-transform:uppercase; }
#cst-catalog .cc-modal__hero p { margin:0; color:#61686f; line-height:1.5; }
#cst-catalog .cc-modal__content { padding:34px 30px 46px; }
#cst-catalog .cc-specs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:32px; }
#cst-catalog .cc-spec {
padding:16px; border:1px solid var(--line); background:#fff;
}
#cst-catalog .cc-spec small { display:block; margin-bottom:5px; color:#858b91; text-transform:uppercase; }
#cst-catalog .cc-spec b { line-height:1.35; }
#cst-catalog .cc-table-wrap { overflow-x:auto; border:1px solid var(--line); }
#cst-catalog table { width:100%; border-collapse:collapse; min-width:600px; }
#cst-catalog th, #cst-catalog td { padding:13px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; }
#cst-catalog th { color:#fff; background:var(--ink); text-transform:uppercase; }
#cst-catalog tr:last-child td { border-bottom:0; }
#cst-catalog .cc-modal__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
@media(max-width:980px) {
#cst-catalog .cc-hero__row { grid-template-columns:1fr; }
#cst-catalog .cc-hero__meta { max-width:430px; }
#cst-catalog .cc-toolbar__box { grid-template-columns:1fr 1fr; }
#cst-catalog .cc-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px) {
#cst-catalog .cc-wrap { width:calc(100% - 32px); }
#cst-catalog .cc-hero { padding:74px 0 58px; }
#cst-catalog .cc-title { font-size:44px; }
#cst-catalog .cc-hero p { font-size:16px; }
#cst-catalog .cc-toolbar__box { grid-template-columns:1fr; padding:12px; }
#cst-catalog .cc-reset { width:100%; }
#cst-catalog .cc-body { padding:44px 0 74px; }
#cst-catalog .cc-results-head { align-items:flex-start; flex-direction:column; }
#cst-catalog .cc-grid { grid-template-columns:1fr; }
#cst-catalog .cc-card { min-height:390px; }
#cst-catalog .cc-modal__hero { grid-template-columns:1fr; text-align:center; }
#cst-catalog .cc-modal__hero h2 { font-size:34px; }
#cst-catalog .cc-specs { grid-template-columns:1fr; }
#cst-catalog .cc-modal__actions .cc-btn { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
#cst-catalog *,#cst-catalog *:before,#cst-catalog *:after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
Продукция CST Каталог шин
Поиск по названию, назначению, диаметру и размеру. Все карточки строятся из каталожных данных, а не из изображения страницы.
17 моделейВ текущей базе велосипедных шин. Линейки мото- и квадрошин будут добавляться после получения спецификаций CST.
Велосипедные шины
Найдено: 0
