/* NORKRAY витрина — темы по мокапам: светлая = мокап А (по умолчанию), тёмная = мокап Б. Переключение: . */ :root{ --bg:#faf8f5; --card:#ffffff; --ink:#1c1a17; --muted:#7a736a; --gold:#b08d57; --gold-dark:#96754a; --line:#e8e2d9; --accent:#2b2723; --ok:#3e7d4f; --topbar:#f1ece4; --head:#1c1a17; --btn-bg:#2b2723; --btn-ink:#ffffff; --btn-hover:#b08d57; --badge-bg:#2b2723; --badge-ink:#fff; --price:#1c1a17; --hero-glow:none; --card-shadow:0 10px 30px rgba(60,45,25,.12); } [data-theme="dark"]{ --bg:#16130f; --card:#201c16; --ink:#ede5d8; --muted:#9b917f; --gold:#c9a35f; --gold-dark:#a8854a; --line:#332d24; --accent:#c9a35f; --ok:#8fbf7f; --topbar:#0e0c09; --head:#ffffff; --btn-bg:#c9a35f; --btn-ink:#16130f; --btn-hover:#a8854a; --badge-bg:#c9a35f; --badge-ink:#16130f; --price:#c9a35f; --hero-glow:radial-gradient(1200px 500px at 70% 0%,#2a241b 0%,rgba(22,19,15,0) 70%); --card-shadow:none; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font:15px/1.55 "Segoe UI",system-ui,Arial,sans-serif; transition:background .25s,color .25s} h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:var(--head)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:1200px;margin:0 auto;padding:0 24px} /* ── шапка ── */ .topbar{background:var(--topbar);font-size:12.5px;color:var(--muted)} .topbar .wrap{display:flex;justify-content:space-between;padding-top:7px;padding-bottom:7px;gap:12px;flex-wrap:wrap} header.site{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:40} header.site .wrap{display:flex;align-items:center;gap:32px;padding-top:16px;padding-bottom:16px} .logo{font-family:Georgia,serif;font-size:22px;letter-spacing:3px;color:var(--head); white-space:nowrap;text-transform:uppercase} .logo b{color:var(--gold);font-weight:400} nav.main{display:flex;gap:24px;font-size:14px;flex:1;flex-wrap:wrap} nav.main a:hover{color:var(--gold)} .hicons{display:flex;gap:14px;align-items:center} .theme-btn{background:transparent;border:1px solid var(--line);border-radius:20px; padding:5px 13px;cursor:pointer;font-size:15px;color:var(--ink);transition:border-color .2s} .theme-btn:hover{border-color:var(--gold)} /* ── hero ── */ .hero{background:var(--hero-glow)} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center; padding-top:60px;padding-bottom:60px} .hero h1{font-size:42px;line-height:1.16;margin-bottom:18px} .hero h1 em{color:var(--gold);font-style:normal} .hero p{color:var(--muted);max-width:44ch;margin-bottom:28px} .btn{display:inline-block;background:var(--btn-bg);color:var(--btn-ink);padding:14px 34px; font-size:14px;letter-spacing:1px;cursor:pointer;border:0;font-weight:600;transition:background .2s} .btn:hover{background:var(--btn-hover);color:var(--btn-ink)} .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--gold);font-weight:400} .btn.ghost:hover{background:transparent;color:var(--gold)} .hero .ph{aspect-ratio:3/4;max-width:460px;justify-self:end;width:100%} /* ── фото-блоки ── */ .ph{background:linear-gradient(135deg,#d9cfc0,#b7a893 55%,#8f7c63);position:relative; overflow:hidden;background-size:cover;background-position:center top} .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center top;display:block} [data-theme="dark"] .ph{box-shadow:0 0 0 1px var(--line)} /* ── USP ── */ .usp{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)} .usp .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:26px;padding-bottom:26px} .usp div b{display:block;font-size:14px;margin-bottom:3px;color:var(--head)} .usp div span{font-size:12.5px;color:var(--muted)} .usp .ic{color:var(--gold);font-size:20px;margin-bottom:6px;display:block} /* ── секции ── */ .sec{padding:52px 0} .sec h2{font-size:30px;margin-bottom:8px} .sec .sub{color:var(--muted);margin-bottom:30px} /* ── карточки товара ── */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .grid.cat3{grid-template-columns:repeat(3,1fr)} .pcard{background:var(--card);border:1px solid var(--line);cursor:pointer;position:relative; transition:box-shadow .2s,border-color .2s,transform .2s;display:block} .pcard:hover{box-shadow:var(--card-shadow);border-color:var(--gold)} [data-theme="dark"] .pcard:hover{transform:translateY(-3px)} .pcard .ph{aspect-ratio:3/4} .pcard .body{padding:14px 16px 18px} .pcard h3{font-size:15.5px;margin-bottom:4px;color:var(--head)} .pcard .feat{font-size:12px;color:var(--muted);margin-bottom:8px} .price{font-size:17px;font-weight:600;color:var(--price)} .badge{position:absolute;top:12px;left:12px;background:var(--badge-bg);color:var(--badge-ink); font-size:11px;padding:4px 10px;letter-spacing:.5px;font-weight:600;z-index:2} .sizes{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap} .chip{border:1px solid var(--line);font-size:12px;padding:3px 9px;color:var(--muted)} .chip.have{border-color:var(--gold);color:var(--ink)} /* ── сторителлинг ── */ .story{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; padding-top:52px;padding-bottom:52px} .story .ph{aspect-ratio:3/4;max-width:430px;width:100%} .story h2{font-size:28px;margin-bottom:16px} .story p{color:var(--muted);margin-bottom:14px} .story .num{display:flex;gap:40px;margin-top:24px} .story .num b{font-family:Georgia,serif;font-size:30px;color:var(--gold);display:block} .story .num span{font-size:12.5px;color:var(--muted)} /* ── каталог ── */ .cathead{display:flex;justify-content:space-between;align-items:baseline;margin:36px 0 20px;gap:16px;flex-wrap:wrap} .cathead .crumbs{font-size:12.5px;color:var(--muted)} .filters-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;align-items:center} .filters-bar .lbl{font-size:12.5px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-right:4px} .fchip{border:1px solid var(--line);font-size:13px;padding:6px 14px;color:var(--muted); cursor:pointer;background:transparent;transition:all .15s} .fchip.sel{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)} .empty-note{color:var(--muted);padding:40px 0;text-align:center;display:none} /* ── карточка товара ── */ .prod{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding:40px 0} .gal .main{aspect-ratio:3/4;position:relative} .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px} .thumbs .ph{aspect-ratio:3/4;cursor:pointer} .gal .main video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111} .thumbs .ph.vid{display:flex;align-items:center;justify-content:center;background:#26221c} .thumbs .ph.vid .vplay{color:#fff;background:rgba(0,0,0,.45);border:1px solid var(--gold); border-radius:50%;width:34px;height:34px;display:flex;align-items:center; justify-content:center;font-size:13px;padding-left:3px} .thumbs .ph.sel{outline:2px solid var(--gold);outline-offset:1px} .pinfo .crumbs{font-size:12.5px;color:var(--muted);margin:14px 0} .pinfo h1{font-size:30px;line-height:1.2;margin-bottom:10px} .pinfo .art{font-size:12.5px;color:var(--muted);margin-bottom:18px} .bigprice{font-family:Georgia,serif;font-size:34px;margin-bottom:4px;color:var(--price)} .paynote{font-size:13px;color:var(--ok);margin-bottom:22px} .pinfo h5{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 10px} .sizes.big .chip{padding:9px 16px;font-size:14px;cursor:pointer} .sizes.big .chip.sel{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)} .sizehint{font-size:12.5px;color:var(--muted);margin:8px 0 22px;min-height:18px} .buyrow{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap} .buyrow .btn{flex:1;text-align:center;padding:15px 0;min-width:180px} .contact-alt{width:100%;background:transparent;border:1px solid var(--line);padding:13px; font-size:13.5px;color:var(--muted);cursor:pointer;margin-bottom:10px;text-align:center;display:block} .contact-alt:hover{border-color:var(--gold);color:var(--ink)} .contact-alt a b{color:var(--gold);font-weight:600} .trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0} .trust div{border:1px solid var(--line);background:var(--card);padding:11px 14px;font-size:12.5px;color:var(--muted)} .trust b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px} .chars{width:100%;border-collapse:collapse;font-size:13.5px} .chars td{padding:8px 0;border-bottom:1px dotted var(--line)} .chars td:first-child{color:var(--muted);width:45%} /* ── форма заявки (этап 3) ── */ .orderform{border:1px solid var(--line);background:var(--card);padding:20px;margin:8px 0 16px} .orderform h5{margin-bottom:8px} .ohint{font-size:12.5px;color:var(--muted);margin-bottom:16px;line-height:1.5} .ohint.small{margin:12px 0 0;text-align:center} .ohint.tiny{font-size:11.5px;margin:10px 0 0;text-align:center;opacity:.85} .ohint.tiny a{color:var(--gold);text-decoration:underline} .btn:disabled{opacity:.6;cursor:default} .ohint a b{color:var(--gold)} .ofield{display:block;margin-bottom:12px} .ofield>span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px} .ofield>span i{font-style:normal;opacity:.7} .ofield input,.ofield select,.ofield textarea{width:100%;border:1px solid var(--line); background:var(--bg);color:var(--ink);padding:11px 12px;font:14px/1.4 inherit; border-radius:0;transition:border-color .15s} .ofield input:focus,.ofield select:focus,.ofield textarea:focus{outline:none;border-color:var(--gold)} .ofield textarea{resize:vertical;min-height:56px} .ocheck{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted); margin:4px 0 16px;line-height:1.45;cursor:pointer} .ocheck input{margin-top:2px;accent-color:var(--gold);flex:0 0 auto;width:15px;height:15px} .ocheck a{color:var(--gold);text-decoration:underline} .btn.wide{width:100%;text-align:center;padding:15px 0} /* honeypot: невидим для людей, но НЕ display:none — часть ботов такие поля пропускает */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .ordererr{border:1px solid var(--gold);border-left-width:4px;background:var(--card); padding:13px 15px;font-size:13.5px;color:var(--ink);margin:16px 0;line-height:1.5} /* ── плашка тестовой копии ── */ .stagebar{background:#8a2b2b;color:#fff;text-align:center;font-size:12.5px; padding:7px 16px;letter-spacing:.5px;font-weight:600} /* ── страница «спасибо» ── */ .thanks{max-width:640px;margin:0 auto;text-align:center;padding:80px 24px} .thanks .tick{font-size:44px;color:var(--gold);margin-bottom:10px} .thanks h1{font-size:34px;margin-bottom:14px} .thanks p{color:var(--muted);margin-bottom:14px} .thanks .onum{font-family:Georgia,serif;font-size:19px;color:var(--ink);margin-bottom:18px} /* ── инфо-страницы ── */ .page{max-width:760px;margin:0 auto;padding:48px 24px 64px} .page h1{font-size:34px;margin-bottom:20px} .page h2{font-size:22px;margin:28px 0 10px} .page p{color:var(--muted);margin-bottom:12px} .page b{color:var(--ink)} /* ── футер ── */ footer{background:#211e1a;color:#cfc8bd;font-size:13.5px;margin-top:40px} [data-theme="dark"] footer{background:#0e0c09;color:var(--muted)} footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-top:44px;padding-bottom:32px} footer h4{color:#fff;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px} [data-theme="dark"] footer h4{color:var(--gold)} footer a{display:block;margin-bottom:8px;opacity:.85} footer a:hover{color:var(--gold);opacity:1} footer .fine{border-top:1px solid rgba(255,255,255,.12);padding:16px 24px;text-align:center; font-size:12px;color:#8d8578} footer .fine a{display:inline;margin:0;opacity:.9;text-decoration:underline} .flogo{font-family:Georgia,serif;font-size:20px;letter-spacing:3px;color:#fff;margin-bottom:12px; text-transform:uppercase} .flogo b{color:var(--gold);font-weight:400} /* ── 404 ── */ .nf{max-width:640px;margin:0 auto;text-align:center;padding:90px 24px} .nf h1{font-size:40px;margin-bottom:14px} .nf p{color:var(--muted);margin-bottom:26px} @media(max-width:900px){ .hero .wrap,.story .wrap,.prod{grid-template-columns:1fr} .hero .ph{justify-self:center} .story .ph{margin:0 auto} .grid,.grid.cat3{grid-template-columns:repeat(2,1fr)} .usp .wrap{grid-template-columns:repeat(2,1fr)} footer .wrap{grid-template-columns:1fr 1fr} .hero h1{font-size:32px} nav.main{gap:14px;font-size:13px} } @media(max-width:560px){ .grid,.grid.cat3{grid-template-columns:1fr} }