@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css'; /* /Components/Courses/CourseGrid.razor.rz.scp.css */ /* /Components/Games/AngryPupComponent.razor.rz.scp.css */ /* /Components/Games/AtlasIntro.razor.rz.scp.css */ /* ============================================================ AtlasIntro.razor.css — Scoped styles for Atlas of Infinity Cosmic & Mystical | All Ages | Blazor InteractiveServer ============================================================ */ /* ── Google Fonts — add to in App.razor: ─────────────── */ /* */ /* ── Root container ─────────────────────────────────────────── */ .atlas-intro[b-ov3agxg5lz] { position: relative; width: 100%; /* contained: respects parent layout width */ height: 100vh; /* tall enough to show all content */ background: #000; overflow: hidden; cursor: none; font-family: 'Cinzel', serif; border-radius: 8px; /* optional: softens the edges in layout */ transition: all 0.4s ease; } /* Full-screen mode — triggered by the expand button */ /* z-index stays at 0 so PortalGrid (100) and DomainExplorer */ /* (200) always render above the background layer. */ .atlas-intro.fullscreen[b-ov3agxg5lz] { position: fixed; inset: 0; width: 100vw; height: 100vh; border-radius: 0; z-index: 0; } /* ══════════════════════════════════════════════════════════════ BACKGROUND LAYERS — starfield, nebulas, map. These are NEVER affected by the backgrounded state. The cosmos always shines through. ══════════════════════════════════════════════════════════════ */ /* ── Nebula layer ───────────────────────────────────────────── */ .nebula-layer[b-ov3agxg5lz] { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .nebula[b-ov3agxg5lz] { position: absolute; border-radius: 50%; animation: nebulaFloat-b-ov3agxg5lz linear infinite; opacity: 0; } /* n1 — deep violet/indigo, top left */ .n1[b-ov3agxg5lz] { width: 700px; height: 500px; background: radial-gradient(ellipse, rgba(120, 80, 255, 0.75) 0%, rgba(60, 130, 180, 0.45) 45%, rgba(15, 110, 86, 0.15) 70%, transparent 100%); filter: blur(55px); top: -8%; left: -5%; animation-duration: 40s; animation-delay: 0s; } /* n2 — warm crimson/magenta, bottom right */ .n2[b-ov3agxg5lz] { width: 620px; height: 620px; background: radial-gradient(ellipse, rgba(220, 50, 80, 0.65) 0%, rgba(180, 40, 140, 0.40) 45%, rgba(100, 20, 80, 0.15) 70%, transparent 100%); filter: blur(55px); bottom: -8%; right: -5%; animation-duration: 50s; animation-delay: -15s; } /* n3 — cobalt blue, centre */ .n3[b-ov3agxg5lz] { width: 800px; height: 400px; background: radial-gradient(ellipse, rgba(30, 120, 220, 0.55) 0%, rgba(80, 60, 200, 0.30) 50%, transparent 100%); filter: blur(60px); top: 30%; left: 15%; animation-duration: 60s; animation-delay: -25s; } /* n4 — teal/emerald, top right — new */ .n4[b-ov3agxg5lz] { width: 500px; height: 500px; background: radial-gradient(ellipse, rgba(20, 200, 160, 0.55) 0%, rgba(10, 150, 120, 0.30) 50%, transparent 100%); filter: blur(55px); top: -5%; right: 5%; animation-duration: 45s; animation-delay: -8s; } @keyframes nebulaFloat-b-ov3agxg5lz { 0% { opacity: 0; transform: scale(1) translate(0, 0); } 10% { opacity: 1; } 50% { transform: scale(1.1) translate(25px, -20px); } 90% { opacity: 1; } 100% { opacity: 0; transform: scale(1) translate(0, 0); } } /* ── Canvas (starfield) ─────────────────────────────────────── */ .atlas-canvas[b-ov3agxg5lz] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* ── Ancient map layer ──────────────────────────────────────── */ .map-layer[b-ov3agxg5lz] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: mapPulse-b-ov3agxg5lz 8s ease-in-out infinite; } .map-layer svg[b-ov3agxg5lz] { width: 100%; height: 100%; } @keyframes mapPulse-b-ov3agxg5lz { 0%, 100% { opacity: 0.08; transform: scale(1); } 50% { opacity: 0.15; transform: scale(1.02); } } .constellation-line[b-ov3agxg5lz] { stroke: rgba(200, 180, 120, 0.18); stroke-width: 0.5; animation: constellationFade-b-ov3agxg5lz 8s ease-in-out infinite; } @keyframes constellationFade-b-ov3agxg5lz { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } } /* ── Shooting stars ─────────────────────────────────────────── */ /* NOTE: .shooting-star styles must be in your global CSS */ /* (e.g. wwwroot/css/site.css) because these elements are */ /* created dynamically by atlas-intro.js and won't receive */ /* Blazor's scoped CSS attribute. Add the block below to */ /* your site.css: */ /* */ /* .shooting-star { */ /* position: absolute; */ /* height: 1px; */ /* background: linear-gradient(90deg, */ /* transparent, */ /* rgba(255,255,255,0.92), */ /* transparent); */ /* border-radius: 1px; */ /* animation: shoot linear forwards; */ /* opacity: 0; */ /* pointer-events: none; */ /* } */ /* */ /* @keyframes shoot { */ /* 0% { opacity: 0; transform: translateX(-100px) translateY(0); } */ /* 5% { opacity: 1; } */ /* 95% { opacity: 1; } */ /* 100% { opacity: 0; transform: translateX(300px) translateY(80px); } */ /* } */ /* ══════════════════════════════════════════════════════════════ UI LAYER — title, CTA, vignette, cursor. Wrapped in .ui-layer so a single modifier class controls the blur + fade when an overlay is active above. ══════════════════════════════════════════════════════════════ */ .ui-layer[b-ov3agxg5lz] { position: absolute; inset: 0; transition: opacity 0.6s ease, filter 0.6s ease; } /* When AtlasIntro is backgrounded behind PortalGrid or DomainExplorer */ .ui-layer.backgrounded[b-ov3agxg5lz] { opacity: 0.08; filter: blur(6px); pointer-events: none; } /* ── Title layer ────────────────────────────────────────────── */ .title-layer[b-ov3agxg5lz] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .title-glyph[b-ov3agxg5lz] { font-family: 'Cinzel Decorative', serif; font-size: clamp(2.2rem, 6vw, 5rem); font-weight: 700; letter-spacing: 0.18em; color: transparent; background: linear-gradient(180deg, #e8d8a0 0%, #c9a84c 40%, #f5e6b0 70%, #a07830 100%); -webkit-background-clip: text; background-clip: text; text-transform: uppercase; line-height: 1.1; opacity: 0; filter: drop-shadow(0 0 30px rgba(201, 168, 76, 0.5)); animation: titleReveal-b-ov3agxg5lz 3s ease-out forwards, titleBreath-b-ov3agxg5lz 6s ease-in-out 3s infinite; } .title-glyph.delay[b-ov3agxg5lz] { animation-delay: 0.35s, 3.35s; } .title-divider[b-ov3agxg5lz] { width: clamp(140px, 30vw, 320px); height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.65), rgba(255, 255, 255, 0.4), rgba(201, 168, 76, 0.65), transparent); margin: 1.1em auto 0; opacity: 0; animation: titleReveal-b-ov3agxg5lz 2s ease-out 0.8s forwards; } .title-ornament[b-ov3agxg5lz] { text-align: center; color: rgba(201, 168, 76, 0.65); font-size: 1.05rem; letter-spacing: 0.65em; margin-top: 0.4em; opacity: 0; animation: titleReveal-b-ov3agxg5lz 2s ease-out 1s forwards; } .title-sub[b-ov3agxg5lz] { font-family: 'Cinzel', serif; font-size: clamp(0.75rem, 2vw, 1.4rem); font-weight: 400; letter-spacing: 0.45em; color: rgba(200, 180, 120, 0.72); text-transform: uppercase; margin-top: 0.65em; opacity: 0; animation: titleReveal-b-ov3agxg5lz 3s ease-out 1.2s forwards; text-align: center; /* Compensate for trailing letter-spacing that shifts visual center on mobile */ padding-right: 0.45em; width: 100%; } @keyframes titleReveal-b-ov3agxg5lz { 0% { opacity: 0; transform: translateY(16px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes titleBreath-b-ov3agxg5lz { 0%, 100% { filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.4)) drop-shadow(0 0 60px rgba(83, 74, 183, 0.2)); } 50% { filter: drop-shadow(0 0 40px rgba(201, 168, 76, 0.75)) drop-shadow(0 0 90px rgba(83, 74, 183, 0.38)); } } /* ── CTA ────────────────────────────────────────────────────── */ .atlas-cta[b-ov3agxg5lz] { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; margin-top: 2.5rem; opacity: 0; cursor: pointer; user-select: none; pointer-events: all; animation: titleReveal-b-ov3agxg5lz 2s ease-out 2.5s forwards; } .cta-text[b-ov3agxg5lz] { font-family: 'Cinzel', serif; font-size: clamp(0.65rem, 1.5vw, 0.95rem); letter-spacing: 0.38em; color: rgba(200, 180, 120, 0.65); text-transform: uppercase; animation: ctaPulse-b-ov3agxg5lz 2.6s ease-in-out infinite; } @keyframes ctaPulse-b-ov3agxg5lz { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.95; } } .cta-chevron[b-ov3agxg5lz] { width: 18px; height: 18px; border-right: 1.5px solid rgba(200, 180, 120, 0.55); border-bottom: 1.5px solid rgba(200, 180, 120, 0.55); transform: rotate(45deg); margin-top: -4px; animation: chevronBounce-b-ov3agxg5lz 2.6s ease-in-out infinite; } @keyframes chevronBounce-b-ov3agxg5lz { 0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.4; } 50% { transform: rotate(45deg) translateY(5px); opacity: 0.95; } } /* ── Vignette ───────────────────────────────────────────────── */ .vignette[b-ov3agxg5lz] { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.78) 100%); pointer-events: none; } /* ── Fullscreen toggle button ───────────────────────────────── */ .fullscreen-toggle[b-ov3agxg5lz] { position: absolute; top: 0.8rem; right: 1rem; font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200, 180, 120, 0.45); cursor: pointer; user-select: none; transition: color 0.2s ease; z-index: 300; /* above PortalGrid (100) and DomainExplorer (200) */ display: flex; align-items: center; gap: 0.3rem; pointer-events: all; } .fullscreen-toggle:hover[b-ov3agxg5lz] { color: rgba(200, 180, 120, 0.9); } /* Exit button — only visible in fullscreen mode */ .fullscreen-exit[b-ov3agxg5lz] { position: absolute; top: 0.8rem; left: 1rem; font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200, 180, 120, 0.45); cursor: pointer; user-select: none; transition: color 0.2s ease; z-index: 300; /* above PortalGrid (100) and DomainExplorer (200) */ display: flex; align-items: center; gap: 0.3rem; pointer-events: all; } .fullscreen-exit:hover[b-ov3agxg5lz] { color: rgba(200, 180, 120, 0.9); } /* ── Custom cursor ──────────────────────────────────────────── */ .atlas-cursor[b-ov3agxg5lz] { position: fixed; width: 18px; height: 18px; border: 1px solid rgba(201, 168, 76, 0.72); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width 0.18s ease, height 0.18s ease, opacity 0.18s ease; z-index: 9999; } .atlas-cursor.pressed[b-ov3agxg5lz] { width: 12px; height: 12px; } .atlas-cursor-dot[b-ov3agxg5lz] { position: fixed; width: 4px; height: 4px; background: rgba(201, 168, 76, 0.9); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; } /* /Components/Games/DomainExplorer.razor.rz.scp.css */ /* ============================================================ DomainExplorer.razor.css — Scoped styles for DomainExplorer Manages the polyhedron transition shell + breadcrumb trail ============================================================ */ /* ── Outer shell ────────────────────────────────────────────── */ .domain-explorer[b-wu1flhip45] { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .domain-explorer.visible[b-wu1flhip45] { opacity: 1; pointer-events: all; } /* ── Breadcrumb trail ───────────────────────────────────────── */ .breadcrumb[b-wu1flhip45] { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; max-width: 80vw; animation: breadcrumbReveal-b-wu1flhip45 0.5s ease-out forwards; } @keyframes breadcrumbReveal-b-wu1flhip45 { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .breadcrumb-item[b-wu1flhip45] { font-family: 'Cinzel', serif; font-size: clamp(0.6rem, 1.1vw, 0.8rem); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200, 180, 120, 0.5); cursor: pointer; transition: color 0.2s ease; white-space: nowrap; user-select: none; } .breadcrumb-item:hover[b-wu1flhip45] { color: rgba(200, 180, 120, 0.95); } .breadcrumb-item.current[b-wu1flhip45] { color: rgba(220, 195, 130, 0.9); cursor: default; } .breadcrumb-item.current:hover[b-wu1flhip45] { color: rgba(220, 195, 130, 0.9); } .breadcrumb-separator[b-wu1flhip45] { font-size: 0.6rem; color: rgba(200, 180, 120, 0.25); user-select: none; } .breadcrumb-root[b-wu1flhip45] { font-family: 'Cinzel', serif; font-size: clamp(0.6rem, 1.1vw, 0.8rem); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200, 180, 120, 0.5); cursor: pointer; transition: color 0.2s ease; user-select: none; } .breadcrumb-root:hover[b-wu1flhip45] { color: rgba(200, 180, 120, 0.95); } /* ── Domain title ───────────────────────────────────────────── */ .domain-title[b-wu1flhip45] { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); font-family: 'Cinzel Decorative', serif; font-size: clamp(1rem, 2.5vw, 1.8rem); font-weight: 700; letter-spacing: 0.2em; color: transparent; background: linear-gradient(180deg, #e8d8a0 0%, #c9a84c 45%, #f5e6b0 100%); -webkit-background-clip: text; background-clip: text; text-transform: uppercase; white-space: nowrap; filter: drop-shadow(0 0 18px rgba(201, 168, 76, 0.4)); animation: titleReveal-b-wu1flhip45 0.6s ease-out forwards; } @keyframes titleReveal-b-wu1flhip45 { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ── Polyhedron viewport ────────────────────────────────────── */ .polyhedron-viewport[b-wu1flhip45] { position: relative; width: min(70vh, 90vw); height: min(70vh, 90vw); display: flex; align-items: center; justify-content: center; margin-top: 4rem; } /* ── Slide transition wrapper ───────────────────────────────── */ .slide-wrapper[b-wu1flhip45] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .slide-wrapper.slide-enter-right[b-wu1flhip45] { animation: slideInRight-b-wu1flhip45 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .slide-wrapper.slide-enter-left[b-wu1flhip45] { animation: slideInLeft-b-wu1flhip45 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .slide-wrapper.slide-exit-left[b-wu1flhip45] { animation: slideOutLeft-b-wu1flhip45 0.4s ease-in forwards; pointer-events: none; } .slide-wrapper.slide-exit-right[b-wu1flhip45] { animation: slideOutRight-b-wu1flhip45 0.4s ease-in forwards; pointer-events: none; } @keyframes slideInRight-b-wu1flhip45 { from { opacity: 0; transform: translateX(60px) scale(0.94); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes slideInLeft-b-wu1flhip45 { from { opacity: 0; transform: translateX(-60px) scale(0.94); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes slideOutLeft-b-wu1flhip45 { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(-60px) scale(0.94); } } @keyframes slideOutRight-b-wu1flhip45 { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(60px) scale(0.94); } } /* ── Back to portal grid ────────────────────────────────────── */ .back-to-atlas[b-wu1flhip45] { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); font-family: 'Cinzel', serif; font-size: clamp(0.6rem, 1.1vw, 0.78rem); letter-spacing: 0.3em; color: rgba(200, 180, 120, 0.38); text-transform: uppercase; cursor: pointer; transition: color 0.2s ease; user-select: none; white-space: nowrap; } .back-to-atlas:hover[b-wu1flhip45] { color: rgba(200, 180, 120, 0.85); } /* ── Sibling page indicator ─────────────────────────────────── */ .sibling-indicator[b-wu1flhip45] { position: absolute; right: -3rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .sibling-dot[b-wu1flhip45] { width: 6px; height: 6px; border-radius: 50%; background: rgba(200, 180, 120, 0.25); transition: background 0.2s ease; cursor: pointer; } .sibling-dot.active[b-wu1flhip45] { background: rgba(200, 180, 120, 0.8); } .sibling-dot:hover[b-wu1flhip45] { background: rgba(200, 180, 120, 0.6); } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 600px) { .polyhedron-viewport[b-wu1flhip45] { width: 92vw; height: 92vw; margin-top: 5rem; } .domain-title[b-wu1flhip45] { font-size: clamp(0.85rem, 4vw, 1.2rem); } } /* /Components/Games/IntegerInputComponent.razor.rz.scp.css */ .int-cell[b-updmvff7hk] { width: 48px; height: 48px; text-align: center; font-size: 1.2rem; border: 1px solid #444; border-radius: 6px; background-color: #111; color: #eee; transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } /* Glow effect when active */ .int-cell:focus[b-updmvff7hk] { outline: none; border-color: #00eaff; box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; background-color: #0a1a1f; } /* /Components/Games/Polyhedron.razor.rz.scp.css */ /* ============================================================ Polyhedron.razor.css — Scoped styles for the polyhedron ============================================================ */ /* ── Container ──────────────────────────────────────────────── */ .polyhedron-container[b-p2j8aj18az] { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ── Canvas ─────────────────────────────────────────────────── */ .polyhedron-canvas[b-p2j8aj18az] { display: block; width: 100%; height: 100%; touch-action: none; /* prevent scroll interference on mobile */ } /* ── Selected face info panel ───────────────────────────────── */ .face-info[b-p2j8aj18az] { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem 2rem; border-radius: 10px; border: 1px solid rgba(200, 180, 120, 0.25); background: rgba(5, 4, 20, 0.75); backdrop-filter: blur(10px); min-width: 240px; max-width: 380px; text-align: center; animation: faceInfoSlideIn-b-p2j8aj18az 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes faceInfoSlideIn-b-p2j8aj18az { from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } .face-info-icon[b-p2j8aj18az] { font-size: 2rem; line-height: 1; } .face-info-label[b-p2j8aj18az] { font-family: 'Cinzel', serif; font-size: clamp(0.9rem, 1.8vw, 1.2rem); font-weight: 600; letter-spacing: 0.15em; color: rgba(230, 210, 160, 0.95); text-transform: uppercase; } .face-info-description[b-p2j8aj18az] { font-family: 'Cinzel', serif; font-size: clamp(0.65rem, 1.1vw, 0.82rem); letter-spacing: 0.06em; color: rgba(180, 160, 110, 0.7); line-height: 1.5; } .face-info-action[b-p2j8aj18az] { margin-top: 0.4rem; font-family: 'Cinzel', serif; font-size: clamp(0.6rem, 1vw, 0.78rem); letter-spacing: 0.3em; text-transform: uppercase; padding: 0.45em 1.2em; border-radius: 6px; border: 1px solid rgba(200, 180, 120, 0.35); background: rgba(201, 168, 76, 0.12); color: rgba(220, 190, 100, 0.9); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; user-select: none; } .face-info-action:hover[b-p2j8aj18az] { background: rgba(201, 168, 76, 0.24); border-color: rgba(200, 180, 120, 0.65); } .face-info-locked[b-p2j8aj18az] { font-family: 'Cinzel', serif; font-size: clamp(0.6rem, 1vw, 0.75rem); letter-spacing: 0.2em; color: rgba(180, 160, 110, 0.45); text-transform: uppercase; margin-top: 0.2rem; } /* ── Hint text ──────────────────────────────────────────────── */ .polyhedron-hint[b-p2j8aj18az] { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); font-family: 'Cinzel', serif; font-size: clamp(0.6rem, 1.1vw, 0.78rem); letter-spacing: 0.3em; color: rgba(200, 180, 120, 0.38); text-transform: uppercase; text-align: center; white-space: nowrap; animation: hintFade-b-p2j8aj18az 4s ease-in-out 2s forwards; pointer-events: none; } @keyframes hintFade-b-p2j8aj18az { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } /* ── Spin / pause indicator ─────────────────────────────────── */ .spin-indicator[b-p2j8aj18az] { position: absolute; top: 6%; right: 5%; font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.2em; color: rgba(200, 180, 120, 0.3); text-transform: uppercase; cursor: pointer; transition: color 0.2s ease; user-select: none; } .spin-indicator:hover[b-p2j8aj18az] { color: rgba(200, 180, 120, 0.7); } /* /Components/Games/PortalGrid.razor.rz.scp.css */ /* ============================================================ PortalGrid.razor.css — Scoped styles for the portal grid Overlays the living AtlasIntro starfield background ============================================================ */ /* ── Overlay container ──────────────────────────────────────── */ .portal-overlay[b-jox1w5sx7t] { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem 1.5rem; background: radial-gradient(ellipse at center, rgba(0, 0, 10, 0.72) 0%, rgba(0, 0, 0, 0.88) 100%); opacity: 0; transition: opacity 0.6s ease; overflow-y: auto; } .portal-overlay.fade-in[b-jox1w5sx7t] { opacity: 1; } /* When PortalGrid is backgrounded behind DomainExplorer */ .portal-overlay.backgrounded[b-jox1w5sx7t] { opacity: 0.08; filter: blur(6px); pointer-events: none; transition: opacity 0.6s ease, filter 0.6s ease; } /* ── Header ─────────────────────────────────────────────────── */ .portal-header[b-jox1w5sx7t] { text-align: center; animation: portalHeaderReveal-b-jox1w5sx7t 0.8s ease-out 0.3s both; } .portal-title[b-jox1w5sx7t] { font-family: 'Cinzel Decorative', serif; font-size: clamp(1.4rem, 3.5vw, 2.8rem); font-weight: 700; letter-spacing: 0.18em; color: transparent; background: linear-gradient(180deg, #e8d8a0 0%, #c9a84c 45%, #f5e6b0 100%); -webkit-background-clip: text; background-clip: text; text-transform: uppercase; filter: drop-shadow(0 0 24px rgba(201, 168, 76, 0.55)); } .portal-subtitle[b-jox1w5sx7t] { font-family: 'Cinzel', serif; font-size: clamp(0.65rem, 1.4vw, 1rem); letter-spacing: 0.4em; color: rgba(200, 180, 120, 0.6); text-transform: uppercase; margin-top: 0.5em; } @keyframes portalHeaderReveal-b-jox1w5sx7t { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } /* ── Grid ───────────────────────────────────────────────────── */ .portal-grid[b-jox1w5sx7t] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; width: 100%; max-width: 1100px; } /* ── Portal card ────────────────────────────────────────────── */ .portal-card[b-jox1w5sx7t] { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 1.6rem 1rem 1.2rem; border-radius: 12px; border: 1px solid rgba(200, 180, 120, 0.15); background: rgba(10, 8, 30, 0.65); backdrop-filter: blur(8px); cursor: pointer; text-align: center; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; /* staggered reveal — delay set inline via style */ opacity: 0; animation: cardReveal-b-jox1w5sx7t 0.5s ease-out forwards; } @keyframes cardReveal-b-jox1w5sx7t { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Glow layer (reveals on hover) ─────────────────────────── */ .portal-glow[b-jox1w5sx7t] { position: absolute; inset: 0; border-radius: 12px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } /* ── State: Free ────────────────────────────────────────────── */ .state-free[b-jox1w5sx7t] { border-color: rgba(83, 183, 144, 0.35); } .state-free .portal-glow[b-jox1w5sx7t] { background: radial-gradient(ellipse at center, rgba(83, 183, 144, 0.18) 0%, transparent 70%); } .state-free:hover[b-jox1w5sx7t] { transform: translateY(-4px) scale(1.02); border-color: rgba(83, 183, 144, 0.75); box-shadow: 0 0 24px rgba(83, 183, 144, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5); } .state-free:hover .portal-glow[b-jox1w5sx7t] { opacity: 1; } /* ── State: Paid ────────────────────────────────────────────── */ .state-paid[b-jox1w5sx7t] { border-color: rgba(201, 168, 76, 0.35); } .state-paid .portal-glow[b-jox1w5sx7t] { background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.18) 0%, transparent 70%); } .state-paid:hover[b-jox1w5sx7t] { transform: translateY(-4px) scale(1.02); border-color: rgba(201, 168, 76, 0.75); box-shadow: 0 0 24px rgba(201, 168, 76, 0.35), 0 8px 32px rgba(0, 0, 0, 0.5); } .state-paid:hover .portal-glow[b-jox1w5sx7t] { opacity: 1; } /* ── State: Locked ──────────────────────────────────────────── */ .state-locked[b-jox1w5sx7t] { border-color: rgba(255, 255, 255, 0.06); opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); } .state-locked:hover[b-jox1w5sx7t] { transform: none; box-shadow: none; border-color: rgba(255, 255, 255, 0.08); } /* ── Card internals ─────────────────────────────────────────── */ .portal-icon[b-jox1w5sx7t] { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; filter: drop-shadow(0 0 8px rgba(200, 180, 120, 0.4)); transition: transform 0.25s ease; } .state-free:hover .portal-icon[b-jox1w5sx7t], .state-paid:hover .portal-icon[b-jox1w5sx7t] { transform: scale(1.15); } .portal-name[b-jox1w5sx7t] { font-family: 'Cinzel', serif; font-size: clamp(0.75rem, 1.3vw, 1rem); font-weight: 600; letter-spacing: 0.12em; color: rgba(230, 210, 160, 0.92); text-transform: uppercase; } .portal-description[b-jox1w5sx7t] { font-family: 'Cinzel', serif; font-size: clamp(0.6rem, 0.9vw, 0.75rem); letter-spacing: 0.06em; color: rgba(180, 160, 110, 0.6); line-height: 1.4; } /* ── Lock icon ──────────────────────────────────────────────── */ .portal-lock[b-jox1w5sx7t] { position: absolute; top: 0.6rem; right: 0.7rem; font-size: 0.85rem; opacity: 0.5; } /* ── Badges ─────────────────────────────────────────────────── */ .portal-badge[b-jox1w5sx7t] { position: absolute; top: 0.55rem; right: 0.65rem; font-family: 'Cinzel', serif; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2em 0.5em; border-radius: 4px; } .portal-badge.free[b-jox1w5sx7t] { background: rgba(83, 183, 144, 0.2); color: rgba(83, 210, 160, 0.9); border: 1px solid rgba(83, 183, 144, 0.35); } .portal-badge.paid[b-jox1w5sx7t] { background: rgba(201, 168, 76, 0.18); color: rgba(220, 190, 100, 0.9); border: 1px solid rgba(201, 168, 76, 0.35); } /* ── Back link ──────────────────────────────────────────────── */ .portal-back[b-jox1w5sx7t] { font-family: 'Cinzel', serif; font-size: clamp(0.65rem, 1.2vw, 0.85rem); letter-spacing: 0.3em; color: rgba(200, 180, 120, 0.45); text-transform: uppercase; cursor: pointer; transition: color 0.2s ease; animation: portalHeaderReveal-b-jox1w5sx7t 0.8s ease-out 0.6s both; padding-bottom: 0.5rem; } .portal-back:hover[b-jox1w5sx7t] { color: rgba(200, 180, 120, 0.9); } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 600px) { .portal-grid[b-jox1w5sx7t] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 380px) { .portal-grid[b-jox1w5sx7t] { grid-template-columns: 1fr; } } /* /Components/Games/ProgressBar.razor.rz.scp.css */ .codex-progress[b-ssyjzdrsuv] { display: flex; gap: 0.4rem; justify-content: center; align-items: center; padding: 0.5rem 0; } .codex-progress-block[b-ssyjzdrsuv] { width: 28px; height: 28px; border-radius: 4px; transition: background-color 0.25s ease, transform 0.2s ease; } .codex-progress-block.incomplete[b-ssyjzdrsuv] { background-color: #000; } .codex-progress-block.complete[b-ssyjzdrsuv] { background-color: #00c853; /* vivid green */ box-shadow: 0 0 6px rgba(0, 200, 83, 0.6); transform: scale(1.05); } /* /Components/Games/SelectInputComponent.razor.rz.scp.css */ .select-input-cell[b-jrby1etdww] { width: 68px; height: 48px; padding: 4px; font-size: 1.2rem; text-align: center; background-color: #111 !important; color: #eee !important; border: 1px solid #444; border-radius: 6px; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: box-shadow 0.25s ease, border-color 0.25s ease; } /* Escape CSS isolation for Edge’s pseudo-element */ :deep(.select-input-cell::-ms-expand)[b-jrby1etdww] { display: none; } /* Glow effect when active */ .select-input-cell:focus[b-jrby1etdww] { outline: none; border-color: #00eaff; box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; background-color: #0a1a1f !important; } /* /Components/Games/Square.razor.rz.scp.css */ /* /Components/Games/StrInputComponent.razor.rz.scp.css */ .str-cell[b-hqsskruroc] { width: 148px; height: 48px; text-align: center; font-size: 1.2rem; border: 1px solid #444; border-radius: 6px; background-color: #111; color: #eee; transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } /* Glow effect when active */ .str-cell:focus[b-hqsskruroc] { outline: none; border-color: #00eaff; box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; background-color: #0a1a1f; } /* /Components/Games/TheAtlasOfInfinityComponent.razor.rz.scp.css */ /* ============================================================ TheAtlasOfInfinityComponent.razor.css Shell container + fullscreen toggle and exit buttons. ============================================================ */ /* ── Shell container ────────────────────────────────────────── */ /* Provides the positioning context for absolute buttons */ /* in contained mode. Matches AtlasIntro's dimensions exactly. */ .atlas-shell[b-5dvwzrztg9] { position: relative; width: 100%; height: 100vh; } /* In fullscreen mode the shell also goes fixed to fill viewport */ .atlas-shell.is-fullscreen[b-5dvwzrztg9] { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; } /* ── Shared button base ─────────────────────────────────────── */ .atlas-fullscreen-toggle[b-5dvwzrztg9], .atlas-fullscreen-exit[b-5dvwzrztg9] { position: absolute; /* contained: anchors to .atlas-shell */ top: 0.8rem; font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200, 180, 120, 0.45); cursor: pointer; user-select: none; transition: color 0.2s ease; z-index: 300; display: flex; align-items: center; gap: 0.3rem; } .atlas-fullscreen-toggle:hover[b-5dvwzrztg9], .atlas-fullscreen-exit:hover[b-5dvwzrztg9] { color: rgba(200, 180, 120, 0.9); } /* In fullscreen mode switch to fixed so they stay above */ /* all layers regardless of scroll or layout. */ .atlas-fullscreen-toggle.is-fullscreen[b-5dvwzrztg9], .atlas-fullscreen-exit.is-fullscreen[b-5dvwzrztg9] { position: fixed; } /* ── Expand / Exit Full Screen — top right ──────────────────── */ .atlas-fullscreen-toggle[b-5dvwzrztg9] { right: 1rem; } /* ── Exit Game — top left ───────────────────────────────────── */ .atlas-fullscreen-exit[b-5dvwzrztg9] { left: 1rem; } /* /Components/Layout/MainLayout.razor.rz.scp.css */ .page[b-xjs2y397vo] { position: relative; display: flex; flex-direction: column; } .main[b-xjs2y397vo] { flex: 1; } .sidebar[b-xjs2y397vo] { background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); } .top-row[b-xjs2y397vo] { background-color: #f7f7f7; border-bottom: 1px solid #d6d5d5; justify-content: flex-end; height: 3.5rem; display: flex; align-items: center; } .top-row[b-xjs2y397vo] a, .top-row .btn-link[b-xjs2y397vo] { white-space: nowrap; margin-left: 1.5rem; } .top-row a:first-child[b-xjs2y397vo] { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640.98px) { .top-row:not(.auth)[b-xjs2y397vo] { display: none; } .top-row.auth[b-xjs2y397vo] { justify-content: space-between; } .top-row a[b-xjs2y397vo], .top-row .btn-link[b-xjs2y397vo] { margin-left: 0; } } @media (min-width: 641px) { .page[b-xjs2y397vo] { flex-direction: row; } .sidebar[b-xjs2y397vo] { width: 250px; height: 100vh; position: sticky; top: 0; } .top-row[b-xjs2y397vo] { position: sticky; top: 0; z-index: 1; } .main > div[b-xjs2y397vo] { padding-left: 2rem !important; padding-right: 1.5rem !important; } }