/* ========================================================================== print-cup — базові стилі, спільні для всіх сторінок і всіх партиалів. Підключається першим (до header.css/footer.css/home.css/constructor.css). 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;max-width:100vw;overflow-x:clip} 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} /* ---------- layout ---------- */ .wrap{max-width:1180px;margin:0 auto;padding:0 24px;scroll-snap-align:start} /* ---------- спільні кнопки/іконки (використовуються і в header, і у футері, і на сторінках) ---------- */ .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} .contact-phone{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope';font-weight:600;font-size:clamp(13.5px,1vw,16px);color:#172622;white-space:nowrap;flex-shrink:0;transition:color .2s ease} .contact-phone i{font-size:15px;color:#FF6A3D;transition:transform .2s ease} .contact-phone:hover{color:#FF6A3D} .contact-phone:hover i{transform:rotate(-8deg)} .contact-phone:focus-visible{outline:3px solid #FF6A3D;outline-offset:4px;border-radius:6px} .ico-btn{width:44px;height:44px;border-radius:13px;border:2px solid #172622;display:inline-flex;align-items:center;justify-content:center;box-shadow:2px 2px 0 #172622;transition:transform .2s ease,box-shadow .2s ease;flex:none} .ico-btn:hover{transform:translateY(-2px);box-shadow:2px 6px 10px rgba(16,61,52,.22),2px 2px 0 #172622} .ico-btn:active{transform:translateY(1px)} .ico-btn svg{width:20px;height:20px;display:block;fill:#fff} .ico-viber{background:#7360F2} .ico-tg{background:#229ED9} /* ---------- спільні типографічні/секційні компоненти (заголовки й т.п., використовуються і на index.html, і на constructor.html) ---------- */ .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--44{font-size:44px;margin-top:10px;text-wrap:balance} .section-head{text-align:center;max-width:860px;margin:0 auto 44px} .section-desc{font-size:18px;color:#B9CCC1;margin-top:12px} @media (prefers-reduced-motion:reduce){ .ico-btn{transition:none!important} .ico-btn:hover,.ico-btn:active{transform:none} } @media (max-width:960px){ h1{font-size:34px !important} h2{font-size:28px !important} } /* ---------- дуже вузькі телефони — спільний контейнер .wrap ---------- */ @media (max-width:480px){ .wrap{padding:0 14px} } @media (max-width:360px){ .wrap{padding:0 10px} }