/* ============================================================ */ /* RCS Viewer Landing Page — Custom Styles */ /* Dark Glassmorphism + Film Grain + Camera-Inspired Identity */ /* ============================================================ */ /* --- Utility Keyframes --- */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes genPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.96); } } .s5-gen-pulse { animation: genPulse 1.8s ease-in-out infinite; } /* --- Base --- */ html { scroll-behavior: smooth; scrollbar-width: none; } ::-webkit-scrollbar { display: none; } body { background-color: #0A0A0A; position: relative; } /* Hero FOUT killer: keep the hero block invisible until Poppins + Red Hat Display finish loading. main.js removes .hero-waiting from via document.fonts.load() (+150ms settle) and fires the GSAP entrance tween from that state. */ html.hero-waiting #hero-text, html.hero-waiting #hero-device { opacity: 0; } /* --- Navbar Shrinking --- */ #navbar { transition: background 0.3s ease, backdrop-filter 0.3s ease, border-bottom 0.3s ease; transform: translateY(0) !important; } #navbar.scrolled { background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } #navbar.scrolled .navbar-inner { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; transition: padding 0.3s ease; } /* Logo does not shrink on scroll */ #navbar img { transition: none; } /* --- Hero Muted Text --- */ .hero-muted { /* Font family controlled by JS hero-copy-switcher.js */ font-weight: 400; opacity: 0.5; } /* --- Discover Button Pulsing Dot --- */ .discover-dot { transition: all 0.3s ease; } /* Pulse animation for hover state */ @keyframes pulse-red { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } } /* Hover state: red pulsing dot + subtle glow */ a[href="#explore"]:hover .discover-dot { background: #B91C1C; box-shadow: 0 0 8px rgba(185, 28, 28, 0.6); animation: pulse-red 1.5s ease-in-out infinite; } /* Request Access LED - muted default, bright + pulse on hover */ .request-access-dot { opacity: 0.3; transition: opacity 0.3s ease; } #request-access-btn:hover .request-access-dot { opacity: 1; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Hide scrollbar for carousels */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* --- Glass Cards --- */ .glass-card { background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .glass-card-strong { background: rgba(15, 15, 15, 0.85); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } /* --- S4 Collaboration Cards (glass style) --- */ .collab-card { position: relative; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 50%, rgba(255, 255, 255, 0.025) 100% ); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 8px 12px; min-width: 180px; overflow: hidden; } .collab-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 10%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.12) 70%, transparent 90% ); pointer-events: none; } .collab-card::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 80% ); pointer-events: none; } .collab-card-inner { display: flex; align-items: center; gap: 10px; } .collab-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(var(--card-accent), 0.25); } .collab-avatar span { font-size: 9px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.8); } .collab-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .collab-top-row { display: flex; align-items: center; gap: 6px; } .collab-name { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.85); white-space: nowrap; } .collab-dept { font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 4px; white-space: nowrap; letter-spacing: 0.02em; } .collab-element-row { display: flex; align-items: center; gap: 4px; } .collab-icon { width: 11px; height: 11px; flex-shrink: 0; } .collab-element-label { font-size: 10px; color: rgba(255,255,255,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Liquid Glass Effect (SVG displacement-based, inspired by cube.dev / winaviation) --- */ /* The main glass panel uses an inline SVG filter for real refraction. This CSS class handles the visual layers around it. */ .liquid-glass { position: relative; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 50%, rgba(255, 255, 255, 0.03) 100% ); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 40px rgba(255, 255, 255, 0.01); overflow: hidden; } /* Specular highlight — top edge refraction */ .liquid-glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 5%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.15) 80%, transparent 95% ); z-index: 5; } /* Left edge specular */ .liquid-glass::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.06) 40%, transparent 80% ); z-index: 5; } /* Inner specular bloom (separate element) */ .liquid-glass-specular { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( ellipse 80% 50% at 30% 10%, rgba(255, 255, 255, 0.08) 0%, transparent 60% ); pointer-events: none; z-index: 4; } /* Grain inside glass */ .liquid-glass-grain { position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 128px; opacity: 0.04; mix-blend-mode: overlay; pointer-events: none; z-index: 3; } /* Inner border highlight ring */ .liquid-glass-border { position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 5; } /* --- Film Grain Overlay — matte plastic camera texture --- */ /* background-image is set by JS (canvas-generated noise texture) */ #grain-overlay { opacity: 0.018; } /* --- Navbar --- */ #navbar { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0); transition: background 0.3s, border-color 0.3s, padding 0.3s; } #navbar.scrolled { background: rgba(10, 10, 10, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: rgba(255, 255, 255, 0.06); } #navbar.scrolled > div { padding-top: 1rem; padding-bottom: 1rem; } /* --- Hero Section --- */ #hero-phone-wrapper { transition: transform 0.15s ease-out; } /* --- Hero Loading: Animated Dots --- */ .hero-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; transition: opacity 0.8s ease; } .hero-loader.hidden { opacity: 0; pointer-events: none; } .hero-dots { display: flex; gap: 10px; align-items: center; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.08); animation: dotPulse 1.6s ease-in-out infinite; } .hero-dot:nth-child(1) { animation-delay: 0s; } .hero-dot:nth-child(2) { animation-delay: 0.15s; } .hero-dot:nth-child(3) { animation-delay: 0.3s; } .hero-dot:nth-child(4) { animation-delay: 0.45s; } @keyframes dotPulse { 0%, 80%, 100% { background: rgba(255,255,255,0.06); transform: scale(1); } 40% { background: rgba(255,255,255,0.30); transform: scale(1.2); } } /* --- 2D Phone Fallback (Firefox/Edge) --- */ .hero-phone-2d { width: 100%; height: 80vh; max-height: 700px; min-height: 500px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.6s ease; } .hero-phone-2d.visible { opacity: 1; } .hero-phone-2d-frame { width: 520px; max-width: 90vw; position: relative; box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.3); border-radius: 18px; overflow: hidden; } .hero-phone-2d-frame video { width: 100%; display: block; border-radius: 14px; } .hero-phone-2d-bezel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; z-index: 2; } /* (Glass shards removed — replaced by subtle radial glow behind phone) */ /* Glass Pill — reusable glassmorphism for buttons, inputs, cards. SVG displacement filter is applied via JS (liquid-glass.js). Do NOT use backdrop-filter here — it conflicts with CSS filter property. */ .glass-pill { background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%); border: none; box-shadow: 0 2px 16px -2px rgba(0,0,0,0.4); transition: box-shadow 0.2s, filter 0.2s; overflow: hidden; } .glass-pill:hover { box-shadow: 0 4px 24px -2px rgba(0,0,0,0.5); } /* --- Section Fade-in Animations --- */ .fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .fade-up.visible { opacity: 1; transform: translateY(0); } /* --- Collaboration Overlay Elements (legacy) --- */ .collab-element { transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(12px) scale(0.92); } .collab-element.visible { opacity: 1 !important; transform: translateY(0) scale(1); } /* --- S4 Overlay: PNG elements + cards --- */ .s4-overlay-el { position: absolute; opacity: 0; pointer-events: none; z-index: 10; height: auto; } .s4-overlay-card { position: absolute; opacity: 0; pointer-events: auto; z-index: 15; } /* --- Feature Tiles Hover --- */ .feature-tile { transition: transform 0.3s ease, border-color 0.3s ease; } .feature-tile:hover { transform: translateY(-4px); } /* --- Device Parallax Items --- */ .device-item { transition: transform 0.1s linear; } /* --- Storyboard Carousel --- */ #storyboard-carousel { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } /* --- Poster Carousel --- */ #poster-carousel { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } /* --- Stats Count-up --- */ [data-count] { font-variant-numeric: tabular-nums; } /* --- Red Accent Line (top of cards on hover) --- */ .glass-card .absolute.h-px { transition: opacity 0.3s ease; } /* --- Feature Tile Illustrations --- */ .feature-tile { position: relative; } .tile-illustration { pointer-events: none; min-height: 180px; } .tile-img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 65%; height: auto; opacity: 0.85; pointer-events: none; transition: transform 0.4s ease, opacity 0.4s ease; } /* Text sits above the image */ .feature-tile > div:first-child { position: relative; z-index: 1; } /* Subtle upward shift on card hover */ .feature-tile:hover .tile-img { transform: translateX(-50%) translateY(-4px); opacity: 1; } /* --- Floating Note Card (on Drawover tile) --- */ .tile-note-card { position: absolute; z-index: 2; background: rgba(0,0,0,0.5); backdrop-filter: blur(60px) saturate(1.2); -webkit-backdrop-filter: blur(60px) saturate(1.2); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 16px; pointer-events: none; transition: background 0.2s ease; } .feature-tile:hover .tile-note-card { background: rgba(0,0,0,0.6); } .tile-note-text { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.75); line-height: 1.4; display: block; } /* Tile click: saturate illustration */ .feature-tile .tile-img { transition: transform 0.4s ease, opacity 0.4s ease, filter 0.6s ease; } .feature-tile.tile-active .tile-img { filter: saturate(150%) !important; } /* Higher saturation for less colorful tiles */ #tile-2.tile-active .tile-img, #tile-3.tile-active .tile-img, #tile-6.tile-active .tile-img { filter: saturate(180%) !important; } /* --- S9 Form Select Dropdown --- */ #s9-form select option { background: #111; color: rgba(255,255,255,0.7); } #s9-form select:has(option[value=""]:checked) { color: rgba(255,255,255,0.2); } #s9-form select:not(:has(option[value=""]:checked)) { color: rgba(255,255,255,0.9); } /* ═══════════ S9 CTA PIN WRAP ═══════════ Wrap is taller than the viewport so the sticky #cta stays visible for var(--s9-cta-pin) of scroll before releasing. var(--s9-cta-gap) adds empty scroll after the pin before Services. */ .s9-cta-wrap { /* Defaults — override via Resp tab S9 (sets --r-s9-* on :root) */ --s9-cta-pin: var(--r-s9-cta-pin, 31vh); --s9-cta-gap: var(--r-s9-cta-gap, 0vh); --s9-cta-start: var(--r-s9-cta-start, 0vh); --s9-sticky-top: var(--r-s9-sticky-top, 0px); position: relative; margin-top: var(--s9-cta-start); min-height: calc(var(--app-height, 100vh) + var(--s9-cta-pin)); margin-bottom: var(--s9-cta-gap); } .s9-cta-wrap > #cta { position: sticky; top: var(--s9-sticky-top, 0px); min-height: var(--app-height, 100vh); display: flex; align-items: center; justify-content: center; } .s9-cta-wrap > #cta > div { width: 100%; } /* Visual Y offset for the whole centered block (headline + desc + form + links) without touching pin or background image. Controlled by universal-debug. */ #s9-content { /* Baked from live snapshot */ --s9-content-offset: 32px; transform: translateY(var(--s9-content-offset)); } /* ═══════════ S9 LIQUID GLASS FORM ═══════════ Hardcoded from the NAB-clean login-card *locked* values (auth/debug-login.js DEFAULTS after tuning, committed as: "lock all tuned values — blur 9.5, brightness 0.62, specular 0.055" "lock specular 0.03, border-grad 0.11/0.07"). Do NOT touch these numbers without re-tuning the whole stack. */ /* ═══════════ S9 BACKGROUND IMAGE ═══════════ Sits behind everything in #cta, fades up so it's most visible at the bottom of the page (signaling 'end of site'). Tunable via universal-debug. */ .s9-bg { /* Baked from live snapshot */ --s9-bg-opacity: 0.12; --s9-bg-blur: 3.5px; --s9-bg-saturate: 0; --s9-bg-brightness: 0.34; --s9-bg-fade-start: 0%; --s9-bg-fade-end: 90%; --s9-bg-pos-x: 50%; --s9-bg-pos-y: 77%; --s9-bg-scale: 1; position: absolute; inset: 0; background-image: url('../assets/hiw/step3-explore.webp'); background-size: cover; background-position: var(--s9-bg-pos-x) var(--s9-bg-pos-y); background-repeat: no-repeat; opacity: var(--s9-bg-opacity); filter: blur(var(--s9-bg-blur)) saturate(var(--s9-bg-saturate)) brightness(var(--s9-bg-brightness)); transform: scale(var(--s9-bg-scale)); transform-origin: center center; -webkit-mask-image: linear-gradient(to top, black var(--s9-bg-fade-start), transparent var(--s9-bg-fade-end)); mask-image: linear-gradient(to top, black var(--s9-bg-fade-start), transparent var(--s9-bg-fade-end)); z-index: 0; pointer-events: none; } .s9-form-glass { /* Baked from live snapshot — locked tuning values */ --s9-maxw: 600px; --s9-pad-top: 36px; --s9-pad-x: 36px; --s9-pad-bottom: 36px; --s9-radius: 11px; --s9-blur: 9.5px; --s9-saturate: 1.3; --s9-brightness: 0.62; --s9-shadow-a: 0.18; --s9-border-a: 0.01; --s9-tint-a: 0.03; --s9-tint-b: 0.015; --s9-tint-c: 0.015; --s9-grain-a: 0.015; position: relative; max-width: var(--s9-maxw); padding: var(--s9-pad-top) var(--s9-pad-x) var(--s9-pad-bottom); border-radius: var(--s9-radius); background: linear-gradient( 145deg, rgba(255, 255, 255, var(--s9-tint-a)) 0%, rgba(255, 255, 255, var(--s9-tint-b)) 50%, rgba(255, 255, 255, var(--s9-tint-c)) 100% ); backdrop-filter: blur(var(--s9-blur)) saturate(var(--s9-saturate)) brightness(var(--s9-brightness)); -webkit-backdrop-filter: blur(var(--s9-blur)) saturate(var(--s9-saturate)) brightness(var(--s9-brightness)); border: 1px solid rgba(255, 255, 255, var(--s9-border-a)); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, var(--s9-shadow-a)), inset 0 1px 0 rgba(255, 255, 255, 0.015), inset 0 0 40px rgba(255, 255, 255, 0.006); overflow: hidden; } .s9-form-glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 5%, rgba(255, 255, 255, 0.066) 20%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.066) 80%, transparent 95% ); z-index: 5; pointer-events: none; } .s9-form-glass::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.036) 45%, transparent 85% ); z-index: 5; pointer-events: none; } .s9-form-specular { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( ellipse 80% 50% at 30% 10%, rgba(255, 255, 255, 0.03) 0%, transparent 60% ); pointer-events: none; z-index: 1; } .s9-form-grain { position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 128px; opacity: var(--s9-grain-a, 0.03); mix-blend-mode: overlay; pointer-events: none; z-index: 2; } .s9-form-border { position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.07) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 6; } .s9-form-content { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 22px; } /* Inputs — locked values from debug-login DEFAULTS Buttons/selects/inputs don't inherit body font by default — force it. */ .s9-form-glass .s9-input { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.095); border-radius: 7px; padding: 12px 14px; font-family: inherit; transition: border-color 0.2s, background 0.2s; } .s9-form-glass .s9-input::placeholder { color: rgba(255, 255, 255, 0.25); } .s9-form-glass .s9-input:focus { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.09); box-shadow: none; } /* ═══════════ S9 CUSTOM GLASS DROPDOWN ═══════════ Native