/** * Liquid Glass + Blueprint Grid — Web UI Kit * Stack: navy base → nested grid → blurred sketch wash → optional noise * Use with: class="lg-page" on or a wrapper; place content in .lg-content */ /* ── Font stack (optional: add link in HTML) ── */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* Site canvas — perceived midtone for the dashboard ambient recipe. The actual rendered page background is a vertical gradient #06101e → #0a1730 → #10213a (set on .lg-page::before below). This single-color fallback is set to the midpoint so any selector that reads --lg-bg-site directly gets the "lifted" tone, not flat #06101e (which read as too dark on its own). */ --lg-bg-site: #0a1730; /* Brand — canonical depth ramp (dashboard --color-deep / -mid / -light + brand.navy.700). */ --lg-navy-950: #06101e; --lg-navy-900: #0a1730; --lg-navy-850: #10213a; --lg-navy-800: #1A2740; --lg-white: #ffffff; /* Text rails — softened from pure white to canonical #e2e8f0 base (matches dashboard --color-text). Same opacity ladder. */ --lg-white-92: rgba(226, 232, 240, 0.92); --lg-white-70: rgba(226, 232, 240, 0.70); --lg-white-50: rgba(226, 232, 240, 0.50); --lg-white-12: rgba(255, 255, 255, 0.12); --lg-white-08: rgba(255, 255, 255, 0.08); --lg-white-06: rgba(255, 255, 255, 0.06); --lg-accent: #3dbbb0; --lg-accent-bright: #58efe0; --lg-accent-dim: rgba(61, 187, 176, 0.18); --lg-accent-glow: rgba(61, 187, 176, 0.35); /* Blueprint grid lines — softened to match dashboard ambient grid (was 0.09 / 0.04; dashboard uses 0.07 / 0.04 for major/minor). */ --lg-grid-major: rgba(255, 255, 255, 0.07); --lg-grid-minor: rgba(255, 255, 255, 0.04); --lg-grid-major-size: 64px; --lg-grid-minor-div: 4; /* Liquid glass — light frost (seamless over blueprint): white veil + blur + saturate */ --lg-glass-blur: 28px; --lg-glass-blur-lg: 36px; --lg-glass-saturate: 1.75; --lg-glass-radius: 24px; --lg-glass-radius-sm: 14px; --lg-glass-border: rgba(255, 255, 255, 0.22); --lg-glass-border-soft: rgba(255, 255, 255, 0.12); /* Stronger panels: slightly more opaque frost */ --lg-glass-bg-strong: linear-gradient( 155deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.12) 100% ); /* visionOS / HUD ink (same hue as --lg-bg-site, canonical #06101e). */ --lg-spatial-fill: rgba(6, 16, 30, 0.48); --lg-spatial-fill-deep: rgba(6, 16, 30, 0.62); --lg-spatial-blur: 40px; --lg-spatial-saturate: 1.2; --lg-spatial-radius: 26px; --lg-spatial-shadow: 0 28px 100px rgba(0, 0, 0, 0.55), 0 12px 48px rgba(0, 0, 0, 0.35); --lg-spatial-specular: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 1px 0 0 rgba(255, 255, 255, 0.06), inset -1px -1px 0 rgba(0, 0, 0, 0.35); /* Sketch / blueprint wash layer */ /* Set to 0 to disable blueprint sketch wash — its mix-blend-mode:screen was tinting the page cooler/bluer than the CollabIQ Dashboard's ambient-bg. Restore to 0.2 to bring back the blueprint texture. */ --lg-sketch-opacity: 0; --lg-sketch-blur: 48px; --lg-sketch-scale: 1.08; /* Type */ --lg-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --lg-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --lg-text-primary: var(--lg-white-92); --lg-text-secondary: rgba(255, 255, 255, 0.72); --lg-text-muted: rgba(255, 255, 255, 0.48); --lg-text-technical: rgba(255, 255, 255, 0.55); /* Motion */ --lg-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --lg-duration: 0.32s; } /* ── Page shell: blueprint + sketch + safe content area ── */ .lg-page { min-height: 100dvh; position: relative; isolation: isolate; color: var(--lg-text-secondary); font-family: var(--lg-font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .lg-page::before { content: ""; position: fixed; inset: 0; z-index: 0; /* Canonical dashboard depth gradient as the LOWEST background-image layer (renders behind the blueprint grid). Top-to-bottom dark→ lifted: #06101e → #0a1730 → #10213a. The flat --lg-bg-site remains as a paint fallback only. */ background-color: var(--lg-bg-site); background-image: linear-gradient(var(--lg-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--lg-grid-major) 1px, transparent 1px), linear-gradient(var(--lg-grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--lg-grid-minor) 1px, transparent 1px), linear-gradient(180deg, #06101e 0%, #0a1730 40%, #10213a 100%); background-size: var(--lg-grid-major-size) var(--lg-grid-major-size), var(--lg-grid-major-size) var(--lg-grid-major-size), calc(var(--lg-grid-major-size) / var(--lg-grid-minor-div)) calc(var(--lg-grid-major-size) / var(--lg-grid-minor-div)), calc(var(--lg-grid-major-size) / var(--lg-grid-minor-div)) calc(var(--lg-grid-major-size) / var(--lg-grid-minor-div)), 100% 100%; background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px, 0 0; } .lg-page::after { content: ""; position: fixed; inset: -8%; z-index: 1; background-image: url("../assets/blueprint-sketch-bg.png"); background-size: cover; background-position: center 28%; opacity: var(--lg-sketch-opacity); filter: blur(var(--lg-sketch-blur)) grayscale(1) brightness(1.35) contrast(0.92); transform: scale(var(--lg-sketch-scale)); pointer-events: none; mix-blend-mode: screen; } /* Ambient orb wash — mirrors the CollabIQ Dashboard ambient-bg recipe. Five blurred color orbs (teal / amber / blue / rose / teal-center) composited over the depth gradient on .lg-page::before. Replaces the old single-teal + dark-vignette stack which was too dim and pushed darkness back into the corners. The previous version sat at 0.07 teal alpha; the dashboard renders at 0.18 teal + 4 supporting orbs. A soft radial fade pulls a hint of darkness back to the corners (vs the old 180deg vignette which dimmed both top AND bottom). */ .lg-atmosphere { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle 600px at 5% 15%, rgba(61, 187, 176, 0.18), transparent 55%), radial-gradient(circle 500px at 95% 30%, rgba(245, 158, 11, 0.12), transparent 55%), radial-gradient(circle 400px at 25% 65%, rgba( 96, 165, 250, 0.10), transparent 55%), radial-gradient(circle 450px at 90% 85%, rgba(244, 63, 94, 0.08), transparent 55%), radial-gradient(circle 350px at 50% 50%, rgba(61, 187, 176, 0.10), transparent 55%), radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(6, 16, 30, 0.55) 100%); } .lg-atmosphere--noise { opacity: 0.35; 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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .lg-content { position: relative; z-index: 3; } /* ── Glass primitives (default = milky frost; background reads through backdrop-filter) ── */ .lg-glass { background: linear-gradient( 155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.08) 100% ); backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate)); -webkit-backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate)); border: 1px solid var(--lg-glass-border); border-radius: var(--lg-glass-radius); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36), 0 8px 28px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .lg-glass--strong { background: var(--lg-glass-bg-strong); backdrop-filter: blur(var(--lg-glass-blur-lg)) saturate(var(--lg-glass-saturate)); -webkit-backdrop-filter: blur(var(--lg-glass-blur-lg)) saturate(var(--lg-glass-saturate)); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38), 0 8px 28px rgba(0, 0, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .lg-glass--sm { border-radius: var(--lg-glass-radius-sm); } .lg-glass--flat { box-shadow: 0 0 0 1px var(--lg-glass-border-soft) inset; } /* Readability on light frost (dark blueprint bleeding through) */ .lg-glass p, .lg-glass .lg-lead { text-shadow: 0 1px 10px rgba(11, 18, 33, 0.42); } .lg-glass--spatial p, .lg-glass--spatial .lg-lead, .lg-glass--ink p, .lg-glass--ink .lg-lead { text-shadow: none; } /** * Spatial / ink-tint glass — darker HUD on #0B1221 (same RGB as site canvas). * Use when you want contrast vs. default light frost (.lg-glass). */ .lg-glass--spatial { background: var(--lg-spatial-fill); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--lg-spatial-radius); backdrop-filter: blur(var(--lg-spatial-blur)) saturate(var(--lg-spatial-saturate)); -webkit-backdrop-filter: blur(var(--lg-spatial-blur)) saturate(var(--lg-spatial-saturate)); box-shadow: var(--lg-spatial-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 1px 0 0 rgba(255, 255, 255, 0.06), inset -1px -1px 0 rgba(0, 0, 0, 0.3); } /* Alias: ink-tint frost */ .lg-glass--ink { background: rgba(11, 18, 33, 0.34); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(40px) saturate(1.15); -webkit-backdrop-filter: blur(40px) saturate(1.15); border-radius: var(--lg-glass-radius); box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42), 0 6px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 1px 0 0 rgba(255, 255, 255, 0.05); } .lg-glass--spatial-deep { background: var(--lg-spatial-fill-deep); border: 1px solid rgba(255, 255, 255, 0.09); backdrop-filter: blur(28px) saturate(1.35); -webkit-backdrop-filter: blur(28px) saturate(1.35); border-radius: 18px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 1px 0 0 rgba(255, 255, 255, 0.05); } /* ── Typography ── */ .lg-h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; color: var(--lg-text-primary); line-height: 1.15; } .lg-h2 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); font-weight: 600; letter-spacing: -0.02em; color: var(--lg-text-primary); } .lg-h3 { font-size: 1.05rem; font-weight: 600; color: var(--lg-text-primary); } .lg-lead { font-size: 1.0625rem; color: var(--lg-text-secondary); max-width: 52ch; } .lg-caption { font-family: var(--lg-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lg-text-technical); } .lg-mono { font-family: var(--lg-font-mono); font-size: 0.875rem; } /* ── Layout helpers ── */ .lg-container { width: min(1120px, 100% - 40px); margin-inline: auto; } .lg-section { padding-block: clamp(3rem, 8vw, 5.5rem); } .lg-grid-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* ── Nav (floating glass bar) ── */ .lg-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.1rem; margin-top: 1rem; } .lg-nav__brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--lg-text-primary); text-decoration: none; } .lg-nav__mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(145deg, var(--lg-accent-bright), var(--lg-accent)); box-shadow: 0 0 24px var(--lg-accent-glow); } .lg-nav__links { display: flex; align-items: center; gap: 0.35rem; list-style: none; flex-wrap: wrap; } .lg-nav__links a { padding: 0.45rem 0.85rem; border-radius: 999px; color: var(--lg-text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: background var(--lg-duration) var(--lg-ease-out), color var(--lg-duration) var(--lg-ease-out); } .lg-nav__links a:hover { background: var(--lg-white-08); color: var(--lg-text-primary); } .lg-nav__cta { display: flex; align-items: center; gap: 0.5rem; } /* ── Buttons ── */ .lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem 1.15rem; font-family: inherit; font-size: 0.9rem; font-weight: 600; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.2s var(--lg-ease-out), box-shadow 0.2s var(--lg-ease-out), background 0.2s var(--lg-ease-out), border-color 0.2s var(--lg-ease-out); } .lg-btn:active { transform: scale(0.98); } .lg-btn--primary { background: linear-gradient(180deg, var(--lg-accent-bright), var(--lg-accent)); color: var(--lg-navy-950); box-shadow: 0 4px 24px var(--lg-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .lg-btn--primary:hover { box-shadow: 0 6px 32px var(--lg-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .lg-btn--ghost { background: var(--lg-white-06); border-color: var(--lg-glass-border-soft); color: var(--lg-text-primary); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .lg-btn--ghost:hover { background: var(--lg-white-12); border-color: var(--lg-glass-border); } .lg-btn--outline { background: transparent; border-color: var(--lg-glass-border); color: var(--lg-text-primary); } .lg-btn--outline:hover { background: var(--lg-white-08); } /* ── Cards ── */ .lg-card { padding: 1.35rem 1.45rem; display: flex; flex-direction: column; gap: 0.65rem; } .lg-card__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--lg-accent-dim); border: 1px solid rgba(61, 187, 176, 0.25); display: grid; place-items: center; color: var(--lg-accent-bright); font-size: 1.1rem; } .lg-card__title { font-size: 1.05rem; font-weight: 600; color: var(--lg-text-primary); } .lg-card__body { font-size: 0.92rem; color: var(--lg-text-secondary); } /* ── Form controls ── */ .lg-field { display: flex; flex-direction: column; gap: 0.4rem; } .lg-label { font-family: var(--lg-font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lg-text-muted); } .lg-input, .lg-textarea { width: 100%; padding: 0.65rem 0.9rem; font-family: inherit; font-size: 0.95rem; color: var(--lg-text-primary); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--lg-glass-border-soft); border-radius: var(--lg-glass-radius-sm); outline: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.2s, box-shadow 0.2s; } .lg-input::placeholder, .lg-textarea::placeholder { color: var(--lg-text-muted); } .lg-input:focus, .lg-textarea:focus { border-color: rgba(61, 187, 176, 0.45); box-shadow: 0 0 0 3px var(--lg-accent-dim); } .lg-textarea { min-height: 120px; resize: vertical; } /* ── Badges & pills ── */ .lg-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; font-family: var(--lg-font-mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 6px; background: var(--lg-white-08); border: 1px solid var(--lg-glass-border-soft); color: var(--lg-text-technical); } .lg-badge--accent { background: var(--lg-accent-dim); border-color: rgba(61, 187, 176, 0.35); color: var(--lg-accent-bright); } /* ── Blueprint / title-block accents ── */ .lg-title-block { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; padding: 1rem 1.15rem; border: 1px solid var(--lg-glass-border); border-radius: var(--lg-glass-radius-sm); background: rgba(255, 255, 255, 0.03); font-family: var(--lg-font-mono); font-size: 0.7rem; color: var(--lg-text-muted); } .lg-scale-bar { display: flex; align-items: center; gap: 0.5rem; font-family: var(--lg-font-mono); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--lg-text-technical); } .lg-scale-bar__track { height: 4px; width: 120px; border-radius: 2px; background: linear-gradient( 90deg, var(--lg-white) 0 12px, transparent 12px 14px, var(--lg-white) 14px 26px, transparent 26px 28px, var(--lg-white) 28px 40px, transparent 40px 42px, var(--lg-white) 42px 54px, transparent 54px 56px, var(--lg-white) 56px 68px, transparent 68px 70px, var(--lg-white) 70px 82px, transparent 82px 84px, var(--lg-white) 84px 96px, transparent 96px 98px, var(--lg-white) 98px 100% ); opacity: 0.5; } /* ── Dividers ── */ .lg-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--lg-glass-border), transparent); margin-block: 1.5rem; } /* ── Hero strip ── */ .lg-hero { padding-block: clamp(2.5rem, 10vw, 5rem); } .lg-hero__inner { display: grid; gap: 1.5rem; max-width: 640px; } /* ── Spatial hero (visionOS-like floating UI on #0B1221) ── */ .lg-hero-spatial { padding: 0.5rem 0 clamp(2rem, 5vw, 3.5rem); } .lg-hero-spatial__wrap { width: min(1200px, 100% - 32px); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; } /* Top floating “browser” pill */ .lg-hero-spatial__topbar { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.85rem 0.45rem 0.65rem; max-width: min(520px, 100%); width: 100%; } .lg-hero-spatial__traffic { display: flex; gap: 6px; flex-shrink: 0; } .lg-hero-spatial__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.08); } .lg-hero-spatial__dot--r { background: rgba(255, 95, 87, 0.85); } .lg-hero-spatial__dot--y { background: rgba(255, 189, 46, 0.9); } .lg-hero-spatial__dot--g { background: rgba(52, 199, 89, 0.9); } .lg-hero-spatial__url { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--lg-text-muted); text-align: center; font-family: var(--lg-font-mono); letter-spacing: 0.02em; } /* Three-column stage */ .lg-hero-spatial__stage { display: grid; grid-template-columns: 52px minmax(0, 1fr) min(220px, 26vw); gap: 12px; align-items: stretch; width: 100%; } /* Left vertical rail */ .lg-hero-spatial__rail { display: flex; flex-direction: column; align-items: center; padding: 0.85rem 0.35rem; gap: 0.65rem; } .lg-hero-spatial__rail-btn { width: 38px; height: 38px; border-radius: 11px; border: none; background: rgba(255, 255, 255, 0.06); color: var(--lg-text-secondary); cursor: default; display: grid; place-items: center; font-size: 1rem; transition: background 0.2s var(--lg-ease-out), color 0.2s var(--lg-ease-out); } .lg-hero-spatial__rail-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--lg-text-primary); } .lg-hero-spatial__rail-btn--active { background: rgba(61, 187, 176, 0.2); color: var(--lg-accent-bright); box-shadow: 0 0 0 1px rgba(61, 187, 176, 0.25); } /* Center window */ .lg-hero-spatial__window { display: flex; flex-direction: column; min-height: min(420px, 58vh); overflow: hidden; } .lg-hero-spatial__canvas { flex: 1; position: relative; border-radius: 18px; margin: 0.65rem 0.65rem 0; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(61, 187, 176, 0.15), transparent 55%), radial-gradient(ellipse 60% 50% at 20% 80%, rgba(99, 102, 241, 0.08), transparent 50%), linear-gradient(165deg, #141c2e 0%, #0b1221 45%, #0d1528 100%); } .lg-hero-spatial__canvas-inner { position: absolute; inset: 0; padding: clamp(1.25rem, 4vw, 2rem); display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75rem; } .lg-hero-spatial__canvas .lg-h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); } .lg-hero-spatial__canvas .lg-lead { margin: 0; max-width: 42ch; } .lg-hero-spatial__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.35rem; } /* Bottom media strip (darker glass) */ .lg-hero-spatial__controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: 0.65rem 1rem; margin: 0.65rem; } .lg-hero-spatial__ctrl { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.08); color: var(--lg-text-primary); display: grid; place-items: center; cursor: default; font-size: 1rem; } .lg-hero-spatial__ctrl--primary { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; } /* Grab handle */ .lg-hero-spatial__grab { width: 52px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); margin: 0 auto 0.25rem; } /* Right panel */ .lg-hero-spatial__side { display: flex; flex-direction: column; padding: 0.85rem 0.75rem; gap: 0.65rem; min-height: 280px; } .lg-hero-spatial__side-head { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lg-text-muted); font-family: var(--lg-font-mono); } .lg-hero-spatial__chat { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; } .lg-hero-spatial__bubble { align-self: flex-start; max-width: 100%; padding: 0.45rem 0.6rem; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 0.78rem; color: var(--lg-text-secondary); line-height: 1.4; } .lg-hero-spatial__bubble--user { align-self: flex-end; background: rgba(61, 187, 176, 0.18); color: var(--lg-text-primary); } @media (max-width: 900px) { .lg-hero-spatial__stage { grid-template-columns: 1fr; } /* Hero window first on small screens */ .lg-hero-spatial__window { order: 1; } .lg-hero-spatial__rail { order: 2; } .lg-hero-spatial__side { order: 3; } .lg-hero-spatial__rail { flex-direction: row; justify-content: center; width: 100%; padding: 0.5rem 0.75rem; } .lg-hero-spatial__side { min-height: auto; } } /* ── Footer ── */ .lg-footer { padding: 2rem 0 2.5rem; font-size: 0.85rem; color: var(--lg-text-muted); } .lg-footer a { color: var(--lg-text-secondary); text-decoration: none; } .lg-footer a:hover { color: var(--lg-text-primary); } /* ── Focus visible (a11y) ── */ .lg-page :focus-visible { outline: 2px solid var(--lg-accent-bright); outline-offset: 2px; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .lg-btn { transition: none; } .lg-glass, .lg-glass--strong { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(11, 18, 33, 0.94); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } .lg-glass p, .lg-glass .lg-lead { text-shadow: none; } .lg-glass--spatial, .lg-glass--ink, .lg-glass--spatial-deep { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }