/* ========================================================================== Trunk-Space — дизайн-система Светлая тема по умолчанию + поддержка тёмной (prefers-color-scheme). Вдохновлено современными авто-сервисами: мягкие тени вместо жёстких рамок, крупные скругления, воздушные отступы, аккуратная типографика. ========================================================================== */ :root{ color-scheme: light; /* нейтральные */ --ink:#0d1521; /* основной текст */ --ink-soft:#33414f; /* вторичный текст */ --muted:#64748b; /* приглушённый */ --line:#e7ecf2; /* рамки/разделители */ --line-soft:#eef2f7; /* поверхности */ --bg:#f4f7fb; /* фон страницы */ --card:#ffffff; /* карточки */ --hover:#f3f8f8; /* ховер строк */ /* бренд (teal) */ --brand:#0d9488; --brand-d:#0b7c72; --brand-l:#14b8a6; --brand-50:#e7f6f4; /* акцент (amber) */ --accent:#f59e0b; --accent-d:#e0890a; --accent-ink:#3a2600; /* семантика fit-уровней */ --yes-bg:#e7f6f4; --yes-fg:#0b7c72; --partial-bg:#fff3e0; --partial-fg:#b26a00; --no-bg:#fdeceb; --no-fg:#c0392b; /* тёмные секции (hero/footer) — общие для обеих тем */ --dark-1:#0b1524; --dark-2:#102a3f; /* скругления */ --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --pill:999px; /* тени (elevation) */ --sh-1:0 1px 2px rgba(16,40,70,.05), 0 2px 6px rgba(16,40,70,.04); --sh-2:0 6px 18px -8px rgba(16,40,70,.18); --sh-3:0 22px 48px -24px rgba(16,40,70,.4); --sh-brand:0 12px 26px -12px rgba(13,148,136,.55); --sh-accent:0 12px 26px -12px rgba(245,158,11,.55); } /* Тёмная тема. Атрибут data-theme выставляет инлайн-скрипт в (см. _Layout.cshtml): сохранённый выбор пользователя, иначе — системная тема. Кнопка ☀️/🌙 в шапке переключает и запоминает выбор в localStorage. Без JS сайт остаётся в светлой теме. */ :root[data-theme="dark"]{ color-scheme: dark; --ink:#e8eef5; --ink-soft:#b9c6d4; --muted:#8ea0b5; --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.06); --bg:#0a0f16; --card:#131b26; --hover:rgba(255,255,255,.04); --brand-50:rgba(13,148,136,.16); --yes-bg:rgba(13,148,136,.16); --yes-fg:#4fd1c5; --partial-bg:rgba(245,158,11,.16); --partial-fg:#fbbf24; --no-bg:rgba(220,38,38,.18); --no-fg:#f87171; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 22px -10px rgba(0,0,0,.6); --sh-3:0 24px 50px -24px rgba(0,0,0,.75); } /* ---------- база ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none;transition:color .15s ease} img{max-width:100%;display:block} h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.2} .wrap{max-width:1160px;margin:0 auto;padding:0 24px} .muted{color:var(--muted)} main{min-height:60vh} .em{font-style:normal} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:20; background:color-mix(in srgb,var(--card) 82%,transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); } .site-header .nav{display:flex;align-items:center;gap:26px;height:66px} .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em} .logo .mk{ width:30px;height:26px;border-radius:7px;position:relative;display:inline-block; background:linear-gradient(150deg,var(--brand-l),var(--brand-d)); box-shadow:var(--sh-brand); } .logo .mk:after{content:"";position:absolute;left:6px;right:6px;top:8px;height:3px;background:#fff;border-radius:2px;box-shadow:0 6px 0 rgba(255,255,255,.85)} .site-header nav{display:flex;gap:6px;margin-left:6px;font-size:14.5px;font-weight:600} .site-header nav a{color:var(--muted);padding:8px 12px;border-radius:var(--pill);transition:color .15s,background .15s} .site-header nav a:hover{color:var(--ink);background:var(--line-soft)} .site-header .right{margin-left:auto;display:flex;align-items:center;gap:10px} .lang{border:1px solid var(--line);border-radius:var(--pill);padding:7px 13px;font-weight:700;font-size:13px;color:var(--muted);transition:.15s} .lang:hover{color:var(--ink);border-color:var(--muted)} .theme-toggle{ display:inline-grid;place-items:center;width:38px;height:38px;padding:0; border:1px solid var(--line);border-radius:var(--pill);background:var(--card); color:var(--ink);font-size:16px;line-height:1;cursor:pointer;transition:.15s; } .theme-toggle:hover{border-color:var(--muted);background:var(--line-soft)} .theme-toggle:active{transform:scale(.94)} /* ---------- hero ---------- */ .hero{ position:relative;overflow:hidden;text-align:center;color:#fff; padding:70px 0 78px; background: radial-gradient(1100px 460px at 50% -12%, rgba(20,184,166,.42), transparent 62%), radial-gradient(760px 300px at 88% 8%, rgba(245,158,11,.18), transparent 60%), linear-gradient(180deg,var(--dark-1),var(--dark-2)); } .hero:before{ content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(680px 340px at 50% 20%,#000,transparent 75%); mask-image:radial-gradient(680px 340px at 50% 20%,#000,transparent 75%); } .hero .wrap{position:relative} .hero h1{font-size:clamp(30px,4.6vw,46px);margin:0 0 14px;font-weight:800;letter-spacing:-.03em} .hero h1 em{ font-style:normal; background:linear-gradient(100deg,#fcd34d,var(--accent)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-sub{color:#b9c9d9;font-size:clamp(16px,2vw,19px);line-height:1.55;max-width:640px;margin:0 auto 36px} .tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:940px;margin:0 auto} .tile{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg);padding:20px 10px;color:#fff; transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease; } .tile:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(0,0,0,.7)} .tile .em{font-size:32px;display:block;margin-bottom:9px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))} .tile b{display:block;font-size:14px;font-weight:700} .tile .t-count{font-size:12px;color:#9fb2c4} /* ---------- секции ---------- */ .sec{padding:46px 0} .sec h2{font-size:clamp(22px,3vw,28px);margin:0 0 22px;font-weight:800} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px} .sec-head h2{margin:0} .more{color:var(--brand-d);font-weight:700;font-size:14.5px;white-space:nowrap} .more:hover{color:var(--brand)} .two{display:grid;grid-template-columns:1fr 1fr;gap:24px} .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-1)} .panel h3{margin:0 0 16px;font-size:18px;font-weight:800} /* ---------- spotlight «Разбор недели» ---------- */ .spot{ display:grid;grid-template-columns:1.05fr 1fr; background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl); overflow:hidden;box-shadow:var(--sh-2); } .spot-img{ position:relative;min-height:340px; background:linear-gradient(135deg,#c9d6e2,#eef3f8); display:flex;align-items:center;justify-content:center; color:#6f7d8c;font-size:13px;text-align:center;padding:16px; } .spot-img img{width:100%;height:100%;object-fit:cover} .spot-pad{padding:32px} .kick{ display:inline-block;color:var(--brand-d);background:var(--brand-50); font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.6px; padding:6px 12px;border-radius:var(--pill); } .spot-pad h3{font-size:clamp(22px,2.6vw,28px);margin:14px 0 4px;font-weight:800} .gen{margin-bottom:22px} .dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px} .dl div{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px} .dl b{display:block;font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .dl span{font-size:12px;color:var(--muted)} .fits{list-style:none;padding:0;margin:0 0 24px} .fits li{padding:9px 0 9px 28px;border-top:1px solid var(--line);font-size:14.5px;position:relative} .fits li:first-child{border-top:0} .fits li:before{ content:"";position:absolute;left:0;top:12px;width:18px;height:18px;border-radius:50%; background:var(--brand-50); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7c72' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:12px; } /* ---------- кнопки ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px; background:linear-gradient(180deg,#fbb231,var(--accent)); color:var(--accent-ink);font-weight:800;padding:13px 22px;border-radius:var(--pill); box-shadow:var(--sh-accent);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease; } .btn:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 16px 30px -12px rgba(245,158,11,.6)} .btn:active{transform:translateY(0)} /* ---------- рейтинги ---------- */ .rank{list-style:none;padding:0;margin:0;counter-reset:r} .rank li{display:flex;align-items:center;gap:14px;padding:12px 10px;margin:0 -10px;border-radius:var(--r-sm);font-size:15px;transition:background .15s} .rank li:hover{background:var(--hover)} .rank li:before{ counter-increment:r;content:counter(r); width:28px;height:28px;flex:0 0 28px;border-radius:9px; background:linear-gradient(150deg,var(--brand-l),var(--brand-d));color:#fff; display:grid;place-items:center;font-weight:800;font-size:13px;box-shadow:var(--sh-brand); } .rank a{font-weight:600} .rank a:hover{color:var(--brand-d)} .rank .v{margin-left:auto;font-weight:800;color:var(--brand-d);font-variant-numeric:tabular-nums;white-space:nowrap} /* ---------- сетка карточек ---------- */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))} .ph{ aspect-ratio:4/3;position:relative; background:linear-gradient(135deg,#dbe4ec,#eef3f8); display:flex;align-items:center;justify-content:center; color:#8494a4;font-size:12.5px;font-weight:600; } .ph.big{aspect-ratio:16/11;font-size:14px} .card-body{padding:16px} .card-body h4{margin:0 0 3px;font-size:16px;font-weight:800} .spec{display:flex;gap:0;margin-top:14px} .spec span{flex:1;display:flex;flex-direction:column;font-size:12px;color:var(--muted);padding:0 12px;border-left:1px solid var(--line)} .spec span:first-child{padding-left:0;border-left:0} .spec b{font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* ---------- бейджи ---------- */ .badge{ display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:700;padding:5px 11px;border-radius:var(--pill);margin-top:10px; } .badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9} .fit-yes{background:var(--yes-bg);color:var(--yes-fg)} .fit-partial{background:var(--partial-bg);color:var(--partial-fg)} .fit-no{background:var(--no-bg);color:var(--no-fg)} .fit-note{margin-top:9px;font-size:13px} /* ---------- шапка страницы + хлебные крошки ---------- */ .page-head{padding-top:42px} .page-head h1{font-size:clamp(26px,3.6vw,34px);margin:0 0 10px;font-weight:800} .crumbs{font-size:13.5px;color:var(--muted);margin:22px 0 16px} .crumbs a:hover{color:var(--ink)} .lead{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:760px} /* ---------- панель сортировки ---------- */ .sortbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px} .sortbar a{ border:1px solid var(--line);background:var(--card);border-radius:var(--pill); padding:8px 16px;font-size:14px;font-weight:700;color:var(--ink-soft); box-shadow:var(--sh-1);transition:.15s; } .sortbar a:hover{border-color:var(--brand);color:var(--brand-d)} .sortbar a.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:var(--sh-brand)} /* ---------- каталог (таблица) ---------- */ .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-1)} table.catalog{width:100%;border-collapse:collapse} table.catalog thead th{ position:sticky;top:66px;z-index:1; background:var(--card);color:var(--muted); font-size:12px;text-transform:uppercase;letter-spacing:.4px;font-weight:800; text-align:left;padding:15px 14px;white-space:nowrap;border-bottom:1px solid var(--line); } table.catalog thead th.num{text-align:right} table.catalog td{padding:14px;border-top:1px solid var(--line-soft);font-size:14.5px;vertical-align:middle} table.catalog td.num{text-align:right;font-variant-numeric:tabular-nums} table.catalog tbody tr{transition:background .12s} table.catalog tbody tr:hover{background:var(--hover)} .model b{display:block;font-weight:700} .model:hover b{color:var(--brand-d)} .model .muted{font-size:12.5px} .tag{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:var(--pill);background:var(--line-soft);color:var(--ink-soft)} .note{margin-top:16px} /* ---------- detail ---------- */ .detail{padding-bottom:52px} .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start} .detail-photo .ph{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-1)} .detail-photo img{width:100%;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-2)} .detail h1{font-size:clamp(24px,3.2vw,32px);margin:0 0 8px;font-weight:800} .detail .sub{margin-bottom:16px;font-size:15px} .own{display:inline-flex;align-items:center;margin-left:6px;background:var(--yes-bg);color:var(--yes-fg);font-weight:700;font-size:12px;padding:4px 10px;border-radius:var(--pill)} table.dims{width:100%;border-collapse:collapse;margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)} table.dims td{padding:13px 16px;border-top:1px solid var(--line-soft);font-size:14.5px} table.dims tr:first-child td{border-top:0} table.dims tr:nth-child(even){background:var(--bg)} table.dims td:last-child{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap} .fitcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px} .fitcard{border:1px solid var(--line);border-left-width:4px;border-radius:var(--r);padding:16px;background:var(--card);box-shadow:var(--sh-1)} .fitcard .fc-top{font-size:15px;margin-bottom:8px;font-weight:700} .fitcard .fc-top .em{font-size:19px;margin-right:4px} .fc-verdict{font-weight:800} .fitcard.fit-yes{border-left-color:var(--yes-fg)} .fitcard.fit-partial{border-left-color:var(--partial-fg)} .fitcard.fit-no{border-left-color:var(--no-fg)} .fitcard.fit-yes .fc-verdict{color:var(--yes-fg)} .fitcard.fit-partial .fc-verdict{color:var(--partial-fg)} .fitcard.fit-no .fc-verdict{color:var(--no-fg)} .fc-note{font-size:13px;color:var(--muted);margin-top:8px} /* ---------- footer ---------- */ .site-footer{background:linear-gradient(180deg,var(--dark-2),var(--dark-1));color:#aebccd;padding:52px 0 34px;margin-top:40px;font-size:14px} .site-footer .cols{display:flex;gap:64px;flex-wrap:wrap} .site-footer b{color:#fff;display:block;margin-bottom:12px;font-size:15px} .site-footer a{display:block;padding:4px 0;color:#aebccd} .site-footer a:hover{color:#fff} .site-footer .copy{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);color:#6b7d92;font-size:13px} /* ---------- адаптив ---------- */ @media(max-width:960px){ .grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:820px){ .site-header nav{display:none} .tiles{grid-template-columns:repeat(3,1fr)} .spot,.two,.detail-grid{grid-template-columns:1fr} .grid{grid-template-columns:repeat(2,1fr)} .fitcards{grid-template-columns:1fr} table.catalog thead th{top:0} table.catalog .hide{display:none} .spot-img{min-height:220px} } @media(max-width:520px){ .tiles{grid-template-columns:repeat(2,1fr)} .grid{grid-template-columns:1fr} .site-footer .cols{gap:36px} }