/* ========================================================================= design.css — дизайн-система витрины SMMTop (сборка из Claude Design). Токены + база + компоненты одним файлом, порядок как в styles.css архива. Пути к картинкам: ../img/ — то есть themes/smm/assets/img/ текущей темы. Подключается ПОСЛЕ style.css. Собрано 22.09.2026. ========================================================================= */ /* ===================== tokens/fonts.css ===================== */ /* Open Sans — the site's only typeface. Loaded from Google Fonts exactly as the live site does (theme/css/style.css line 1). No local binaries exist in the codebase. */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..800;1,400..700&display=swap'); /* ===================== tokens/colors.css ===================== */ :root{ /* ── Brand green (from --bg-green2 #3ab44a) ── */ --green-50:#f0f9ee;--green-100:#e4f3df;--green-200:#c4e8bd;--green-300:#98d894;--green-400:#63c56a;--green-500:#3ab44a;--green-600:#2f9a3e;--green-700:#267c33;--green-800:#1f5c2d;--green-900:#163f1f; /* ── Brand yellow (from --bg-orange #e3c843) ── */ --yellow-50:#fcf8e6;--yellow-100:#f7efc4;--yellow-200:#efe08e;--yellow-300:#e3c843;--yellow-400:#d4b52a;--yellow-500:#b39d30;--yellow-600:#8d770c; /* ── Neutrals (from --color #212529 / --color-placeholder #787a7d) ── */ --gray-0:#ffffff;--gray-50:#f5f7f4;--gray-100:#eceeea;--gray-200:#d9ddd6;--gray-300:#c6cbc2;--gray-400:#a2a7a0;--gray-500:#787a7d;--gray-600:#5c6060;--gray-700:#474444;--gray-800:#343a40;--gray-900:#212529; /* ── Semantic ── */ --red-100:#fde8e8;--red-500:#d64545;--red-600:#b73535; --orange-100:#fff1dc;--orange-500:#e08a1e;--orange-600:#b86d0e; --blue-100:#e3f2fb;--blue-500:#1c92d2;--blue-600:#167ab0; /* ── Legacy aliases (keep for old templates) ── */ --bg:var(--green-100);--bg-green2:var(--green-500);--bg-orange:var(--yellow-300);--color:var(--gray-900);--color-placeholder:var(--gray-500);--color-white:var(--gray-0);--footer:#0080001c; --bg-green:linear-gradient(90deg,var(--green-500) 0%,rgb(253 243 29 / 38%) 50%,var(--green-500) 100%); /* ── Semantic roles ── */ --surface-page:var(--green-100); --surface-card:var(--gray-0); --surface-card-green:#3ab44a17; --surface-card-yellow:#e3c8432e; --surface-muted:var(--gray-50); --surface-footer:var(--footer); --surface-input:var(--gray-0); --surface-input-disabled:#f1f3f5; --text-body:var(--gray-900); --text-secondary:var(--gray-700); --text-muted:var(--gray-500); --text-placeholder:var(--gray-500); --text-on-brand:var(--gray-0); --text-brand:var(--green-500); --text-brand-strong:var(--green-700); --text-accent:var(--yellow-500); --text-link:var(--green-700); --text-link-hover:var(--green-500); --border-subtle:var(--gray-200); --border-brand:var(--green-500); --border-accent:var(--yellow-300); --border-input:var(--gray-300); --border-input-focus:var(--green-500); --border-input-error:var(--red-500); --brand-primary:var(--green-500); --brand-primary-hover:var(--green-600); --brand-primary-active:var(--green-700); --brand-accent:var(--yellow-300); --brand-accent-hover:var(--yellow-400); --success:var(--green-600);--success-bg:var(--green-50); --error:var(--red-500);--error-bg:var(--red-100); --warning:var(--orange-500);--warning-bg:var(--orange-100); --info:var(--blue-500);--info-bg:var(--blue-100); --focus-ring:0 0 0 3px rgba(58,180,74,.3); } /* ===================== tokens/typography.css ===================== */ :root{ --family:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif; /* @kind font */ --font-body:var(--family); /* Sizes — mobile first; headings scale up at --bp-md */ --fs-xs:12px;--fs-sm:13px;--fs-base:15px;--fs-md:16px;--fs-lg:18px;--fs-xl:20px;--fs-2xl:24px;--fs-3xl:28px;--fs-4xl:32px; --lh-tight:1.2; /* @kind other */ --lh-snug:1.35; /* @kind other */ --lh-body:1.6; /* @kind other */ --lh-relaxed:1.7; /* @kind other */ --fw-regular:400; /* @kind other */ --fw-medium:500; /* @kind other */ --fw-semibold:600; /* @kind other */ --fw-bold:700; /* @kind other */ /* Roles */ --text-h1-size:var(--fs-2xl);--text-h1-size-md:var(--fs-4xl);--text-h1-weight:var(--fw-semibold); /* @kind other */ --text-h2-size:var(--fs-xl);--text-h2-size-md:var(--fs-2xl);--text-h2-weight:var(--fw-semibold); /* @kind other */ --text-h3-size:var(--fs-md);--text-h3-size-md:var(--fs-lg);--text-h3-weight:var(--fw-semibold); /* @kind other */ --text-body-size:var(--fs-base);--text-small-size:var(--fs-sm);--text-caption-size:var(--fs-xs); --text-price-size:var(--fs-2xl);--text-price-weight:var(--fw-bold); /* @kind other */ --text-seo-size:var(--fs-base);--text-seo-lh:var(--lh-relaxed); /* @kind other */ --text-seo-measure:72ch; /* @kind other */ } /* ===================== tokens/spacing.css ===================== */ :root{ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px; --wrap:1100px;--wrap-narrow:720px;--wrap-pad:16px;--wrap-pad-md:20px; --block-gap:var(--sp-8);--block-gap-md:var(--sp-12); --card-pad:var(--sp-4);--card-pad-md:var(--sp-6); --control-h:44px;--control-h-sm:36px;--control-h-lg:52px; --tap-min:44px; --bp-sm:360px; /* @kind other */ --bp-md:768px; /* @kind other */ --bp-lg:1024px; /* @kind other */ --bp-xl:1440px; /* @kind other */ --z-header:50; /* @kind other */ --z-dropdown:100; /* @kind other */ --z-sticky-cta:60; /* @kind other */ --z-toast:1000; /* @kind other */ } /* ===================== tokens/effects.css ===================== */ :root{ /* Radii — the site's signature asymmetric card corner (10px 20px) is kept */ --radius-xs:6px;--radius-sm:8px;--radius-md:10px;--radius-lg:16px;--radius-card:10px 20px;--radius-card-alt:20px 10px;--radius-bar:10px 50px;--radius-pill:999px;--radius-round:50%; /* Shadows — soft, greenish-gray, never hard */ --shadow-xs:0 1px 2px rgba(33,37,41,.06); --shadow-sm:0 2px 8px rgba(33,37,41,.08); --shadow-md:0 6px 20px rgba(33,37,41,.10); --shadow-lg:0 12px 32px rgba(33,37,41,.14); --shadow-brand:0 6px 18px rgba(58,180,74,.35); --shadow-inset-logo:inset 0 -5px 15px #ebefec4a; /* Motion */ --transition:.35s; /* @kind other */ --ease:cubic-bezier(.4,0,.2,1); /* @kind other */ --dur-fast:.15s; /* @kind other */ --dur-base:.25s; /* @kind other */ --dur-slow:.35s; /* @kind other */ } /* ===================== base.css ===================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html,body{margin:0;padding:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body-size);line-height:var(--lh-body)} h1,h2,h3,h4,p,ul,ol,figure{margin:0} img,svg{display:block;max-width:100%} a{color:var(--text-link);text-decoration:none;transition:color var(--dur-base) var(--ease)} a:hover{color:var(--text-link-hover)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring)} input,button,textarea,select{font:inherit;color:inherit} button{background:none;border:0;padding:0;cursor:pointer} ::placeholder{color:var(--text-placeholder);opacity:1} input[type=number]{-moz-appearance:textfield;appearance:textfield} input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{display:none} .wrap{max-width:var(--wrap);width:100%;margin-inline:auto;padding-inline:var(--wrap-pad)} .wrap-narrow{max-width:var(--wrap-narrow)} .block{padding-block:var(--block-gap)} .grid{display:grid;gap:var(--sp-3)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Headings */ .h1,h1.title{font-size:var(--text-h1-size);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:-.015em;text-wrap:balance} .h2,h2.title{font-size:var(--text-h2-size);font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:-.01em} .sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-5)} .sec-head p{color:var(--text-muted);font-size:var(--fs-base);max-width:56ch} @media(min-width:768px){.sec-head{margin-bottom:var(--sp-6)}} .h3{font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);line-height:var(--lh-snug)} .title{text-align:center;text-transform:uppercase;color:var(--text-brand);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-5)} .title::after{content:'';width:100px;height:5px;background:var(--brand-primary);border-radius:var(--radius-bar)} .title.title-orange{color:var(--text-body)} .title.title-orange::after{background:var(--brand-accent)} .title.title-left{align-items:flex-start;text-align:left} .text-small{font-size:var(--text-small-size)} .text-caption{font-size:var(--text-caption-size);color:var(--text-muted)} .text-muted{color:var(--text-muted)} .text-secondary{color:var(--text-secondary)} .price{font-size:var(--text-price-size);font-weight:var(--text-price-weight);line-height:1;font-variant-numeric:tabular-nums} .price small{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-muted);margin-left:2px} @media(min-width:768px){ .wrap{padding-inline:var(--wrap-pad-md)} .block{padding-block:var(--block-gap-md)} .grid{gap:var(--sp-5)} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} .h1,h1.title{font-size:var(--text-h1-size-md)} .h2,h2.title{font-size:var(--text-h2-size-md)} .h3{font-size:var(--text-h3-size-md)} .title{margin-bottom:var(--sp-8)} } @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ===================== components/buttons.css ===================== */ /* Buttons — the primary is «Замовити». Always ≥44px tall. Pure CSS states; :active works on touch. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--control-h);padding:0 var(--sp-5);border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-fast) var(--ease);-webkit-tap-highlight-color:transparent;user-select:none} .btn:active{transform:translateY(1px)} .btn[disabled],.btn.is-disabled{opacity:.55;pointer-events:none;box-shadow:none} .btn-primary{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--text-on-brand);box-shadow:var(--shadow-brand)} .btn-primary:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:var(--text-on-brand)} .btn-primary:active{background:var(--brand-primary-active);border-color:var(--brand-primary-active);box-shadow:none} .btn-secondary{background:transparent;border-color:var(--brand-accent);color:var(--text-body)} .btn-secondary:hover{background:var(--brand-accent);color:var(--text-body)} .btn-secondary:active{background:var(--brand-accent-hover)} .btn-outline{background:var(--surface-card);border-color:var(--brand-primary);color:var(--text-brand-strong)} .btn-outline:hover{background:var(--green-50);color:var(--text-brand-strong)} .btn-outline:active{background:var(--green-100)} .btn-ghost{background:transparent;color:var(--text-brand-strong);padding-inline:var(--sp-3)} .btn-ghost:hover{background:var(--green-50)} .btn-telegram{background:var(--blue-500);border-color:var(--blue-500);color:#fff} .btn-telegram:hover{background:var(--blue-600);border-color:var(--blue-600);color:#fff} .btn-link{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--tap-min);padding:0 var(--sp-1);color:var(--text-link);text-decoration:underline;text-underline-offset:3px;font-weight:var(--fw-medium)} .btn-link:hover{color:var(--text-link-hover)} .btn-sm{min-height:var(--control-h-sm);padding:0 var(--sp-4);font-size:var(--fs-sm)} .btn-lg{min-height:var(--control-h-lg);padding:0 var(--sp-8);font-size:var(--fs-md);text-transform:uppercase;letter-spacing:.02em} .btn-block{display:flex;width:100%} .btn .fa,.btn .fa-solid,.btn .fa-brands{font-size:1em} /* Loading: add .is-loading, text is hidden and spinner appears */ .btn.is-loading{position:relative;color:transparent!important;pointer-events:none} .btn.is-loading::after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:btn-spin .7s linear infinite} .btn-secondary.is-loading::after,.btn-outline.is-loading::after,.btn-ghost.is-loading::after{border-color:rgba(58,180,74,.25);border-top-color:var(--brand-primary)} @keyframes btn-spin{to{transform:rotate(360deg)}} /* Sticky mobile CTA bar for the category page */ .cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky-cta);display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--wrap-pad) calc(var(--sp-3) + env(safe-area-inset-bottom));background:var(--surface-card);border-top:1px solid var(--border-subtle);box-shadow:0 -6px 20px rgba(33,37,41,.10)} .cta-sticky .price{font-size:var(--fs-xl)} .cta-sticky .btn{flex:1} @media(min-width:768px){.cta-sticky{display:none}} /* ===================== components/forms.css ===================== */ /* Form fields */ .field{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4)} .field-label{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-body)} .field-label .req{color:var(--error)} .field-hint{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5} .field-error{display:none;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--error);font-weight:var(--fw-medium)} .field.has-error .field-error{display:flex} .field.has-error .input,.field.has-error .select-trigger{border-color:var(--border-input-error);box-shadow:0 0 0 3px rgba(214,69,69,.15)} .field.has-error .field-hint{display:none} .input{width:100%;min-height:var(--control-h);padding:0 var(--sp-4);background:var(--surface-input);border:1.5px solid var(--border-input);border-radius:var(--radius-md);font-size:var(--fs-md);color:var(--text-body);transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)} .input:hover{border-color:var(--gray-400)} .input:focus{border-color:var(--border-input-focus);box-shadow:var(--focus-ring);outline:none} .input[disabled],.input[readonly]{background:var(--surface-input-disabled);color:var(--text-muted);cursor:not-allowed} textarea.input{min-height:120px;padding:var(--sp-3) var(--sp-4);line-height:1.5;resize:vertical} .input-wrap{position:relative;display:flex;align-items:center} .input-wrap .input{padding-left:44px} .input-wrap .input-icon{position:absolute;left:14px;color:var(--text-muted);pointer-events:none;font-size:16px} .input-wrap.has-success .input{border-color:var(--success)} .input-wrap .input-status{position:absolute;right:14px;font-size:16px;display:none} .input-wrap.has-success .input-status.ok{display:block;color:var(--success)} /* Quantity stepper with min/max */ .qty{display:grid;grid-template-columns:var(--control-h) 1fr var(--control-h);gap:var(--sp-2)} .qty .qty-btn{height:var(--control-h);border:1.5px solid var(--border-input);background:var(--surface-input);border-radius:var(--radius-md);font-size:22px;line-height:1;color:var(--text-body);display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)} .qty .qty-btn:hover{border-color:var(--brand-primary);color:var(--text-brand-strong)} .qty .qty-btn:active{background:var(--green-50)} .qty .qty-btn[disabled]{opacity:.4;cursor:not-allowed} .qty .input{text-align:center;font-size:var(--fs-lg);font-weight:var(--fw-semibold)} .qty-limits{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--sp-1)} .qty-limits b{color:var(--text-body);font-weight:var(--fw-semibold)} .field.has-error .qty .input{border-color:var(--border-input-error)} .presets{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;padding:0;margin:var(--sp-2) 0 0} .presets li{flex:1 1 calc(33.33% - var(--sp-2));min-width:80px} .chip{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--control-h-sm);padding:0 var(--sp-3);border:1.5px solid var(--border-input);background:var(--surface-card);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .chip:hover{border-color:var(--brand-primary);color:var(--text-brand-strong)} .chip.is-active{background:var(--green-50);border-color:var(--brand-primary);color:var(--text-brand-strong)} /* Service select — custom dropdown (jQuery toggles .is-open on .select) */ .select{position:relative} .select select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px} .select-trigger{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--control-h);padding:var(--sp-2) 44px var(--sp-2) var(--sp-4);background:var(--surface-input);border:1.5px solid var(--border-input);border-radius:var(--radius-md);font-size:var(--fs-md);text-align:left;color:var(--text-body);cursor:pointer;transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)} .select-trigger.is-placeholder{color:var(--text-placeholder)} .select-trigger::after{content:'';position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);transition:transform var(--dur-base) var(--ease)} .select.is-open .select-trigger{border-color:var(--border-input-focus);box-shadow:var(--focus-ring)} .select.is-open .select-trigger::after{transform:rotate(-135deg);margin-top:-2px} .select-trigger .opt-price{margin-left:auto;font-weight:var(--fw-bold);white-space:nowrap;color:var(--text-brand-strong)} .select-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:var(--z-dropdown);max-height:320px;overflow-y:auto;background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);list-style:none;padding:var(--sp-1);margin:0} .select.is-open .select-menu{display:block} .select-menu.is-static{display:block;position:static;box-shadow:var(--shadow-sm)} .opt{display:grid;grid-template-columns:1fr auto;gap:2px var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-3);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-base);line-height:1.35;transition:background var(--dur-fast) var(--ease)} .opt:hover{background:var(--green-50)} .opt.is-selected{background:var(--green-100)} .opt.is-selected .opt-name::before{content:'✓ ';color:var(--text-brand-strong);font-weight:var(--fw-bold)} .opt-name{font-weight:var(--fw-medium);overflow-wrap:anywhere} .opt-price{font-weight:var(--fw-bold);white-space:nowrap;color:var(--text-brand-strong);font-variant-numeric:tabular-nums} .opt-price small{font-weight:var(--fw-regular);color:var(--text-muted);font-size:var(--fs-xs)} .opt-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);color:var(--text-muted)} .opt-meta .badge{font-size:10px} /* Toggle switch (drip-feed) */ .switch{position:relative;display:inline-flex;align-items:center;gap:var(--sp-3);min-height:var(--tap-min);cursor:pointer;font-weight:var(--fw-semibold)} .switch input{position:absolute;opacity:0;width:0;height:0} .switch .track{width:44px;height:24px;border-radius:24px;background:var(--gray-300);position:relative;flex-shrink:0;transition:background var(--dur-base) var(--ease)} .switch .track::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease)} .switch input:checked+.track{background:var(--brand-primary)} .switch input:checked+.track::before{transform:translateX(20px)} .switch input:focus-visible+.track{box-shadow:var(--focus-ring)} /* Checkbox / radio */ .check{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:var(--tap-min);cursor:pointer} .check input{width:20px;height:20px;accent-color:var(--brand-primary);margin:0;flex-shrink:0} /* Payment option (radio card) */ .pay-option{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--control-h-lg);padding:var(--sp-3) var(--sp-4);background:var(--surface-card);border:1.5px solid var(--border-input);border-radius:var(--radius-md);cursor:pointer;font-weight:var(--fw-semibold);transition:border-color var(--dur-fast) var(--ease)} .pay-option:hover{border-color:var(--brand-primary)} .pay-option:has(input:checked){border-color:var(--brand-primary);background:var(--green-50)} .pay-option input{accent-color:var(--brand-primary);width:20px;height:20px;margin:0} .pay-option img{height:22px;width:auto} /* Help dot (tap-to-open tooltip; jQuery toggles .is-open) */ .help{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--gray-400);color:#fff;font-size:12px;font-weight:var(--fw-bold);cursor:pointer;position:relative;vertical-align:middle} .help .tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(280px,80vw);padding:var(--sp-3) var(--sp-4);background:var(--gray-800);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-regular);line-height:1.5;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);text-align:left;z-index:var(--z-dropdown)} .help.is-open .tip{display:block} /* ===================== components/cards.css ===================== */ /* Cards */ .card{background:var(--surface-card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);padding:var(--card-pad)} .card-green{background:var(--surface-card-green);border:2px solid var(--border-brand);box-shadow:none} .card-yellow{background:var(--surface-card-yellow);border:2px solid var(--border-accent);border-radius:var(--radius-card-alt);box-shadow:none} .card-flat{box-shadow:none;border:1px solid var(--border-subtle)} @media(min-width:768px){.card{padding:var(--card-pad-md)}} /* Badges */ .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-xs);font-size:11px;font-weight:var(--fw-semibold);line-height:1.5;white-space:nowrap;vertical-align:middle} .badge-rec{background:var(--green-800);color:#fff} .badge-top{background:#5c4000;color:#fff} .badge-opt{background:#154a42;color:#fff} .badge-soft{background:var(--green-100);color:var(--green-800)} .badge-yellow{background:var(--yellow-100);color:var(--yellow-600)} .badge-red{background:var(--red-100);color:var(--red-600)} /* Icon system — one size, one soft green pad, muted green glyph. Never raw black glyphs. */ .ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:var(--green-100);color:var(--green-700);font-size:15px;flex-shrink:0;line-height:1;vertical-align:middle} .ico::before{line-height:1} .ico-sm{width:28px;height:28px;border-radius:9px;font-size:12px} .ico-lg{width:44px;height:44px;border-radius:14px;font-size:18px} .ico-yellow{background:var(--yellow-100);color:var(--yellow-600)} /* Quality tiers — the one visual code that separates variants at a glance */ .tier{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .tier::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor} .tier-econ{background:var(--gray-100);color:var(--gray-600)} .tier-std{background:var(--green-100);color:var(--green-700)} .tier-max{background:var(--yellow-100);color:var(--yellow-600)} .dots{display:inline-flex;gap:3px;align-items:center} .dots b{width:10px;height:5px;border-radius:3px;background:var(--gray-200)} .dots b.f{background:var(--green-500)} /* Service card — reads in this order: tier → name → price → benefit → facts → action */ .service{position:relative;display:grid;gap:var(--sp-4);padding:var(--sp-5) var(--sp-4);background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:var(--radius-lg);transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)} .service:hover{border-color:var(--green-300)} .service.is-recommended{border-color:var(--green-400);box-shadow:0 8px 28px rgba(58,180,74,.14)} .service.is-selected{border-color:var(--green-600);background:var(--green-50)} .service-top{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap} .service-top .badge{margin-left:auto} .service-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3);align-items:start} .service-name{font-size:17px;font-weight:var(--fw-bold);line-height:1.3;color:var(--text-body);overflow-wrap:anywhere;text-wrap:pretty} .service-name small{display:block;font-size:var(--fs-sm);font-weight:var(--fw-regular);color:var(--text-muted);margin-top:2px;text-transform:none} .service-price{text-align:right;line-height:1} .service-price .price{font-size:22px;font-weight:var(--fw-bold);letter-spacing:-.01em;white-space:nowrap} .service-price small{display:block;font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--text-muted);margin-top:4px} .service-benefit{font-size:var(--fs-base);line-height:1.5;color:var(--text-secondary);margin:-4px 0 0} .service-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;list-style:none;padding:0;margin:0} .service-facts li{background:var(--gray-50);padding:8px 12px;display:grid;gap:1px} .service-facts span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:var(--fw-semibold)} .service-facts b{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-body);display:flex;align-items:center;gap:6px} .service-desc{font-size:var(--fs-sm);line-height:1.55;color:var(--text-muted)} .service-actions{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap} .service-actions .btn{flex:1 1 160px} .service-actions .picked{display:none;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--green-700)} .service.is-selected .service-actions .btn-outline{display:none} .service.is-selected .service-actions .picked{display:inline-flex;align-items:center;gap:6px} @media(min-width:768px){.service{padding:var(--sp-6);grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:"top top" "head head" "benefit facts" "desc facts" "actions facts";column-gap:var(--sp-6)}.service-top{grid-area:top}.service-head{grid-area:head}.service-benefit{grid-area:benefit}.service-desc{grid-area:desc}.service-facts{grid-area:facts;grid-template-columns:1fr;align-self:start}.service-actions{grid-area:actions;align-self:end}.service-actions .btn{flex:0 0 auto;min-width:180px}.service-price .price{font-size:26px}} .service-list{display:grid;gap:var(--sp-3)} @media(min-width:768px){.service-list{gap:var(--sp-4)}} /* Related services — a recommendation, not a link list: network icon, title, reason, price from, action */ .related{display:grid;gap:var(--sp-3);list-style:none;padding:0;margin:0} @media(min-width:768px){.related{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}} .rel{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--sp-4);align-items:start;padding:var(--sp-4);background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:var(--radius-lg);color:var(--text-body);transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-fast) var(--ease)} .rel:hover{border-color:var(--green-400);box-shadow:var(--shadow-md);color:var(--text-body)} .rel:hover .rel-go{color:var(--green-700)} .rel:active{transform:scale(.99)} .rel .net-icon{width:48px;height:48px}.rel .net-icon img{width:24px;height:24px} .rel-body{display:grid;gap:6px;min-width:0} .rel-title{font-size:17px;font-weight:var(--fw-bold);line-height:1.3} .rel-why{font-size:var(--fs-base);line-height:1.5;color:var(--text-secondary);text-wrap:pretty} .rel-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2);padding-top:var(--sp-3);border-top:1px dashed var(--border-subtle)} .rel-price{white-space:nowrap;flex-shrink:0} .rel-price b{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--green-700)} .rel-price small{font-size:var(--fs-xs);color:var(--text-muted)} .rel-go{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--green-600);white-space:nowrap} @media(min-width:768px){.rel{padding:var(--sp-5)}} /* Empty list */ .empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--text-muted);border:2px dashed var(--border-subtle);border-radius:var(--radius-card)} .empty i{font-size:32px;color:var(--gray-300);margin-bottom:var(--sp-3)} /* Network tile (home grid / hub) */ .net-tile{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-3);background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:var(--radius-card);text-align:center;color:var(--text-body);font-weight:var(--fw-semibold);font-size:var(--fs-base);min-height:var(--tap-min);transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)} .net-tile:hover{border-color:var(--border-accent);box-shadow:var(--shadow-md);color:var(--text-body)} .net-tile:active{transform:scale(.98)} .net-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--green-100)} .net-icon img{width:30px;height:30px;object-fit:contain} .net-icon-sm{width:36px;height:36px} .net-icon-sm img{width:20px;height:20px} .net-icon-lg{width:72px;height:72px} .net-icon-lg img{width:40px;height:40px} /* Network gradients — copied verbatim from theme/css/style.css [data-social] */ [data-social="Instagram"]{background:linear-gradient(to right,#833ab4,#fd1d1d,#fcb045)} [data-social="Telegram"]{background:linear-gradient(to right,#1c92d2,#bbd3d7)} [data-social="YouTube"]{background:linear-gradient(to right,#e52d27,#b31217)} [data-social="TikTok"]{background:linear-gradient(to right,#e5295c,#7eaebc)} [data-social="FaceBook"],[data-social="Facebook"]{background:linear-gradient(to right,#00c6ff,#0072ff)} [data-social="Twitter"]{background:linear-gradient(to right,#008abb,#00a8e2)} [data-social="Twitch"]{background:linear-gradient(to right,#6441A5,#2a0845)} [data-social="Soundcloud"]{background:linear-gradient(to right,#fe8c00,#f83600)} [data-social="Spotify"]{background:linear-gradient(to right,#1dbc55,#1cd55e)} [data-social="LinkedIn"]{background:linear-gradient(to right,#0172ac,#064c70)} [data-social="Snapchat"]{background:linear-gradient(to right,#ffc800,#c3a618)} [data-social="Threads"]{background:linear-gradient(to right,#111111,#2e2f2f)} [data-social="CoinMarketCap"]{background:linear-gradient(to right,#3861FB,#1B3FD1)} [data-social="WhatsApp"]{background:linear-gradient(to right,#25D366,#1EBE5D)} [data-social="Kick"]{background:linear-gradient(to right,#3FD617,#2A9109)} [data-social="Binance Square"]{background:linear-gradient(to right,#F0B90B,#B98C00)} [data-social="Pinterest"]{background:linear-gradient(to right,#E60023,#8C0014)} [data-social="Apple Music"]{background:linear-gradient(to right,#FA243C,#B3001B)} [data-social="Shazam"]{background:linear-gradient(to right,#0088FF,#0056A3)} [data-social="Reddit"]{background:linear-gradient(to right,#FF4500,#CC3700)} [data-social="Steam"]{background:linear-gradient(to right,#1B2838,#0E1620)} [data-social="Discord"]{background:linear-gradient(to right,#5865F2,#4752C4)} [data-social="DexScreener"]{background:linear-gradient(to right,#1f2a37,#0b1220)} /* Review card */ .review{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--card-pad);background:var(--surface-card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)} .stars{display:inline-flex;gap:2px;color:var(--yellow-300);font-size:16px;line-height:1} .stars .off{color:var(--gray-200)} .review-text{font-size:var(--fs-base);line-height:1.55;color:var(--text-body)} .review-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-muted)} .review-foot b{color:var(--text-body);font-weight:var(--fw-semibold)} .review-foot a{color:var(--text-link)} /* Order form — white card, clear head (what's chosen), fields separated by 20px, total block on tinted ground */ .order{background:var(--surface-card);border:1.5px solid var(--green-200);border-radius:var(--radius-lg);box-shadow:0 12px 40px rgba(22,63,31,.08);padding:var(--sp-5) var(--sp-4)} .order .field{margin-bottom:var(--sp-5);gap:var(--sp-2)} .order .field-label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-body);letter-spacing:.01em;display:flex;justify-content:space-between;align-items:baseline;gap:8px} .order .field-label small{font-weight:var(--fw-regular);color:var(--text-muted);font-size:var(--fs-xs)} .order .field-hint{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.45} .order-head{display:flex;align-items:flex-start;gap:var(--sp-3);padding-bottom:var(--sp-4);margin-bottom:var(--sp-5);border-bottom:1px solid var(--border-subtle)} .order-head .ico{width:40px;height:40px;border-radius:12px;font-size:16px} .order-head h2{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:1.25} .order-head p{font-size:var(--fs-sm);color:var(--text-muted);margin-top:2px} .order-head .step{margin-left:auto;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);white-space:nowrap;background:var(--gray-50);border-radius:999px;padding:4px 10px} .order-group{padding:var(--sp-4);background:var(--gray-50);border-radius:var(--radius-md);display:grid;gap:var(--sp-3)} .order-group .switch{font-size:var(--fs-base)} .order-total{margin:var(--sp-2) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5));padding:var(--sp-5) var(--sp-4);background:var(--green-50);border-top:1px solid var(--green-200);border-radius:0 0 var(--radius-lg) var(--radius-lg);display:grid;gap:var(--sp-3)} .order-total .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .order-total .label{font-size:var(--fs-sm);color:var(--text-secondary);font-weight:var(--fw-semibold)} .order-total .price{font-size:32px;letter-spacing:-.02em} .order-total .calc{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-sm);color:var(--text-muted)} .order-total .btn-lg{width:100%;text-transform:none;letter-spacing:0;font-size:17px;margin-top:var(--sp-1)} .order-total .trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:var(--fs-xs);color:var(--text-muted);font-weight:var(--fw-medium)} .order-total .trust span{display:inline-flex;align-items:center;gap:6px} .order-total .trust i{color:var(--green-600);font-size:14px} @media(min-width:768px){.order{padding:var(--sp-6)}.order-total{margin:var(--sp-2) calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6));padding:var(--sp-5) var(--sp-6)}} /* Home network tiles — muted icon pad, hover lifts */ .net-tile{gap:var(--sp-3);padding:var(--sp-5) var(--sp-3) var(--sp-4);border-radius:var(--radius-lg)} .net-tile .net-icon{box-shadow:0 6px 16px rgba(22,63,31,.10)} .net-tile h3{font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:1.3;text-align:center} .net-tile small{font-size:var(--fs-xs);color:var(--text-muted);font-weight:var(--fw-regular)} /* ===================== components/navigation.css ===================== */ /* Header */ .header-wave{height:44px;background:var(--bg-green);position:relative;overflow:hidden} .header-wave::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:120px;background:url(../img/wave.svg) repeat-x bottom/210px auto;animation:wave 3s cubic-bezier(.36,.45,.63,.53) infinite} @keyframes wave{to{background-position-x:-210px}} .header{position:relative;z-index:var(--z-header);background:var(--surface-page)} .header-surface{background:var(--surface-card);border-bottom:1px solid var(--border-subtle);box-shadow:0 1px 0 rgba(255,255,255,.6),0 6px 20px rgba(22,63,31,.05)} .header-bar{display:flex;align-items:center;gap:var(--sp-3);min-height:64px;padding-block:var(--sp-2)} .logo{display:inline-flex;align-items:center;gap:var(--sp-3);color:inherit} .logo-mark{position:relative;width:48px;height:48px;border-radius:50%;background:var(--brand-primary);box-shadow:var(--shadow-inset-logo);overflow:hidden;flex-shrink:0} .logo-mark img{width:100%;height:100%;object-fit:cover} .logo-mark::before{content:'';position:absolute;width:18px;height:16px;left:7px;bottom:6px;background:#fff;opacity:.7;border-radius:80%;filter:blur(7px)} .logo-lg .logo-mark{width:75px;height:75px} .logo-text{display:flex;flex-direction:column-reverse;line-height:1.05;text-align:right} .logo-text b{font-size:22px;font-weight:var(--fw-medium);text-transform:uppercase;color:var(--text-brand);letter-spacing:.01em} .logo-text span{font-size:11px;opacity:.55;color:var(--text-body)} .logo-lg .logo-text b{font-size:25px}.logo-lg .logo-text span{font-size:12px} .lang{display:flex;align-items:center;gap:6px;list-style:none;padding:0;margin:0;font-size:var(--fs-sm);text-transform:uppercase;font-weight:var(--fw-medium)} .lang a{display:inline-flex;align-items:center;min-height:32px;padding:0 4px;color:var(--text-muted);border-bottom:2px solid transparent} .lang a.is-active{color:var(--text-brand);border-bottom-color:var(--brand-primary)} .lang .sep{opacity:.4} .header-actions{display:none;margin-left:auto;align-items:center;gap:var(--sp-2)} .header-menu-btn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius-md);border:1.5px solid var(--border-subtle);background:var(--surface-card);color:var(--text-body);font-size:18px} .header-menu-btn.is-open{background:var(--green-50);border-color:var(--brand-primary);color:var(--text-brand-strong)} /* Networks nav — its own white surface under the header; active = tinted pill with underline; "Всі мережі" is a full item */ .nets-nav{display:none} .nets-nav .wrap{display:flex} .nets-bar{display:flex;align-items:center;gap:2px;list-style:none;padding:6px 0;margin:0;width:100%} .nets-bar a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 8px;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-secondary);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)} .nets-bar a:hover{background:var(--green-50);color:var(--text-body)} .nets-bar a.is-active{background:var(--green-100);color:var(--green-800);box-shadow:inset 0 -2px 0 var(--green-500)} /* Small brand-coloured glyph, no pad: white SVGs are tinted via mask-image with the network's brand colour */ .nets-bar .net-icon{width:18px;height:18px;border-radius:0;background:none!important;position:relative;opacity:.9} .nets-bar .net-icon img{display:none} .nets-bar .net-icon::before{content:'';position:absolute;inset:0;background:#5c6060;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .nets-bar a:hover .net-icon,.nets-bar a.is-active .net-icon{opacity:1} .nets-bar a.is-active .net-icon{transform:scale(1.1)} .nets-bar [data-social="TikTok"]::before{background:#111;-webkit-mask-image:url(../img/social/tiktok.svg);mask-image:url(../img/social/tiktok.svg)} .nets-bar [data-social="Instagram"]::before{background:#d62976;-webkit-mask-image:url(../img/social/instagram.svg);mask-image:url(../img/social/instagram.svg)} .nets-bar [data-social="Telegram"]::before{background:#1c92d2;-webkit-mask-image:url(../img/social/telegram.svg);mask-image:url(../img/social/telegram.svg)} .nets-bar [data-social="YouTube"]::before{background:#e52d27;-webkit-mask-image:url(../img/social/youtube.svg);mask-image:url(../img/social/youtube.svg)} .nets-bar [data-social="FaceBook"]::before{background:#0072ff;-webkit-mask-image:url(../img/social/facebook.svg);mask-image:url(../img/social/facebook.svg)} .nets-bar [data-social="Twitter"]::before{background:#111;-webkit-mask-image:url(../img/social/twitter.svg);mask-image:url(../img/social/twitter.svg)} .nets-bar [data-social="Threads"]::before{background:#111;-webkit-mask-image:url(../img/social/Threads.svg);mask-image:url(../img/social/Threads.svg)} .nets-bar [data-social="Twitch"]::before{background:#6441a5;-webkit-mask-image:url(../img/social/twitch.svg);mask-image:url(../img/social/twitch.svg)} .nets-bar [data-social="Spotify"]::before{background:#1dbc55;-webkit-mask-image:url(../img/social/spotify.svg);mask-image:url(../img/social/spotify.svg)} .nets-bar [data-social="LinkedIn"]::before{background:#0172ac;-webkit-mask-image:url(../img/social/linkedin.svg);mask-image:url(../img/social/linkedin.svg)} .nets-bar [data-social="Snapchat"]::before{background:#d6a800;-webkit-mask-image:url(../img/social/snapchat.svg);mask-image:url(../img/social/snapchat.svg)} .nets-bar [data-social="Discord"]::before{background:#5865f2;-webkit-mask-image:url(../img/social/discord.svg);mask-image:url(../img/social/discord.svg)} .nets-bar [data-social="WhatsApp"]::before{background:#25d366;-webkit-mask-image:url(../img/social/whatsapp.svg);mask-image:url(../img/social/whatsapp.svg)} .nets-bar [data-social="Soundcloud"]::before{background:#fe8c00;-webkit-mask-image:url(../img/social/soundcloud.svg);mask-image:url(../img/social/soundcloud.svg)} .nets-bar [data-social="Pinterest"]::before{background:#e60023;-webkit-mask-image:url(../img/social/pinterest.svg);mask-image:url(../img/social/pinterest.svg)} .nets-bar [data-social="Reddit"]::before{background:#ff4500;-webkit-mask-image:url(../img/social/reddit.svg);mask-image:url(../img/social/reddit.svg)} .nets-bar [data-social="Kick"]::before{background:#2a9109;-webkit-mask-image:url(../img/social/kick.svg);mask-image:url(../img/social/kick.svg)} .nets-bar [data-social="Steam"]::before{background:#1b2838;-webkit-mask-image:url(../img/social/steam.svg);mask-image:url(../img/social/steam.svg)} .nets-bar [data-social="Apple Music"]::before{background:#fa243c;-webkit-mask-image:url(../img/social/applemusic.svg);mask-image:url(../img/social/applemusic.svg)} .nets-bar [data-social="Shazam"]::before{background:#0088ff;-webkit-mask-image:url(../img/social/shazam.svg);mask-image:url(../img/social/shazam.svg)} .nets-bar [data-social="Binance Square"]::before{background:#d9a30b;-webkit-mask-image:url(../img/social/binancesquare.svg);mask-image:url(../img/social/binancesquare.svg)} .nets-bar [data-social="CoinMarketCap"]::before{background:#3861fb;-webkit-mask-image:url(../img/social/coinmarketcap.svg);mask-image:url(../img/social/coinmarketcap.svg)} .nets-bar [data-social="DexScreener"]::before{background:#1f2a37;-webkit-mask-image:url(../img/social/dexscreener.svg);mask-image:url(../img/social/dexscreener.svg)} .nets-more{position:relative;margin-left:auto} .nets-more>a{border:1.5px solid var(--border-subtle);background:var(--surface-card);padding:0 12px 0 14px;color:var(--text-body)} .nets-more>a::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-4px 0 0 4px;transition:transform var(--dur-fast) var(--ease)} .nets-more>a .cnt{background:var(--green-100);color:var(--green-800);border-radius:999px;font-size:11px;padding:1px 7px;font-weight:var(--fw-bold)} .nets-more.is-open>a{border-color:var(--green-500);background:var(--green-50)} .nets-more.is-open>a::after{transform:rotate(-135deg);margin-top:3px} .nets-mega{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:var(--z-dropdown);width:min(760px,90vw);padding:var(--sp-4);background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border-subtle)} .nets-more.is-open .nets-mega{display:block} .nets-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-1);list-style:none;padding:0;margin:0} .nets-grid li{min-width:0} .nets-grid a{display:flex;align-items:center;gap:var(--sp-2);min-width:0;min-height:var(--tap-min);padding:0 var(--sp-2);overflow-wrap:anywhere;border-radius:var(--radius-sm);color:var(--text-body);font-size:var(--fs-base);font-weight:var(--fw-medium);transition:background var(--dur-fast) var(--ease)} .nets-grid a:hover{background:var(--green-50);color:var(--text-body)} .nets-grid a.is-active{background:var(--green-100);color:var(--text-brand-strong)} .nets-grid a>span:not(.net-icon){flex:1;min-width:0} .nets-grid small{margin-left:auto;flex-shrink:0;font-size:var(--fs-xs);color:var(--text-muted);font-weight:var(--fw-regular)} @media(max-width:767px){.nets-grid a{font-size:14px}} /* Mobile panel — a normal block toggled by the burger (jQuery: .is-open) */ .mobile-panel{display:none;border-top:1px solid var(--border-subtle);padding:var(--sp-4) 0 var(--sp-5);background:var(--surface-page)} .mobile-panel.is-open{display:block} .mobile-panel .panel-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:var(--fw-semibold);margin:var(--sp-3) 0 var(--sp-2)} .mobile-panel .nets-grid{gap:var(--sp-2)} .mobile-panel .nets-grid a{background:var(--surface-card);border:1.5px solid var(--border-subtle);height:48px;padding:0 var(--sp-3);border-radius:var(--radius-md);box-shadow:var(--shadow-xs)} .mobile-panel .nets-grid a>span:not(.net-icon){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-sm)} .mobile-panel .nets-grid a.is-active{border-color:var(--green-500)} .mobile-panel .panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin:0 0 var(--sp-4)} @media(min-width:1024px){ .header-bar{min-height:80px} .header-actions{display:flex} .header-menu-btn,.mobile-panel{display:none!important} .nets-nav{display:block;border-top:1px solid var(--border-subtle);background:var(--surface-card)} .nets-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } /* Breadcrumbs */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--sp-2);list-style:none;padding:0;margin:0 0 var(--sp-4);font-size:var(--fs-sm);color:var(--text-muted)} .crumbs li{display:inline-flex;align-items:center;gap:var(--sp-2)} .crumbs li+li::before{content:'/';opacity:.5} .crumbs a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;min-height:28px;display:inline-flex;align-items:center} .crumbs a:hover{text-decoration:none} .crumbs [aria-current]{color:var(--text-secondary);font-weight:var(--fw-medium)} .crumbs img{width:16px;height:16px} /* Pagination */ .pager{display:flex;justify-content:center;align-items:center;gap:var(--sp-1);list-style:none;padding:0;margin:0} .pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap-min);height:var(--tap-min);padding:0 var(--sp-2);border-radius:var(--radius-md);font-weight:var(--fw-medium);color:var(--text-body);border:1.5px solid transparent;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .pager a:hover{border-color:var(--border-subtle);background:var(--surface-card);color:var(--text-body)} .pager .is-current{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)} .pager .dots{color:var(--text-muted)} .pager .is-disabled{opacity:.4;pointer-events:none} /* Related links (Схожі послуги) */ .links-cloud{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;padding:0;margin:0;justify-content:center} .links-cloud a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-4);background:var(--surface-card);border:1.5px solid var(--green-200);border-radius:var(--radius-md);color:var(--text-brand-strong);font-size:var(--fs-sm);font-weight:var(--fw-medium);text-align:center;line-height:1.3;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .links-cloud a:hover{border-color:var(--brand-primary);background:var(--green-50);color:var(--text-brand-strong)} /* Footer — deep brand green, white type at full weight, clear column rhythm */ .footer{margin-top:auto;background:var(--green-900);color:#fff;font-size:var(--fs-sm)} .footer a{color:#fff} .footer-grid{display:grid;gap:var(--sp-8);padding-block:var(--sp-10) var(--sp-8)} .footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--green-300);font-weight:var(--fw-bold);margin-bottom:var(--sp-3)} .footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:2px} .footer-col a{display:inline-flex;align-items:center;min-height:34px;color:#fff;font-size:var(--fs-base);font-weight:var(--fw-medium);opacity:.92} .footer-col a:hover{opacity:1;color:var(--yellow-300)} .footer-brand .logo-text b{color:#fff}.footer-brand .logo-text span{color:#fff;opacity:.7} .footer-brand p{color:rgba(255,255,255,.8);margin-top:var(--sp-4);max-width:32ch;font-size:var(--fs-base);line-height:1.55} .footer-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);justify-content:space-between;padding-block:var(--sp-5);border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7);font-weight:var(--fw-medium)} @media(min-width:768px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--sp-10)}.footer-col+.footer-col{padding-left:var(--sp-8);border-left:1px solid rgba(255,255,255,.12)}} /* Floating Telegram bot button */ .tg-float{position:fixed;right:var(--sp-4);bottom:calc(var(--sp-4) + env(safe-area-inset-bottom));z-index:var(--z-sticky-cta);width:52px;height:52px;border-radius:50%;background:var(--blue-500);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px} .tg-float:hover{background:var(--blue-600);color:#fff} /* ===================== components/content.css ===================== */ /* Why us — h2 + six h3, each with a unified .ico */ .whyus{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3)} .whyus li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-4);background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:var(--radius-lg)} .whyus-title{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--text-body);margin:8px 0 4px;line-height:1.3} .whyus-description{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.55} .whyus li>div{grid-column:2} .whyus li .ico{grid-row:1/3;margin-top:2px} @media(min-width:768px){.whyus{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}.whyus li{grid-template-columns:1fr;padding:var(--sp-5)}.whyus li .ico{grid-row:auto}.whyus li>div{grid-column:1}.whyus-title{margin-top:var(--sp-3)}} .whyus-wrap{position:relative;overflow:hidden;background:var(--surface-card-green);border:2px solid var(--border-brand);border-radius:var(--radius-card);padding:var(--sp-4)} @media(min-width:768px){.whyus-wrap{padding:var(--sp-6)}} /* SEO long text — always fully visible, never collapsed. Sits on a white surface. */ .seo-surface{background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--sp-5) var(--sp-4)} @media(min-width:768px){.seo-surface{padding:var(--sp-10) var(--sp-8)}} .seo{max-width:var(--text-seo-measure);margin-inline:auto;font-size:var(--fs-md);line-height:1.7;color:var(--gray-700)} .seo p{margin:0 0 var(--sp-4)} .seo h2,.seo .about-title{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--text-body);margin:var(--sp-10) 0 var(--sp-4);line-height:1.25;letter-spacing:-.01em;text-wrap:balance} .seo h2:first-child{margin-top:0} .seo h3{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text-body);margin:var(--sp-8) 0 var(--sp-3);line-height:1.3} .seo ul,.seo ol{padding-left:var(--sp-5);margin:0 0 var(--sp-5);display:grid;gap:var(--sp-2)} .seo li{padding-left:4px} .seo li::marker{color:var(--green-500);font-weight:var(--fw-bold)} .seo strong{color:var(--text-body);font-weight:var(--fw-semibold)} .seo a{text-decoration:underline;text-underline-offset:3px} .seo blockquote,.seo .callout{margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-5);background:var(--green-50);border-left:4px solid var(--green-500);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-body)} .seo .lead{font-size:var(--fs-lg);color:var(--text-body)} .seo br{display:none} .seo .about-description{margin:0 0 var(--sp-4)} @media(max-width:767px){.seo{font-size:var(--fs-base);line-height:1.65}.seo h2,.seo .about-title{font-size:var(--fs-xl);margin-top:var(--sp-8)}.seo h3{font-size:var(--fs-md);margin-top:var(--sp-6)}} .about{background:var(--surface-card-yellow);border:2px solid var(--border-accent);border-radius:var(--radius-card-alt);padding:var(--sp-4)} @media(min-width:768px){.about{padding:var(--sp-8)}} /* FAQ — questions always expanded (h3 + p). No accordion. */ .faq{display:grid;gap:var(--sp-3)} .faq-item{background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--sp-4);display:grid;gap:var(--sp-2)} .faq-item_title{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--text-body);line-height:1.35} .faq-item_title::before{content:'?';flex-shrink:0;width:28px;height:28px;border-radius:9px;background:var(--green-100);color:var(--green-700);font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;font-size:14px} .faq-item_description{font-size:var(--fs-base);line-height:1.55;color:var(--text-secondary);padding-left:calc(28px + var(--sp-3))} @media(min-width:768px){.faq{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);align-items:start}.faq-item{padding:var(--sp-5)}} /* Policy / long legal text */ .doc{max-width:var(--wrap-narrow);margin-inline:auto;font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--text-secondary)} .doc h2{font-size:var(--fs-xl);color:var(--text-body);margin:var(--sp-8) 0 var(--sp-3);scroll-margin-top:80px} .doc p{margin-bottom:var(--sp-4)} .toc{background:var(--surface-card);border-radius:var(--radius-card);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-6)} .toc ol{margin:0;padding-left:var(--sp-5);display:grid;gap:var(--sp-1)} .toc a{text-decoration:underline;text-underline-offset:3px} /* ===================== components/feedback.css ===================== */ /* Inline alerts */ .alert{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);font-size:var(--fs-sm);line-height:1.5;border:1px solid transparent} .alert i{font-size:16px;margin-top:2px;flex-shrink:0} .alert-success{background:var(--success-bg);color:var(--green-800);border-color:var(--green-200)} .alert-error{background:var(--error-bg);color:var(--red-600);border-color:#f3c4c4} .alert-warning{background:var(--warning-bg);color:var(--orange-600);border-color:#f5d9b0} .alert-info{background:var(--info-bg);color:var(--blue-600);border-color:#bfe0f5} .alert b{font-weight:var(--fw-semibold)} /* Toast — fixed, one at a time, top-center on mobile, bottom-right on desktop */ .toast-stack{position:fixed;z-index:var(--z-toast);top:var(--sp-3);left:var(--sp-3);right:var(--sp-3);display:grid;gap:var(--sp-2);pointer-events:none} .toast{pointer-events:auto;display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--gray-800);color:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);line-height:1.45;animation:toast-in var(--dur-slow) var(--ease)} .toast i{font-size:18px;margin-top:1px;flex-shrink:0} .toast b{display:block;font-size:var(--fs-base);font-weight:var(--fw-semibold);margin-bottom:2px} .toast-success i{color:var(--green-400)} .toast-error i{color:#ff7b7b} .toast-info i{color:#7cc3f0} .toast-warning i{color:#f5b45b} .toast .toast-close{margin-left:auto;color:rgba(255,255,255,.6);font-size:16px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0} .toast .toast-close:hover{color:#fff;background:rgba(255,255,255,.1)} @keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media(min-width:768px){.toast-stack{top:auto;left:auto;bottom:var(--sp-5);right:var(--sp-5);width:360px}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}} /* Modal (error popup) */ .modal-backdrop{position:fixed;inset:0;background:rgba(33,37,41,.5);z-index:var(--z-toast);display:flex;align-items:center;justify-content:center;padding:var(--sp-4)} .modal{width:100%;max-width:380px;background:var(--surface-card);border-radius:var(--radius-lg);padding:var(--sp-6);text-align:center;box-shadow:var(--shadow-lg)} .modal-icon{width:56px;height:56px;border-radius:50%;margin:0 auto var(--sp-3);display:flex;align-items:center;justify-content:center;font-size:24px} .modal-icon.warn{background:var(--warning-bg);color:var(--warning)} .modal-icon.ok{background:var(--success-bg);color:var(--success)} .modal h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)} .modal p{color:var(--text-secondary);font-size:var(--fs-sm);margin-bottom:var(--sp-5)} /* Skeleton while price loads */ .skeleton{display:inline-block;background:linear-gradient(90deg,var(--gray-100),var(--gray-200),var(--gray-100));background-size:200% 100%;border-radius:var(--radius-xs);animation:sk 1.2s linear infinite;color:transparent} @keyframes sk{to{background-position-x:-200%}} /* ===================== СТРАНИЦА РАЗДЕЛА (из макета Category.html) ===================== */ body{padding-bottom:88px}@media(min-width:1024px){body{padding-bottom:0}} .hero{padding:var(--sp-1) 0 var(--sp-4)} .hero .h1{margin-bottom:var(--sp-2)} .hero-sub{color:var(--text-secondary);font-size:var(--fs-base);max-width:60ch;line-height:1.5} .lay{display:grid;gap:var(--sp-6)} .order-col{width:100%} @media(min-width:900px){ .order{padding:var(--sp-8) var(--sp-8) 0} .order-head{margin-bottom:var(--sp-6)} .order-head h2{font-size:var(--fs-2xl)} .order-body{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-8);align-items:start} .order-fields .field.span2{grid-column:1/-1} .order-total{margin:0;border-radius:var(--radius-lg);border:1.5px solid var(--green-200);position:sticky;top:16px;padding:var(--sp-6)} .order-total .price{font-size:40px} .order-foot{margin:var(--sp-6) calc(-1 * var(--sp-8)) 0;padding:var(--sp-4) var(--sp-8);border-top:1px solid var(--border-subtle);font-size:var(--fs-sm);color:var(--text-muted);display:flex;gap:var(--sp-5);flex-wrap:wrap} .select-trigger{min-height:60px}.select-trigger .sv{font-size:var(--fs-lg)}.select-trigger .opt-price{font-size:var(--fs-lg)} .input{min-height:52px;font-size:var(--fs-md)}.qty{grid-template-columns:52px 1fr 52px}.qty .qty-btn{height:52px} } .order-foot{display:none}@media(min-width:900px){.order-foot{display:flex}} @media(min-width:1100px){.order-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-6)}} .qty .input{min-width:72px} /* Informative select */ .select-trigger{min-height:56px;padding:8px 44px 8px var(--sp-4);gap:var(--sp-3);background:var(--surface-card);border-width:1.5px} .select-trigger .sv{flex:1;min-width:0;font-size:var(--fs-md);font-weight:var(--fw-semibold);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .select-trigger .opt-price{font-size:var(--fs-md)} .select-trigger .opt-price small{font-size:var(--fs-xs);color:var(--text-muted);font-weight:var(--fw-regular)} .sel-meta{display:flex;flex-wrap:wrap;gap:4px var(--sp-3);font-size:var(--fs-sm);color:var(--text-muted)} .sel-meta span{display:inline-flex;align-items:center;gap:6px} .sel-meta i{color:var(--green-600);font-size:12px;width:14px;text-align:center} .sel-meta b{color:var(--text-secondary);font-weight:var(--fw-semibold)} .select-menu{max-height:min(70vh,520px);padding:6px;border-color:var(--green-200);box-shadow:0 16px 48px rgba(22,63,31,.18)} .opt{display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"chk name price" "chk meta meta";gap:3px var(--sp-3);align-items:center;min-height:56px;padding:10px 12px;border-radius:var(--radius-md)} .opt+.opt{margin-top:2px} .opt:hover{background:var(--green-50)} .opt.is-selected{background:var(--green-100)} .opt .chk{grid-area:chk;width:20px;height:20px;border-radius:50%;border:2px solid var(--gray-300);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:9px;align-self:start;margin-top:1px} .opt.is-selected .chk{background:var(--green-500);border-color:var(--green-500)} .opt.is-selected .opt-name::before{content:none} .opt-name{grid-area:name;font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:1.3;overflow-wrap:anywhere} .opt-name .badge{margin-left:6px;vertical-align:middle;font-size:10px;padding:1px 7px;border-radius:999px} .opt-price{grid-area:price;align-self:start;font-size:var(--fs-base)} .opt-meta{grid-area:meta;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.4;display:block} .opt-meta b{font-weight:var(--fw-semibold);color:var(--text-secondary)} .opt-meta em{font-style:normal;color:var(--text-secondary)} .opt-meta .sep{margin:0 5px;color:var(--gray-300)} @media(max-width:767px){.select-menu{left:calc(-1 * (var(--wrap-pad) + var(--sp-4)) + 8px);right:calc(-1 * (var(--wrap-pad) + var(--sp-4)) + 8px);max-height:min(74vh,620px)}.opt{padding:9px 10px;gap:2px 10px;min-height:56px}.opt-name{font-size:var(--fs-base);font-weight:var(--fw-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opt-name .badge{font-size:9px;padding:1px 6px;margin-left:5px;vertical-align:1px}.opt-price{font-size:var(--fs-sm)}.opt-price small{display:none}.opt-meta{font-size:var(--fs-xs);line-height:1.35}.opt-meta .m-start .w{display:none}.opt-meta em{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opt-meta br{display:none}} .cta-sticky{border-top:1.5px solid var(--green-200)} .cta-sticky .sum{line-height:1.15;min-width:0} .cta-sticky .sum b{display:block;font-size:22px;font-weight:var(--fw-bold);letter-spacing:-.01em;white-space:nowrap} .cta-sticky .sum span{display:block;font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px} .sec-alt{background:var(--surface-card)} .seo-wrap{display:grid;gap:var(--sp-6)} @media(min-width:1024px){.seo-wrap{grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-12);align-items:start}.seo-aside{position:sticky;top:16px}} .seo-aside .card{padding:var(--sp-5);border-radius:var(--radius-lg);box-shadow:none;border:1.5px solid var(--green-200);background:var(--green-50)} .seo-aside h3{font-size:var(--fs-md);font-weight:var(--fw-bold);margin-bottom:var(--sp-3)} .seo-aside ol{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:var(--fs-sm);color:var(--text-secondary)} .seo-aside li{display:flex;gap:10px;align-items:flex-start} .seo-aside li b{width:22px;height:22px;border-radius:7px;background:var(--surface-card);color:var(--green-700);font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:var(--fw-bold)} .seo-aside .btn{width:100%;margin-top:var(--sp-4)} /* ===================== живой шаблон: связка с JS движка ===================== Старый виджет списка услуг (строит script.js из