/* ========================================================================== print-cup — global stylesheet Shared by index.html (лендинг) и constructor.html (конструктор). Page-specific rules are scoped via a body class: — index.html — constructor.html ========================================================================== */ /* ---------- base / reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Manrope',system-ui,sans-serif;background:#124239;color:#F3ECDC;-webkit-font-smoothing:antialiased;line-height:1.5} a{color:#FF6A3D;text-decoration:none} a:hover{color:#F5C543} ::selection{background:#F5C543;color:#16231E} button{font-family:'Manrope',system-ui,sans-serif} /* Прибираємо I-beam над звичайним текстом на всіх сторінках, лишаємо текстовий курсор у полях (див. CLAUDE.md, п.6 — раніше було лише на constructor.html) */ body{cursor:default} input[type="text"],textarea{cursor:text} /* ---------- keyframes ---------- */ @keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}} @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes steam{0%{opacity:0;transform:translateY(8px) scale(.7)}25%{opacity:.55}100%{opacity:0;transform:translateY(-46px) scale(1.5)}} /* ---------- layout ---------- */ .wrap{max-width:1180px;margin:0 auto;padding:0 24px} /* ---------- header / nav (shared) ---------- */ .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;position:sticky;top:16px;z-index:50;background:#F5EFE1;border:2px solid #16231E;border-radius:16px;box-shadow:4px 4px 0 #16231E;margin-top:18px} .nav-links a{color:#3E4A44} .nav-links a:hover{color:#FF6A3D} .btn-cta{background:#FF6A3D;color:#16231E;font-weight:800;border:2px solid #16231E;transition:.12s;display:inline-block;white-space:nowrap} .btn-cta:hover{background:#F5C543;color:#16231E} .brand{display:flex;align-items:center;gap:11px;font-family:'Manrope';font-weight:700;font-size:20px;letter-spacing:-.02em;color:#16231E} .brand span{width:34px;height:34px;border-radius:9px;background:#124239;border:2px solid #16231E;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none} .brand span svg,.footer-brand span svg{width:58%;height:58%;display:block} .brand-txt{display:flex;flex-direction:column;line-height:1.02} .brand-slogan{font-family:'Manrope';font-weight:700;font-size:11px;letter-spacing:.01em;color:#FF6A3D;margin-top:3px} .contacts{display:flex;align-items:center;gap:11px} .contact-phone{font-family:'Manrope';font-weight:800;font-size:15px;color:#16231E;white-space:nowrap;transition:.12s} .contact-phone:hover{color:#FF6A3D} .ico-btn{width:34px;height:34px;border-radius:9px;border:2px solid #16231E;display:inline-flex;align-items:center;justify-content:center;box-shadow:2px 2px 0 #16231E;transition:.12s;flex:none} .ico-btn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 #16231E} .ico-btn svg{width:18px;height:18px;display:block;fill:#fff} .ico-viber{background:#7360F2} .ico-tg{background:#229ED9} .nav-right{display:flex;align-items:center;gap:22px} .nav-links{display:flex;gap:24px;font-weight:700;font-size:15px} .nav-cta{padding:10px 20px;border-radius:11px;font-size:14px;box-shadow:3px 3px 0 #16231E} /* ---------- shared section components ---------- */ .eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#FF6A3D} .eyebrow::before,.eyebrow::after{content:'';width:28px;height:2px;border-radius:2px;background:#FF6A3D} .heading{font-family:'Manrope';font-weight:600;letter-spacing:-.02em;color:#F3ECDC} .heading--34{font-size:34px} .heading--40{font-size:40px;margin-top:10px;text-wrap:balance} .heading--44{font-size:44px;margin-top:10px;text-wrap:balance} .heading--46{font-size:46px;text-wrap:balance} .section-head{text-align:center;max-width:860px;margin:0 auto 44px} .section-head--sm{margin-bottom:40px} .section-head--xs{margin-bottom:34px} .section-head-plain{text-align:center;max-width:860px;margin:0 auto 44px} .section-head-plain--sm{margin-bottom:40px} .section-desc{font-size:18px;color:#B9CCC1;margin-top:12px} .pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:#16231E;background:#F5C543;border:1.5px solid #16231E;border-radius:999px;padding:6px 13px} .btn-cta--hero{padding:16px 30px;border-radius:14px;font-size:17px;box-shadow:5px 5px 0 #16231E} .btn-cta--lg{padding:17px 36px;border-radius:14px;font-size:18px;box-shadow:5px 5px 0 #16231E} .avatar{width:44px;height:44px;flex:none;border-radius:50%;border:2px solid #16231E;box-shadow:2px 2px 0 #16231E;display:flex;align-items:center;justify-content:center;font-family:'Manrope';font-weight:700;font-size:17px} .avatar--orange{background:#FF6A3D;color:#16231E} .avatar--dark{background:#124239;color:#F3ECDC} .avatar--yellow{background:#F5C543;color:#16231E} .verified{color:#5FBF8A} .site-footer{background:#F5EFE1;border:2px solid #16231E;border-radius:22px;box-shadow:6px 6px 0 #16231E;padding:40px 36px 26px;margin:24px 0 40px} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px} .footer-brand{display:flex;align-items:center;gap:10px;font-family:'Manrope';font-weight:700;font-size:19px;color:#16231E} .footer-brand span{width:30px;height:30px;border-radius:9px;background:#124239;border:2px solid #16231E;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:none} .footer-slogan{color:#FF6A3D;font-weight:700;font-size:12.5px;margin-top:6px} .footer-desc{color:#5B6B62;font-size:14px;line-height:1.55;margin-top:14px;max-width:270px} .footer-contacts{display:flex;align-items:center;gap:10px;margin-top:18px} .footer-col h4{font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#9AA69E;margin-bottom:14px} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .footer-col a{color:#3E4A44;font-weight:700;font-size:14.5px} .footer-col a:hover{color:#FF6A3D} .footer-col li{display:flex;align-items:center;gap:8px;color:#5B6B62;font-size:14px;font-weight:600} .footer-col li i{color:#FF6A3D;font-size:16px;flex:none} .footer-bottom{border-top:2px solid #E4DAC6;margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px;color:#9AA69E} .footer-bottom span{font-weight:700} /* ========================================================================== index.html — лендинг ========================================================================== */ .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:66px 0 44px;position:relative} .hero-art{position:relative;height:460px;display:flex;align-items:center;justify-content:center} .halo{position:absolute;width:300px;height:300px;border-radius:50%;background:#F5C543;border:2px solid #16231E} .deco{position:absolute;border:2px solid #16231E} .deco1{left:14px;top:24px;width:74px;height:74px;border-radius:50%;background:#FF6A3D;animation:floaty 5s ease-in-out infinite} .deco2{right:18px;bottom:36px;width:44px;height:44px;background:#F3ECDC;transform:rotate(18deg);animation:floaty 7s ease-in-out infinite} .hero-3d{position:absolute;inset:0;z-index:3;cursor:pointer} .hero-flat{display:none;position:relative;z-index:3} .steam{position:absolute;z-index:4;top:78px;left:50%;transform:translateX(-50%);pointer-events:none;display:flex;gap:14px} .puff{width:13px;height:34px;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);border-radius:50%;filter:blur(3px);opacity:0;animation:steam 3.4s ease-in infinite} .puff:nth-child(2){animation-delay:1.1s;height:42px} .puff:nth-child(3){animation-delay:2.1s} .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .ex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .g2{display:grid;grid-template-columns:1fr 1fr;gap:20px} .hero-copy{position:relative;z-index:2} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:#F5C543;border:2px solid #16231E;padding:7px 15px;border-radius:999px;font-size:13px;font-weight:800;color:#16231E;margin-bottom:24px;box-shadow:3px 3px 0 #16231E} .hero-badge i{font-size:16px;color:#FF6A3D} .hero-title{font-family:'Manrope';font-weight:600;font-size:52px;line-height:1.08;letter-spacing:-.02em;color:#F3ECDC;text-wrap:balance} .hero-title span{color:#F5C543} .hero-desc{font-size:19px;color:#B9CCC1;margin:22px 0 0;max-width:470px;text-wrap:pretty} .hero-cta-row{display:flex;align-items:center;gap:18px;margin-top:32px;flex-wrap:wrap} .hero-price{display:flex;align-items:baseline;gap:9px} .hero-price .lead{font-size:15px;color:#B9CCC1;font-weight:700} .hero-price .value{font-family:'Manrope';font-weight:700;font-size:26px;color:#F3ECDC} .hero-rating{display:flex;align-items:center;gap:20px;margin-top:28px;font-size:13px;color:#B9CCC1;font-weight:700} .hero-flat-cup{position:relative;animation:floaty 6s ease-in-out infinite} .hero-flat-body{width:232px;height:212px;border-radius:22px 22px 30px 30px;background:#F5EFE1;border:2px solid #16231E;box-shadow:7px 7px 0 #16231E;position:relative;overflow:hidden} .hero-flat-print{position:absolute;inset:16px;border-radius:12px;border:2px solid #16231E;background-color:#F5EFE1;background-repeat:no-repeat;background-position:center;background-size:100% 100%;transition:opacity .3s} .hero-flat-gloss{position:absolute;inset:0;background:linear-gradient(102deg,rgba(255,255,255,.4),transparent 42%);border-radius:20px 20px 30px 30px;pointer-events:none} .hero-flat-handle{position:absolute;right:-46px;top:60px;width:74px;height:96px;border:16px solid #F5EFE1;border-radius:50%;box-shadow:0 0 0 2px #16231E,inset 0 0 0 2px #16231E} .proof-strip{overflow:hidden;padding:12px 0;border-top:2px solid #2A5249;border-bottom:2px solid #2A5249;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .proof-track{display:flex;gap:40px;width:max-content;animation:marquee 26s linear infinite;font-family:'Manrope';font-weight:500;font-size:16px;color:#6E877C;white-space:nowrap} .proof-sep{color:#FF6A3D} .sec-mugtypes{padding:74px 0 20px} .mugcard{background:#F5EFE1;border:2px solid #16231E;border-radius:20px;padding:26px;text-align:center;box-shadow:6px 6px 0 #16231E} .mugcard h3{font-family:'Manrope';font-weight:600;font-size:20px;color:#16231E} .mugcard p{color:#5B6B62;font-size:15px;margin-top:8px} .mugcard-price{margin-top:14px;font-family:'Manrope';font-weight:700;font-size:20px;color:#16231E} .mugcard-swatch{height:180px;border-radius:14px;border:2px solid #16231E;display:flex;align-items:center;justify-content:center;margin-bottom:20px;overflow:hidden} .mugcard-swatch img{width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))} .mugcard-swatch--yellow{background:#F5C543} .mugcard-swatch--orange{background:#FF6A3D} .mugcard-swatch--dark{background:#124239} .sec-teaser{padding:70px 0 30px} .teaser-box{background:#F5EFE1;border:2px solid #16231E;border-radius:22px;box-shadow:8px 8px 0 #16231E;padding:44px 32px;text-align:center} .teaser-pills{display:flex;justify-content:center;gap:14px;margin-bottom:22px;flex-wrap:wrap} .teaser-note{font-size:13px;color:#9AA69E;font-weight:700;margin-top:14px} .sec-how{padding:76px 0 30px} #how,#examples,#reviews,#faq{scroll-margin-top:90px} .sec-examples{padding:60px 0 30px} .examples-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:12px} .examples-cta{font-weight:800;font-size:15px} .example-tile{border-radius:16px;overflow:hidden;aspect-ratio:1;position:relative;border:2px solid #16231E;box-shadow:4px 4px 0 #16231E;background:#FFFFFF;display:flex;align-items:center;justify-content:center} .example-tile img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))} .example-tile-label{position:absolute;left:10px;bottom:10px;background:#16231E;color:#F3ECDC;font-family:monospace;font-size:11px;padding:4px 8px;border-radius:6px} .sec-reviews{padding:70px 0 30px} .reviewcard{background:#F5EFE1;border:2px solid #16231E;border-radius:18px;padding:26px;box-shadow:5px 5px 0 #16231E;display:flex;flex-direction:column} .reviewcard .stars{color:#FF6A3D;font-size:17px} .reviewcard p{font-size:16px;margin-top:12px;color:#2A362F;text-wrap:pretty} .reviewcard-foot{display:flex;align-items:center;gap:11px;padding-top:18px;margin-top:auto} .reviewcard-meta{line-height:1.25} .reviewcard-meta .name{font-weight:800;font-size:14px;color:#16231E} .reviewcard-meta .city{color:#9AA69E;font-weight:700;font-size:12px} .sec-guarantee{padding:50px 0 30px} .guarantee-box{background:#FF6A3D;color:#16231E;border:2px solid #16231E;border-radius:22px;padding:34px;box-shadow:6px 6px 0 #16231E} .guarantee-box i{font-size:38px;color:#16231E} .guarantee-box h3{font-family:'Manrope';font-weight:600;font-size:24px;margin-top:12px} .guarantee-box p{color:#3A1E14;font-size:16px;margin-top:10px;text-wrap:pretty} .delivery-box{background:#F5EFE1;border:2px solid #16231E;border-radius:22px;padding:34px;box-shadow:6px 6px 0 #16231E} .delivery-box>i{font-size:38px;color:#FF6A3D} .delivery-box h3{font-family:'Manrope';font-weight:600;font-size:24px;margin-top:12px;color:#16231E} .delivery-box ul{color:#5B6B62;font-size:16px;margin-top:10px;list-style:none;display:flex;flex-direction:column;gap:12px} .delivery-box li{display:flex;align-items:center;gap:10px} .delivery-box li i{font-size:20px;color:#16231E} .sec-faq{padding:60px 0 30px} .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .faq-item{background:#F5EFE1;border:2px solid #16231E;border-radius:16px;overflow:hidden;box-shadow:4px 4px 0 #16231E} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:none;border:none;cursor:pointer;text-align:left;font-family:Manrope;font-weight:800;font-size:17px;color:#16231E} .faq-arrow{font-size:24px;color:#FF6A3D;font-weight:600;transition:.2s;display:inline-block} .faq-arrow.open{transform:rotate(45deg)} .faq-a{padding:0 24px 22px;color:#5B6B62;font-size:16px;line-height:1.6;text-wrap:pretty} .sec-cta{padding:40px 0 90px} .cta-box{background:#F5C543;border:2px solid #16231E;border-radius:26px;padding:64px 40px;text-align:center;color:#16231E;position:relative;overflow:hidden;box-shadow:8px 8px 0 #16231E} .cta-blob1{position:absolute;left:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:#FF6A3D;border:2px solid #16231E} .cta-blob2{position:absolute;right:-24px;bottom:-24px;width:100px;height:100px;background:#124239;border:2px solid #16231E;transform:rotate(20deg)} .cta-content{position:relative} .cta-desc{font-size:19px;color:#3A3320;margin-top:14px;max-width:520px;margin-left:auto;margin-right:auto} .cta-box .btn-cta{margin-top:28px} /* index-only steps (JS-rendered #steps) */ .step-card{background:#F5EFE1;border:2px solid #16231E;border-radius:18px;padding:24px;box-shadow:5px 5px 0 #16231E} .step-icon{width:48px;height:48px;border-radius:12px;background:#FF6A3D;border:2px solid #16231E;display:flex;align-items:center;justify-content:center;color:#16231E} .step-icon i{font-size:24px} .step-kicker{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9AA69E;margin-top:14px} .step-title{font-family:'Manrope';font-weight:700;font-size:18px;margin-top:4px;color:#16231E} .step-desc{color:#5B6B62;font-size:14px;margin-top:6px} /* ========================================================================== constructor.html — конструктор ========================================================================== */ .mobile-note{display:none} .sec-constructor{padding:44px 0 60px} .note-card{background:#F5EFE1;border:2px solid #16231E;border-radius:22px;box-shadow:6px 6px 0 #16231E;padding:38px 26px;text-align:center} .note-card h3{font-family:'Manrope';font-weight:600;font-size:22px;color:#16231E} .note-card p{color:#5B6B62;font-size:15px;margin-top:10px;max-width:340px;margin-left:auto;margin-right:auto} .note-icon{width:62px;height:62px;margin:0 auto 18px;border-radius:16px;background:#F5C543;border:2px solid #16231E;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 #16231E} .note-icon i{font-size:30px;color:#16231E} .note-badge{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#16231E;background:#F5C543;border:1.5px solid #16231E;border-radius:999px;padding:7px 15px} .design-head-lbl{margin:0;display:flex;align-items:center;gap:7px} .swrow--wrap{flex-wrap:wrap} .swrow--tight{gap:8px} .sides-hint{margin-top:7px;font-size:12px;font-weight:700;color:#5B6B62;background:#EAE0CB;border:1.5px solid #16231E;border-radius:9px;padding:7px 10px} .btn-row{display:flex;gap:8px} .file-input-hidden{display:none} .btn-row .btn-dl{margin:0;flex:1} .mini--soft{font-size:13px;color:#5B6B62} .text-row{display:grid;grid-template-columns:1fr 120px;gap:8px} .font-select{padding:10px 12px;cursor:pointer} .range-box{display:flex;align-items:center;border:2px solid #16231E;border-radius:10px;padding:0 12px;background:#fff} .colorpick-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .tile-toggle-row{display:flex;align-items:center;gap:8px} .price-label{font-size:14px;color:#5B6B62;font-weight:700} .price-value-row{display:flex;align-items:baseline;gap:9px} .price-value{font-family:'Manrope';font-weight:700;font-size:26px;color:#16231E} .safe-ok{color:#3a8a4a} .builder{background:#F5EFE1;border:2px solid #16231E;border-radius:22px;box-shadow:8px 8px 0 #16231E;overflow:hidden;display:grid;grid-template-columns:1fr 430px;align-items:stretch} .stage{background:radial-gradient(120% 120% at 50% 20%,#FBE59A,#F5C543 70%);position:relative;min-height:620px;display:flex;flex-direction:column;border-right:2px solid #16231E} .stage-top{position:absolute;top:16px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;z-index:2;pointer-events:none} .stage-tag{font-family:'Manrope';font-size:12px;font-weight:600;color:#16231E;letter-spacing:.03em} .stage-hint{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:#16231E;background:rgba(255,255,255,.55);border:1.5px solid #16231E;border-radius:999px;padding:5px 11px} #mug3d{flex:1;min-height:0;cursor:grab} #mug3d:active{cursor:grabbing} .stage-badge{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;align-items:center;justify-content:center;font-size:12px;color:#16231E;font-weight:700;pointer-events:none} .panel{padding:14px 18px 18px;display:flex;flex-direction:column;gap:8px;overflow:visible} .lbl{font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8A968E;margin-bottom:7px} .seg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px} .seg button{padding:9px 4px;border-radius:10px;font-weight:800;font-size:13px;cursor:pointer;transition:.12s;border:2px solid #16231E} .swrow{display:flex;gap:9px} .sw{width:34px;height:34px;border-radius:9px;cursor:pointer;border:2px solid #16231E;transition:.12s} .pickwrap{width:30px;height:30px;border-radius:9px;border:2px solid #16231E;cursor:pointer;overflow:hidden;position:relative;display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(from 0deg,#ff2d2d,#ffd23d,#8CC63F,#18A7DC,#7a5cff,#ff2d2d);flex:none;transition:.12s} .pickwrap.on{box-shadow:2px 2px 0 #16231E;transform:translate(-1px,-1px)} .pickwrap input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;padding:0;margin:0;cursor:pointer} .design-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px} .design-dims{font-size:11px;color:#9AA69E;font-weight:800;display:flex;align-items:center;gap:5px} .canvas-box{border:2px solid #16231E;border-radius:12px;box-shadow:3px 3px 0 #16231E;background:#fff;line-height:0;overflow:hidden;display:flex;justify-content:center} #printCanvas{display:block;cursor:move;touch-action:none} .tabs{display:flex;gap:7px;background:#EAE0CB;border:2px solid #16231E;border-radius:11px;padding:4px} .tabs button{flex:1;padding:8px;border:none;border-radius:8px;background:none;font-family:Manrope;font-weight:800;font-size:14px;color:#5B6B62;cursor:pointer;transition:.12s} .tabs button.on{background:#FF6A3D;color:#16231E;box-shadow:2px 2px 0 #16231E} .tool[hidden]{display:none} .tool{display:flex;flex-direction:column;gap:11px} .imgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px} .imgrid button{height:46px;border-radius:9px;cursor:pointer;border:2px solid #16231E;transition:.12s;background-size:cover;background-position:center} .field{width:100%;padding:11px 13px;border:2px solid #16231E;border-radius:10px;font-family:Manrope;font-weight:700;font-size:15px;background:#fff;color:#16231E;outline:none} .rng{width:100%;accent-color:#FF6A3D;cursor:pointer} .ctl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;padding:2px 0} .mini{font-size:12px;color:#8A968E;font-weight:700} .toggle{width:46px;height:25px;border-radius:999px;border:2px solid #16231E;cursor:pointer;position:relative;transition:.2s;flex:none} .toggle span{position:absolute;top:2px;width:17px;height:17px;border-radius:50%;background:#16231E;transition:.2s} .foot{margin:12px -18px -18px -18px;padding:10px 18px 12px;background:#F5EFE1;border-top:2px solid #E4DAC6} /* ---- HELP (довідка конструктора) ---- */ .help-btn{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid #16231E;background:#F5C543;color:#16231E;font-family:'Manrope';font-weight:700;font-size:12px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:.12s} .help-btn:hover{background:#FF6A3D} .help-overlay{position:fixed;inset:0;background:rgba(10,16,13,.55);z-index:200;display:none;align-items:center;justify-content:center;padding:20px} .help-overlay.on{display:flex} .help-modal{background:#F5EFE1;border:2px solid #16231E;border-radius:20px;box-shadow:8px 8px 0 #16231E;width:min(440px,100%);max-height:86vh;overflow-y:auto;padding:22px 22px 24px;position:relative;color:#16231E} .help-modal h3{font-family:'Manrope';font-weight:600;font-size:20px;color:#16231E;padding-right:36px;line-height:1.15} .help-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;border:2px solid #16231E;background:#fff;cursor:pointer;font-size:15px;font-weight:800;color:#16231E;line-height:1;display:flex;align-items:center;justify-content:center;transition:.12s} .help-close:hover{background:#FF6A3D} .help-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 4px} .help-step{background:#fff;border:2px solid #16231E;border-radius:12px;padding:9px 4px 7px;text-align:center;position:relative} .help-step .n{position:absolute;top:-8px;left:-8px;width:19px;height:19px;border-radius:50%;background:#FF6A3D;border:2px solid #16231E;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center} .help-step svg{width:28px;height:28px} .help-step span{display:block;font-size:10px;font-weight:800;color:#16231E;margin-top:5px;line-height:1.15} .help-block{margin-top:15px} .help-block h4{font-family:Manrope;font-weight:800;font-size:15px;color:#16231E;display:flex;align-items:center;gap:8px;margin:0} .help-block p{font-size:13.5px;color:#5B6B62;line-height:1.5;margin-top:5px} .help-safe{margin-top:16px;display:flex;gap:12px;align-items:center;background:#fff;border:2px solid #16231E;border-radius:12px;padding:12px 13px} .help-safe svg{flex:none} .help-safe .cap{font-size:12.5px;color:#2A362F;line-height:1.55} .help-tip{margin-top:14px;background:#F5C543;border:2px solid #16231E;border-radius:12px;padding:11px 13px;font-size:13px;color:#16231E;font-weight:600;line-height:1.5} .price-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px} .btn-buy{width:100%;padding:14px;border:2px solid #16231E;border-radius:12px;cursor:pointer;font-family:'Manrope';font-weight:600;font-size:16px;transition:.12s;color:#16231E;box-shadow:4px 4px 0 #16231E;background:#FF6A3D} .btn-dl{width:100%;margin-top:8px;padding:10px;border:2px solid #16231E;border-radius:12px;cursor:pointer;font-family:Manrope;font-weight:800;font-size:13px;transition:.12s;color:#16231E;background:#F5EFE1;box-shadow:3px 3px 0 #16231E} .btn-dl.warn{background:#FCE1DB;border-color:#D23B23;color:#D23B23;animation:btnShake .4s} @keyframes btnShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}} .order-form{display:flex;flex-direction:column;gap:13px;margin-top:16px} .order-field label{display:block;font-weight:800;font-size:12.5px;color:#5B6B62;margin-bottom:6px} .order-field textarea.field{resize:vertical;font-family:'Manrope'} .order-radio-row{display:flex;flex-direction:column;gap:8px} .order-radio{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:#16231E;cursor:pointer} .order-radio input{accent-color:#FF6A3D;width:16px;height:16px;cursor:pointer;flex:none} .order-error{background:#FCE1DB;border:2px solid #D23B23;color:#D23B23;border-radius:10px;padding:9px 11px;font-size:13px;font-weight:700} #orderSubmit[disabled]{opacity:.6;cursor:default} /* ========================================================================== responsive (<=960px) — общая точка перелома для обеих страниц ========================================================================== */ @media (max-width:960px){ /* nav (shared) */ .nav-links{display:none !important} .nav{padding:9px 12px 9px 14px;top:10px;margin-top:12px} .brand{font-size:16px;gap:8px} .brand span{width:28px;height:28px;font-size:13px} .nav-cta{padding:8px 14px !important;font-size:13px !important;box-shadow:2px 2px 0 #16231E !important} .nav-right{gap:12px !important} .contacts{gap:8px} .contact-phone,.brand-slogan{display:none} .ico-btn{width:32px;height:32px} h1{font-size:34px !important} h2{font-size:28px !important} .site-footer{padding:30px 22px 22px} .footer-grid{grid-template-columns:1fr;gap:26px} .footer-desc{max-width:none} /* index.html */ .hero{grid-template-columns:1fr;padding:44px 0 30px} .hero-art{height:360px} .hero-3d{display:none} .hero-flat{display:flex} .halo{width:240px;height:240px} .steam{top:56px} .cards3,.cards4,.g2{grid-template-columns:1fr} .ex-grid{grid-template-columns:repeat(2,1fr)} /* constructor.html: конструктор вимкнено, показуємо заглушку */ .builder{display:none} .mobile-note{display:block} }