to muted — restore solid body paragraphs */ .main-content p, .search-section p, .results-section p, .tools-content-section p, .tools-faqs-section p, .homepageColumnsMain p, .homeFaqsRow p, .faq-content p, .contact-form-card p { color: var(--ink) !important; } .main-content p.text-muted, .main-content .text-muted, p.small.text-muted, .small.text-muted { color: var(--muted) !important; } /* Placeholders readable */ .form-control::placeholder, .search-input::placeholder, textarea::placeholder { color: var(--muted) !important; opacity: 0.85 !important; } /* Secondary surfaces used on tools */ .bg-light, .bg-body-tertiary, .bg-body-secondary { background-color: var(--paper-2) !important; color: var(--ink) !important; } .card, .card-body { background-color: var(--card-bg) !important; color: var(--ink) !important; } /* ---------- WHOIS / RDAP (main complaint) ---------- */ .rdap-card, .result-content-inner.rdap-card { background: var(--card-bg) !important; border: 3px solid var(--ink) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-hard) !important; color: var(--ink) !important; padding: 1.15rem 1.1rem !important; } .rdap-domain-name { color: var(--ink) !important; font-family: var(--font-mono) !important; font-weight: 800 !important; } .rdap-info-block, .rdap-ns-item { background: var(--paper-2) !important; border: 2px solid var(--line-soft) !important; border-radius: var(--radius) !important; color: var(--ink) !important; } .rdap-info-label, .rdap-section-title { color: var(--ink) !important; font-weight: 800 !important; opacity: 0.72 !important; } .rdap-info-value { color: var(--ink) !important; font-weight: 600 !important; opacity: 1 !important; } .rdap-expiry .rdap-info-value { color: var(--danger) !important; } .rdap-gdpr-notice { background: var(--paper-2) !important; border: 2px dashed var(--ink) !important; color: var(--ink) !important; font-style: normal !important; opacity: 1 !important; } .whois-info-title { color: var(--ink) !important; } /* Blue gradient header → ink/orange stamp */ body .whois-result-main-title, .whois-result-main-title { background: var(--ink) !important; color: var(--accent-hot) !important; border: 2px solid var(--ink) !important; border-radius: var(--radius) !important; } body .whois-result-main-title .whois-info-title, body .whois-result-main-title .left-title-area, body .whois-result-main-title span, body .whois-result-main-title i { color: var(--accent-hot) !important; } .whois-heading-separator { border-bottom: 2px solid var(--ink) !important; opacity: 0.25; } .whoisText, pre.whoisText, .raw-whois-output { background: #121212 !important; color: #f4f1ea !important; border: 2px solid var(--ink) !important; border-radius: var(--radius) !important; } .whois-tab-nav .nav-link { background: var(--paper-2) !important; color: var(--ink) !important; border: 2px solid var(--line-soft) !important; } .whois-tab-nav .nav-link.active, .whois-tab-nav .nav-link:hover { background: var(--accent-hot) !important; color: #121212 !important; border-color: var(--ink) !important; } /* TLD check block on whois */ .tld-check-block { background: var(--card-bg) !important; border: 3px solid var(--ink) !important; box-shadow: var(--shadow-hard) !important; color: var(--ink) !important; } .tld-check-header { color: var(--ink) !important; border-bottom: 2px solid var(--line-soft) !important; } .tld-check-card { background: var(--paper-2) !important; border: 2px solid var(--ink) !important; color: var(--ink) !important; } .tld-check-name, .tld-check-price { color: var(--ink) !important; } /* ---------- DNS / tool cards ---------- */ .dns-card-item, .dns-entry-row, .dns-results-wrapper, .blocklist-results-area .card, .ports-results-area .card, .enhanced-result-row { color: var(--ink) !important; } .dns-card-item-header, .dns-card-title, .dns-badge-pill { color: var(--ink) !important; } .dns-nav-tab { background: var(--paper-2) !important; color: var(--ink) !important; border-color: var(--ink) !important; } .dns-nav-tab.active, .dns-nav-tab:hover { background: var(--accent-hot) !important; color: #121212 !important; } /* Tables */ .table, .table td, .table th, .table > :not(caption) > * > * { background-color: var(--card-bg) !important; color: var(--ink) !important; border-color: var(--line-soft) !important; } .table-light, .table thead th { background-color: var(--paper-2) !important; color: var(--ink) !important; } /* Tools sections that used var(--secondary-bg) (often undefined → grey mess) */ .tools-content-section, .tools-faqs-section, section[style*="secondary-bg"] { background-color: var(--card-bg) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; } /* FAQ / features */ .homepageColumnsMain, .homeFaqsRow, .faq-item, .accordion-item, .accordion-button, .accordion-body { background: var(--card-bg) !important; color: var(--ink) !important; } .accordion-button:not(.collapsed) { background: var(--paper-2) !important; color: var(--ink) !important; } .homepageColumnsMain-title, .faq-main-title, .homefaq-subtitle { color: var(--ink) !important; } /* Filter chips inactive state (was text-secondary on bg-light) */ .btn-group .btn.text-secondary, .btn-group .btn:not(.active):not(.bg-white):not(.bg-success):not(.bg-danger):not(.bg-primary) { color: var(--ink) !important; opacity: 0.85; } /* Badge secondary subtle */ .badge.bg-secondary-subtle, .text-bg-secondary { background: var(--paper-2) !important; color: var(--ink) !important; border: 1px solid var(--line-soft); } /* Contact / generator cards */ .contact-form-card, .contact-static-item, .generator-section .card { background: var(--card-bg) !important; color: var(--ink) !important; } /* ---------- DARK-specific hard fixes (extra.css slate leftovers) ---------- */ html.dark .rdap-card, html.dark .result-content-inner.rdap-card { background: #1a1a1a !important; border-color: #f4f1ea !important; color: #f4f1ea !important; } html.dark .rdap-info-block, html.dark .rdap-ns-item { background: #242424 !important; border-color: rgba(244, 241, 234, 0.22) !important; color: #f4f1ea !important; } html.dark .rdap-info-label, html.dark .rdap-section-title { color: #ff8c1a !important; opacity: 1 !important; } html.dark .rdap-info-value, html.dark .rdap-domain-name { color: #f4f1ea !important; } html.dark .rdap-gdpr-notice { background: #242424 !important; border-color: #cfc7b8 !important; color: #cfc7b8 !important; } html.dark .text-muted, html.dark .text-secondary, html.dark .text-body-secondary, html.dark .form-text, html.dark label:not(.btn), html.dark .tool-captcha-hint, html.dark .small, html.dark small { color: #cfc7b8 !important; } /* extra.css forced ALL li span to #94a3b8 — override */ html.dark li span, html.dark .main-content span:not(.badge):not(.btn):not(.rdap-protocol-badge):not(.rdap-status-badge):not(.partner-promo__cta):not(.site-ad__label) { color: inherit; } html.dark .rdap-info-value, html.dark .result-domain-text, html.dark .domain-name { color: #f4f1ea !important; } html.dark .dns-card-item, html.dark .dns-entry-row, html.dark .dns-results-wrapper, html.dark .card, html.dark .card-body, html.dark .table, html.dark .table td, html.dark .table th { background-color: #1a1a1a !important; color: #f4f1ea !important; border-color: rgba(244, 241, 234, 0.16) !important; } html.dark .dns-nav-tab { background: #242424 !important; color: #cfc7b8 !important; border-color: #f4f1ea !important; } html.dark .dns-nav-tab.active, html.dark .dns-nav-tab:hover { background: #ff8c1a !important; color: #121212 !important; } html.dark .tld-check-block, html.dark .tld-check-card { background: #1a1a1a !important; border-color: #f4f1ea !important; color: #f4f1ea !important; } html.dark .tld-check-name, html.dark .tld-check-price, html.dark .tld-check-header { color: #f4f1ea !important; } html.dark .bg-light, html.dark .bg-white, html.dark .bg-body-tertiary { background-color: #1a1a1a !important; color: #f4f1ea !important; } /* Light: kill leftover blue-tinted RDAP that can wash out on paper */ html:not(.dark) .rdap-info-block, html:not(.dark) .rdap-ns-item { background: #ebe6db !important; border-color: rgba(18, 18, 18, 0.18) !important; } html:not(.dark) .rdap-info-label, html:not(.dark) .rdap-section-title { color: #121212 !important; opacity: 0.7 !important; } html:not(.dark) .rdap-info-value, html:not(.dark) .rdap-domain-name { color: #121212 !important; } html:not(.dark) .rdap-protocol-badge { background: #121212 !important; color: #ff8c1a !important; } /* Captcha hint under tools */ .tool-captcha-hint, .smart-captcha + .tool-captcha-hint, div.tool-captcha-hint { color: var(--muted) !important; font-weight: 700 !important; } /* Recent search / lists */ .recent-search-link { background: var(--card-bg) !important; color: var(--ink) !important; border-color: var(--ink) !important; } .recent-search-link:hover { background: var(--paper-2) !important; color: var(--ink) !important; } /* Ensure tool page titles always solid */ .main-content > header h4, .main-content > header h1.tool-page-title, .main-content h4.d-none.d-xl-block, .main-content h4.d-xl-block { color: var(--ink) !important; } /* Unpriced zones: still available to tick, quieter by default */ .tld-teleport-item.tld-no-price label { opacity: 0.55; } .tld-teleport-item.tld-no-price input:checked + label, .tld-teleport-item.tld-no-price:has(input:checked) label { opacity: 1; } .tld-na-mark { color: var(--muted); font-weight: 700; margin-left: 0.15rem; } /* ============================================================ TLD ZONE PANEL — production layout (desktop + mobile) Fix: presets were flex-row siblings of chips → under sidebar. ============================================================ */ /* Outer shell: always column, full width of main column */ .domain-options { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0.75rem 0 1rem !important; padding: 0 !important; overflow: visible !important; position: relative; z-index: 20; box-sizing: border-box; } .tld-zone-panel { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; background: var(--card-bg); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); padding: 0.65rem 0.75rem 0.7rem; overflow: visible; } /* Preset row — full width above chips */ .tld-presets { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.45rem; width: 100%; min-width: 0; margin: 0 !important; padding: 0 0 0.55rem; border-bottom: 2px solid var(--line-soft); box-sizing: border-box; } .tld-presets__label { flex: 0 0 auto; font-family: var(--font-display); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .tld-presets__scroll { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; flex: 1 1 auto; min-width: 0; } .tld-preset-btn { appearance: none; -webkit-appearance: none; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; padding: 0.32rem 0.6rem; border-radius: 2px; cursor: pointer; line-height: 1.15; box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; flex: 0 0 auto; transition: transform 0.1s var(--ease), box-shadow 0.1s var(--ease), background 0.1s; } .tld-preset-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); background: var(--paper-2); } .tld-preset-btn.is-active { background: var(--accent-hot); color: #121212; border-color: #121212; box-shadow: 2px 2px 0 #121212; } .tld-preset-btn--ghost { font-weight: 600; opacity: 0.9; } html.dark .tld-preset-btn { box-shadow: 2px 2px 0 #f4f1ea; background: var(--card-bg); } html.dark .tld-preset-btn.is-active { background: var(--accent-hot); color: #121212; border-color: #f4f1ea; box-shadow: 2px 2px 0 #f4f1ea; } /* Chip strip row */ .domain-options-inner-main { display: flex !important; flex-direction: row !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; position: relative !important; z-index: 2; overflow: visible !important; box-sizing: border-box; } #teleporter.domain-options-inner, ul.domain-options-inner#teleporter, .domain-options-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.35rem !important; list-style: none !important; margin: 0 !important; padding: 0.15rem 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; max-width: 100%; } .domain-options-inner::-webkit-scrollbar { height: 6px; } .domain-options-inner::-webkit-scrollbar-thumb { background: var(--accent-hot); border: 1px solid var(--ink); } .tld-teleport-item { display: inline-flex !important; flex-shrink: 0 !important; margin: 0 !important; } .receiver-more-btn { position: relative !important; flex-shrink: 0 !important; margin-left: 0.4rem !important; padding-left: 0.45rem !important; border-left: 2px solid var(--line-soft) !important; z-index: 30 !important; } /* «Ещё» dropdown must paint above ads */ .receiver-domains { z-index: 50 !important; max-width: min(92vw, 420px) !important; max-height: min(50vh, 320px) !important; overflow-y: auto !important; overflow-x: hidden !important; border: 3px solid var(--ink) !important; background: var(--card-bg) !important; box-shadow: var(--shadow-hard) !important; } /* Ads always below zone panel stacking context */ .site-ad, .site-ad--header, .site-ad--middle, .site-ad--footer { position: relative; z-index: 1 !important; clear: both; overflow: hidden; max-width: 100%; } .site-ad__frame { max-width: 100% !important; box-sizing: border-box; overflow: hidden; } .site-ad img, .site-ad .partner-promo { max-width: 100% !important; } /* Main content never bleeds under fixed sidebar */ @media (min-width: 1200px) { .main-content.container { max-width: 100% !important; width: 100% !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; box-sizing: border-box; } .search-section, #searchSection, .domain-options, .tld-zone-panel { max-width: 100% !important; min-width: 0 !important; } } /* ---- Mobile / tablet ---- */ @media (max-width: 991.98px) { .tld-zone-panel { padding: 0.55rem 0.55rem 0.6rem; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); } .tld-presets { flex-wrap: wrap; padding-bottom: 0.45rem; } .tld-presets__label { width: 100%; margin-bottom: 0.15rem; } .tld-presets__scroll { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.15rem; scrollbar-width: none; } .tld-presets__scroll::-webkit-scrollbar { display: none; } .tld-preset-btn { font-size: 0.7rem; padding: 0.3rem 0.55rem; box-shadow: 1px 1px 0 var(--ink); } .domain-options-inner { gap: 0.28rem !important; } .tld-teleport-item .extension-item label, .extension-item label { font-size: 0.72rem !important; padding: 0.28rem 0.45rem !important; } .receiver-domains { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; } .main-content.container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* Hide-taken + search row: don't overflow */ .search-section .input-group { flex-wrap: wrap; } .hide-taken-inline-box { order: 5; width: 100%; margin-top: 0.35rem; justify-content: flex-end; } } @media (max-width: 575.98px) { .tld-zone-panel { padding: 0.45rem; } .partner-promo { grid-template-columns: 1fr !important; } .partner-promo__cta { grid-column: 1 !important; grid-row: auto !important; width: 100%; text-align: center; } .affiliate-switcher-bar { flex-wrap: wrap !important; } } /* Unpriced zones quieter */ .tld-teleport-item.tld-no-price label { opacity: 0.55; } .tld-teleport-item.tld-no-price:has(input:checked) label { opacity: 1; } .tld-na-mark { color: var(--muted); font-weight: 700; margin-left: 0.15rem; } /* Mobile presets: clean 3-col grid under label (no side column under sidebar) */ @media (max-width: 991.98px) { .tld-presets { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 0.4rem !important; } .tld-presets__label { display: block !important; width: 100% !important; margin: 0 0 0.1rem !important; writing-mode: horizontal-tb !important; } .tld-presets__scroll { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.35rem !important; width: 100% !important; overflow: visible !important; flex-wrap: unset !important; } .tld-preset-btn { width: 100% !important; text-align: center !important; padding: 0.4rem 0.25rem !important; font-size: 0.68rem !important; box-shadow: 1px 1px 0 var(--ink) !important; } } @media (max-width: 380px) { .tld-presets__scroll { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Affiliate switcher mobile wrap */ @media (max-width: 575.98px) { .affiliate-switcher-container--inline .affiliate-switcher-bar, .affiliate-switcher-bar { flex-wrap: wrap !important; gap: 0.4rem !important; justify-content: flex-start !important; pointer-events: auto !important; } .affiliate-switcher-label { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--line-soft); padding-bottom: 0.35rem; margin-bottom: 0.15rem; } .affiliate-switcher-container--inline .affiliate-switcher-option, .affiliate-switcher-option { min-height: 44px !important; padding: 0.55rem 0.85rem !important; pointer-events: auto !important; touch-action: manipulation; } .affiliate-switcher-options { pointer-events: auto !important; width: 100%; } } /* Prevent page horizontal scroll from hard shadows / chips. Do NOT clip .search-section / .domain-options — that hid «Ещё» dropdown. Do NOT clip .main-content overflow so header language dropdown is not cut. */ html, body { overflow-x: hidden; max-width: 100vw; } .main-wrapper { max-width: 100%; overflow-x: clip; } .main-content { max-width: 100%; overflow-x: visible; } .main-content > header { position: relative; z-index: 30; /* above search (20), below offcanvas/cookie */ overflow: visible; } .search-section, #searchSection, .domain-options, .domain-options-inner-main { max-width: 100%; overflow: visible !important; } /* Final overflow hardening: only the chip strip scrolls; outer stays visible for «Ещё» */ .tld-zone-panel { margin-bottom: 1.35rem !important; isolation: isolate; overflow: visible !important; } .domain-options-inner-main { overflow: visible !important; padding-bottom: 0.15rem !important; } #teleporter.domain-options-inner, .domain-options-inner { overflow-x: auto !important; overflow-y: hidden !important; padding: 4px 2px 8px !important; margin-right: 0.25rem !important; } .tld-zone-panel .extension-item { box-shadow: 1px 1px 0 var(--ink) !important; } .tld-zone-panel .extension-item:hover { transform: none !important; /* no escape on hover */ } .site-ad--header { margin-top: 0.25rem !important; z-index: 1 !important; position: relative !important; overflow: hidden !important; } /* Kill any absolute-positioned teleporter leftovers painting over ads */ .domain-options .tld-teleport-item { position: relative !important; top: auto !important; left: auto !important; transform: none !important; } /* CRITICAL: «Ещё» panel must be fully hidden when closed — was painting chips over ads */ .receiver-domains:not(.show), ul.receiver-domains:not(.show), #receiver.receiver-domains:not(.show) { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .receiver-domains.show, ul.receiver-domains.show, #receiver.receiver-domains.show { display: grid !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; height: auto !important; max-height: min(320px, 50vh) !important; overflow-y: auto !important; padding: 12px !important; z-index: 4000 !important; } /* Receiver closed = not in layout at all */ #receiver.receiver-domains[hidden], #receiver.receiver-domains:not(.show) { display: none !important; position: absolute !important; left: -9999px !important; top: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* ============================================================ Feature cards: only lift if clickable; no fake “button” hover ============================================================ */ .homepageColumnsMain { transition: box-shadow 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease) !important; cursor: default; text-decoration: none !important; color: inherit !important; } /* Non-links: no scale (was misleading) */ div.homepageColumnsMain:hover, .homepageColumnsMain--static:hover { transform: none !important; box-shadow: var(--shadow-hard) !important; } /* Real links */ a.homepageColumnsMain, a.homepageColumnsMain-link { display: flex !important; flex-direction: column !important; align-items: center !important; cursor: pointer !important; text-decoration: none !important; color: inherit !important; } a.homepageColumnsMain:hover, a.homepageColumnsMain-link:hover { transform: translateY(-4px) !important; box-shadow: 5px 5px 0 var(--ink) !important; border-color: var(--ink) !important; color: inherit !important; text-decoration: none !important; } a.homepageColumnsMain:focus-visible, a.homepageColumnsMain-link:focus-visible { outline: 3px solid var(--accent-hot); outline-offset: 2px; } a.homepageColumnsMain .homepageColumnsMain-title, a.homepageColumnsMain-link .homepageColumnsMain-title, a.homepageColumnsMain h2, a.homepageColumnsMain-link h2 { color: var(--ink) !important; } a.homepageColumnsMain p, a.homepageColumnsMain-link p { color: var(--muted) !important; } /* FAQ rows: only slight shadow, no scale unless link */ .homeFaqsRow:hover { transform: none !important; } a.homeFaqsRow:hover { transform: translateY(-2px) !important; } /* Kill legacy scale from style.css */ .homepageColumnsMain:hover { /* overridden above for div vs a */ } /* ============================================================ FAQ accordion — everywhere (homeFaqsRow) Click to open/close; no fake “scale on hover” without action ============================================================ */ details.homeFaqsRow, .homeFaqsRow--accordion { display: block !important; cursor: pointer; list-style: none; background: var(--card-bg) !important; border: 3px solid var(--ink) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-hard) !important; padding: 0 !important; margin-bottom: 1rem !important; transition: box-shadow 0.15s var(--ease), border-color 0.15s var(--ease) !important; transform: none !important; overflow: hidden; } details.homeFaqsRow:hover, .homeFaqsRow--accordion:hover { transform: none !important; box-shadow: 5px 5px 0 var(--ink) !important; } details.homeFaqsRow[open], .homeFaqsRow--accordion[open] { border-color: var(--ink) !important; box-shadow: 5px 5px 0 var(--accent-hot) !important; } /* Kill legacy scale from style.css */ .homeFaqsRow:hover { transform: none !important; } .homeFaqsRow__summary, details.homeFaqsRow > summary.homefaq-subtitle { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem; cursor: pointer !important; list-style: none !important; font-family: var(--font-display) !important; font-size: 0.95rem !important; font-weight: 800 !important; color: var(--ink) !important; text-align: left !important; margin: 0 !important; padding: 1rem 1.1rem !important; user-select: none; } .homeFaqsRow__summary::-webkit-details-marker, details.homeFaqsRow summary::-webkit-details-marker { display: none; } .homeFaqsRow__summary::after { content: '+'; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 1.15rem; font-weight: 800; line-height: 1; border: 2px solid var(--ink); background: var(--accent-hot); color: #121212; border-radius: 2px; } details.homeFaqsRow[open] > .homeFaqsRow__summary::after, .homeFaqsRow--accordion[open] > .homeFaqsRow__summary::after { content: '−'; background: var(--ink); color: var(--accent-hot); } .homeFaqsRow__body { padding: 0 1.1rem 1.1rem !important; text-align: left !important; cursor: default; } .homeFaqsRow__body p, details.homeFaqsRow .homeFaqsRow__body p, .homeFaqsRow--accordion p { margin: 0 !important; color: var(--muted) !important; font-size: 0.95rem !important; line-height: 1.5 !important; text-align: left !important; } .faq-main-title { font-family: var(--font-display) !important; color: var(--ink) !important; margin-bottom: 1.25rem !important; } @media (max-width: 575.98px) { .homeFaqsRow__summary, details.homeFaqsRow > summary.homefaq-subtitle { font-size: 0.88rem !important; padding: 0.85rem 0.9rem !important; } .homeFaqsRow__body { padding: 0 0.9rem 0.9rem !important; } } /* FAQ click hardening — + must always open/close */ details.homeFaqsRow, details.homeFaqsRow * { pointer-events: auto !important; } details.homeFaqsRow > summary.homefaq-subtitle, .homeFaqsRow__summary { position: relative !important; z-index: 2 !important; min-height: 48px !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .homeFaqsRow__summary::after { pointer-events: none !important; /* click goes to summary */ } .homeFaqsRow__body a { color: var(--ink) !important; font-weight: 700 !important; border-bottom: 2px solid var(--accent-hot, #ff8c1a); text-decoration: none !important; } .homeFaqsRow__body a:hover { background: var(--accent-hot, #ff8c1a); } .pd-faq .faq-main-title { font-family: var(--font-display, system-ui, sans-serif) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--ink) !important; } /* Prefer h2 for SEO; keep visual size */ h2.faq-main-title { font-size: clamp(1.35rem, 3vw, 1.75rem) !important; } .pd-faq-section { margin: 1.5rem 0 2rem; } /* Light: muted answers still readable */ html:not(.dark) .homeFaqsRow__body p { color: #2a2a2a !important; } html.dark .homeFaqsRow__body p { color: var(--muted, #cfc7b8) !important; } /* ============================================================ MOBILE MENU — full tools, always readable ============================================================ */ .tools-nav-heading { font-family: var(--font-display); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 0 0 0.75rem; padding: 0 0.25rem; } #mobileMenu, .offcanvas.sidebar-width#mobileMenu { width: min(340px, 92vw) !important; max-width: 92vw !important; background: var(--sidebar-bg) !important; color: var(--ink) !important; border-right: 3px solid var(--line) !important; z-index: 1080 !important; } #mobileMenu .offcanvas-header { background: var(--sidebar-bg) !important; border-bottom: 2px solid var(--line-soft) !important; padding: 0.85rem 1rem !important; } #mobileMenu .offcanvas-body { background: var(--sidebar-bg) !important; padding: 1rem !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex !important; flex-direction: column !important; } #mobileMenu .tools-nav, #mobileMenu .tools-nav--mobile, #mobileMenu nav.sidebar { display: flex !important; flex-direction: column !important; width: 100% !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; gap: 0.35rem !important; visibility: visible !important; opacity: 1 !important; min-height: 200px; } #mobileMenu .nav-link, #mobileMenu .tools-nav-link, #mobileMenu .offcanvas-body .nav-link { display: flex !important; align-items: center !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 0.7rem 0.85rem !important; border: 2px solid var(--line-soft) !important; border-radius: 4px !important; background: transparent !important; color: var(--ink) !important; font-size: 0.92rem !important; font-weight: 700 !important; line-height: 1.25 !important; text-decoration: none !important; visibility: visible !important; opacity: 1 !important; white-space: normal !important; } #mobileMenu .nav-link:hover, #mobileMenu .tools-nav-link:hover { background: rgba(255, 140, 26, 0.18) !important; border-color: #ea7600 !important; color: #121212 !important; } html.dark #mobileMenu .nav-link:hover, html.dark #mobileMenu .tools-nav-link:hover { background: rgba(255, 140, 26, 0.15) !important; border-color: rgba(255, 140, 26, 0.5) !important; color: #ff8c1a !important; } #mobileMenu .nav-link.nav-active, #mobileMenu .nav-link.active, #mobileMenu .tools-nav-link.nav-active { background: #ff8c1a !important; color: #121212 !important; border-color: #121212 !important; font-weight: 800 !important; } #mobileMenu .nav-link i { color: inherit !important; opacity: 1 !important; width: 1.25em; text-align: center; } #mobileMenu .btn-close { filter: none !important; opacity: 0.9 !important; box-shadow: none !important; } html.dark #mobileMenu .btn-close { filter: invert(1) grayscale(1) !important; } .mobile-menu-footer { border-top: 2px solid rgba(255, 140, 26, 0.25); display: flex; flex-direction: column; gap: 0.35rem; } .mobile-menu-footer__link { display: flex; align-items: center; color: var(--ink) !important; font-weight: 700; text-decoration: none !important; padding: 0.55rem 0.35rem; font-size: 0.9rem; } .mobile-menu-footer__link:hover { color: #121212 !important; background: rgba(255, 140, 26, 0.18); } html.dark .mobile-menu-footer__link { color: #ff8c1a !important; } html.dark .mobile-menu-footer__link:hover { color: #ffb347 !important; background: transparent; } /* Burger button always visible & tappable on mobile */ .mobile-menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--ink) !important; background: var(--accent-hot) !important; color: #121212 !important; border-radius: 2px !important; box-shadow: 2px 2px 0 var(--ink); font-size: 1.1rem; } @media (min-width: 1200px) { .mobile-menu-toggle { display: none !important; } } /* Desktop tools heading */ aside.sidebar .tools-nav-heading { color: var(--ink); opacity: 0.72; } html.dark aside.sidebar .tools-nav-heading { color: #ff8c1a; opacity: 0.9; } /* feature-cards-click */ a.homepageColumnsMain-link { height: 100%; min-height: 100%; } #whoisDomainInput, #domain_search, .search-section { scroll-margin-top: 88px; } .footer-nav-title{font-family:var(--font-display);font-weight:800;font-size:0.95rem;margin:0 0 1rem;color:inherit;} /* Prefer content fonts immediately for LCP text */ /* font-display only valid in @font-face (see fa-subset.css) */ /* Mobile: show ALL ad spots (header Beget, middle Selectel, footer FirstVDS). Earlier PageSpeed pass hid header/middle — user wants all three back. */ @media (max-width: 767.98px) { .site-ad--header, .site-ad--middle, .site-ad--footer, .header-ad, .middle-ad, .footer-ad { display: flex !important; visibility: visible !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: center !important; } .site-ad__frame, .site-ad__inner { width: 100% !important; max-width: 100% !important; } .site-ad img, .site-ad .ad-banner-img, .partner-promo { max-width: 100% !important; width: 100% !important; height: auto !important; } .partner-promo__text { font-size: 0.85rem !important; max-height: none !important; overflow: visible !important; } /* FirstVDS injects fixed 600×90 — scale to phone width */ .site-ad #fvds-partner-banner, #fvds-partner-banner { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 70px; } } /* Cookie bar offset on ALL viewports + iOS safe area */ html.has-cookie-banner body { padding-bottom: 5.5rem !important; } #cookie-banner.cookie-banner { padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important; } /* ============================================================ MOBILE UX HARDENING — taps work, no scroll "runaway" (20260810y) Do NOT force position:relative on .offcanvas / buttons — that broke Bootstrap offcanvas and stacking. Grain is killed above. ============================================================ */ @media (max-width: 767.98px), (hover: none) and (pointer: coarse) { html, body { overflow-x: hidden !important; max-width: 100% !important; overscroll-behavior-x: none; } /* Menu toggle must stay tappable above header chrome */ .mobile-menu-toggle { position: relative !important; z-index: 1060 !important; min-width: 48px !important; min-height: 48px !important; flex-shrink: 0; touch-action: manipulation; pointer-events: auto !important; } /* Offcanvas: keep Bootstrap fixed, high z-index */ #mobileMenu.offcanvas, .offcanvas#mobileMenu { position: fixed !important; z-index: 1080 !important; pointer-events: auto !important; } .offcanvas-backdrop { position: fixed !important; z-index: 1075 !important; } /* No hover "lift" under a finger — it jumps the hit target */ .partner-promo:hover, .btn-search:hover, .btn:hover, .homepageColumnsMain:hover, a.homepageColumnsMain-link:hover, .tld-zone-panel .extension-item:hover, a:hover, button:hover { transform: none !important; } /* Touch targets + no double-tap zoom delay */ .btn, button, .btn-search, a.btn, .nav-show-more-btn, .tld-preset-btn, .extension-item label, #accept-cookies, .cookie-banner__btn { min-height: 44px !important; touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 140, 26, 0.35); pointer-events: auto !important; } .btn-search, button.btn-search { min-height: 52px !important; } .search-section .search-input, input.form-control.search-input, input.form-control { min-height: 48px !important; font-size: 16px !important; /* prevent iOS zoom on focus */ pointer-events: auto !important; } /* Don't clip search / TLD chips */ .main-content, .search-section, #searchSection, .domain-options, .domain-options-inner-main { overflow: visible !important; } #teleporter.domain-options-inner, ul.domain-options-inner#teleporter { overflow-x: auto !important; overflow-y: hidden !important; } /* Search UI always above ads */ .search-section, #searchSection, .tld-zone-panel, .domain-options { position: relative; z-index: 20; } .site-ad, .site-ad--header, .site-ad--middle { position: relative; z-index: 1 !important; } /* Cookie: fixed bottom bar, never full-screen blocker when hidden */ #cookie-banner.cookie-banner, .cookie-banner { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; z-index: 10050 !important; max-height: 38vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } #cookie-banner.cookie-banner--visible { display: flex !important; pointer-events: auto !important; visibility: visible !important; } #cookie-banner .cookie-banner__btn, #accept-cookies { min-height: 48px !important; min-width: 7rem !important; pointer-events: auto !important; } html.has-cookie-banner body, html.has-cookie-banner .main-content { padding-bottom: 5.5rem !important; } #cookie-banner[hidden], #cookie-banner:not(.cookie-banner--visible) { display: none !important; pointer-events: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; } /* Closed "Ещё" panel must never intercept taps */ .receiver-domains:not(.show), #receiver.receiver-domains:not(.show) { display: none !important; pointer-events: none !important; visibility: hidden !important; } } /* Real hover only on fine pointers (desktop mice) */ @media (hover: hover) and (pointer: fine) { .partner-promo:hover { transform: translate(-2px, -2px); } .btn-search:hover { transform: translate(-1px, -1px); } } /* ============================================================ 404 — artillery Lebedev (redesign-skill) Hard stamp, paper, orange bar. No blue SaaS mascot. ============================================================ */ .pd-404 { max-width: 720px; margin: 0.5rem auto 2rem; border: 3px solid var(--ink, #121212); background: var(--card-bg, #fffdf8); box-shadow: var(--shadow-hard, 4px 4px 0 #121212); border-radius: var(--radius-lg, 4px); overflow: hidden; } .pd-404__stamp { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; padding: 0.7rem 1rem; background: var(--accent-hot, #ff8c1a); border-bottom: 3px solid var(--ink, #121212); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #121212; } .pd-404__stamp-sep { opacity: 0.55; } .pd-404__stamp-code { letter-spacing: 0.14em; } .pd-404__stamp-en { opacity: 0.75; } .pd-404__body { padding: 1.5rem 1.25rem 1.75rem; text-align: center; } .pd-404__giant { font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(4.5rem, 18vw, 7.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; margin: 0.15rem auto 0.85rem; display: inline-block; padding: 0.15rem 0.55rem 0.25rem; color: #121212; background: var(--accent-hot, #ff8c1a); border: 3px solid var(--ink, #121212); box-shadow: 4px 4px 0 var(--ink, #121212); text-wrap: balance; } html.dark .pd-404__giant { color: #121212; border-color: var(--ink, #f4f1ea); box-shadow: 4px 4px 0 var(--ink, #f4f1ea); } .pd-404__copy { max-width: 28rem; margin: 0 auto 1.35rem; } .pd-404__title { font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: clamp(1.35rem, 4vw, 1.85rem); letter-spacing: -0.02em; margin: 0 0 0.65rem; color: var(--ink, #121212); text-wrap: balance; } .pd-404__text { margin: 0; font-size: 1rem; line-height: 1.55; font-weight: 500; color: var(--muted, #3a3630); text-wrap: pretty; } html.dark .pd-404__text { color: var(--muted, #cfc7b8); } .pd-404__diagram { margin: 0 auto 1.5rem; max-width: 34rem; border: 2px solid var(--ink, #121212); box-shadow: 3px 3px 0 var(--ink, #121212); background: var(--paper, #f4f1ea); overflow: hidden; } .pd-404__diagram svg { display: block; width: 100%; height: auto; max-width: 100%; } /* Force diagram ink for dark mode (SVG hardcodes light fills — wrap ok on paper strip) */ html.dark .pd-404__diagram { border-color: var(--ink, #f4f1ea); box-shadow: 3px 3px 0 var(--ink, #f4f1ea); } .pd-404__tools { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: stretch; margin: 0 0 1.15rem; } .pd-404__btn-main { min-height: 48px !important; padding: 0.65rem 1.15rem !important; font-size: 0.82rem !important; } .pd-404__chip { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.55rem 0.95rem; border: 2px solid var(--ink, #121212); background: var(--card-bg, #fffdf8); color: var(--ink, #121212) !important; font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none !important; box-shadow: 2px 2px 0 var(--ink, #121212); border-radius: var(--radius, 2px); transition: transform 0.12s var(--ease, ease), box-shadow 0.12s var(--ease, ease), background 0.12s ease; } .pd-404__chip:hover { background: var(--accent-hot, #ff8c1a); color: #121212 !important; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink, #121212); } .pd-404__chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink, #121212); } html.dark .pd-404__chip { border-color: var(--ink, #f4f1ea); box-shadow: 2px 2px 0 var(--ink, #f4f1ea); } html.dark .pd-404__chip:hover { box-shadow: 3px 3px 0 var(--ink, #f4f1ea); background: var(--accent-hot, #ff8c1a); color: #121212 !important; } .pd-404__back { margin: 0; font-size: 0.9rem; font-weight: 600; } .pd-404__back a { color: var(--ink, #121212); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--accent-hot, #ff8c1a); } .pd-404__back a:hover { background: var(--accent-hot, #ff8c1a); } .pd-404__meta { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; color: var(--muted, #3a3630); letter-spacing: 0.02em; } html.dark .pd-404 { border-color: var(--ink, #f4f1ea); box-shadow: var(--shadow-hard, 4px 4px 0 #f4f1ea); } html.dark .pd-404__stamp { border-bottom-color: var(--ink, #f4f1ea); color: #121212; /* stamp stays orange + black text */ } @media (max-width: 575.98px) { .pd-404__body { padding: 1.15rem 0.9rem 1.35rem; } .pd-404__chip, .pd-404__btn-main { flex: 1 1 calc(50% - 0.5rem); min-height: 44px; } .pd-404__btn-main { flex: 1 1 100%; } .pd-404__stamp { font-size: 0.65rem; gap: 0.3rem 0.45rem; } } /* 404 page header (matches tools h4) */ .pd-404-header-code { display: inline-block; margin-inline-end: 0.45rem; padding: 0.05rem 0.4rem; background: var(--accent-hot, #ff8c1a); border: 2px solid var(--ink, #121212); box-shadow: 2px 2px 0 var(--ink, #121212); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.75em; font-weight: 800; color: #121212; vertical-align: middle; } /* Tailwind pagination SVGs without Tailwind CSS = half-screen arrows */ svg.w-5, svg.h-5, svg.w-5.h-5 { width: 1.15rem !important; height: 1.15rem !important; max-width: 1.25rem !important; max-height: 1.25rem !important; } nav[aria-label="Pagination Navigation"] svg { width: 1.15rem !important; height: 1.15rem !important; } /* Brand pack 2026-08 — desktop sidebar: room for elephant + wordmark */ .sidebar .logo .brand-logo, .brand-lockup--sidebar .brand-logo, .sidebar .logo img { max-width: min(100%, 220px) !important; max-height: 96px !important; width: auto !important; height: auto !important; object-fit: contain !important; } .brand-lockup--mobile .brand-logo, .brand-lockup--footer .brand-logo { max-height: 52px !important; width: auto !important; object-fit: contain !important; } header .headLogo img, .brand-logo--mobile-top { max-height: 36px !important; max-width: min(112px, 34vw) !important; width: auto !important; object-fit: contain !important; } /* Tool page H1 (was h4) — SEO + same visual weight as old header title */ .tool-page-title { margin: 0 !important; font-size: 1.35rem !important; font-weight: 800 !important; line-height: 1.25 !important; color: var(--text-dark, #121212) !important; letter-spacing: -0.02em; } .tool-page-title__full i { opacity: 0.9; } /* Subtle tool breadcrumb (Home > Tool) — a11y + SEO */ .tool-breadcrumb { color: var(--text-muted, #6c757d); font-size: 0.8rem; line-height: 1.4; } .tool-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; } .tool-breadcrumb__item { display: inline-flex; align-items: center; } .tool-breadcrumb__item + .tool-breadcrumb__item::before { content: "/"; margin: 0 0.4rem; opacity: 0.55; speak: never; } .tool-breadcrumb a { color: inherit; text-decoration: none; opacity: 0.85; } .tool-breadcrumb a:hover, .tool-breadcrumb a:focus-visible { color: #121212; background: rgba(255, 140, 26, 0.18); opacity: 1; text-decoration: underline; text-decoration-color: #ea7600; } html.dark .tool-breadcrumb a:hover, html.dark .tool-breadcrumb a:focus-visible { color: #ff8c1a; background: transparent; } .tool-breadcrumb__item--current { color: var(--text-dark, #343a40); opacity: 0.75; font-weight: 500; } /* ============================================================ MOBILE TOP BAR (<1200px) — ONE ROW: [ 🔍 Поиск домена ] .............. [ RU ] [ theme ] [ ☰ ] Tool H1 kept for SEO (sr-only on mobile); elephant only in drawer. ============================================================ */ .main-content > header.d-flex { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 0.4rem !important; } @media (max-width: 1199.98px) { .main-content > header.d-flex { flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 0.35rem !important; margin-bottom: 0.75rem !important; } /* Tool H1: SEO only on mobile — not in the chrome row */ .main-content > header .tool-page-title { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* LEFT: glass + «Поиск домена» */ .main-content > header .logo, .main-content > header .brand-lockup--topbar { order: 1 !important; display: block !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; line-height: 1.15 !important; } .main-content > header .mobile-brand, .main-content > header .headLogo.mobile-brand { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; max-width: 100%; min-width: 0; text-decoration: none !important; color: var(--ink, #121212) !important; line-height: 1.15 !important; } html.dark .main-content > header .mobile-brand { color: #f4f1ea !important; } .mobile-brand__icon { flex-shrink: 0 !important; font-size: 1.05rem !important; line-height: 1 !important; opacity: 0.92; width: 1.15rem; text-align: center; } .mobile-brand__text { display: inline-block !important; font-family: inherit !important; font-weight: 700 !important; font-size: clamp(0.95rem, 4vw, 1.1rem) !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: min(52vw, 12.5rem); text-transform: none !important; } /* RIGHT: lang + theme + burger */ .main-content > header .header-controls, .main-content > header .header-left-btn { order: 2 !important; flex: 0 0 auto !important; margin-inline-start: auto !important; width: auto !important; max-width: none !important; gap: 0.3rem !important; } /* Schema: no currency on mobile bar */ .header-controls .header-control--currency { display: none !important; } .header-chip { min-height: 44px !important; min-width: 44px !important; padding: 0 0.5rem !important; } .header-chip--theme { width: 44px !important; min-width: 44px !important; } .header-chip .fa-globe { font-size: 0.75rem; opacity: 0.85; } .header-chip__name { display: none !important; } .mobile-menu-toggle, .header-controls .mobile-menu-toggle { order: 99 !important; min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; margin: 0 !important; flex-shrink: 0 !important; pointer-events: auto !important; touch-action: manipulation; } } /* Legacy class still referenced in some CSS */ .header-left-btn, .header-controls { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.35rem !important; margin-inline-start: auto !important; width: auto !important; max-width: none !important; min-width: 0; flex: 0 0 auto; } .header-control, .header-chip { flex-shrink: 0; } .header-chip { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.3rem !important; min-height: 44px !important; min-width: 44px !important; padding: 0 0.55rem !important; border: 2px solid var(--ink, #121212) !important; border-radius: 2px !important; background: var(--card-bg, #fff) !important; color: var(--ink, #121212) !important; font-weight: 700 !important; font-size: 0.78rem !important; box-shadow: 2px 2px 0 var(--ink, #121212); cursor: pointer; line-height: 1; } html.dark .header-chip { border-color: #f4f1ea !important; box-shadow: 2px 2px 0 #f4f1ea; color: #f4f1ea !important; background: #1a1a1a !important; } .header-chip__code { font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .header-chip--theme { width: 40px; padding: 0 !important; } .header-chip--theme .theme-cycle-icon { font-size: 1rem; } /* Hamburger always last (right edge) */ .mobile-menu-toggle.header-control--menu, .header-controls .mobile-menu-toggle { order: 99; margin-inline-start: 0.15rem; flex-shrink: 0 !important; } /* Gray mono: dark-on-transparent source. Invert on dark surfaces. */ .brand-logo--mono { filter: none; } html.dark .brand-logo--mono:not(.brand-logo--mono-on-dark) { filter: invert(1); } /* Always-dark surfaces (sidebar, footer, offcanvas dark header) */ .brand-logo--mono-on-dark, .sidebar .brand-logo--mono, .brand-lockup--sidebar .brand-logo--mono, .brand-lockup--mobile .brand-logo--mono, .modern-footer .brand-logo--mono { filter: invert(1) !important; } /* Offcanvas often light body — if header is light, undo: keep invert only on dark lockups */ .brand-lockup--mobile { background: #0a0a0a !important; border: 2px solid var(--accent-hot, #ff8c1a) !important; padding: 0.4rem 0.55rem !important; } /* (mobile top-bar sizing lives in the ONE ROW block above) */ /* ============================================================ Dual brand logos: on-light (dark purple) / on-dark (light lilac) ============================================================ */ .brand-logo-pair { display: inline-grid; place-items: center; line-height: 0; vertical-align: middle; } .brand-logo-pair > img { grid-area: 1 / 1; max-width: 100%; height: auto; filter: none !important; } /* Default (light surfaces): show dark-purple logo */ .brand-logo-pair .brand-logo--on-light { display: block !important; } .brand-logo-pair .brand-logo--on-dark { display: none !important; } .brand-logo-pair .brand-logo--on-accent { display: none !important; } /* Site dark theme: light logo on dark UI chrome */ html.dark .brand-logo-pair .brand-logo--on-light { display: none !important; } html.dark .brand-logo-pair .brand-logo--on-dark { display: block !important; } html.dark .brand-logo-pair .brand-logo--on-accent { display: none !important; } /* Orange D3 plate: ink elephant + black wordmark, never lilac-on-ginger */ html:not(.dark) .brand-lockup--sidebar .brand-logo--on-light, html:not(.dark) .brand-lockup--mobile .brand-logo--on-light, html:not(.dark) .brand-logo-pair--on-accent .brand-logo--on-light { display: none !important; } html:not(.dark) .brand-lockup--sidebar .brand-logo--on-accent, html:not(.dark) .brand-lockup--mobile .brand-logo--on-accent, html:not(.dark) .brand-logo-pair--on-accent .brand-logo--on-accent { display: block !important; } /* Footer stays ink — force light logo. Sidebar/offcanvas follow html.dark. */ .brand-logo-pair--force-dark .brand-logo--on-light, .modern-footer .brand-logo-pair .brand-logo--on-light, .footerLogo .brand-logo-pair .brand-logo--on-light { display: none !important; } .brand-logo-pair--force-dark .brand-logo--on-dark, .modern-footer .brand-logo-pair .brand-logo--on-dark, .footerLogo .brand-logo-pair .brand-logo--on-dark { display: block !important; } /* Mobile header logo size inside pair */ .brand-logo-pair--mobile { flex-shrink: 0; width: 36px; height: 36px; } .brand-logo-pair--mobile > img.brand-logo--mobile-top { width: 36px !important; max-width: 36px !important; max-height: 36px !important; height: auto !important; object-fit: contain !important; } /* Sidebar / offcanvas pair sizing */ .brand-logo-pair--sidebar > img { max-height: 96px !important; max-width: min(100%, 220px) !important; width: auto !important; } .brand-logo-pair--offcanvas > img { max-height: 56px !important; max-width: 180px !important; } .brand-logo-pair--footer > img { max-height: 56px !important; max-width: 200px !important; } /* ---- theme-fixes.css ---- */ /* ============================================================ ПоискДомена — theme & mobile readability fixes Light + Dark + mobile viewports ============================================================ */ :root { --main-bg: #f4f1ea; --sidebar-bg: #f4f1ea; --text-dark: #121212; --text-muted: #3a3630; --border-color: rgba(18, 18, 18, 0.14); --card-bg: #fffdf8; --primary-color: #ea7600; --primary-contrast: #121212; --link-color: #121212; --surface-elevated: #fffdf8; --danger: #d61f26; --success: #1a7a2c; --warning: #e67e22; --input-bg: #fffdf8; --input-border: #121212; --focus-ring: rgba(234, 118, 0, 0.45); } html.dark, html.dark body { /* Keep Lebedev D3 orange + charcoal — do not reintroduce navy/sky. */ --main-bg: #121212; --sidebar-bg: #0a0a0a; --text-dark: #f4f1ea; --text-muted: #cfc7b8; --border-color: rgba(244, 241, 234, 0.22); --card-bg: #1a1a1a; --primary-color: #ff8c1a; --primary-contrast: #121212; --link-color: #ffb347; --surface-elevated: #222222; --input-bg: #1a1a1a; --input-border: #cfc7b8; --focus-ring: rgba(255, 140, 26, 0.45); color-scheme: dark; } /* ---- Base ---- */ body { background-color: var(--main-bg) !important; color: var(--text-dark) !important; } .main-wrapper, .main-content, .content-area, .page-content-wrap { background-color: var(--main-bg) !important; color: var(--text-dark); min-width: 0; /* flex overflow fix */ } /* Headings readable in both themes */ h1, h2, h3, h4, h5, h6, .faq-main-title, .homefaq-subtitle, .homepageColumnsMain-title, .whois-info-title, .domain-name, .page-title { color: var(--text-dark) !important; } /* Paragraphs: body text solid, not washed-out cyan */ p, .homepageColumnsMain p, .homeFaqsRow p, .faq-content p { color: var(--text-muted) !important; } html.dark p, html.dark .homepageColumnsMain p, html.dark .homeFaqsRow p { color: #e6e0d4 !important; } html.dark p.pd-404__giant { color: #121212 !important; } /* Bootstrap utility overrides */ html.dark .text-dark { color: var(--text-dark) !important; } html.dark .text-muted { color: var(--text-muted) !important; } html.dark .text-black { color: #f8fafc !important; } html.dark .bg-white, html.dark .bg-light, html.dark .bg-body, html.dark .bg-body-tertiary { background-color: var(--card-bg) !important; color: var(--text-dark) !important; } html.dark .border, html.dark .border-top, html.dark .border-bottom, html.dark .border-start, html.dark .border-end { border-color: var(--border-color) !important; } /* ---- Sidebar / tools: follow День/Авто/Ночь (html.dark) ---- */ aside.sidebar, .sidebar.d-xl-block { background-color: var(--paper, #f4f1ea) !important; background-image: none !important; width: min(280px, 100%); border-right: 3px solid var(--line, #121212) !important; color: var(--ink, #121212) !important; } html.dark aside.sidebar, html.dark .sidebar.d-xl-block { background-color: #0a0a0a !important; border-right-color: #f4f1ea !important; color: #f4f1ea !important; } .sidebar .nav { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 4px; width: 100%; } .sidebar .nav-link, .sidebar.nav .nav-link, .offcanvas-body .nav-link { display: flex !important; align-items: center; width: 100% !important; max-width: 100%; margin: 0 0 4px 0 !important; padding: 0.65rem 0.75rem !important; border-radius: 2px !important; color: var(--ink, #121212) !important; background: transparent !important; background-image: none !important; border: 2px solid transparent !important; white-space: normal; line-height: 1.3; font-size: 0.88rem; position: static !important; float: none !important; columns: auto !important; } .sidebar .nav-link:hover, .offcanvas-body .nav-link:hover { background: rgba(255, 140, 26, 0.18) !important; border-color: #ea7600 !important; color: #121212 !important; } .sidebar .nav-link.nav-active, .sidebar .nav-link.active, .offcanvas-body .nav-link.nav-active, .offcanvas-body .nav-link.active { background: #ff8c1a !important; color: #121212 !important; border-color: #121212 !important; font-weight: 800; } html.dark .sidebar .nav-link { background: transparent !important; color: #f4f1ea !important; } html.dark .sidebar .nav-link.nav-active, html.dark .sidebar .nav-link.active { background: #ff8c1a !important; color: #121212 !important; } /* Offcanvas mobile menu — same theme as desktop sidebar */ .offcanvas.sidebar-width, #mobileMenu { width: min(320px, 92vw) !important; background: var(--paper, #f4f1ea) !important; color: var(--ink, #121212); } html.dark #mobileMenu, html.dark .offcanvas.sidebar-width { background: #0a0a0a !important; color: #f4f1ea; } #mobileMenu .offcanvas-header { border-bottom: 1px solid var(--line-soft, rgba(18,18,18,0.14)); } #mobileMenu .btn-close { filter: none; opacity: 0.85; } html.dark #mobileMenu .btn-close { filter: invert(1) grayscale(1); } #mobileMenu .offcanvas-body .sidebar { width: 100% !important; background: transparent !important; border: 0 !important; padding: 0 !important; } #mobileMenu .nav-link { color: var(--ink, #121212) !important; } html.dark #mobileMenu .nav-link { color: #f4f1ea !important; } /* ---- Cards / feature columns / FAQ ---- */ .homepageColumnsMain, .homeFaqsRow, .card, .contact-form-card, .dns-results-wrapper, .rdap-card, .result-list li, .blocklist-results-area { background-color: var(--card-bg) !important; border: 1px solid var(--border-color) !important; border-radius: 14px; color: var(--text-dark) !important; } html.dark .homepageColumnsMain, html.dark .homeFaqsRow { background-color: var(--card-bg) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .homepageColumnsArea, .homepageFaqsAreaMain, .mainPadding { background: transparent !important; } /* White illustration strip under search */ .search-section + *, .results-placeholder, .illustration-wrap, .home-hero-art { background: var(--card-bg) !important; border-radius: 16px; } /* Generic white boxes leftover from light theme */ html.dark .bg-white.rounded, html.dark .rounded.bg-white, html.dark .shadow-sm.bg-white { background: var(--card-bg) !important; } /* ---- Forms ---- */ .form-control, .form-select, .search-input, .contactTextarea, input[type="text"], input[type="email"], input[type="search"], textarea { background-color: var(--input-bg) !important; color: var(--text-dark) !important; border: 1px solid var(--input-border) !important; } .form-control:focus, .form-select:focus, .search-input:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; } .form-control::placeholder, .search-input::placeholder { color: var(--text-muted) !important; opacity: 0.85; } .input-group-text { background: var(--surface-elevated) !important; color: var(--text-dark) !important; border-color: var(--input-border) !important; } .form-check-label, .form-check-input { color: var(--text-dark); } html.dark .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } html.dark .form-check-input:checked { background-color: #ff8c1a; border-color: #f4f1ea; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } /* Search bar group */ .search-section .input-group, .generator-section .input-group { background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; border-radius: 12px; overflow: hidden; } /* ---- Header / theme switcher ---- */ .main-content header, header.page-header { background: transparent; color: var(--text-dark); } .header-left-btn, .header-controls { flex-wrap: wrap; gap: 0.5rem; max-width: 100%; } .theme-mode-switch { background: var(--card-bg) !important; border: 1px solid var(--border-color) !important; flex-shrink: 0; } .theme-mode-btn { color: var(--text-muted) !important; min-width: 36px; min-height: 28px; } .theme-mode-btn.is-active { color: #0b1220 !important; } html.dark .theme-mode-btn.is-active[data-theme-opt="dark"] { color: #f8fafc !important; } .header-select, .header-dropdown-btn, .header-dropdown-menu, .header-dropdown-menu-wrapper { background: var(--card-bg) !important; color: var(--text-dark) !important; border-color: var(--border-color) !important; } .header-dropdown-menu .dropdown-item { color: var(--text-dark) !important; } html.dark .header-dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.06) !important; } /* ---- TLD chips ---- */ .domain-options-inner-main { background: var(--card-bg) !important; border: 1px solid var(--border-color) !important; border-radius: 12px; max-width: 100%; /* IMPORTANT: do not use overflow:auto/hidden here — it clips the "Ещё" dropdown */ overflow: visible !important; position: relative; } .receiver-domains { background: var(--card-bg) !important; border: 1px solid var(--border-color) !important; border-radius: 12px; max-width: min(360px, 92vw); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .domain-ckbx, .tld-teleport-item { max-width: 100%; } /* Row can clip only the teleporter chips, NOT the absolute dropdown */ .domain-options { max-width: 100%; overflow: visible !important; } /* ---- Buttons ---- */ .btn-primary, .btn-action { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #0b1220 !important; font-weight: 600; } .btn-whois, .btn-outline-primary { border-color: var(--ink, #121212) !important; color: var(--ink, #121212) !important; } html.dark .btn-outline-secondary { color: var(--text-dark) !important; border-color: var(--border-color) !important; } /* Status colors */ .available, .text-success, .status-available { color: #4ade80 !important; } html:not(.dark) .available, html:not(.dark) .text-success { color: #15803d !important; } .not-available, .text-danger, .status-taken { color: #f87171 !important; } html:not(.dark) .not-available, html:not(.dark) .text-danger { color: #b91c1c !important; } /* ---- Footer ---- */ footer, .site-footer, .footer-area { background: var(--card-bg) !important; color: var(--text-muted) !important; border-top: 1px solid var(--border-color); } footer a { color: var(--link-color) !important; } /* ---- Cookie banner ---- */ .cookie-banner, #cookie-banner { background: var(--card-bg) !important; color: var(--text-dark) !important; border-top: 1px solid var(--border-color) !important; } /* ---- Tables ---- */ html.dark .table { --bs-table-bg: var(--card-bg); --bs-table-color: var(--text-dark); --bs-table-border-color: var(--border-color); --bs-table-striped-bg: #0f172a; color: var(--text-dark) !important; } /* ---- Badges / alerts ---- */ html.dark .badge.bg-light { background: #334155 !important; color: #f8fafc !important; } html.dark .alert-light, html.dark .alert-secondary { background: var(--card-bg) !important; color: var(--text-dark) !important; border-color: var(--border-color) !important; } /* ---- Links ---- */ a { color: var(--link-color); } html.dark a:not(.nav-link):not(.btn):not(.partner-promo__cta):not(.btn-outline-dark):not(.btn-outline-primary):not(.btn-blog-search) { color: var(--link-color) !important; } /* ---- Logo filter on dark (remove blue stroke on white logos) ---- */ html.dark .headLogo img, html.dark header .logo img { filter: none; } /* ---- Mobile polish ---- */ @media (max-width: 1199.98px) { /* Never show broken desktop sidebar below xl */ aside.sidebar.d-xl-block { /* bootstrap handles hide; reinforce */ } .main-wrapper { flex-direction: column; width: 100%; overflow-x: hidden; } .main-content { width: 100% !important; max-width: 100vw; padding-left: 12px !important; padding-right: 12px !important; } /* Logo left, controls (lang/theme/burger) RIGHT — never full-width wrap */ .header-left-btn, .header-controls { width: auto !important; max-width: none !important; flex: 0 0 auto !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 0.35rem !important; min-width: 0; margin-inline-start: auto !important; } .theme-mode-switch .theme-mode-label { display: none !important; /* icons only on small screens */ } .theme-mode-btn { padding: 0 10px !important; } .mobile-menu-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-dark); } /* Search button full width on narrow phones */ .search-section .btn-primary, .search-section button[type="submit"] { min-height: 44px; } .domain-options-inner-main { padding: 8px !important; } /* TLD chips scroll horizontally instead of wrapping page */ .domain-options ul, .tld-list, #teleporter, #receiver { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; max-width: 100%; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .tld-teleport-item { flex: 0 0 auto; } } @media (max-width: 575.98px) { h1, .page-title { font-size: 1.35rem !important; } .homepageColumnsMain { margin-bottom: 12px; padding: 16px !important; } .faq-main-title { font-size: 1.35rem !important; } /* Language + theme row */ .main-content header { gap: 8px; } } /* Prevent horizontal scroll page-wide */ html, body { max-width: 100%; overflow-x: hidden; } .main-wrapper, .main-content, .search-section, .results-section { max-width: 100%; } /* Dropdown z-index above sticky bits */ .header-dropdown-menu-wrapper, .dropdown-menu { z-index: 1080 !important; } /* Whois raw text */ html.dark .whoisText, html.dark pre.whois, html.dark .raw-whois { background: #0f172a !important; color: #e2e8f0 !important; border-color: var(--border-color) !important; } /* Results list */ html.dark .result-list, html.dark .results-section { color: var(--text-dark); } /* --- Dark: kill leftover pure-white surfaces --- */ html.dark .homepageFaqsAreaMain, html.dark .homepageFaqsArea, html.dark .homepageColumnsArea, html.dark .mainPadding { background: transparent !important; background-color: transparent !important; } html.dark .homeFaqsRow, html.dark .homepageColumnsMain { background-color: var(--card-bg) !important; color: var(--text-dark) !important; } /* Any nested Bootstrap white utility inside content */ html.dark .main-content .card, html.dark .main-content .card-body, html.dark .main-content .list-group-item, html.dark .main-content .modal-content, html.dark .main-content .dropdown-menu, html.dark .main-content .accordion-item, html.dark .main-content .accordion-button, html.dark .main-content .accordion-body { background-color: var(--card-bg) !important; color: var(--text-dark) !important; border-color: var(--border-color) !important; } /* FAQ / feature titles on dark cards */ html.dark .faq-main-title, html.dark .homefaq-subtitle, html.dark .homepageColumnsMain-title, html.dark .homepageColumnsMain, html.dark .homeFaqsRow, html.dark .homeFaqsRow * { /* keep readable */ } html.dark .faq-main-title, html.dark .homefaq-subtitle, html.dark .homepageColumnsMain-title { color: #f8fafc !important; } html.dark .homeFaqsRow p, html.dark .homepageColumnsMain p { color: #cbd5e1 !important; } /* Large white rounded panel under tools (illustration) */ html.dark .main-content > div > div.bg-white, html.dark .results-section, html.dark .search-results-wrap, html.dark div[style*="background:#fff"], html.dark div[style*="background: #fff"], html.dark div[style*="background-color:#fff"], html.dark div[style*="background-color: #fff"] { background-color: var(--card-bg) !important; } /* Soften pure white boxes that use no utility class */ html.dark .main-content .rounded-4, html.dark .main-content .rounded-3, html.dark .main-content .shadow, html.dark .main-content .shadow-sm { background-color: var(--card-bg); } /* Ensure h1/h2 never sit as light-on-light */ html.dark h1, html.dark h2 { color: #f8fafc !important; } /* Light mode: restore solid body text (was too cyan/muted) */ html:not(.dark) p { color: #334155 !important; } html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) .faq-main-title, html:not(.dark) .homepageColumnsMain-title, html:not(.dark) .homefaq-subtitle { color: #0f172a !important; } /* Sidebar active: orange stamp on ink, not sky-blue */ aside.sidebar .nav-link.nav-active, aside.sidebar .nav-link.active, #mobileMenu .nav-link.nav-active, #mobileMenu .nav-link.active { color: #121212 !important; background: #ff8c1a !important; border-color: #121212 !important; } /* Nuclear dark fix for FAQ/features containers that still compute white */ html.dark .homepageFaqsAreaMain, html.dark .homepageFaqsAreaMain *, html.dark .homepageFaqsArea { /* don't force * color - only containers */ } html.dark .homepageFaqsAreaMain, html.dark .homepageFaqsArea { background-color: var(--main-bg) !important; background: var(--main-bg) !important; } html.dark .homeFaqsRow { background-color: #151e2e !important; background: #151e2e !important; border: 1px solid #1f2a3d !important; padding: 1rem 1.1rem !important; margin-bottom: 0.75rem !important; border-radius: 12px !important; } html.dark .homeFaqsRow h1, html.dark .homeFaqsRow h2, html.dark .homeFaqsRow .homefaq-subtitle, html.dark .faq-main-title { color: #f8fafc !important; background: transparent !important; } /* Result white boxes */ html.dark .bg-white, html.dark div.bg-white, html.dark .resultAvailorNotMain .bg-white, html.dark .resultAvailorNotMain .p-4 { background-color: #151e2e !important; background: #151e2e !important; color: #f1f5f9 !important; border-color: #1f2a3d !important; } /* Search page content column sometimes gets white from bootstrap */ html.dark .main-content .col-xl-12, html.dark .main-content .col-lg-12, html.dark .main-content section { background-color: transparent !important; } /* Hidden until Alpine marks .is-visible AFTER a finished search with a free name. Never paint «Купить» on first load (x-cloak alone is not enough — JS is defer). */ .mobile-sticky-buy, .mobile-sticky-buy[x-cloak], [x-cloak]{ display:none !important; } .mobile-sticky-buy.is-visible:not([hidden]):not([x-cloak]){ display:block !important; position:fixed; left:0;right:0;bottom:0; z-index:10040; padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px)); background:rgba(255,253,248,.98); border-top:2px solid #121212; box-shadow:0 -6px 20px rgba(0,0,0,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transform:translate3d(0,0,0); backface-visibility:hidden; } @media (min-width:768px){ .mobile-sticky-buy, .mobile-sticky-buy.is-visible, .mobile-sticky-buy.is-visible:not([hidden]):not([x-cloak]){ display:none !important; } } html.dark .mobile-sticky-buy.is-visible{ background:rgba(22,22,22,.98); border-top-color:#f4f1ea; } .mobile-sticky-buy__inner{ display:flex; align-items:center; gap:.65rem; max-width:720px; margin:0 auto; } .mobile-sticky-buy__meta{ flex:1 1 auto; min-width:0; max-width:calc(100% - 8.75rem); } .mobile-sticky-buy__label{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.65; line-height:1.2; margin-bottom:.1rem; } .mobile-sticky-buy__domain{ display:block; font-weight:800; font-size:.95rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:normal; overflow-wrap:normal; } .mobile-sticky-buy__sub{ display:flex; flex-wrap:nowrap; align-items:baseline; gap:.35rem .55rem; margin-top:.15rem; font-size:.78rem; line-height:1.3; opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mobile-sticky-buy__price{font-weight:700} .mobile-sticky-buy__extra{opacity:.75} .mobile-sticky-buy.is-visible:not([hidden]):not([x-cloak]){ max-height:7.75rem; } .mobile-sticky-buy__hint{ max-width:720px; margin:.3rem auto 0; font-size:.7rem; line-height:1.3; opacity:.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .mobile-sticky-buy__cta{ flex:0 0 auto !important; width:auto !important; max-width:46% !important; min-width:7.25rem !important; white-space:nowrap; min-height:48px; font-weight:800; padding-left:.85rem !important; padding-right:.85rem !important; } /* Reserve space only while sticky is open (class toggled by Alpine) */ @media (max-width:767.98px){ body.pd-sticky-buy-on{ padding-bottom:calc(7.25rem + env(safe-area-inset-bottom, 0px)) !important; } /* Result rows: full-width buy tap targets */ .enhanced-result-row .btn-buy-now{ min-height:44px; flex:1 1 auto; justify-content:center; } .enhanced-result-row > .d-flex{ width:100%; gap:.5rem !important; } /* Three registrars must all fit — no scroll that clips Beget/Sweb */ .affiliate-switcher-bar{ overflow:visible !important; } .affiliate-switcher-options{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; overflow:visible !important; gap:.45rem; padding:4px 2px; max-width:100%; } .affiliate-switcher-option{ flex:1 1 calc(33.33% - .45rem); min-width:5.75rem; max-width:100%; justify-content:center; box-sizing:border-box; } .affiliate-switcher-option.selecting, .affiliate-switcher-bar[aria-busy="true"] .affiliate-switcher-option{ opacity:.65; pointer-events:none; } } /* Do not disable every chip — that blocked the next registrar tap. */ .affiliate-switcher-option{ user-select:none; -webkit-user-select:none; touch-action:manipulation; } .affiliate-option-badge{display:none !important} .mobile-sticky-buy__reg{font-weight:600;opacity:.8} /* ---- Buy CTA: straight, readable, not clipped by card overflow ---- */ .domain-card{ overflow:visible !important; } .domain-card .success-header, .domain-card .unavailable-header{ overflow:hidden; } .btn-buy-now, a.btn-buy-now, .add-to-cart-btn.btn-buy-now, .domain-card .btn-buy-now, .enhanced-result-row .btn-buy-now, .mobile-sticky-buy__cta{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:.4rem !important; min-height:44px !important; min-width:8.25rem !important; padding:.55rem 1.05rem !important; margin:0 !important; font-size:.9rem !important; font-weight:800 !important; line-height:1.1 !important; letter-spacing:.02em !important; text-transform:none !important; white-space:nowrap !important; border:2px solid #121212 !important; border-radius:4px !important; box-shadow:none !important; transform:none !important; background:#ff8c1a !important; color:#121212 !important; text-decoration:none !important; } .btn-buy-now:hover, a.btn-buy-now:hover, .add-to-cart-btn.btn-buy-now:hover, .mobile-sticky-buy__cta:hover{ background:#ffb347 !important; color:#121212 !important; transform:none !important; box-shadow:none !important; filter:none !important; } .btn-buy-now__reg{ font-weight:700; opacity:.72; font-size:.78em; letter-spacing:0; } .domain-card .price{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; } .enhanced-result-row .result-domain-info{ display:flex !important; align-items:center; gap:.4rem; min-width:7.5rem !important; } .enhanced-result-row .result-domain-text{ flex:1 1 auto; min-width:4.5rem; } .enhanced-result-row .result-badge-available{ display:none !important; } .enhanced-result-row .btn-buy-now{ min-width:6.75rem !important; padding:.45rem .75rem !important; } @media (max-width:1199.98px){ .enhanced-result-row .btn-buy-now__reg{display:none} } @media (max-width:767.98px){ .domain-card .col-12 > .d-flex.flex-wrap{ flex-direction:column; align-items:stretch !important; width:100%; } .domain-card .btn-buy-now.add-to-cart-btn{ width:100% !important; min-width:0 !important; } .enhanced-result-row .btn-buy-now{ flex:1 1 auto; width:auto; min-width:6.5rem !important; } } /* Registrar chips: brand marks stay colored (not currentColor) */ .affiliate-option-icon svg.aff-mark{ width:18px !important; height:18px !important; fill:none !important; display:block; border-radius:4px; overflow:hidden; flex-shrink:0; } .affiliate-option-icon{ width:18px; height:18px; } /* Lede / related-blog links: text-muted fails WCAG on desktop */ .tool-seo-lede a, .blog-related-tools a, .blog-related a{ color:#121212 !important; text-decoration:underline; text-underline-offset:.15em; } .tool-seo-lede a:hover, .blog-related-tools a:hover, .blog-related a:hover{ color:#000 !important; } html.dark .tool-seo-lede a, html.dark .blog-related-tools a, html.dark .blog-related a{ color:#ffb347 !important; } /* Cookie banner open (not hidden): lift sticky so bars do not stack weirdly */ body:has(#cookie-banner:not([hidden])) .mobile-sticky-buy{ bottom:5.5rem; } #cookie-banner{z-index:10050} /* ============================================================ Sidebar MUST follow День / Авто / Ночь (html.dark). Last in the bundle so leftover ink-rail / SaaS-blue cannot win. ============================================================ */ html:not(.dark) aside.sidebar, html:not(.dark) aside.sidebar.d-xl-block, html:not(.dark) .sidebar.d-xl-block, html:not(.dark) #mobileMenu, html:not(.dark) .offcanvas.sidebar-width, html:not(.dark) #mobileMenu .offcanvas-header, html:not(.dark) #mobileMenu .offcanvas-body { background: #f4f1ea !important; background-color: #f4f1ea !important; background-image: none !important; color: #121212 !important; } html:not(.dark) aside.sidebar.d-xl-block { border-right: 3px solid #121212 !important; scrollbar-color: #ff8c1a #f4f1ea; } html:not(.dark) aside.sidebar.d-xl-block::-webkit-scrollbar-track { background: #f4f1ea; } html:not(.dark) aside.sidebar .nav-link, html:not(.dark) .sidebar .nav-link, html:not(.dark) #mobileMenu .nav-link, html:not(.dark) #mobileMenu .tools-nav-link, html:not(.dark) .offcanvas-body .nav-link { color: #121212 !important; background: transparent !important; background-image: none !important; } html:not(.dark) aside.sidebar .nav-link:hover, html:not(.dark) #mobileMenu .nav-link:hover, html:not(.dark) .offcanvas-body .nav-link:hover { background: rgba(234, 118, 0, 0.18) !important; border-color: rgba(18, 18, 18, 0.35) !important; color: #121212 !important; } html:not(.dark) aside.sidebar .tools-nav-heading, html:not(.dark) #mobileMenu .tools-nav-heading { color: #121212 !important; opacity: 0.72; } html:not(.dark) .brand-lockup--sidebar, html:not(.dark) .brand-lockup--mobile { background: #ea7600 !important; border-color: #121212 !important; box-shadow: 4px 4px 0 #121212 !important; } html:not(.dark) .mobile-menu-footer__link { color: #121212 !important; } html.dark aside.sidebar, html.dark aside.sidebar.d-xl-block, html.dark .sidebar.d-xl-block, html.dark #mobileMenu, html.dark .offcanvas.sidebar-width, html.dark #mobileMenu .offcanvas-header, html.dark #mobileMenu .offcanvas-body { background: #0a0a0a !important; background-color: #0a0a0a !important; background-image: none !important; color: #f4f1ea !important; } html.dark aside.sidebar.d-xl-block { border-right: 3px solid #f4f1ea !important; scrollbar-color: #ff8c1a #0a0a0a; } html.dark aside.sidebar.d-xl-block::-webkit-scrollbar-track { background: #0a0a0a; } html.dark aside.sidebar .nav-link, html.dark .sidebar .nav-link, html.dark #mobileMenu .nav-link, html.dark #mobileMenu .tools-nav-link, html.dark .offcanvas-body .nav-link { color: #f4f1ea !important; background: transparent !important; background-image: none !important; } html.dark aside.sidebar .nav-link:hover, html.dark #mobileMenu .nav-link:hover, html.dark .offcanvas-body .nav-link:hover { background: rgba(255, 140, 26, 0.12) !important; border-color: rgba(255, 140, 26, 0.35) !important; color: #ff8c1a !important; } html.dark aside.sidebar .tools-nav-heading, html.dark #mobileMenu .tools-nav-heading { color: #ff8c1a !important; opacity: 0.9; } html.dark .brand-lockup--sidebar, html.dark .brand-lockup--mobile { background: #0a0a0a !important; border-color: #ff8c1a !important; box-shadow: 4px 4px 0 #ff8c1a !important; } html.dark .mobile-menu-footer__link { color: #ff8c1a !important; } /* Active stamp stays orange in both themes (must beat html:not(.dark) .nav-link) */ html:not(.dark) aside.sidebar .nav-link.nav-active, html:not(.dark) aside.sidebar .nav-link.active, html:not(.dark) #mobileMenu .nav-link.nav-active, html:not(.dark) #mobileMenu .nav-link.active, html:not(.dark) #mobileMenu .tools-nav-link.nav-active, html:not(.dark) .offcanvas-body .nav-link.nav-active, html:not(.dark) .offcanvas-body .nav-link.active, html.dark aside.sidebar .nav-link.nav-active, html.dark aside.sidebar .nav-link.active, html.dark #mobileMenu .nav-link.nav-active, html.dark #mobileMenu .nav-link.active, html.dark #mobileMenu .tools-nav-link.nav-active, html.dark .offcanvas-body .nav-link.nav-active, html.dark .offcanvas-body .nav-link.active { background: #ff8c1a !important; color: #121212 !important; border-color: #121212 !important; } /* ============================================================ Dark contrast lock (WCAG AA). Last so leftover navy/sky lose. Ink on orange. Cream on charcoal. Never dark-on-dark. ============================================================ */ html.dark .btn-outline-dark, html.dark a.btn-outline-dark, html.dark .btn-outline-dark.border-2, html.dark a.btn.btn-outline-dark { color: #f4f1ea !important; background: transparent !important; border-color: #f4f1ea !important; box-shadow: none !important; } html.dark .btn-outline-dark:hover, html.dark a.btn-outline-dark:hover, html.dark .btn-outline-dark:focus-visible { color: #121212 !important; background: #ff8c1a !important; border-color: #ff8c1a !important; } html.dark .btn-outline-primary, html.dark a.btn-outline-primary, html.dark .tld-check-card .btn-outline-primary, html.dark .btn-whois { color: #121212 !important; background: #ff8c1a !important; border-color: #121212 !important; } html.dark .btn-outline-primary:hover, html.dark a.btn-outline-primary:hover, html.dark .btn-whois:hover { color: #121212 !important; background: #ffb347 !important; } html.dark .btn-primary, html.dark .btn-action, html.dark .btn-search, html.dark .btn-blog-search, html.dark .pd-404__btn-main { background-color: #ff8c1a !important; border-color: #f4f1ea !important; color: #121212 !important; } /* Orange chips / stamps: always ink, never muted cream */ html.dark .extension-item input:checked + label, html.dark .tld-teleport-item input:checked + label, html.dark .tld-teleport-item:has(input:checked) .extension-item label, html.dark .tld-teleport-item:has(input:checked) .form-check-label, html.dark .domain-ckbx:has(input:checked) .extension-item label, html.dark .domain-ckbx:has(input:checked) .form-check-label, html.dark .form-check:has(input:checked) > .form-check-label.mb-0 { color: #121212 !important; background-color: #ff8c1a !important; } html.dark .tld-preset-btn.active, html.dark .tld-preset-btn.is-active, html.dark .tld-zone-presets .btn.active { color: #121212 !important; } html.dark .tld-check-price, html.dark .tld-check-price.text-primary, html.dark .tld-check-card .tld-check-price { color: #121212 !important; } html.dark .tld-check-name, html.dark .tld-check-name.lh-1, html.dark .tld-check-card .tld-check-name { color: #f4f1ea !important; } html.dark .tld-check-card .text-danger, html.dark .result-badge-taken { color: #fca5a5 !important; } /* Partner CTA sits on orange — ink, not sky */ html.dark .partner-promo__cta, html.dark a.partner-promo__cta, html.dark .partner-promo--beget .partner-promo__cta, html.dark .partner-promo--selectel .partner-promo__cta { color: #121212 !important; text-decoration: none !important; } html.dark .partner-promo__text { color: #e6e0d4 !important; } /* Success strip is orange */ html.dark .success-header, html.dark .success-header h4, html.dark .success-header .text-white, html.dark .domain-card .success-header, html.dark .domain-card .success-header * { color: #121212 !important; } /* 404 stamp */ html.dark .pd-404__giant, html.dark p.pd-404__giant, html.dark .pd-404-header-code { color: #121212 !important; } /* Counters / primary text: orange on charcoal, not orange on orange */ html.dark .fw-bold.text-primary, html.dark span.text-primary, html.dark i.text-primary { color: #ff8c1a !important; background: transparent !important; } html.dark .form-control::placeholder, html.dark .search-input::placeholder, html.dark textarea::placeholder, html.dark .blog-search-input::placeholder { color: #cfc7b8 !important; opacity: 1; } html.dark .text-muted, html.dark .text-secondary, html.dark .text-body-secondary, html.dark .form-text, html.dark small, html.dark .small { color: #cfc7b8 !important; } html.dark .page-link { color: #f4f1ea !important; background: #1a1a1a !important; border-color: rgba(244, 241, 234, 0.28) !important; opacity: 1; } html.dark .page-item.disabled .page-link { color: #cfc7b8 !important; opacity: 0.7; } html.dark .page-item.active .page-link { color: #121212 !important; background: #ff8c1a !important; border-color: #ff8c1a !important; } /* Cookie / dropdown leftovers */ html.dark #cookie-banner .btn-outline-dark, html.dark .cookie-banner .btn-outline-dark { color: #f4f1ea !important; border-color: #f4f1ea !important; } html.dark #cookie-banner .btn-primary, html.dark .cookie-banner .btn-primary { color: #121212 !important; background: #ff8c1a !important; } /* ============================================================ Mobile: orange is a D3 rail / one CTA — not a chick. First viewport used to stack burger + stamp + search + cookie as four yolk slabs. Keep ONE filled punch (search). ============================================================ */ /* 1199: hamburger layout (sidebar gone). That's the chick stack. */ @media (max-width: 1199.98px) { header.d-flex, header.page-header, .main-content > header { border-bottom: 4px solid #ea7600 !important; } button.mobile-menu-toggle, .mobile-menu-toggle.d-xl-none, .mobile-menu-toggle { background: var(--paper, #f4f1ea) !important; color: #121212 !important; border: 2px solid #121212 !important; box-shadow: 2px 2px 0 #121212 !important; } html.dark button.mobile-menu-toggle, html.dark .mobile-menu-toggle { background: #121212 !important; color: #f4f1ea !important; border-color: #f4f1ea !important; box-shadow: 2px 2px 0 #ea7600 !important; } .search-section::before { background: #121212 !important; color: #f4f1ea !important; border-color: #121212 !important; box-shadow: 2px 2px 0 #ea7600 !important; } html.dark .search-section::before { background: #121212 !important; color: #f4f1ea !important; border-color: #ea7600 !important; box-shadow: 2px 2px 0 #ea7600 !important; } .btn-search, button.btn-search, .search-section .btn-primary, .search-section button[type="submit"] { background: #ea7600 !important; color: #121212 !important; border-color: #121212 !important; } } /* Orange plate + ink mark (black wordmark). Lilac-on-ginger is gone. */ html:not(.dark) .brand-lockup--sidebar, html:not(.dark) .brand-lockup--mobile { background: #ea7600 !important; } html:not(.dark) .brand-lockup--sidebar .brand-logo--on-light, html:not(.dark) .brand-lockup--mobile .brand-logo--on-light, html:not(.dark) .brand-logo-pair--on-accent .brand-logo--on-light { display: none !important; } html:not(.dark) .brand-lockup--sidebar .brand-logo--on-dark, html:not(.dark) .brand-lockup--mobile .brand-logo--on-dark, html:not(.dark) .brand-logo-pair--on-accent .brand-logo--on-dark { display: none !important; } html:not(.dark) .brand-lockup--sidebar .brand-logo--on-accent, html:not(.dark) .brand-lockup--mobile .brand-logo--on-accent, html:not(.dark) .brand-logo-pair--on-accent .brand-logo--on-accent { display: block !important; } html.dark .brand-lockup--sidebar .brand-logo--on-accent, html.dark .brand-lockup--mobile .brand-logo--on-accent, html.dark .brand-logo-pair--on-accent .brand-logo--on-accent { display: none !important; }