/* ────────────────────────────────────────────────────────────────────────── HoloHawk mobile polish Linked from: public/index.v2.html, public/deals.v2.html, public/servers.v2.html Safe to ship independently — purely additive CSS. No markup changes required. ────────────────────────────────────────────────────────────────────────── */ /* Global: stop iOS auto-zoom on input focus (needs ≥ 16px font-size). Scoped to inputs on touch viewports to avoid changing desktop type scale. */ @media (hover: none) and (pointer: coarse) { input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="number"], textarea, select { font-size: 16px !important; } } /* Prevent any wide grid/flex child from leaking horizontally on mobile */ @media (max-width: 640px) { html, body { overflow-x: hidden; max-width: 100%; } img, video, iframe { max-width: 100%; height: auto; } /* Defensive wrapping so no long word or tight heading ever spills past the viewport on narrow phones. `overflow-wrap: anywhere` is a stronger variant of break-word that kicks in even when a browser thinks a word could still fit. */ h1, h2, h3, p, a, span, div, button, summary { overflow-wrap: anywhere; word-break: break-word; } /* Keep short labels + monospace numerics intact — they shouldn't break */ .mono, .hh-chip, .hh-card-type, .hh-card-ribbon, .hh-card-new-badge, .hh-stat-num, .hh-found-num, .hh-price-asking, .hh-price-market, .hh-stream-price-main, .hh-stream-price-pct, .hh-eyebrow, .hh-click-badge, .hh-purchase-badge, .hh-burger-line { overflow-wrap: normal; word-break: normal; } /* Keep hero heading inside the card even on the tiniest phones */ h1.hh-hero-h1 { letter-spacing: -0.02em !important; } } /* Smallest phones: pull the hero H1 max size back so 'Delivered instantly.' always fits or wraps cleanly. */ @media (max-width: 380px) { h1.hh-hero-h1 { font-size: clamp(24px, 7.5vw, 30px) !important; } section.hh-hero { padding: 24px 14px 28px !important; } .hh-hero-sub { font-size: 13.5px !important; } } /* ────────────── NAV (shared) ────────────── */ /* Mobile: hide the horizontal links, show hamburger. Drawer handles routing. */ @media (max-width: 640px) { .hh-nav-inner { padding: 10px 14px !important; gap: 10px; position: relative; } .hh-nav-logo span { display: inline !important; font-size: 15px !important; } .hh-nav-logo img { width: 22px !important; height: 22px !important; } /* Hide the desktop link row on mobile — drawer replaces it */ .hh-nav-links { display: none !important; } /* Hamburger button */ .hh-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 10px 9px; background: rgba(255,255,255,0.03); border: 1px solid var(--hh-border); border-radius: 10px; cursor: pointer; margin-left: auto; transition: background 0.15s, border-color 0.15s; -webkit-tap-highlight-color: transparent; } .hh-burger:hover, .hh-burger:focus-visible { background: rgba(255,255,255,0.06); border-color: var(--hh-border-strong); outline: none; } .hh-burger-line { display: block; height: 1.5px; width: 100%; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.15s ease; transform-origin: center; } .hh-burger.active .hh-burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hh-burger.active .hh-burger-line:nth-child(2) { opacity: 0; } .hh-burger.active .hh-burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } } /* Desktop: hide the burger so it only renders on mobile */ @media (min-width: 641px) { .hh-burger { display: none !important; } } /* Drawer — lives at end of ; only visible when .open */ .hh-mnav-drawer { position: fixed; inset: 0; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .hh-mnav-drawer.open { opacity: 1; pointer-events: auto; } .hh-mnav-scrim { position: absolute; inset: 0; background: rgba(3, 7, 18, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hh-mnav-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: linear-gradient(180deg, #0e1522 0%, #080c16 100%); border-left: 1px solid var(--hh-border, rgba(255,255,255,0.06)); box-shadow: -24px 0 60px rgba(0,0,0,0.5); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.2, 1); padding: 14px 18px 28px; } .hh-mnav-drawer.open .hh-mnav-panel { transform: translateX(0); } .hh-mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 18px; border-bottom: 1px solid var(--hh-border, rgba(255,255,255,0.06)); margin-bottom: 14px; } .hh-mnav-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--hh-text-mute, #6b7280); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; } .hh-mnav-close { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--hh-border, rgba(255,255,255,0.06)); color: #fff; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .hh-mnav-close:hover, .hh-mnav-close:focus-visible { background: rgba(255,255,255,0.08); outline: none; } .hh-mnav-links { display: flex; flex-direction: column; gap: 2px; } .hh-mnav-link, .hh-mnav-cta { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-radius: 10px; text-decoration: none; font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--hh-text, #f9fafb); min-height: 48px; transition: background 0.12s; position: relative; } .hh-mnav-link:hover, .hh-mnav-link:focus-visible { background: rgba(255,255,255,0.05); outline: none; } .hh-mnav-link::after { content: '→'; color: var(--hh-text-mute, #6b7280); font-family: 'JetBrains Mono', monospace; font-size: 13px; transition: transform 0.15s, color 0.15s; } .hh-mnav-link:hover::after { color: var(--hh-indigo, #818cf8); transform: translateX(3px); } .hh-mnav-link.active { background: rgba(129,140,248,0.08); color: var(--hh-indigo, #818cf8); } .hh-mnav-link.active::after { color: var(--hh-indigo, #818cf8); } /* Primary CTA inside drawer (e.g., Join Discord) — visually distinct */ .hh-mnav-cta { margin-top: 14px; justify-content: center; background: #fff; color: #030712 !important; font-weight: 700; border-radius: 10px; min-height: 48px; } .hh-mnav-cta:hover, .hh-mnav-cta:focus-visible { background: rgba(255,255,255,0.92); outline: none; } .hh-mnav-cta::after { content: ''; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .hh-mnav-drawer, .hh-mnav-panel, .hh-burger-line { transition: none !important; } } /* ────────────── LANDING: hero, stream panel, funnels ────────────── */ @media (max-width: 640px) { section.hh-hero { padding: 28px 16px 32px !important; } h1.hh-hero-h1 { font-size: clamp(30px, 9vw, 40px) !important; } .hh-hero-sub { font-size: 14px !important; margin-bottom: 22px !important; } .hh-eyebrow { padding: 4px 10px !important; font-size: 11px !important; margin-bottom: 14px !important; white-space: nowrap; } /* Fork cards stack vertically on mobile — arrow below text */ a.hh-fork-card { grid-template-columns: 1fr !important; padding: 16px !important; gap: 8px !important; } .hh-fork-arrow { font-size: 12px !important; color: var(--hh-indigo) !important; margin-top: 4px; } .hh-fork-title { font-size: 15.5px !important; } .hh-fork-sub { font-size: 12px !important; } /* Live stream panel gets denser */ .hh-stream { padding: 14px !important; border-radius: 16px !important; max-width: 100%; box-sizing: border-box; overflow: hidden; } .hh-stream-head { margin-bottom: 10px !important; padding-bottom: 10px !important; } .hh-stream-list { min-height: 180px !important; gap: 6px !important; } .hh-stream-row { padding: 8px 10px !important; gap: 8px !important; max-width: 100%; min-width: 0; } .hh-stream-thumb, .hh-stream-placeholder { width: 32px !important; height: 42px !important; flex-shrink: 0; } .hh-stream-main { min-width: 0 !important; flex: 1 1 auto !important; } /* Real deal titles are long and have `white-space: nowrap` baked in from desktop. On mobile allow them to wrap to two lines with ellipsis so they never blow out the panel width once the live feed populates. */ .hh-stream-title-text { font-size: 11.5px !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.3 !important; word-break: break-word !important; overflow-wrap: anywhere !important; max-width: 100% !important; } .hh-stream-price { flex-shrink: 0 !important; white-space: nowrap; } .hh-stream-price-main { font-size: 12px !important; } .hh-stream-price-pct { font-size: 10px !important; } } /* ────────────── LANDING: stats strip ────────────── */ @media (max-width: 520px) { .hh-stats-inner { padding: 20px 16px !important; gap: 14px !important; } .hh-stat-num { font-size: 26px !important; } .hh-stat-label { font-size: 10px !important; } .hh-stat-sub { font-size: 10.5px !important; } } /* ────────────── LANDING: funnels ────────────── */ @media (max-width: 640px) { section.hh-section { padding: 44px 16px !important; } .hh-section-h2 { font-size: clamp(22px, 6vw, 26px) !important; } .hh-funnel { padding: 22px 18px !important; border-radius: 16px !important; } .hh-funnel h3 { font-size: 20px !important; margin-bottom: 16px !important; } .hh-funnel ul { gap: 12px !important; margin-bottom: 22px !important; } .hh-funnel-bullet-title { font-size: 13px !important; } .hh-funnel-bullet-desc { font-size: 12px !important; line-height: 1.5 !important; } .hh-funnel-actions-secondary { gap: 14px !important; } } /* ────────────── LANDING: pipeline ────────────── */ /* The pipeline already goes 2-col below 560px, but the connecting line is hidden. Re-show it as a vertical spine so the steps feel connected. */ @media (max-width: 560px) { .hh-pipeline { position: relative; } .hh-pipeline::before { content: ''; position: absolute; left: 50%; top: 24px; bottom: 24px; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, #818cf8, #c084fc, #facc15, #4ade80); opacity: 0.2; z-index: 0; pointer-events: none; } .hh-pipe-circle { width: 44px !important; height: 44px !important; background: var(--hh-bg) !important; /* cover the spine */ position: relative; z-index: 1; } .hh-pipe-label { font-size: 11.5px !important; } .hh-pipe-note { font-size: 10px !important; } } /* ────────────── LANDING: servers grid & final CTA ────────────── */ @media (max-width: 640px) { .hh-servers-head { margin-bottom: 20px !important; } .hh-servers-pill { font-size: 11px !important; padding: 6px 10px !important; } .hh-server-card { padding: 14px !important; gap: 12px !important; } .hh-server-logo { width: 40px !important; height: 40px !important; font-size: 16px !important; } .hh-server-name { font-size: 13.5px !important; } .hh-server-sub { font-size: 11px !important; } } /* ────────────── FOOTER (shared) ────────────── */ @media (max-width: 520px) { .hh-footer-grid { grid-template-columns: 1fr !important; gap: 22px !important; margin-bottom: 20px !important; } .hh-footer-grid > p { font-size: 12px !important; } .hh-footer-bot { flex-direction: column; gap: 6px !important; font-size: 10.5px !important; align-items: flex-start !important; } } /* ────────────── DEALS: header tile + admin button ────────────── */ @media (max-width: 640px) { .hh-head-inner { gap: 16px !important; padding: 22px 16px !important; } h1.hh-head-h1 { font-size: clamp(22px, 6vw, 28px) !important; } .hh-head-sub { font-size: 13px !important; } /* The "Found today" tile + Admin column was right-aligned flex-col; on mobile put the tile full-width and hide Admin button (it's a desktop admin entry point). */ .hh-head-inner > div:last-child { width: 100%; flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important; gap: 10px !important; } .hh-found-tile { flex: 1; min-width: 0 !important; padding: 12px 14px !important; } .hh-found-num { font-size: 24px !important; } .hh-found-label { font-size: 10px !important; } .hh-found-sub { font-size: 10.5px !important; } .hh-admin-btn { align-self: center; padding: 8px 12px !important; font-size: 10.5px !important; } } /* ────────────── DEALS: filter rail on mobile ────────────── */ /* Single-row layout: [🔍 search] [Sort] [Filters] All the granular controls (set / type / language / discount / status) move into a bottom-sheet modal opened via the Filters button. Sort has its own smaller popup. Implemented by holohawk-mobile.js. */ @media (max-width: 720px) { section.hh-rail { top: 54px !important; } .hh-rail-inner { padding: 10px 14px !important; gap: 8px !important; flex-wrap: nowrap !important; overflow-x: visible !important; align-items: center !important; } .hh-rail-inner > .hh-search { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; order: 0 !important; } .hh-rail-inner > .hh-search input { padding: 9px 12px 9px 34px !important; font-size: 14px !important; } /* Original controls are hidden on mobile — they live in the sheet now. Desktop/tablet keeps them visible (see min-width: 721px block below). */ .hh-rail-inner > .hh-select-wrap, .hh-rail-inner > .hh-pills, .hh-rail-inner > .hh-slider-wrap { display: none !important; } .hh-rail-admin { display: none !important; } /* Sort + Filters buttons injected by holohawk-mobile.js */ .hh-mobile-filter-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--hh-border); color: var(--hh-text, #f9fafb); font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; flex-shrink: 0; cursor: pointer; min-height: 40px; -webkit-tap-highlight-color: transparent; } .hh-mobile-filter-btn:hover, .hh-mobile-filter-btn:focus-visible { background: rgba(255,255,255,0.07); border-color: var(--hh-border-strong, rgba(255,255,255,0.14)); outline: none; } .hh-mobile-filter-btn.active { background: rgba(129,140,248,0.14); border-color: rgba(129,140,248,0.35); color: var(--hh-indigo, #818cf8); } .hh-mobile-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 10px; background: var(--hh-indigo, #818cf8); color: #030712; font-size: 10px; font-weight: 800; font-family: "JetBrains Mono", monospace; } } /* Desktop: hide the Sort + Filters mobile buttons so they only appear ≤720px */ @media (min-width: 721px) { .hh-mobile-filter-btn { display: none !important; } } /* ────────────── Bottom sheet (shared shell for Sort + Filters) ────────────── */ .hh-fsheet { position: fixed; inset: 0; z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .hh-fsheet.open { opacity: 1; pointer-events: auto; } .hh-fsheet-scrim { position: absolute; inset: 0; background: rgba(3,7,18,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hh-fsheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; background: linear-gradient(180deg, #0e1522 0%, #080c16 100%); border-top: 1px solid var(--hh-border, rgba(255,255,255,0.06)); border-radius: 18px 18px 0 0; box-shadow: 0 -24px 60px rgba(0,0,0,0.5); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.2, 1); padding: 8px 18px 20px; } .hh-fsheet.open .hh-fsheet-panel { transform: translateY(0); } .hh-fsheet-handle { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); margin: 8px auto 10px; } .hh-fsheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; border-bottom: 1px solid var(--hh-border, rgba(255,255,255,0.06)); margin-bottom: 12px; } .hh-fsheet-title { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--hh-text-mute, #6b7280); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; } .hh-fsheet-close { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--hh-border, rgba(255,255,255,0.06)); color: #fff; cursor: pointer; font-family: inherit; } .hh-fsheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } .hh-fsheet-section + .hh-fsheet-section { margin-top: 18px; } .hh-fsheet-section-label { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--hh-text-mute, #6b7280); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; } .hh-fsheet-footer { display: flex; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hh-border, rgba(255,255,255,0.06)); } .hh-fsheet-btn { flex: 1; padding: 12px 14px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px; } .hh-fsheet-btn-ghost { background: transparent; border: 1px solid var(--hh-border, rgba(255,255,255,0.06)); color: var(--hh-text-dim, #9ca3af); } .hh-fsheet-btn-primary { background: var(--hh-indigo, #818cf8); border: 1px solid var(--hh-indigo, #818cf8); color: #030712; } /* Inside the sheet: rearrange the moved-in controls so they read as a proper filter form, not a horizontal strip. */ .hh-fsheet-panel .hh-select-wrap { display: block !important; width: 100%; } .hh-fsheet-panel .hh-select-btn { width: 100% !important; min-width: 0 !important; padding: 12px 32px 12px 14px !important; font-size: 14px !important; min-height: 44px; } .hh-fsheet-panel .hh-select-pop { position: absolute; left: 0; right: 0; max-height: 40vh !important; } .hh-fsheet-panel .hh-pills { display: flex !important; flex-wrap: wrap; gap: 6px !important; background: transparent !important; padding: 0 !important; } .hh-fsheet-panel .hh-pill { flex: 1 1 auto !important; min-height: 40px; padding: 9px 14px !important; font-size: 13px !important; border-radius: 8px !important; background: rgba(255,255,255,0.03) !important; border: 1px solid var(--hh-border, rgba(255,255,255,0.06)) !important; } .hh-fsheet-panel .hh-pill.active { background: rgba(129,140,248,0.16) !important; border-color: rgba(129,140,248,0.35) !important; color: #fff !important; } .hh-fsheet-panel .hh-slider-wrap { display: flex !important; padding: 12px 14px; border: 1px solid var(--hh-border, rgba(255,255,255,0.06)); border-radius: 10px; background: rgba(255,255,255,0.02); gap: 12px; align-items: center; } .hh-fsheet-panel .hh-slider { flex: 1; } .hh-fsheet-panel .hh-slider-value { font-size: 13px !important; min-width: 46px !important; text-align: right; } .hh-fsheet-panel .hh-slider-label { font-size: 11px !important; letter-spacing: 0.6px; } @media (prefers-reduced-motion: reduce) { .hh-fsheet, .hh-fsheet-panel { transition: none !important; } } /* ────────────── DEALS: live banner — keep clear of sticky rail ────────────── */ @media (max-width: 720px) { .hh-banner { top: 116px !important; /* nav (54) + single-row rail (~56) + margin */ padding: 7px 14px !important; font-size: 11.5px !important; } } /* ────────────── DEALS: cards ────────────── */ @media (max-width: 500px) { section.hh-body { padding: 16px 14px !important; } .hh-group-head { margin-bottom: 10px !important; padding-bottom: 8px !important; } .hh-group-h2 { font-size: 12px !important; } .hh-group-count { font-size: 11px !important; } .hh-card { padding: 12px !important; border-radius: 12px !important; } .hh-card-head { grid-template-columns: 70px 1fr !important; gap: 12px !important; } .hh-card-thumb, .hh-card-thumb-placeholder { width: 70px !important; height: 70px !important; } .hh-card-title { font-size: 13px !important; } .hh-card-set { font-size: 10.5px !important; } .hh-card-type { font-size: 9px !important; padding: 2px 6px !important; white-space: nowrap; word-break: keep-all; } .hh-card-ribbon { top: 10px !important; right: 10px !important; padding: 3px 7px !important; font-size: 10px !important; white-space: nowrap; word-break: keep-all; } .hh-card-type *, .hh-card-ribbon * { white-space: nowrap; word-break: keep-all; } .hh-group-h2, .hh-group-count { white-space: nowrap; } .hh-card-new-badge { top: 10px !important; left: 10px !important; padding: 2px 7px !important; font-size: 9px !important; } .hh-price-row { margin-top: 12px !important; } .hh-price-cell { padding: 9px 10px !important; } .hh-price-asking { font-size: 16px !important; } .hh-price-market { font-size: 13px !important; } .hh-price-label { font-size: 9px !important; } .hh-pc-row { font-size: 10.5px !important; } .hh-meta-strip { font-size: 10.5px !important; flex-wrap: wrap; gap: 4px 10px; } /* Buttons: primary full-width, secondary action a chip below */ .hh-actions { gap: 8px !important; } .hh-btn-view { flex: 1 1 100% !important; min-width: 0 !important; padding: 11px 14px !important; font-size: 13px !important; min-height: 44px; /* touch target */ display: inline-flex; align-items: center; justify-content: center; } .hh-btn-report, .hh-btn-pin { flex: 0 0 auto !important; min-height: 40px; padding: 8px 12px !important; } } /* ────────────── DEALS: AI Checks panel cleaner on mobile ────────────── */ @media (max-width: 500px) { .hh-checks-toggle { padding: 8px 10px !important; font-size: 10.5px !important; } .hh-checks-list { padding: 2px 10px 10px !important; } .hh-check-title { font-size: 11.5px !important; } .hh-check-note { font-size: 11px !important; } } /* ────────────── DEALS: empty / loading states + admin overlay ────────────── */ @media (max-width: 500px) { .hh-empty { padding: 48px 16px !important; } .hh-admin-overlay { padding: 16px !important; align-items: flex-end !important; } .hh-admin-modal { max-width: none !important; border-radius: 16px 16px 0 0 !important; padding: 20px !important; } } /* ────────────── SERVERS: hero + steps + embed preview ────────────── */ @media (max-width: 640px) { section.hh-hero { padding: 28px 16px 32px !important; } h1.hh-hero-h1 { font-size: clamp(26px, 7.5vw, 34px) !important; line-height: 1.15 !important; } .hh-hero-sub { font-size: 14px !important; } .hh-hero-note { font-size: 11px !important; } .hh-steps { gap: 12px !important; } .hh-step { padding: 20px 18px !important; border-radius: 14px !important; } .hh-step h3 { font-size: 16.5px !important; margin-bottom: 8px !important; } .hh-step p { font-size: 13px !important; } .hh-step-detail { font-size: 11px !important; padding-top: 12px !important; } .hh-included-inner > div:first-child { margin-bottom: 24px !important; } .hh-incl { padding: 16px 18px !important; } .hh-incl-title { font-size: 13.5px !important; } .hh-incl-body { font-size: 12px !important; } .hh-embed-wrap { gap: 18px !important; } /* Discord preview — let it scale properly on narrow screens */ .hh-discord-chrome { padding: 8px 12px !important; } .hh-discord-msg-head { padding: 12px 14px 6px !important; gap: 8px !important; } .hh-discord-avatar { width: 32px !important; height: 32px !important; } .hh-discord-name { font-size: 13px !important; } .hh-discord-time { font-size: 10.5px !important; } .hh-discord-body { padding: 0 14px 14px !important; } .hh-embed { padding: 12px 14px !important; gap: 10px !important; border-radius: 0 10px 10px 0 !important; } .hh-embed-thumb { width: 64px !important; height: 64px !important; } .hh-embed-title { font-size: 13px !important; } .hh-embed-desc { font-size: 12.5px !important; } .hh-embed-quote { font-size: 12.5px !important; padding: 2px 8px !important; } .hh-embed-field-label { font-size: 11.5px !important; } .hh-embed-check { font-size: 11.5px !important; } .hh-embed-actions { font-size: 12px !important; } .hh-anatomy { padding: 20px 18px !important; } .hh-anatomy-title { font-size: 12.5px !important; } .hh-anatomy-body { font-size: 11.5px !important; } } /* ────────────── SERVERS: FAQ ────────────── */ @media (max-width: 640px) { section.hh-faq-section { padding: 44px 16px !important; } details.hh-faq-item summary { font-size: 14px !important; gap: 10px; } .hh-faq-answer { font-size: 12.5px !important; } } /* ────────────── CTAs: guarantee 44×44 touch target on mobile ────────────── */ @media (max-width: 640px) { .hh-cta, .hh-cta-ghost, .hh-funnel-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-top: 10px !important; padding-bottom: 10px !important; } .hh-cta { font-size: 14px !important; padding-left: 22px !important; padding-right: 22px !important; } .hh-cta-ghost { font-size: 13.5px !important; } } /* ────────────── Reduced motion ────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hh-holo { animation: none !important; background-position: 0 50% !important; } } /* ────────────── Landscape phones: tighten vertical rhythm ────────────── */ @media (max-height: 500px) and (orientation: landscape) { section.hh-hero { padding-top: 18px !important; padding-bottom: 20px !important; } h1.hh-hero-h1 { font-size: 28px !important; } .hh-hero-sub { margin-bottom: 14px !important; } }