of each view. * Higher specificity than vendor .hero.section .container rules. */ .v4-form-section { background: linear-gradient(rgba(91, 164, 201, 0.04) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(91, 164, 201, 0.04) 1px, transparent 1px) 0 0 / 32px 32px, #0a1929 !important; color: #ffffff; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; min-height: 100vh; padding: 80px 16px 56px; display: flex; align-items: center; justify-content: center; } /* When the form-card sits inside an existing vendor wrapper * (.center-card-section > .container > .hero-inner), keep the * vendor flex centering but paint V4 behind it. */ .v4-form-section.center-card-section { padding-top: 80px !important; padding-bottom: 56px !important; } /* === Form-card: sharp corners + corner-brackets + accent-line === * Applied via class on the existing card element (.login-card, * .waiting-card, .cr-card) — V4 styling wins via load order. * Sharp corners per V4 spec (no border-radius). */ .v4-form-card { position: relative !important; max-width: 552px !important; width: 100% !important; margin: 0 auto !important; padding: 48px !important; background: rgba(15, 30, 46, 0.7) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(78, 205, 196, 0.18) !important; border-radius: 0 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; color: #ffffff; text-align: center; } /* CustomRoom-card has a tighter width (520px) + green-accent; V4 widens it slightly * for visual breathing room but keeps it under 552px. */ .v4-form-card.cr-card { max-width: 600px !important; text-align: left !important; padding: 40px 36px !important; } /* Accent-line top (teal gradient) */ .v4-form-card::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #4ECDC4 50%, transparent); pointer-events: none; } /* === Four corner-brackets via dedicated child elements === * Same pattern as v4-hero.css for consistency. */ .v4-corner { position: absolute; width: 24px; height: 24px; pointer-events: none; z-index: 1; } .v4-corner-tl { top: -8px; left: -8px; border-top: 2px solid #4ECDC4; border-left: 2px solid #4ECDC4; } .v4-corner-tr { top: -8px; right: -8px; border-top: 2px solid #4ECDC4; border-right: 2px solid #4ECDC4; } .v4-corner-bl { bottom: -8px; left: -8px; border-bottom: 2px solid #4ECDC4; border-left: 2px solid #4ECDC4; } .v4-corner-br { bottom: -8px; right: -8px; border-bottom: 2px solid #4ECDC4; border-right: 2px solid #4ECDC4; } /* === Card icon: V4 teal glow disc === * Replaces blue icon-bg from vendor .login-icon / .waiting-icon. * Sharp corners (V4 spec) — no border-radius. */ .v4-icon { width: 72px; height: 72px; margin: 0 auto 24px; border-radius: 0; background: rgba(78, 205, 196, 0.1); border: 1px solid rgba(78, 205, 196, 0.35); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 12px rgba(78, 205, 196, 0.4)); } .v4-icon i { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; font-size: 30px; color: #4ECDC4; } /* === Form title === */ .v4-form-title { color: #ffffff; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px; } /* === Form description === */ .v4-form-desc { color: rgba(255, 255, 255, 0.65); font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.6; margin: 0 0 32px; max-width: 400px; margin-left: auto; margin-right: auto; } /* === Input group with icon (V4 form-input) === * Replaces vendor blue (.login-input-group) — sharp corners, * teal focus glow. Vendor .login-input-group still applied for * inner input/select layout — V4 only overrides visual. */ .v4-input-group { display: flex; align-items: center; background: rgba(10, 25, 41, 0.6) !important; border: 1px solid rgba(78, 205, 196, 0.22) !important; border-radius: 0 !important; padding: 0 16px; margin-bottom: 16px; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .v4-input-group:focus-within { border-color: #4ECDC4 !important; background: rgba(10, 25, 41, 0.9) !important; box-shadow: 0 0 12px rgba(78, 205, 196, 0.3) !important; } .v4-input-group > i:first-child { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; color: rgba(78, 205, 196, 0.7) !important; font-size: 15px; margin-right: 12px; flex-shrink: 0; transition: color 0.25s ease; } .v4-input-group:focus-within > i:first-child { color: #4ECDC4 !important; } .v4-input-group .v4-input, .v4-input-group .form-input.v4-input { flex: 1; background: transparent !important; border: none !important; box-shadow: none !important; color: #ffffff !important; padding: 14px 0; font-size: 15px; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; outline: none; text-align: left; } .v4-input::placeholder, .v4-input-group .form-input.v4-input::placeholder { color: rgba(255, 255, 255, 0.4) !important; } /* Plain (no icon) variant for customizeRoom inputs */ .v4-input-plain { width: 100%; padding: 14px 16px; background: rgba(10, 25, 41, 0.6) !important; border: 1px solid rgba(78, 205, 196, 0.22) !important; border-radius: 0 !important; color: #ffffff !important; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; font-size: 15px; outline: none; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .v4-input-plain::placeholder { color: rgba(255, 255, 255, 0.4) !important; } .v4-input-plain:focus { border-color: #4ECDC4 !important; background: rgba(10, 25, 41, 0.9) !important; box-shadow: 0 0 12px rgba(78, 205, 196, 0.3); } /* Password-toggle inside input-group */ .v4-input-group .password-toggle { color: rgba(255, 255, 255, 0.5) !important; border-radius: 0 !important; background: transparent !important; width: 44px; height: 44px; } .v4-input-group .password-toggle:hover { color: #4ECDC4 !important; background: rgba(78, 205, 196, 0.08) !important; } /* === Validation error state === */ .v4-input-group.input-error { border-color: rgba(255, 75, 75, 0.55) !important; background: rgba(255, 75, 75, 0.06) !important; } /* === Inline error message === */ .v4-error { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 16px; border-radius: 0; background: rgba(255, 75, 75, 0.1); border: 1px solid rgba(255, 75, 75, 0.3); color: #ff8a8a; font-size: 13px; text-align: left; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; } .v4-error i { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; flex-shrink: 0; font-size: 14px; } /* === Hint text (for customizeRoom hints) === */ .v4-hint { margin: 6px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.5); font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; } /* === Label for customizeRoom field labels === */ .v4-label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85); font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 4px; display: block; } /* === Field spacing for customizeRoom === */ .v4-field { display: block; margin-bottom: 16px; } /* === List-item (option row) for customizeRoom toggles + room-list === * Sharp corners + teal accent on hover/active. */ .v4-list-item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; border: 1px solid rgba(78, 205, 196, 0.18) !important; background: rgba(10, 25, 41, 0.4) !important; border-radius: 0 !important; color: #ffffff !important; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .v4-list-item:hover, .v4-list-item:focus-within { border-color: rgba(78, 205, 196, 0.5) !important; background: rgba(10, 25, 41, 0.7) !important; box-shadow: 0 0 8px rgba(78, 205, 196, 0.2); } .v4-list-item-text { font-size: 15px; font-weight: 600; color: #ffffff; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; } /* === Switch (V4 teal) for toggle === * Replaces vendor green-tinted .cr-switch. */ .v4-switch { width: 54px; height: 28px; border-radius: 0; background: rgba(78, 205, 196, 0.18) !important; border: 1px solid rgba(78, 205, 196, 0.25) !important; position: relative; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .v4-switch::after { content: ''; position: absolute; top: 50%; left: 3px; width: 20px; height: 20px; transform: translateY(-50%); border-radius: 0; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); transition: left 0.2s ease; } .v4-list-item input:checked ~ .v4-switch, .v4-list-item input:checked + .v4-switch { background: linear-gradient(90deg, #4ECDC4, #2D8B83) !important; border-color: rgba(78, 205, 196, 0.7) !important; box-shadow: 0 0 8px rgba(78, 205, 196, 0.35); } .v4-list-item input:checked ~ .v4-switch::after, .v4-list-item input:checked + .v4-switch::after { left: 29px; } /* === Primary button (V4 cyan glow) === * Mirrors v4-hero.css .v4-button-primary but scoped for * form-submit contexts. */ .v4-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; border: none; border-radius: 0; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease; text-decoration: none; line-height: 1.2; width: 100%; margin-top: 12px; } .v4-btn-primary { background: linear-gradient(65deg, #2b5f8e 0%, #4ecdc4 100%); color: #ffffff; box-shadow: 0 0 24px rgba(78, 205, 196, 0.4); } .v4-btn-primary:hover:not(:disabled) { box-shadow: 0 0 36px rgba(78, 205, 196, 0.7); transform: translateY(-1px); } .v4-btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 0 18px rgba(78, 205, 196, 0.5); } .v4-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } /* === Secondary button (outline) === */ .v4-btn-secondary { background: transparent !important; color: #4ECDC4 !important; border: 1px solid rgba(78, 205, 196, 0.5); box-shadow: none; } .v4-btn-secondary:hover:not(:disabled) { background: rgba(78, 205, 196, 0.1) !important; box-shadow: 0 0 12px rgba(78, 205, 196, 0.3); transform: translateY(-1px); } /* === Pulse animation for primary CTA (vendor .pulse compat) === */ .v4-btn-primary.pulse, .v4-pulse { animation: v4-pulse 2.5s ease-in-out infinite; } @keyframes v4-pulse { 0%, 100% { box-shadow: 0 0 24px rgba(78, 205, 196, 0.4); } 50% { box-shadow: 0 0 32px rgba(78, 205, 196, 0.65); } } /* === Room-input-row: input + small action button side by side === */ .v4-room-row { display: flex; gap: 8px; margin-bottom: 16px; } .v4-room-row .v4-input-group { flex: 1; margin-bottom: 0; } .v4-icon-btn { flex: 0 0 auto; padding: 0 14px; background: rgba(78, 205, 196, 0.08) !important; border: 1px solid rgba(78, 205, 196, 0.3) !important; border-radius: 0 !important; color: #4ECDC4 !important; font-size: 16px; cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease; } .v4-icon-btn:hover { background: rgba(78, 205, 196, 0.18) !important; box-shadow: 0 0 12px rgba(78, 205, 196, 0.35); } /* === Divider (used between primary + secondary actions) === */ .v4-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: rgba(255, 255, 255, 0.4); font-size: 13px; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; } .v4-divider::before, .v4-divider::after { content: ''; flex: 1; height: 1px; background: rgba(78, 205, 196, 0.18); } /* === Spinner dots (V4 teal) — used by waiting-room === */ .v4-spinner { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; } .v4-spinner-dot { width: 12px; height: 12px; border-radius: 0; background: #4ECDC4; animation: v4-dotBounce 1.4s ease-in-out infinite; } .v4-spinner-dot:nth-child(2) { animation-delay: 0.2s; } .v4-spinner-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes v4-dotBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; } 40% { transform: scale(1); opacity: 1; } } /* === Elapsed / muted text === */ .v4-muted { font-size: 13px; color: rgba(255, 255, 255, 0.5); font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; } .v4-muted i { font-family: "Font Awesome 6 Free"; font-weight: 400; font-style: normal; margin-right: 5px; font-size: 12px; } /* === Status text (waiting-room ready) === */ .v4-status { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: 24px; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; } .v4-status.ready { color: #4ECDC4; font-weight: 600; } /* === Footer-wordmark override === */ .v4-footer-wordmark { height: auto; width: 200px; max-width: 60vw; display: block; filter: drop-shadow(0 0 8px rgba(78, 205, 196, 0.35)); } /* === Header-wordmark override === */ .v4-header-wordmark { height: auto; width: 220px; max-width: 60vw; display: block; filter: drop-shadow(0 0 6px rgba(78, 205, 196, 0.3)); } /* === V4 site-footer — page-bottom strip (no card) === * Some vendor pages (RtmpStreamer.css) style .container with * background + border + box-shadow — when those pages wrap the * V4 site-footer markup in a .container, the footer gets card * styling. Override here so the footer renders as a page-bottom * strip on every V4 sister-page, regardless of vendor .container * quirks. Loaded LAST so cascade wins. */ .site-footer > .container { background: transparent; border: none; box-shadow: none; padding-left: 0; padding-right: 0; text-align: left; } /* === Mobile (<768px) === */ @media (max-width: 768px) { .v4-form-section { padding: 56px 16px 40px; } .v4-form-card { padding: 36px 24px !important; max-width: 100% !important; } .v4-form-title { font-size: 22px; } .v4-icon { width: 60px; height: 60px; } .v4-icon i { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; font-size: 26px; } } /* === Reduced-motion === */ @media (prefers-reduced-motion: reduce) { .v4-btn-primary.pulse, .v4-pulse { animation: none; } .v4-spinner-dot { animation: none; } } /* === Font Awesome 6 cascade-merge reset for nested glyphs === * .v4-form-section sets `font-family: 'IBM Plex Sans'` (line 35) and that * inherits to all descendants. Without an explicit reset, the FA6 `` * glyphs lose "Font Awesome 6 Free" via inheritance (Font Awesome's own * .fa-solid rule lands at the same specificity AFTER v4-views.css in the * cascade but renders tofu boxes in practice — observed by Pierre's * browser smoke-test). Explicit reset on the 3 fa-solid-nested selectors * restores the glyph font + weight + style. * NOTE: `.v4-muted i` is intentionally NOT in this list — it has its own * per-selector block above (line ~573) with `font-weight: 400` because the * only `` nested under `.v4-muted` is `fa-regular fa-clock` (waiting * timer, outline glyph). Including it here would override the 400 weight * via source-order and render the clock as a solid glyph. */ .v4-icon i, .v4-input-group > i:first-child, .v4-error i { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; } /* ============================================================ * HTML `hidden` attribute defensive override * ============================================================ * The HTML `hidden` attribute is supposed to set `display: none` * via the browser user-agent stylesheet (`[hidden] { display: none }`, * specificity 0,1,0). But several `.v4-*` rules below set * `display: flex` on classes like `.v4-error` (line 282) and * `.v4-divider` (line 512), and CustomizeRoom.css sets * `display: grid` on `.cr-qr-wrap`. Same specificity (0,1,0) — * cascade-order wins → the later-loaded external CSS displays the * element anyway, leaving an empty styled box on screen. * * Real symptom (Pierre's customizeRoom screenshot 2026-06-29): * rendered * as a red-styled empty
(because .v4-error sets background + * border). Same latent risk for any `[hidden]` element decorated * with a display-overriding class. * * Fix: re-assert `[hidden] { display: none }` with !important so * no class-level display rule can resurrect a hidden element. * Lives at the END of the file so it wins source-order against * any earlier selector of equal specificity. * ============================================================ */ [hidden] { display: none !important; } /* ============================================================ * V4 site-footer — page-bottom strip (full V4 footer pattern) * * PR-fix-#404-footer (2026-07-14) — was in landing.css, moved to * v4-views.css so error pages (404, 50X) that don't load * landing.css also render the footer correctly. The same patterns * are still in landing.css (older pages that explicitly load it), * which is fine — duplicate identical styles, no behavior change * for those pages. * * Original context: the landing page (landing.css line 1670+) had * the full footer styles, but error pages (404.html, 50X.html) * only load v4-views.css + v4-error-pages.css. Result: footers * rendered as default browser-styled
s — bullets, no flex * layout, items stacked left. Pierre's 2026-07-14 22:22 screenshot * showed "Privacy Policy" + "Contact: ASmiOS" hugging the bottom- * left corner. Fix: move (well, duplicate) the styles here. * * Cascade-merge: the duplicate in landing.css (if loaded) lands * later in cascade, so the identical-rule wins by source-order. * For pages that only load v4-views.css (404, 50X), the styles * are now defined here directly. * ============================================================ */ .list-reset { list-style: none; padding: 0; } .list-reset li { margin: 0; } .site-footer-inner { position: relative; display: flex; flex-wrap: wrap; padding-top: 48px; padding-bottom: 48px; } .footer-brand, .footer-links, .footer-social-links, .footer-copyright { flex: none; width: 100%; display: inline-flex; justify-content: center; } .footer-copyright { font-size: 14px; line-height: 22px; color: #8a94a7; } .footer-brand, .footer-links, .footer-social-links { margin-bottom: 24px; } .footer-social-links li { display: inline-flex; } .footer-social-links li + li { margin-left: 16px; } .footer-social-links li a { padding: 8px; } .footer-links li + li { margin-left: 24px; } .footer-social-icon { transform: scale(1); transition: transform 0.2s; } .footer-social-icon:hover { transform: scale(2); } @media (min-width: 641px) { .site-footer { margin-top: 20px; } .site-footer-inner { justify-content: space-between; padding-top: 64px; padding-bottom: 64px; } .footer-brand, .footer-links, .footer-social-links, .footer-copyright { flex: 50%; } .footer-brand, .footer-copyright { justify-content: flex-start; } .footer-links, .footer-social-links { justify-content: flex-end; } .footer-links { order: 1; margin-bottom: 0; } } /* V4 site-footer typography + link styles — was in landing.css (line * 1657-1668), moved to v4-views.css so error pages (404, 50X) that * don't load landing.css also render with the correct footer text * styling. Without these, footer links default to the browser's * link color (blue/purple + underlined) and the surrounding text * uses an unintended font weight. * * PR-fix-#404-footer (Pierre's 2026-07-14 22:26 follow-up): the * layout fix (move .site-footer-inner styles) revealed that the * COLOR + DECORATION + FONT-WEIGHT of the link text was also * missing from the error pages. Same root cause: the rules lived * in landing.css which 404.html + 50X.html don't load. * * Cascade-merge: identical rules still in landing.css for pages * that load it (landing, about, etc.) — duplicate, no behavior * change for those pages. For 404/50X, the rules are now defined * here directly. */ .site-footer { font-size: 14px; line-height: 22px; letter-spacing: 0px; } .site-footer a { color: #8a94a7; text-decoration: none; } .site-footer a:hover, .site-footer a:active { text-decoration: underline; } /* V4 footer brand logo sizing — was in landing.css (line 1142-1148). * Same PR-fix-#404-footer reasoning: error pages need this to render * the footer-brand logo at the correct 200px width + hover brightness * boost. Without it, the renders at its native 220px and the * hover effect (brightness + saturate + glow) doesn't fire. */ .footer-brand .header-logo-image { width: 200px; } .header-logo-image:hover { filter: brightness(1.5) saturate(1.2); box-shadow: 0 4px 15px rgba(0, 0, 255, 0.6); }