:root { /* Palette & Theming */ --bg-deep: #02040a; --surface: rgba(10, 14, 23, 0.65); --surface-elevated: rgba(15, 23, 42, 0.8); --border: rgba(51, 65, 85, 0.4); --text-main: #f8fafc; --text-muted: #94a3b8; --text-dark: #64748b; --accent-blue: #38bdf8; --accent-glow: rgba(56, 189, 248, 0.35); --accent-green: #34d399; --accent-red: #fb7185; /* Transitions */ --timing: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* --- Reset & Layout --- */ /* Carry the void colour on too, so page cross-fades never flash white. */ html { background-color: var(--bg-deep); } body { box-sizing: border-box; /* include the 2rem padding in min-height:100vh (no phantom scroll) */ isolation: isolate; /* own stacking context so the z-index:-1 #starfield paints over the body bg */ background-color: var(--bg-deep); color: var(--text-main); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* --- Page cross-fade fallback (cross-origin / browsers without View Transitions) --- NOTE: no fade-IN here on purpose. A body fade-in makes the View Transition snapshot the incoming page while it's still transparent, which dissolves to a dark/empty frame before the content appears (a reversed "darken then lighten" flash). The native VT below handles the same-origin entrance; this just fades the OUTGOING page for cross-origin / non-VT navigations. */ body.is-leaving { opacity: 0; transition: opacity 0.3s ease; } /* --- Native cross-document View Transitions ------------------------------- */ /* Only fires for SAME-ORIGIN navigations (bibby.cloud <-> bibby.cloud/orbit), so the gateway and Orbit morph into each other. Reaching orbit.bibby.cloud directly is cross-origin -> the JS cross-fade above handles it instead. */ @view-transition { navigation: auto; } /* Clean dissolve: keep the NEW page fully OPAQUE underneath and only fade the OLD page out on top. The browser default animates BOTH opacities at once, which briefly thins the combined layer and lets the dark backdrop show through (a momentary darken). Fading just the old layer over an opaque new one avoids it. */ ::view-transition-new(root) { animation: none; } ::view-transition-old(root) { animation: vtRootFadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes vtRootFadeOut { from { opacity: 1; } to { opacity: 0; } } /* Shared element: the header is lifted out of the cross-fade and morphs in place across the navigation, so "// BIBBY/CLOUD" feels continuous. */ header { view-transition-name: site-header; } #starfield { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 30%, #0a0f1c 0%, #02040a 100%); } .container { max-width: 1000px; width: 100%; z-index: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* --- Typography & Headers --- */ header { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; user-select: none; text-align: center; gap: 0.5rem; } header h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; margin: 0; color: #fff; letter-spacing: 0.1em; text-transform: uppercase; } header h1 span { color: var(--accent-blue); } .node-tag { font-family: monospace; font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.1em; background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 0.4rem 1rem; border-radius: 4px; } /* --- Dashboard Sections & Grids --- */ .dashboard-sections { display: flex; flex-direction: column; gap: 2rem; margin-top: 1rem; } .section-block { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .section-title { font-size: 0.85rem; font-family: monospace; color: var(--text-muted); margin: 0 0 1.25rem 0; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; user-select: none; } .link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .link-grid.expanded { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 2rem; margin-top: 1rem; } /* --- Navigation Buttons --- */ .btn-link { background: rgba(15, 23, 42, 0.5); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem 1rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; text-decoration: none; color: var(--text-main); font-family: monospace; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.95rem; transition: all var(--timing); } .btn-link.large { padding: 1.5rem; font-size: 1.1rem; background: var(--surface); border-radius: 12px; font-weight: 700; } .btn-link i { font-size: 1.1rem; color: var(--text-dark); transition: color var(--timing); } .btn-link.large i { font-size: 1.25rem; } /* Self-hosted SVG icons (sprite at /shared/icons.svg) — fill follows text color */ .icon { width: 1.1rem; height: 1.1rem; fill: currentColor; flex-shrink: 0; vertical-align: -0.15em; color: var(--text-dark); transition: color var(--timing); } .btn-link.large .icon { width: 1.25rem; height: 1.25rem; } .btn-link:hover { border-color: var(--accent-blue); background: rgba(255, 255, 255, 0.05); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.4), 0 0 15px rgba(56, 189, 248, 0.1); color: var(--accent-blue); } .btn-link:hover i, .btn-link:hover .icon { color: var(--accent-blue); } .accent-target:hover { border-color: var(--accent-green); color: var(--accent-green); box-shadow: 0 10px 20px rgba(0,0,0,0.4), 0 0 15px rgba(52, 211, 153, 0.1); } .accent-target:hover i, .accent-target:hover .icon { color: var(--accent-green); } /* --- Security Notices --- */ .vpn-notice { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); margin: 2rem auto; max-width: 600px; } .vpn-notice h3 { margin: 0 0 1rem 0; font-family: monospace; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.1rem; font-weight: 700; } .vpn-notice p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; } /* --- Orbit Specific Data Blocks --- */ .ip-box { background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), var(--surface-elevated)); border: 1px solid var(--border); border-radius: 16px; padding: 3rem 2rem; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); margin-bottom: 2rem; position: relative; cursor: pointer; transition: all var(--timing); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ip-box:hover { transform: translateY(-4px); border-color: rgba(56, 189, 248, 0.5); box-shadow: 0 25px 50px rgba(0,0,0,0.6), 0 0 40px rgba(56, 189, 248, 0.1); } .ip-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent-blue), transparent); border-radius: 16px 16px 0 0; opacity: 0.8; } .ip-label { font-size: 0.875rem; color: var(--accent-blue); text-transform: uppercase; font-weight: 700; letter-spacing: 0.15em; margin-bottom: 0.75rem; user-select: none; } .ip-value { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; color: #ffffff; margin: 0; font-family: monospace; letter-spacing: -0.02em; text-shadow: 0 0 20px var(--accent-glow); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color var(--timing); } .card:hover { border-color: rgba(148, 163, 184, 0.3); } .card-title { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 1.25rem 0; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; user-select: none; } .data-row { display: flex; justify-content: space-between; margin-bottom: 0.75rem; font-size: 0.9rem; align-items: center; } .data-row:last-child { margin-bottom: 0; } .label { color: var(--text-dark); user-select: none; } .value { color: var(--text-main); font-family: monospace; text-align: right; } .highlight-blue { color: var(--accent-blue); font-weight: 600; text-shadow: 0 0 10px rgba(56, 189, 248, 0.2); } .highlight-green { color: var(--accent-green); font-weight: 600; text-shadow: 0 0 10px rgba(52, 211, 153, 0.2); } .highlight-red { color: var(--accent-red); font-weight: 600; } .ua-card { grid-column: 1 / -1; } .ua-string { font-size: 0.85rem; color: var(--text-muted); font-family: monospace; word-break: break-all; line-height: 1.6; background: rgba(0,0,0,0.4); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); margin-top: 0.5rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); } .copyable { cursor: pointer; transition: all 0.2s ease; position: relative; } .copyable:hover { color: var(--accent-blue); text-shadow: 0 0 8px var(--accent-glow); } /* --- Loading & Toasts --- */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .loading { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; color: var(--text-dark); } #toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--accent-blue); color: #000; padding: 0.8rem 1.5rem; border-radius: 4px; font-family: monospace; font-size: 0.9rem; font-weight: bold; opacity: 0; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); pointer-events: none; } #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* --- Footers --- */ footer { text-align: center; margin-top: 3rem; font-family: monospace; font-size: 0.75rem; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.1em; z-index: 1; user-select: none; } /* ========================================== HOLOGRAPHIC GLITCH ENGINE (Error Pages) ========================================== */ .error-code { font-size: clamp(4rem, 10vw, 8rem); font-weight: 900; line-height: 1; margin: 0; font-family: monospace; letter-spacing: -0.05em; position: relative; display: inline-block; animation: core-glitch 6s infinite; } @keyframes core-glitch { 0%, 85% { text-shadow: 0 0 30px currentColor; transform: none; opacity: 1; filter: blur(0px); } 86% { text-shadow: -6px 0 var(--accent-red), 6px 0 var(--accent-blue); transform: skewX(8deg); opacity: 0.8; filter: blur(1px); } 88% { text-shadow: 6px 0 var(--accent-red), -6px 0 var(--accent-blue); transform: skewX(-12deg); opacity: 0.9; filter: blur(0px); } 90% { text-shadow: -3px 0 var(--accent-blue), 3px 0 var(--accent-red); transform: skewX(3deg); } 92% { text-shadow: 0 0 30px currentColor; transform: none; opacity: 1; } 95% { transform: scaleY(1.1) scaleX(0.95); opacity: 0.6; } 96%, 100% { transform: none; text-shadow: 0 0 30px currentColor; opacity: 1; } } /* ADMIN MATRIX STYLES */ .matrix-container { margin-top: 4rem; padding: 2rem; border: 1px solid var(--accent-red); background: rgba(185, 28, 28, 0.05); border-radius: 8px; animation: fadeIn 0.8s ease; } .matrix-header { color: var(--accent-red); font-family: monospace; text-align: center; margin-bottom: 1.5rem; font-size: 0.9rem; letter-spacing: 0.2em; } .matrix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 0.5rem; } .matrix-btn { display: block; padding: 0.6rem 0; text-align: center; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); color: var(--text-main); text-decoration: none; font-family: monospace; font-size: 0.8rem; transition: all 0.2s; } .matrix-btn:hover { background: var(--accent-red); color: white; border-color: var(--accent-red); } /* ========================================== */ /* HOLOGRAPHIC TERMINAL EFFECTS */ /* ========================================== */ /* The base hologram class applies a color-agnostic glow */ .hologram { text-shadow: 0 0 5px currentColor, 0 0 15px currentColor; animation: textFlicker 5s infinite; } /* Hardcore terminal styling for section titles */ .section-title { font-family: monospace; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px solid; margin-bottom: 1rem; } /* Subtle CRT text flicker */ @keyframes textFlicker { 0%, 100% { opacity: 1; } 3% { opacity: 0.8; } 6% { opacity: 1; } 7% { opacity: 0.4; } 8% { opacity: 1; } 15% { opacity: 1; } 16% { opacity: 0.6; } 17% { opacity: 1; } } /* Add a scanline effect to the main background */ body::after { content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none; } /* ========================================== ACCESSIBILITY — REDUCED MOTION Honour the OS "reduce motion" setting: calm the glitch, flicker, pulse and scanline. (The starfield canvas is paused in script.js.) ========================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .hologram { text-shadow: none; } body::after { display: none; } /* drop the CRT scanline shimmer */ /* The *-reset above doesn't reach the view-transition pseudos — cut them too */ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }