/* ============================================================ NetShow footer — mobile collapse (W5-U6, 2026-08-11) Scope discipline: every rule is .netshow-footer-scoped; new hooks use the .nsf- prefix. Loaded from the footer partial via @once, i.e. AFTER footer-v2.css (linked in ), so scoped higher-specificity rules win the cascade cleanly. The only !important flags in this file neutralize pre-existing !important declarations in footer-v2.css — never widen them. Breakpoints: >= 993px five-column grid (desktop parity with the old inline style) 577-992px two-column grid (parity with the old !important override) <= 768px accordion collapse + compact chips (script closes columns) <= 576px single-column stack ============================================================ */ /* ---- Footer grid (was an inline style on .footer-grid) ---- */ .netshow-footer .footer-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 2rem; padding: 2rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } @media (max-width: 992px) { .netshow-footer .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 576px) { .netshow-footer .footer-grid { grid-template-columns: 1fr; } } /* ---- Link columns as

accordions ---- */ .netshow-footer details.nsf-acc { margin: 0; } .netshow-footer .nsf-acc > summary.footer-heading-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0; } .netshow-footer .nsf-acc > summary.footer-heading-sum::-webkit-details-marker { display: none; } .netshow-footer .nsf-acc > summary.footer-heading-sum::marker { content: ""; } /* Recreate the old h6.footer-heading look on the summary span (footer-v2.css binds the heading style to the h6 tag, which is gone). FOOTER-MOBILE-20260818: pixel parity with the h6 the desktop shipped with (measured 1440: Nunito 700 / 11.2px / lh 13.44px / ls 1.12px / rgba(255,255,255,.7)) — the W5-U6 r2 monospace kicker is dropped so the >=993 desktop stays byte-equivalent. */ .netshow-footer .nsf-acc .footer-heading { display: inline-block; margin: 0; padding: 0; color: rgba(255, 255, 255, 0.7); font-family: inherit; font-size: 0.7rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; } /* Chevron — a quiet mobile affordance, hidden at desktop widths */ .netshow-footer .nsf-acc > summary.footer-heading-sum::after { content: ""; width: 7px; height: 7px; flex-shrink: 0; margin-right: 2px; border-right: 1.5px solid rgba(255, 255, 255, 0.45); border-bottom: 1.5px solid rgba(255, 255, 255, 0.45); transform: rotate(45deg); /* points down = closed */ transition: transform 0.18s ease; } .netshow-footer .nsf-acc[open] > summary.footer-heading-sum::after { transform: rotate(225deg); /* points up = open */ } /* Focus rings kept — N room gold */ .netshow-footer .nsf-acc > summary.footer-heading-sum:focus-visible, .netshow-footer .nsf-legal a:focus-visible, .netshow-footer .footer-help-option:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; border-radius: 6px; } /* Desktop (>= 769px): summaries read as plain column headings; the inline partial script forces every details open and stamps .nsf-js. pointer-events:none is gated on .nsf-js so that without JS the summaries remain clickable and every link stays reachable. */ @media (min-width: 769px) { /* FOOTER-MOBILE-20260818: reproduce the shipped box structure exactly — a block container (was .footer-links-col's anonymous line box) holding an inline-block heading with the 0.6rem bottom margin ON THE HEADING (was h6.footer-heading). Measured 1440: column 320px before, 315px with a flex summary; block+inline-block restores the 5px line-box strut. */ .netshow-footer .nsf-acc > summary.footer-heading-sum { cursor: default; display: block; margin: 0; } .netshow-footer .nsf-acc .footer-heading { margin: 0 0 0.6rem 0; } .netshow-footer.nsf-js .nsf-acc > summary.footer-heading-sum { pointer-events: none; } .netshow-footer .nsf-acc > summary.footer-heading-sum::after { display: none; } } /* Mobile (<= 768px): 44px tap-target accordion rows with dividers */ @media (max-width: 768px) { /* W5-U6 r1: the composed 375w render measured 740px content (real Nunito + Font Awesome vs the harness's system fonts) — these trims recover the <=700 target without touching copy or 44px targets. */ /* !important neutralizes mobile-responsive.css's `.netshow-footer { padding: 32px 16px !important }` (line ~170) and its safe-area padding-bottom variant (line ~347); the dockspace supplies all bottom room + safe-area instead. */ footer.netshow-footer { padding: 1rem 16px 0 !important; } /* FOOTER-MOBILE-20260818: while the columns are closed accordions (<=768) a 2-col grid reads as a jumble (brand + PRODUCT | PLATFORM + RESOURCES | COMPANY); one column = brand row, then four 44px rows. */ .netshow-footer .footer-grid { grid-template-columns: 1fr; gap: 0 1rem; padding: 0.5rem 0 0; } /* FOOTER-MOBILE-20260818: brand block reads as one row on phones — logo · tagline · social icons — instead of a 130px column. */ .netshow-footer .footer-brand-section { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.25rem; } .netshow-footer .footer-logo-main { width: 32px !important; height: 32px !important; } .netshow-footer .footer-tagline { margin: 0; flex: 1 1 auto; max-width: none; } .netshow-footer .footer-social { margin: 0; margin-left: auto; gap: 0.375rem; } .netshow-footer .footer-social a { width: 32px; height: 32px; } .netshow-footer .nsf-acc { border-top: 1px solid rgba(255, 255, 255, 0.06); } .netshow-footer .nsf-acc > summary.footer-heading-sum { cursor: pointer; min-height: 44px; } .netshow-footer .nsf-acc > ul { padding: 0 0 0.6rem 0; } .netshow-footer .nsf-acc > ul li { margin-bottom: 0; } .netshow-footer .nsf-acc > ul li a { display: flex; align-items: center; min-height: 44px; } } /* ---- Help strip: compact 2-row chip grid on mobile ---- Desktop keeps the existing five-card strip from footer-v2.css. */ @media (max-width: 768px) { .netshow-footer .footer-help-strip { padding: 0.75rem 0; } .netshow-footer .footer-help-title { margin: 0 0 0.375rem 0; } /* !important only to neutralize footer-v2.css's `grid-template-columns: repeat(2, 1fr) !important` at <= 768px. */ .netshow-footer .footer-help-options { grid-template-columns: repeat(6, 1fr) !important; gap: 0.5rem; } /* !important pair neutralizes footer-v2.css's `flex-direction: column !important` card layout. border-box keeps each chip at exactly 44px incl. padding + border. */ .netshow-footer .footer-help-option { box-sizing: border-box; flex-direction: row !important; justify-content: center !important; gap: 0.5rem; min-height: 44px; padding: 0.25rem 0.5rem; border-radius: 10px; } /* Two rows: chips 1-2 span 3 of 6 tracks, chips 3-5 span 2 of 6. Higher specificity also overrides footer-v2.css's `.footer-help-option:last-child { grid-column: 1 / -1 }` at <= 480px. */ .netshow-footer .footer-help-option:nth-child(-n+2) { grid-column: span 3; } .netshow-footer .footer-help-option:nth-child(n+3) { grid-column: span 2; } .netshow-footer .footer-help-icon { width: 26px; height: 26px; font-size: 0.85rem; } .netshow-footer .footer-help-label { font-size: 0.76rem; white-space: normal; line-height: 1.15; } .netshow-footer .footer-help-sub { display: none; } } /* ---- Trust badges (was inline styles; same values on desktop) ---- */ .netshow-footer .nsf-trust { display: flex; flex-wrap: wrap; gap: 10px; padding: 1.25rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .netshow-footer .nsf-badge { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; } .netshow-footer .nsf-badge > i { color: #6366f1; } .netshow-footer .nsf-badge-t { font-size: 0.78rem; font-weight: 700; color: #fff; } .netshow-footer .nsf-badge-s { font-size: 0.72rem; color: #6b7280; } /* Mobile: compact single row. The four badge texts total ~590px, so at 375px a wrap would take three rows; a quiet horizontal scroll keeps one 44px-band row with zero content loss. Descriptive subs hide except the Models badge, whose sub IS its content. */ @media (max-width: 768px) { .netshow-footer .nsf-trust { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding: 0.625rem 0; } /* r2 (taste panel, mobile-ergonomics): the row hides 216px of badges with zero visible peek — the right-edge fade is the scroll cue. */ .netshow-footer .nsf-trust { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%); } .netshow-footer .nsf-badge { flex-shrink: 0; gap: 5px; padding: 4px 9px; } .netshow-footer .nsf-badge > i { font-size: 0.7rem; } .netshow-footer .nsf-badge-t { font-size: 0.68rem; white-space: nowrap; } .netshow-footer .nsf-badge-s { display: none; } .netshow-footer .nsf-badge--models .nsf-badge-s { display: inline; font-size: 0.62rem; white-space: nowrap; } } /* ---- Contact micro-line (r2, customer-trust): visible phone + support address are proof-of-real-company artifacts; the mobile chip grid hides the chips' sub-lines, so this one quiet line restores the facts. ---- */ .netshow-footer .nsf-contact-line { display: none; } @media (max-width: 768px) { .netshow-footer .nsf-contact-line { display: block; margin: 0.375rem 0 0; text-align: center; font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); } } /* ---- Bottom bar (was an inline style; same values on desktop). border-top stays with footer-v2.css's .footer-bottom rule, exactly as it does today. ---- */ .netshow-footer .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 1.25rem 0; gap: 1rem; } @media (max-width: 768px) { /* FOOTER-MOBILE-20260818: copyright + Give Feedback / Report Bug on ONE row (footer-v2.css stacks them centered at <=768 — neutralized here). */ .netshow-footer .footer-bottom { flex-direction: row; /* design-system.css stacks it column at <=768 */ flex-wrap: nowrap; justify-content: space-between; align-items: center; text-align: left; padding: 0.5rem 0; gap: 0.5rem; } .netshow-footer .footer-bottom .footer-copyright { width: auto; text-align: left; font-size: 0.7rem; line-height: 1.35; min-width: 0; } /* "— Create → Command → Life / Own Your Superintelligence" is desktop flourish; the phone row keeps "© 2026 NetShow.AI" so the buttons fit. */ .netshow-footer .footer-bottom .nsf-copy-ext { display: none; } /* The partial's container adds 1.5rem inline padding on top of the footer's own 16px; at phone widths that 40px gutter costs the one-row bottom bar. footer keeps 16px, container goes to 0. */ .netshow-footer > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; } .netshow-footer .nsf-feedback-actions { flex-shrink: 0; gap: 6px !important; } .netshow-footer .nsf-feedback-actions .footer-feedback-toggle, .netshow-footer .nsf-feedback-actions #footer-bug-btn { min-height: 36px; padding: 0 10px !important; font-size: 0.72rem !important; white-space: nowrap; } } /* ---- Bottom-bar legal links (additive) ---- */ .netshow-footer .nsf-legal { display: flex; align-items: center; gap: 1rem; } .netshow-footer .nsf-legal a { display: inline-flex; align-items: center; min-height: 44px; /* r2 (taste panel, all 3 judges): a base-sheet sibling rule adds margin-top:8px to the second anchor only, staggering the pair's baselines at 375 — measured 7001px vs 7005px. Pin margins to zero. */ margin: 0 !important; color: rgba(255, 255, 255, 0.5); font-size: 0.78rem; line-height: 1.6; text-decoration: none; transition: color 0.15s ease; } .netshow-footer .nsf-legal a:hover { color: #f59e0b; } @media (max-width: 768px) { .netshow-footer .nsf-legal { width: 100%; justify-content: center; } } /* ---- Dock space: scroll reserve under the bottom bar so floating / docked widgets never occlude the last footer rows. N pages have an auth-only floating feedback widget; guests keep a modest reserve. ---- */ /* FOOTER-MOBILE-20260818: 0 on desktop (>=769 pixel parity with the shipped footer); on mobile the floating feedback FAB is gone, so the reserve only has to clear the docked communicator bubble + safe area. */ .netshow-footer .nsf-dockspace { height: 0; } @media (max-width: 768px) { .netshow-footer .nsf-dockspace { height: calc(env(safe-area-inset-bottom, 0px) + 72px); } } /* ---- Feedback panel: hidden-by-default guard (FOOTER-MOBILE-20260818). footer-v2.css declares `.footer-feedback-panel{display:block !important}`, which would beat the UA's [hidden]{display:none}. The partial carries an inline `display:none !important` (wins regardless of stylesheets); this rule is the second lock for the case where only THIS sheet loads. ---- */ .footer-feedback-panel[hidden] { display: none !important; } /* ---- Reduced motion stills everything in the footer, including the legacy hover lifts and transitions declared in footer-v2.css. ---- */ @media (prefers-reduced-motion: reduce) { .netshow-footer *, .netshow-footer *::before, .netshow-footer *::after { transition: none !important; animation: none !important; } .netshow-footer .footer-help-option:hover, .netshow-footer .footer-social a:hover, .netshow-footer .footer-logo-link:hover .footer-logo-main { transform: none; } }