/* * Galactic Conquest - Spacefront theme scaffolding * Applies when `gc-theme-space` is present on the element or a container. * Keeps legacy styles intact until the new theme class is enabled. */ /* RESPONSIVE MOBILE/DESKTOP DISPLAY RULES - CRITICAL */ html.gc-theme-space .mobileShow { display: none; } /* Smartphone Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { html.gc-theme-space .mobileShow { display: inline; } } html.gc-theme-space .mobileHide { display: inline; } /* Smartphone Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { html.gc-theme-space .mobileHide { display: none; } } html.gc-theme-space body { --gc-space-bg: #010308; --gc-space-bg-accent: #071a3f; --gc-space-panel: rgba(10, 18, 36, 0.82); --gc-space-panel-border: rgba(79, 210, 255, 0.35); --gc-space-panel-shadow: rgba(4, 12, 24, 0.8); --gc-space-glow-primary: #4fd2ff; --gc-space-glow-secondary: #8c5df8; --gc-space-text: #e5f2ff; --gc-space-text-muted: #9bb7d6; --gc-space-surface-blur: blur(24px); background-color: var(--gc-space-bg); background-image: /* Distant nebula clouds - darker blues and purples */ radial-gradient(ellipse at 15% 25%, rgba(45, 65, 120, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 85% 15%, rgba(80, 50, 140, 0.18) 0%, transparent 55%), radial-gradient(ellipse at 50% 80%, rgba(30, 90, 130, 0.12) 0%, transparent 50%), /* Deep space black voids */ radial-gradient(circle at 30% 50%, rgba(0, 0, 0, 0.4) 0%, transparent 40%), radial-gradient(circle at 75% 60%, rgba(0, 0, 0, 0.35) 0%, transparent 35%), /* Subtle colored accent regions */ radial-gradient(circle at 10% 70%, rgba(100, 60, 180, 0.08) 0%, transparent 45%), radial-gradient(circle at 90% 85%, rgba(60, 140, 200, 0.08) 0%, transparent 40%), /* Base gradient - deeper blacks */ linear-gradient(165deg, #000000 0%, #0a1428 25%, #020815 50%, #0d1a35 75%, #000000 100%); color: var(--gc-space-text); font-smooth: always; -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative; overflow-x: hidden; } /* Spacefront Layout - Clean without inline style overrides */ html.gc-theme-space body #blog { width: auto; margin: 1% auto 0 auto; max-width: 1200px; } html.gc-theme-space body .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } html.gc-theme-space body .row { margin: 0 -15px; display: flex; flex-wrap: wrap; } /* Battle History Page - Image and Content Layout */ html.gc-theme-space body .col-sm-3 { flex: 0 0 25%; max-width: 25%; padding-left: 15px; padding-right: 15px; } html.gc-theme-space body .col-sm-9 { flex: 0 0 75%; max-width: 75%; padding-left: 15px; padding-right: 15px; } html.gc-theme-space body .col-xs-12 { flex: 0 0 100%; max-width: 100%; } /* Battle History Page Row Styling */ html.gc-theme-space body .col-sm-12 > .row { align-items: flex-start; } /* Battle History Image Styling */ html.gc-theme-space body .col-sm-3 img.pic, html.gc-theme-space body .col-sm-3 .pic { max-width: 100%; height: auto; border-radius: 8px; border: 2px solid rgba(79, 210, 255, 0.3); box-shadow: 0 0 20px rgba(79, 210, 255, 0.15), 0 8px 24px -8px rgba(4, 12, 28, 0.8); transition: all 0.3s ease; display: block; } html.gc-theme-space body .col-sm-3 img.pic:hover, html.gc-theme-space body .col-sm-3 .pic:hover { border-color: rgba(79, 210, 255, 0.6); box-shadow: 0 0 30px rgba(79, 210, 255, 0.25), 0 12px 32px -8px rgba(4, 12, 28, 0.9); transform: translateY(-2px); } /* Battle History Text Styling */ html.gc-theme-space body .yellowfont { color: #ffd700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.4); } /* ===== TABLE CENTERING & RESPONSIVE DESIGN ===== */ /* Center all tables in spacefront theme */ html.gc-theme-space body table.Default { margin-left: auto !important; margin-right: auto !important; } /* Fleet Management Table - Responsive Column Hiding */ /* Modern approach: Use .hide-mobile class instead of duplicate tables */ @media (max-width: 767px) { /* Hide columns marked with .hide-mobile class on mobile screens */ html.gc-theme-space body .hide-mobile { display: none !important; } /* Adjust table width on mobile */ html.gc-theme-space body table.Default { width: 100% !important; font-size: 0.85em; } /* Adjust input fields on mobile */ html.gc-theme-space body table.Default input[type="text"] { width: 40px; font-size: 0.9em; } } /* On small screens (mobile), adjust layout */ @media (max-width: 767px) { html.gc-theme-space body .col-sm-3, html.gc-theme-space body .col-sm-9 { flex: 0 0 100%; max-width: 100%; } } /* Column Layout - Spacefront - Main Content Area */ html.gc-theme-space body .col-lg-8 { background: linear-gradient(180deg, rgba(79, 210, 255, 0.02) 0%, transparent 50%, rgba(79, 210, 255, 0.02) 100%), var(--gc-space-panel); border: 2px solid transparent !important; border-image: linear-gradient(180deg, rgba(79, 210, 255, 0.35) 0%, rgba(140, 93, 248, 0.35) 50%, rgba(79, 210, 255, 0.35) 100%) 1 !important; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ) !important; backdrop-filter: blur(24px) saturate(170%); padding: 4px; box-shadow: 0 0 30px rgba(79, 210, 255, 0.15), 0 20px 50px -20px rgba(4, 12, 28, 0.9), inset 0 0 0 1px rgba(79, 210, 255, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important; } html.gc-theme-space body .col-lg-2 { padding: 0 5px; } /* Market page and other flex column layouts */ html.gc-theme-space body .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; padding: 0 10px; } html.gc-theme-space body .col-lg-5 { flex: 0 0 41.667%; max-width: 41.667%; padding: 0 10px; } html.gc-theme-space body .col-s-8, html.gc-theme-space body .col-xs-8 { flex: 0 0 66.667%; max-width: 66.667%; padding: 0 10px; } html.gc-theme-space body .col-s-4, html.gc-theme-space body .col-xs-4 { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 10px; } html.gc-theme-space body::before, html.gc-theme-space body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; } /* Distant planet layer - adds celestial depth */ html.gc-theme-space body #blog::before { content: ""; position: fixed; bottom: -15%; right: -8%; width: 400px; height: 400px; background: /* Planet atmosphere glow */ radial-gradient(circle at 35% 35%, rgba(100, 150, 220, 0.15) 0%, transparent 70%), /* Planet surface */ radial-gradient(circle at 40% 40%, rgba(60, 90, 140, 0.4) 0%, rgba(40, 60, 100, 0.3) 40%, transparent 50%), /* Dark side shadow */ radial-gradient(ellipse at 60% 60%, rgba(0, 0, 0, 0.6) 0%, transparent 45%); border-radius: 50%; opacity: 0.6; filter: blur(2px); pointer-events: none; z-index: -3; animation: gcPlanetFloat 80s ease-in-out infinite; } /* Asteroid belt - subtle debris field */ html.gc-theme-space body #blog::after { content: ""; position: fixed; top: 20%; left: -5%; width: 800px; height: 200px; background-image: /* Individual asteroids - various sizes */ radial-gradient(ellipse 4px 3px at 15% 30%, rgba(140, 130, 120, 0.3) 0%, transparent 50%), radial-gradient(ellipse 3px 2px at 42% 55%, rgba(120, 110, 100, 0.25) 0%, transparent 50%), radial-gradient(ellipse 2px 1.5px at 68% 25%, rgba(130, 120, 110, 0.2) 0%, transparent 50%), radial-gradient(ellipse 5px 3.5px at 28% 70%, rgba(150, 140, 130, 0.28) 0%, transparent 50%), radial-gradient(ellipse 2.5px 2px at 85% 45%, rgba(125, 115, 105, 0.22) 0%, transparent 50%), radial-gradient(ellipse 3.5px 2.5px at 55% 80%, rgba(135, 125, 115, 0.24) 0%, transparent 50%), radial-gradient(ellipse 1.5px 1px at 72% 60%, rgba(115, 105, 95, 0.18) 0%, transparent 50%), radial-gradient(ellipse 2px 1.5px at 38% 15%, rgba(128, 118, 108, 0.2) 0%, transparent 50%); background-size: 200px 200px, 250px 200px, 180px 200px, 220px 200px, 240px 200px, 210px 200px, 190px 200px, 230px 200px; background-repeat: repeat-x; transform: rotate(-8deg); opacity: 0.5; filter: blur(1px); pointer-events: none; z-index: -3; animation: gcAsteroidDrift 300s linear infinite; } /* Distant supernova - rare cosmic event */ html.gc-theme-space body section#blog::before { content: ""; position: fixed; top: 8%; right: 12%; width: 180px; height: 180px; background: /* Outer shockwave */ radial-gradient(circle at 50% 50%, transparent 35%, rgba(255, 180, 100, 0.08) 45%, transparent 65%), /* Middle explosion ring */ radial-gradient(circle at 50% 50%, transparent 20%, rgba(255, 200, 150, 0.15) 28%, transparent 40%), /* Core brightness */ radial-gradient(circle at 50% 50%, rgba(255, 240, 220, 0.35) 0%, rgba(255, 210, 160, 0.25) 15%, transparent 25%); opacity: 0.7; filter: blur(3px); pointer-events: none; z-index: -3; animation: gcSupernovaPulse 8s ease-in-out infinite; } @keyframes gcPlanetFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10px, -15px) scale(1.02); } } @keyframes gcAsteroidDrift { 0% { transform: rotate(-8deg) translateX(0); } 100% { transform: rotate(-8deg) translateX(-100px); } } @keyframes gcSupernovaPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.08); } } /* Starfield layer - Enhanced with varied stars and celestial objects */ html.gc-theme-space body::before { background-image: /* Distant galaxies - tiny spiral shapes */ radial-gradient(ellipse 3px 2px at 8% 15%, rgba(200, 180, 255, 0.3) 0%, transparent 50%), radial-gradient(ellipse 2.5px 1.8px at 92% 78%, rgba(180, 200, 255, 0.25) 0%, transparent 50%), radial-gradient(ellipse 2px 1.5px at 45% 88%, rgba(220, 190, 255, 0.28) 0%, transparent 50%), /* Bright white stars - various sizes */ radial-gradient(1.5px 1.5px at 18% 22%, rgba(255, 255, 255, 0.95) 0%, transparent 60%), radial-gradient(1.2px 1.2px at 67% 41%, rgba(255, 255, 255, 0.85) 0%, transparent 55%), radial-gradient(0.9px 0.9px at 34% 69%, rgba(255, 255, 255, 0.75) 0%, transparent 50%), radial-gradient(1.3px 1.3px at 81% 14%, rgba(255, 255, 255, 0.9) 0%, transparent 58%), /* Blue-white stars (hot stars) */ radial-gradient(1.4px 1.4px at 42% 65%, rgba(200, 230, 255, 0.9) 0%, transparent 65%), radial-gradient(1.1px 1.1px at 23% 53%, rgba(180, 220, 255, 0.8) 0%, transparent 58%), radial-gradient(1px 1px at 88% 29%, rgba(190, 225, 255, 0.85) 0%, transparent 55%), /* Orange-yellow stars (cooler stars) */ radial-gradient(1.6px 1.6px at 56% 18%, rgba(255, 220, 140, 0.85) 0%, transparent 68%), radial-gradient(1.2px 1.2px at 14% 77%, rgba(255, 210, 120, 0.75) 0%, transparent 60%), radial-gradient(0.8px 0.8px at 73% 84%, rgba(255, 200, 100, 0.7) 0%, transparent 52%), /* Red stars (dying stars) */ radial-gradient(1.1px 1.1px at 29% 38%, rgba(255, 180, 160, 0.7) 0%, transparent 58%), radial-gradient(0.9px 0.9px at 94% 62%, rgba(255, 160, 140, 0.65) 0%, transparent 54%), /* Purple/magenta stars (exotic) */ radial-gradient(1px 1px at 51% 8%, rgba(220, 180, 255, 0.75) 0%, transparent 55%), radial-gradient(0.8px 0.8px at 37% 94%, rgba(200, 160, 255, 0.7) 0%, transparent 50%), /* Tiny dim stars - background layer */ radial-gradient(0.6px 0.6px at 61% 31%, rgba(255, 255, 255, 0.4) 0%, transparent 45%), radial-gradient(0.5px 0.5px at 12% 58%, rgba(230, 240, 255, 0.35) 0%, transparent 40%), radial-gradient(0.7px 0.7px at 78% 73%, rgba(240, 245, 255, 0.45) 0%, transparent 48%), radial-gradient(0.5px 0.5px at 43% 47%, rgba(255, 250, 240, 0.38) 0%, transparent 42%); background-repeat: repeat; background-size: 280px 280px, 320px 320px, 360px 360px, 200px 200px, 250px 250px, 180px 180px, 220px 220px, 300px 300px, 240px 240px, 280px 280px, 340px 340px, 260px 260px, 200px 200px, 380px 380px, 320px 320px, 400px 400px, 350px 350px, 150px 150px, 160px 160px, 170px 170px, 140px 140px; opacity: 0.85; animation: gcStarfieldDrift 200s linear infinite; } /* Nebula glow - Enhanced with varied colors and dark matter */ html.gc-theme-space body::after { z-index: -1; background-image: /* Dark matter clouds - add depth */ radial-gradient(ellipse at 25% 40%, rgba(0, 0, 0, 0.3) 0%, transparent 40%), radial-gradient(ellipse at 70% 65%, rgba(5, 10, 20, 0.35) 0%, transparent 45%), /* Purple nebula regions */ radial-gradient(ellipse at 18% 28%, rgba(120, 80, 200, 0.25) 0%, transparent 50%), radial-gradient(circle at 85% 18%, rgba(140, 90, 220, 0.22) 0%, transparent 48%), /* Cyan/blue nebula clouds */ radial-gradient(ellipse at 72% 22%, rgba(70, 180, 240, 0.2) 0%, transparent 55%), radial-gradient(circle at 12% 75%, rgba(80, 190, 250, 0.18) 0%, transparent 50%), /* Magenta/pink accents */ radial-gradient(circle at 50% 76%, rgba(200, 100, 255, 0.16) 0%, transparent 52%), radial-gradient(ellipse at 38% 8%, rgba(180, 90, 240, 0.14) 0%, transparent 45%), /* Teal/aqua highlights */ radial-gradient(circle at 60% 45%, rgba(80, 200, 200, 0.12) 0%, transparent 42%), radial-gradient(ellipse at 15% 60%, rgba(60, 180, 190, 0.15) 0%, transparent 48%), /* Orange/amber rare accent (distant star formation) */ radial-gradient(circle at 82% 88%, rgba(200, 120, 60, 0.08) 0%, transparent 35%); mix-blend-mode: screen; opacity: 0.75; animation: gcNebulaPulse 50s ease-in-out infinite; } @keyframes gcStarfieldDrift { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-20px, -12px, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes gcNebulaPulse { 0%, 100% { opacity: 0.7; filter: saturate(100%); } 50% { opacity: 0.95; filter: saturate(145%); } } /* * Container + banner surfaces. These target existing legacy structures so that the * theme can be toggled without markup changes. */ html.gc-theme-space body #blog { background: linear-gradient(165deg, rgba(12, 18, 36, 0.88) 0%, rgba(10, 16, 28, 0.84) 100%); border: 1px solid var(--gc-space-panel-border); box-shadow: 0 30px 60px -25px var(--gc-space-panel-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.04); border-radius: 18px; margin: 12px auto; padding: 10px 8px 16px; max-width: min(1100px, 96%); backdrop-filter: var(--gc-space-surface-blur); } /* ===== NAVIGATION COMPONENTS ===== */ /* Banner Component - Holographic Display */ html.gc-theme-space .gc-banner, html.gc-theme-space body .icon-bar:not(:has(.buttonN-group)) { background: linear-gradient(180deg, rgba(79, 210, 255, 0.03) 0%, transparent 50%, rgba(79, 210, 255, 0.03) 100%), linear-gradient(135deg, rgba(10, 22, 48, 0.94) 0%, rgba(15, 32, 70, 0.94) 100%) !important; border: 2px solid transparent !important; border-image: linear-gradient(90deg, rgba(79, 210, 255, 0.5) 0%, rgba(140, 93, 248, 0.5) 50%, rgba(79, 210, 255, 0.5) 100%) 1 !important; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ) !important; box-shadow: 0 0 25px rgba(79, 210, 255, 0.15), 0 22px 48px -28px rgba(4, 12, 28, 0.95), inset 0 0 0 1px rgba(79, 210, 255, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(20px) saturate(180%) !important; padding: clamp(8px, 1.6vw, 11px) !important; margin: 0 auto clamp(5px, 1.25vw, 7px) !important; position: relative; overflow: visible; } /* ===== TOP NAVIGATION - HOLOGRAPHIC COMMAND DECK ===== */ /* Top Navigation Container - Command Deck Panel */ html.gc-theme-space .gc-top-nav, html.gc-theme-space body .icon-bar:has(.buttonN-group) { background: linear-gradient(180deg, rgba(79, 210, 255, 0.03) 0%, transparent 50%, rgba(79, 210, 255, 0.03) 100%), linear-gradient(135deg, rgba(8, 15, 35, 0.95) 0%, rgba(12, 22, 50, 0.93) 50%, rgba(8, 15, 35, 0.95) 100%) !important; border: 2px solid transparent !important; border-image: linear-gradient(90deg, rgba(79, 210, 255, 0.6) 0%, rgba(140, 93, 248, 0.6) 50%, rgba(79, 210, 255, 0.6) 100%) 1 !important; clip-path: polygon( 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px ) !important; backdrop-filter: blur(24px) saturate(180%) !important; padding: 0 !important; margin: 0 auto 8px auto !important; max-width: 1200px !important; position: relative !important; overflow: visible !important; box-shadow: 0 0 30px rgba(79, 210, 255, 0.2), 0 8px 32px -12px rgba(4, 12, 28, 0.95), inset 0 0 0 1px rgba(79, 210, 255, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important; } /* Corner brackets - tactical UI aesthetic */ html.gc-theme-space body .icon-bar:has(.buttonN-group)::before, html.gc-theme-space body .icon-bar:has(.buttonN-group)::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid rgba(79, 210, 255, 0.7); pointer-events: none; z-index: 10; opacity: 0.8; } /* Top-left corner bracket */ html.gc-theme-space body .icon-bar:has(.buttonN-group)::before { top: -2px; left: -2px; border-right: none; border-bottom: none; box-shadow: 0 0 12px rgba(79, 210, 255, 0.5); } /* Bottom-right corner bracket */ html.gc-theme-space body .icon-bar:has(.buttonN-group)::after { bottom: -2px; right: -2px; border-left: none; border-top: none; box-shadow: 0 0 12px rgba(79, 210, 255, 0.5); } /* Animated scan line effect */ @keyframes gcScanLine { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 0.6; } 100% { transform: translateX(200%); opacity: 0; } } /* Navigation List */ html.gc-theme-space body .buttonN-group { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 0 !important; list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; position: relative !important; z-index: 1 !important; } /* Navigation Items */ html.gc-theme-space body .buttonN-group li { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; position: relative !important; } /* Left Navigation - Tactical Panel */ html.gc-theme-space .gc-left-nav, html.gc-theme-space body .icon-bar2, html.gc-theme-space body .icon-bar2M { background: linear-gradient(180deg, rgba(79, 210, 255, 0.02) 0%, transparent 50%, rgba(79, 210, 255, 0.02) 100%), linear-gradient(140deg, rgba(8, 18, 40, 0.92) 0%, rgba(12, 25, 60, 0.92) 100%) !important; border: 2px solid transparent !important; border-image: linear-gradient(180deg, rgba(79, 210, 255, 0.4) 0%, rgba(140, 93, 248, 0.4) 50%, rgba(79, 210, 255, 0.4) 100%) 1 !important; clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ) !important; box-shadow: 0 0 20px rgba(79, 210, 255, 0.12), 0 18px 40px -24px rgba(4, 12, 28, 0.85), inset 0 0 0 1px rgba(79, 210, 255, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(18px) saturate(160%) !important; padding: clamp(5px, 1.2vw, 7px) !important; margin: 0 auto clamp(4px, 1.2vw, 6px) auto !important; position: relative; overflow: visible; } /* ===== TOP NAVIGATION LINKS - HOLOGRAPHIC SEGMENTS ===== */ /* Top nav links - hexagonal tactical segments */ html.gc-theme-space body .buttonN-group a.buttonN { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 7px 20px !important; margin: 10px 6px !important; color: var(--gc-space-text) !important; background: linear-gradient(180deg, rgba(79, 210, 255, 0.05) 0%, rgba(140, 93, 248, 0.05) 100%), rgba(8, 18, 40, 0.6) !important; border: 1px solid rgba(79, 210, 255, 0.4) !important; clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ) !important; font-size: 0.88rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: 0 0 8px rgba(79, 210, 255, 0.3) !important; white-space: nowrap !important; position: relative !important; overflow: hidden !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.2), 0 0 15px rgba(79, 210, 255, 0.1) !important; } /* Scan line effect on each button */ html.gc-theme-space body .buttonN-group a.buttonN::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(79, 210, 255, 0.3) 50%, transparent 100%); animation: gcScanLine 4s ease-in-out infinite; pointer-events: none; z-index: 1; } /* Corner brackets appear on hover */ html.gc-theme-space body .buttonN-group a.buttonN::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid transparent; clip-path: polygon( 0 0, 12px 0, 12px 2px, 2px 2px, 2px 12px, 0 12px, 0 100%, 12px 100%, 12px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 12px), 0 calc(100% - 12px), 100% 100%, 100% calc(100% - 12px), calc(100% - 2px) calc(100% - 12px), calc(100% - 2px) calc(100% - 2px), calc(100% - 12px) calc(100% - 2px), calc(100% - 12px) 100%, 100% 0, calc(100% - 12px) 0, calc(100% - 12px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 12px, 100% 12px ); border-color: rgba(79, 210, 255, 0.8); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 2; } /* Hover state - tactical activation */ html.gc-theme-space body .buttonN-group a.buttonN:hover, html.gc-theme-space body .buttonN-group a.buttonN:focus-visible { color: var(--gc-space-glow-primary) !important; background: linear-gradient(180deg, rgba(79, 210, 255, 0.15) 0%, rgba(140, 93, 248, 0.15) 100%), rgba(10, 25, 55, 0.8) !important; border-color: rgba(79, 210, 255, 0.8) !important; box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.4), 0 0 25px rgba(79, 210, 255, 0.4), 0 0 50px rgba(79, 210, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4) !important; text-shadow: 0 0 10px rgba(79, 210, 255, 0.9), 0 0 20px rgba(79, 210, 255, 0.5) !important; transform: translateY(-2px) !important; } /* Show corner brackets on hover */ html.gc-theme-space body .buttonN-group a.buttonN:hover::after, html.gc-theme-space body .buttonN-group a.buttonN:focus-visible::after { opacity: 1; } /* Active/pressed state - tactical confirmation */ html.gc-theme-space body .buttonN-group a.buttonN:active { transform: translateY(0) !important; box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.6), 0 0 20px rgba(79, 210, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5) !important; } /* Focus visible for accessibility */ html.gc-theme-space body .buttonN-group a.buttonN:focus-visible { outline: 2px solid rgba(79, 210, 255, 0.8) !important; outline-offset: 4px !important; } /* Special styling for Logout link - warning/alert state */ html.gc-theme-space body .buttonN-group li:last-child a.buttonN { background: linear-gradient(180deg, rgba(255, 90, 90, 0.08) 0%, rgba(200, 50, 100, 0.08) 100%), rgba(40, 10, 15, 0.6) !important; border-color: rgba(255, 100, 100, 0.5) !important; } html.gc-theme-space body .buttonN-group li:last-child a.buttonN:hover { color: #ffaaaa !important; background: linear-gradient(180deg, rgba(255, 90, 90, 0.18) 0%, rgba(200, 50, 100, 0.18) 100%), rgba(50, 15, 20, 0.8) !important; border-color: rgba(255, 100, 100, 0.8) !important; box-shadow: inset 0 0 0 1px rgba(255, 100, 100, 0.4), 0 0 25px rgba(255, 100, 100, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4) !important; text-shadow: 0 0 10px rgba(255, 100, 100, 0.9), 0 0 20px rgba(255, 100, 100, 0.5) !important; } /* Segment dividers - tactical panel separators */ html.gc-theme-space body .buttonN-group li:not(:last-child)::after { content: '◆'; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: rgba(79, 210, 255, 0.4); font-size: 0.5rem; pointer-events: none; z-index: 10; text-shadow: 0 0 8px rgba(79, 210, 255, 0.6); animation: gcDiamondPulse 2s ease-in-out infinite; } @keyframes gcDiamondPulse { 0%, 100% { opacity: 0.4; text-shadow: 0 0 8px rgba(79, 210, 255, 0.6); } 50% { opacity: 1; text-shadow: 0 0 12px rgba(79, 210, 255, 1); } } /* Banner/header icon-bar should be centered */ html.gc-theme-space body .icon-bar { text-align: center; } /* Left navigation should be left-aligned */ html.gc-theme-space body .icon-bar2 { text-align: left; } /* Mobile navigation should be centered */ html.gc-theme-space body .icon-bar2M { text-align: center; } html.gc-theme-space body ul.icon-bar { list-style: none; padding: 0; margin: 0.15% auto; } html.gc-theme-space body .icon-bar img { border-radius: 12px; box-shadow: 0 18px 35px -20px rgba(79, 210, 255, 0.6); } html.gc-theme-space body .icon-bar a, html.gc-theme-space body .icon-bar2 a, html.gc-theme-space body .icon-bar2M a, html.gc-theme-space body .icon-bar li a, html.gc-theme-space body .icon-bar2 li a { color: var(--gc-space-text); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; font-size: 0.85rem; display: block; text-decoration: none; border-radius: 12px; position: relative; pointer-events: auto; z-index: 1; transition: color 0.25s ease; } html.gc-theme-space body .icon-bar2 a { margin: 4px 0; padding: 4px 7px; display: flex !important; align-items: center; justify-content: space-between; gap: 4px; border: 1px solid rgba(79, 210, 255, 0.2); border-radius: 12px; background: linear-gradient(120deg, rgba(79, 210, 255, 0.08) 0%, rgba(140, 93, 248, 0.08) 100%); background-size: 180% 180%; background-position: 0% 50%; box-shadow: 0 18px 32px -28px rgba(4, 18, 38, 0.8); transition: transform 0.3s ease, border-color 0.3s ease, background-position 0.35s ease, color 0.3s ease; pointer-events: auto !important; cursor: pointer; } html.gc-theme-space body .icon-bar2 a::after { content: '\25B8'; font-size: 0.78rem; opacity: 0.6; transition: transform 0.3s ease, opacity 0.3s ease; } html.gc-theme-space body .icon-bar2 a:hover, html.gc-theme-space body .icon-bar2 a:focus-visible { transform: translateX(4px); border-color: var(--gc-space-glow-primary); color: var(--gc-space-glow-primary); background-position: 100% 50%; box-shadow: 0 16px 32px -20px rgba(79, 210, 255, 0.55); } html.gc-theme-space body .icon-bar2 a:hover::after, html.gc-theme-space body .icon-bar2 a:focus-visible::after { opacity: 1; transform: translateX(6px); } html.gc-theme-space body .icon-bar2 a:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(79, 210, 255, 0.45), 0 16px 32px -20px rgba(79, 210, 255, 0.55); } /* Section headers in left navigation */ html.gc-theme-space body .icon-bar2 span, html.gc-theme-space body .icon-bar2 span[style*="color"] { display: flex; align-items: center; gap: 6px; margin: 0 0 7px 0; padding-bottom: 5px; border-bottom: 1px solid rgba(79, 210, 255, 0.28); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; text-shadow: 0 0 14px rgba(79, 210, 255, 0.45); color: var(--gc-space-glow-primary) !important; } html.gc-theme-space body .icon-bar2 span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, var(--gc-space-glow-primary) 0%, rgba(79, 210, 255, 0) 70%); box-shadow: 0 0 12px rgba(79, 210, 255, 0.6); } html.gc-theme-space body .icon-bar2 span:first-child { margin-top: 0; } html.gc-theme-space body .icon-bar2 br { display: none; } html.gc-theme-space body .icon-bar2 a + br + span { margin-top: 16px; } /* Mobile navigation - button grid */ html.gc-theme-space body .icon-bar2M { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; padding: clamp(14px, 3vw, 18px) !important; } html.gc-theme-space body .icon-bar2M .row { margin: 0; gap: 12px; } html.gc-theme-space body .icon-bar2M .col-sm-4, html.gc-theme-space body .icon-bar2M .col-xs-4 { padding: 0; display: contents; } html.gc-theme-space body .buttonNM { display: flex; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 700; padding: 12px; min-height: 72px; color: var(--gc-space-text); background: linear-gradient(135deg, rgba(79, 210, 255, 0.18) 0%, rgba(140, 93, 248, 0.24) 100%); border: 1px solid rgba(79, 210, 255, 0.35); border-radius: 14px; text-decoration: none; position: relative; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.35s ease; } html.gc-theme-space body .buttonNM::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(79, 210, 255, 0.35) 0%, transparent 65%); opacity: 0; transition: opacity 0.35s ease; } html.gc-theme-space body .buttonNM:hover, html.gc-theme-space body .buttonNM:focus-visible { color: var(--gc-space-glow-primary); border-color: var(--gc-space-glow-primary); transform: translateY(-2px); box-shadow: 0 18px 32px -24px rgba(79, 210, 255, 0.65); outline: none; } html.gc-theme-space body .buttonNM:hover::after, html.gc-theme-space body .buttonNM:focus-visible::after { opacity: 1; } /* Add proper spacing between navigation sections */ html.gc-theme-space body .icon-bar2 a + br + span { margin-top: 8px; } html.gc-theme-space body .icon-bar a:hover, html.gc-theme-space body .icon-bar2 a:hover, html.gc-theme-space body .icon-bar2M a:hover { color: var(--gc-space-glow-primary); text-shadow: 0 0 12px rgba(79, 210, 255, 0.65); background: rgba(79, 210, 255, 0.08); transform: translateX(2px); } /* Main content cards inside #blog - Tactical Data Panels */ html.gc-theme-space body .panel, html.gc-theme-space body .panel-default, html.gc-theme-space body .panel-body, html.gc-theme-space body .panel-heading, html.gc-theme-space body .box, html.gc-theme-space body .well, html.gc-theme-space body .contentbox { background: linear-gradient(180deg, rgba(79, 210, 255, 0.02) 0%, transparent 50%, rgba(79, 210, 255, 0.02) 100%), linear-gradient(150deg, rgba(14, 23, 46, 0.92) 0%, rgba(9, 18, 36, 0.88) 100%); border: 1px solid rgba(79, 210, 255, 0.25); clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ); color: var(--gc-space-text); box-shadow: 0 0 15px rgba(79, 210, 255, 0.08), 0 18px 40px -22px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(79, 210, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.04); position: relative; } html.gc-theme-space body .panel-heading, html.gc-theme-space body .box > h3, html.gc-theme-space body .contentbox > h3 { border-bottom: 1px solid rgba(79, 210, 255, 0.3); color: var(--gc-space-glow-primary); text-shadow: 0 0 10px rgba(79, 210, 255, 0.6), 0 0 20px rgba(79, 210, 255, 0.3); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* Utility helper for future layout shells */ .gc-holo-frame { background: linear-gradient(150deg, rgba(14, 24, 46, 0.86) 0%, rgba(6, 12, 28, 0.9) 100%); border: 1px solid rgba(79, 210, 255, 0.35); border-radius: 20px; box-shadow: 0 25px 60px -30px rgba(4, 12, 28, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); color: #e9f5ff; position: relative; overflow: hidden; } .gc-holo-frame::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; border: 1px solid rgba(140, 93, 248, 0.35); pointer-events: none; mix-blend-mode: screen; opacity: 0.65; box-shadow: 0 0 25px rgba(140, 93, 248, 0.4); } /* Theme badge styling placeholder */ .gc-theme-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(120deg, rgba(79, 210, 255, 0.12) 0%, rgba(140, 93, 248, 0.14) 100%); border: 1px solid rgba(79, 210, 255, 0.35); color: var(--gc-space-text); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; } .gc-theme-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, var(--gc-space-glow-primary) 0%, rgba(79, 210, 255, 0) 70%); box-shadow: 0 0 12px rgba(79, 210, 255, 0.6); } /* ===== MOBILE RESPONSIVE DESIGN ===== */ /* Tablet and below */ @media (max-width: 992px) { /* Top navigation - stack on tablet */ html.gc-theme-space body .buttonN-group { gap: 4px !important; } html.gc-theme-space body .buttonN-group a.buttonN { padding: 12px 20px !important; font-size: 0.85rem !important; margin: 8px 4px !important; clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ) !important; } /* Slightly smaller diamond separators on tablet */ html.gc-theme-space body .buttonN-group li:not(:last-child)::after { font-size: 0.45rem; right: -6px; } } /* Mobile phones */ @media (max-width: 768px) { html.gc-theme-space body #blog { padding: 18px 14px 24px; margin: 16px auto; } /* Top navigation - full mobile layout */ html.gc-theme-space body .icon-bar:has(.buttonN-group) { clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ) !important; padding: 8px !important; margin: 0 auto 16px auto !important; } /* Smaller corner brackets on mobile */ html.gc-theme-space body .icon-bar:has(.buttonN-group)::before, html.gc-theme-space body .icon-bar:has(.buttonN-group)::after { width: 16px; height: 16px; } html.gc-theme-space body .buttonN-group { flex-direction: column !important; gap: 8px !important; width: 100% !important; } html.gc-theme-space body .buttonN-group li { width: 100% !important; } html.gc-theme-space body .buttonN-group a.buttonN { width: 100% !important; padding: 12px 20px !important; margin: 0 !important; font-size: 0.9rem !important; justify-content: center !important; clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ) !important; } /* Remove separator on mobile since items are stacked */ html.gc-theme-space body .buttonN-group li:not(:last-child)::after { display: none !important; } html.gc-theme-space body .icon-bar, html.gc-theme-space body .icon-bar2, html.gc-theme-space body .icon-bar2M { border-radius: 14px; padding: 12px; } /* Better mobile spacing for left navigation */ html.gc-theme-space body .icon-bar2 a { padding: 8px 12px; margin: 1px 0; font-size: 0.9rem; } html.gc-theme-space body .icon-bar2 span { margin: 8px 0 4px 0; font-size: 0.85rem; } .gc-holo-frame { border-radius: 16px; } } /* Mobile dropdown menu styling - Holographic theme */ @media (max-width: 768px) { /* Dropdown button - tactical style */ html.gc-theme-space body .buttonN-group button.buttonN { width: 100% !important; padding: 12px 20px !important; margin: 0 !important; font-size: 0.9rem !important; justify-content: center !important; clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ) !important; background: linear-gradient(180deg, rgba(140, 93, 248, 0.08) 0%, rgba(79, 210, 255, 0.08) 100%), rgba(20, 10, 30, 0.6) !important; border-color: rgba(140, 93, 248, 0.5) !important; } html.gc-theme-space body .buttonN-group button.buttonN:hover { background: linear-gradient(180deg, rgba(140, 93, 248, 0.15) 0%, rgba(79, 210, 255, 0.15) 100%), rgba(25, 15, 40, 0.8) !important; border-color: rgba(140, 93, 248, 0.8) !important; } /* Dropdown menu container - holographic panel */ html.gc-theme-space body .dropdown-menu { background: linear-gradient(180deg, rgba(79, 210, 255, 0.03) 0%, transparent 50%, rgba(79, 210, 255, 0.03) 100%), linear-gradient(145deg, rgba(10, 20, 40, 0.98) 0%, rgba(6, 14, 30, 0.98) 100%) !important; border: 2px solid rgba(79, 210, 255, 0.4) !important; clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ) !important; backdrop-filter: blur(20px) saturate(180%) !important; box-shadow: 0 0 25px rgba(79, 210, 255, 0.2), 0 12px 32px -8px rgba(4, 12, 28, 0.95), inset 0 0 0 1px rgba(79, 210, 255, 0.1) !important; padding: 8px !important; margin: 8px 0 0 0 !important; width: 100% !important; } /* Dropdown menu items - tactical segments */ html.gc-theme-space body .dropdown-menu li { margin: 0 !important; padding: 0 !important; list-style: none !important; } html.gc-theme-space body .dropdown-menu .dropdown-item { display: block !important; padding: 12px 16px !important; margin: 4px 0 !important; color: var(--gc-space-text) !important; background: linear-gradient(180deg, rgba(79, 210, 255, 0.05) 0%, rgba(140, 93, 248, 0.05) 100%), rgba(8, 18, 40, 0.6) !important; border: 1px solid rgba(79, 210, 255, 0.3) !important; clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ) !important; text-decoration: none !important; text-align: center !important; font-size: 0.9rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-shadow: 0 0 6px rgba(79, 210, 255, 0.3) !important; transition: all 0.25s ease !important; box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.15) !important; } html.gc-theme-space body .dropdown-menu .dropdown-item:hover, html.gc-theme-space body .dropdown-menu .dropdown-item:focus { color: var(--gc-space-glow-primary) !important; background: linear-gradient(180deg, rgba(79, 210, 255, 0.12) 0%, rgba(140, 93, 248, 0.12) 100%), rgba(12, 25, 55, 0.8) !important; border-color: rgba(79, 210, 255, 0.6) !important; box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.3), 0 0 20px rgba(79, 210, 255, 0.3) !important; text-shadow: 0 0 8px rgba(79, 210, 255, 0.8), 0 0 16px rgba(79, 210, 255, 0.4) !important; transform: translateX(4px) !important; } /* Caret icon */ html.gc-theme-space body .buttonN-group .caret { border-top-color: rgba(140, 93, 248, 0.8) !important; } } /* Extra small mobile */ @media (max-width: 480px) { html.gc-theme-space body .buttonN-group a.buttonN { padding: 10px 16px !important; font-size: 0.85rem !important; letter-spacing: 0.08em !important; clip-path: polygon( 5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px ) !important; } html.gc-theme-space body .buttonN-group button.buttonN { padding: 10px 16px !important; font-size: 0.85rem !important; } html.gc-theme-space body .dropdown-menu .dropdown-item { padding: 10px 14px !important; font-size: 0.85rem !important; } html.gc-theme-space body .icon-bar:has(.buttonN-group) { margin: 0 auto 12px auto !important; } /* Smaller corner brackets on very small screens */ html.gc-theme-space body .icon-bar:has(.buttonN-group)::before, html.gc-theme-space body .icon-bar:has(.buttonN-group)::after { width: 12px; height: 12px; } } /* ===== ACCESSIBILITY - REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { html.gc-theme-space body::before, html.gc-theme-space body::after { animation: none; } /* Disable scan line animations */ html.gc-theme-space body .buttonN-group a.buttonN::before { animation: none !important; opacity: 0 !important; } /* Disable diamond pulse animation */ html.gc-theme-space body .buttonN-group li:not(:last-child)::after { animation: none !important; opacity: 0.6 !important; } /* Simplify transitions - keep functional changes only */ html.gc-theme-space body .buttonN-group a.buttonN { transition: color 0.2s ease, border-color 0.2s ease !important; } html.gc-theme-space body .buttonN-group a.buttonN::after { transition: opacity 0.2s ease !important; } /* Remove transform animations */ html.gc-theme-space body .buttonN-group a.buttonN:hover { transform: none !important; } html.gc-theme-space body .dropdown-menu .dropdown-item:hover { transform: none !important; } } /* Spacefront prototype layout helpers */ html.gc-theme-space body .gc-space-shell { margin-bottom: 24px; padding: clamp(18px, 3vw, 28px); } html.gc-theme-space body .gc-space-shell header, html.gc-theme-space body .gc-space-shell section { width: 100%; } html.gc-theme-space body .gc-space-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } html.gc-theme-space body .gc-space-header-title { margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: 0.08em; text-transform: uppercase; } html.gc-theme-space body .gc-space-header-subtext { margin-top: 8px; color: var(--gc-space-text-muted); max-width: 520px; line-height: 1.5; } html.gc-theme-space body .gc-space-header-meta { text-align: right; } html.gc-theme-space body .gc-space-header-meta .gc-space-cycle { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gc-space-glow-secondary); } html.gc-theme-space body .gc-space-header-meta .gc-space-turn { font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 700; color: var(--gc-space-glow-primary); } html.gc-theme-space body .gc-space-grid { display: grid; gap: clamp(14px, 2vw, 22px); } html.gc-theme-space body .gc-space-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .gc-space-card { padding: clamp(16px, 2vw, 22px); display: grid; gap: 10px; } .gc-space-card h3, .gc-space-card h2 { margin: 0; font-size: clamp(0.95rem, 1.6vw, 1.1rem); text-transform: uppercase; letter-spacing: 0.1em; } .gc-space-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .gc-space-signal-list, .gc-space-mission-list { list-style: none; padding: 0; margin: clamp(16px, 2vw, 24px) 0 0; display: grid; gap: clamp(12px, 2vw, 18px); } .gc-space-signal { padding: clamp(12px, 2vw, 18px); display: flex; gap: clamp(14px, 2vw, 22px); align-items: flex-start; font-size: 0.95rem; } .gc-space-signal-time { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; letter-spacing: 0.15em; color: var(--gc-space-glow-secondary); min-width: 64px; } .gc-space-actions { display: flex; flex-wrap: wrap; gap: 12px; } .gc-space-table-wrapper { overflow-x: auto; margin-top: clamp(12px, 2vw, 18px); } .gc-space-table { width: 100%; border-collapse: collapse; min-width: 520px; } .gc-space-table thead tr { text-align: left; border-bottom: 1px solid rgba(79, 210, 255, 0.25); } .gc-space-table th { padding: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; } .gc-space-table td { padding: 12px; border-bottom: 1px solid rgba(79, 210, 255, 0.12); } .gc-space-readiness-bar { display: flex; align-items: center; gap: 12px; } .gc-space-readiness-meter { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .gc-space-readiness-meter span { display: block; height: 100%; background: linear-gradient(135deg, var(--gc-space-glow-primary) 0%, var(--gc-space-glow-secondary) 100%); } @media (max-width: 640px) { html.gc-theme-space body .gc-space-header { flex-direction: column; align-items: flex-start; } html.gc-theme-space body .gc-space-header-meta { text-align: left; } .gc-space-table { min-width: 0; } } html.gc-theme-space body .gc-space-stack { margin-top: clamp(16px, 2vw, 24px); } .gc-space-mission-status { font-size: 0.65rem; } .gc-space-action { background: linear-gradient(120deg, rgba(79, 210, 255, 0.16) 0%, rgba(140, 93, 248, 0.18) 100%); border-color: rgba(79, 210, 255, 0.4); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .gc-space-action:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 210, 255, 0.35); } .gc-space-power { color: var(--gc-space-glow-primary); } .gc-space-signal-text { margin: 0; color: var(--gc-space-text); } .gc-space-shell { max-width: min(100%, 960px); margin-left: auto; margin-right: auto; } html.gc-theme-space body .mobileHide > .row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(7px, 1.5vw, 11px); } html.gc-theme-space body .mobileHide > .row > .col-lg-4, html.gc-theme-space body .mobileHide > .row > .col-lg-8 { float: none; flex: 1 1 280px; max-width: 520px; } html.gc-theme-space body .mobileHide > .row > .col-lg-4 .card, html.gc-theme-space body .mobileHide > .row > .col-lg-8 .card, html.gc-theme-space body .mobileShow .card { background: linear-gradient(180deg, rgba(79, 210, 255, 0.02) 0%, transparent 50%, rgba(79, 210, 255, 0.02) 100%), linear-gradient(145deg, rgba(14, 24, 46, 0.92) 0%, rgba(9, 18, 36, 0.9) 100%); border: 1px solid rgba(79, 210, 255, 0.3); clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ); box-shadow: 0 0 15px rgba(79, 210, 255, 0.1), 0 12px 30px -18px rgba(4, 12, 24, 0.85), inset 0 0 0 1px rgba(79, 210, 255, 0.06), inset 0 1px 0 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(14px) saturate(150%); } html.gc-theme-space body .mobileHide > .row > .col-lg-4 .card-body, html.gc-theme-space body .mobileHide > .row > .col-lg-8 .card-body, html.gc-theme-space body .mobileShow .card-body { padding: clamp(8px, 2vw, 11px) !important; } html.gc-theme-space body .mobileHide > .row > .col-lg-4 .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } html.gc-theme-space body .mobileHide > .row > .col-lg-4 .card-body .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px !important; clip-path: polygon( 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px ) !important; border: 1px solid rgba(79, 210, 255, 0.4) !important; background: linear-gradient(180deg, rgba(79, 210, 255, 0.12) 0%, rgba(140, 93, 248, 0.12) 100%), rgba(8, 18, 40, 0.6); color: var(--gc-space-text); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; text-shadow: 0 0 6px rgba(79, 210, 255, 0.3); box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.15); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, text-shadow 0.18s ease; } html.gc-theme-space body .mobileHide > .row > .col-lg-4 .card-body .button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.25), 0 0 16px rgba(79, 210, 255, 0.3); border-color: rgba(79, 210, 255, 0.7) !important; text-shadow: 0 0 8px rgba(79, 210, 255, 0.8), 0 0 16px rgba(79, 210, 255, 0.4); color: var(--gc-space-glow-primary); } html.gc-theme-space body .mobileHide > .row > .col-lg-8 .card-body { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; text-align: right; } html.gc-theme-space body .stats, html.gc-theme-space body .statsM { display: inline-flex; align-items: center; justify-content: center; padding: 3px 6px; background: linear-gradient(180deg, rgba(79, 210, 255, 0.08) 0%, rgba(140, 93, 248, 0.08) 100%), rgba(8, 18, 40, 0.6); border: 1px solid rgba(79, 210, 255, 0.4); clip-path: polygon( 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px ); color: var(--gc-space-text); font-weight: 700; letter-spacing: 0.08em; text-align: center; white-space: nowrap; text-shadow: 0 0 6px rgba(79, 210, 255, 0.3); box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.15), 0 0 10px rgba(79, 210, 255, 0.08); } html.gc-theme-space body .mobileShow .statsM { margin: 6px; } html.gc-theme-space body .mobileShow .card-body { display: grid; justify-items: center; row-gap: 8px; } html.gc-theme-space body .mobileShow .card-body .statsM { width: 100%; max-width: 280px; } html.gc-theme-space body .mobileShow .card-body .statsM:last-child { margin-bottom: 0; } html.gc-theme-space body .mobileShow { margin-top: clamp(18px, 3vw, 28px); } html.gc-theme-space body .col-lg-8.col-sm-12 { float: none; margin-left: auto; margin-right: auto; } html.gc-theme-space body .mobileHide > .row > .col-lg-8 { flex: 2 1 420px; } html.gc-theme-space body #blog > .container { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; } html.gc-theme-space body #blog > .container > .row:first-of-type { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: clamp(20px, 4vw, 34px); width: 100%; } html.gc-theme-space body #blog > .container > .row:first-of-type > [class*='col-'] { float: none !important; padding: 0 !important; width: auto; } html.gc-theme-space body #blog > .container > .row:first-of-type > .col-lg-8 { flex: 1 1 min(760px, 100%); max-width: min(980px, 100%); order: 2; } html.gc-theme-space body #blog > .container > .row:first-of-type > .col-lg-2 { flex: 0 1 clamp(220px, 24vw, 260px); max-width: clamp(220px, 24vw, 260px); min-width: 210px; order: 1; } html.gc-theme-space body #blog > .container > .row:first-of-type > .col-lg-2:last-of-type { flex: 0 1 clamp(240px, 26vw, 300px); max-width: clamp(240px, 26vw, 300px); min-width: 220px; order: 3; } @media (max-width: 1200px) { html.gc-theme-space body #blog > .container > .row:first-of-type { gap: clamp(16px, 4vw, 28px); } } /* Tight row spacing - reduces gaps between main columns */ html.gc-theme-space .gc-tight-row { margin-left: -5px; margin-right: -5px; } html.gc-theme-space .gc-tight-row > [class*='col-'] { padding-left: 5px !important; padding-right: 5px !important; } @media (max-width: 992px) { html.gc-theme-space body #blog > .container > .row:first-of-type { flex-direction: column; align-items: stretch; } html.gc-theme-space body #blog > .container > .row:first-of-type > .col-lg-2, html.gc-theme-space body #blog > .container > .row:first-of-type > .col-lg-8 { order: initial; flex: 1 1 auto; max-width: 100%; } html.gc-theme-space body .mobileHide > .row { justify-content: center; } } @media (min-width: 992px) { html.gc-theme-space body #blog > .container > .row:first-of-type > .col-lg-2:first-of-type { position: sticky; top: clamp(96px, 12vh, 120px); align-self: flex-start; } html.gc-theme-space body #blog > .container > .row:first-of-type > .col-lg-2:first-of-type .icon-bar2 { max-height: calc(100vh - clamp(128px, 16vh, 180px)); overflow-y: auto; padding-right: clamp(14px, 2vw, 18px) !important; scrollbar-width: thin; scrollbar-color: rgba(79, 210, 255, 0.3) transparent; } html.gc-theme-space body #blog > .container > .row:first-of-type > .col-lg-2:first-of-type .icon-bar2::-webkit-scrollbar { width: 6px; } html.gc-theme-space body #blog > .container > .row:first-of-type > .col-lg-2:first-of-type .icon-bar2::-webkit-scrollbar-thumb { background: rgba(79, 210, 255, 0.3); border-radius: 999px; } html.gc-theme-space body #blog > .container > .row:first-of-type > .col-lg-2:first-of-type .icon-bar2::-webkit-scrollbar-thumb:hover { background: rgba(79, 210, 255, 0.5); } } html.gc-theme-space body .gc-space-main { float: none; width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; } html.gc-theme-space body .gc-space-main::before, html.gc-theme-space body .gc-space-main::after { content: none; } /* ===== CHAT SIDEBAR STYLING - TACTICAL COMMUNICATIONS PANEL ===== */ /* Main chat container - fills right column with modern comms panel aesthetic */ html.gc-theme-space body .sidebar.blog-sidebar { background: linear-gradient(180deg, rgba(79, 210, 255, 0.02) 0%, transparent 50%, rgba(79, 210, 255, 0.02) 100%), linear-gradient(145deg, rgba(10, 20, 42, 0.96) 0%, rgba(6, 12, 28, 0.94) 100%); border: 2px solid transparent !important; border-image: linear-gradient(180deg, rgba(79, 210, 255, 0.4) 0%, rgba(140, 93, 248, 0.4) 50%, rgba(79, 210, 255, 0.4) 100%) 1 !important; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ); box-shadow: 0 0 25px rgba(79, 210, 255, 0.15), 0 14px 35px -20px rgba(4, 12, 24, 0.9), inset 0 0 0 1px rgba(79, 210, 255, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px) saturate(160%); padding: 0; margin: 0 0 clamp(12px, 2vw, 18px) 0; position: relative; overflow: hidden; } /* Inner chat panel with header */ html.gc-theme-space body .sidebar-item.recent { background: transparent; border: none !important; clip-path: none; box-shadow: none; backdrop-filter: none; padding: 0; margin: 0; display: flex; flex-direction: column; height: 100%; max-height: clamp(500px, 65vh, 700px); } /* Chat header - communication controls */ html.gc-theme-space body .sidebar-item.recent > * { flex-shrink: 0; } /* First div/element in chat (contains Post/Refresh/More links) - compact header navbar */ html.gc-theme-space body .sidebar-item.recent > div:first-of-type, html.gc-theme-space body .sidebar-item.recent > *:first-child:not(a[href*="ochat"]) { display: flex; align-items: stretch; justify-content: space-evenly; gap: 0; flex-wrap: nowrap; padding: 0; background: linear-gradient(180deg, rgba(79, 210, 255, 0.08) 0%, rgba(140, 93, 248, 0.08) 100%), rgba(8, 18, 40, 0.7); border-bottom: 1px solid rgba(79, 210, 255, 0.3); position: relative; flex-shrink: 0; font-size: 0; /* Hide text nodes (pipe characters) */ } /* Chat footer - contains Disable Chat toggle at bottom */ html.gc-theme-space body .sidebar-item.recent > a[href*="ochat"], html.gc-theme-space body .sidebar-item.recent > *:last-child:is(a[href*="ochat"]) { display: flex; align-items: center; justify-content: center; padding: 6px 10px; background: linear-gradient(180deg, rgba(79, 210, 255, 0.06) 0%, rgba(140, 93, 248, 0.06) 100%), rgba(8, 18, 40, 0.5); border-top: 1px solid rgba(79, 210, 255, 0.25); position: relative; flex-shrink: 0; order: 999; } /* Header accent line */ html.gc-theme-space body .sidebar-item.recent > *:first-child:not(a[href*="ochat"])::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(79, 210, 255, 0.6) 50%, transparent 100%); box-shadow: 0 0 8px rgba(79, 210, 255, 0.4); pointer-events: none; } /* Chat control links in header - navbar items (not footer toggle) */ html.gc-theme-space body .sidebar-item.recent > div:first-of-type a, html.gc-theme-space body .sidebar-item.recent > *:first-child:not(a[href*="ochat"]) a { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 6px; background: linear-gradient(180deg, rgba(79, 210, 255, 0.05) 0%, transparent 100%), rgba(8, 18, 40, 0.3); border: none; border-right: 1px solid rgba(79, 210, 255, 0.2); clip-path: none; color: var(--gc-space-text); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; text-shadow: 0 0 6px rgba(79, 210, 255, 0.3); white-space: nowrap; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: none; position: relative; overflow: hidden; } /* Remove border from last navbar item */ html.gc-theme-space body .sidebar-item.recent > div:first-of-type a:last-child, html.gc-theme-space body .sidebar-item.recent > *:first-child:not(a[href*="ochat"]) a:last-child { border-right: none; } /* Chat footer toggle link (Disable Chat) */ html.gc-theme-space body .sidebar-item.recent > a[href*="ochat"] { padding: 6px 10px; background: linear-gradient(180deg, rgba(79, 210, 255, 0.1) 0%, rgba(140, 93, 248, 0.1) 100%), rgba(8, 18, 40, 0.6); border: 1px solid rgba(79, 210, 255, 0.35); clip-path: polygon( 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px ); color: var(--gc-space-text); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; text-shadow: 0 0 6px rgba(79, 210, 255, 0.3); white-space: nowrap; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.15), 0 0 12px rgba(79, 210, 255, 0.08); position: relative; overflow: hidden; } /* Navbar item hover */ html.gc-theme-space body .sidebar-item.recent > div:first-of-type a:hover, html.gc-theme-space body .sidebar-item.recent > *:first-child:not(a[href*="ochat"]) a:hover, html.gc-theme-space body .sidebar-item.recent > div:first-of-type a:focus-visible, html.gc-theme-space body .sidebar-item.recent > *:first-child:not(a[href*="ochat"]) a:focus-visible { color: var(--gc-space-glow-primary); background: linear-gradient(180deg, rgba(79, 210, 255, 0.15) 0%, rgba(140, 93, 248, 0.08) 100%), rgba(10, 20, 45, 0.5); text-shadow: 0 0 10px rgba(79, 210, 255, 0.8), 0 0 20px rgba(79, 210, 255, 0.4); box-shadow: inset 0 0 20px rgba(79, 210, 255, 0.1); } /* Navbar item active/press */ html.gc-theme-space body .sidebar-item.recent > div:first-of-type a:active, html.gc-theme-space body .sidebar-item.recent > *:first-child:not(a[href*="ochat"]) a:active { background: linear-gradient(180deg, rgba(79, 210, 255, 0.08) 0%, rgba(140, 93, 248, 0.05) 100%), rgba(5, 12, 25, 0.7); box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3); } /* Footer toggle top accent line */ html.gc-theme-space body .sidebar-item.recent > a[href*="ochat"]::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(79, 210, 255, 0.4) 50%, transparent 100%); box-shadow: 0 0 6px rgba(79, 210, 255, 0.3); pointer-events: none; } /* Footer toggle hover */ html.gc-theme-space body .sidebar-item.recent > a[href*="ochat"]:hover, html.gc-theme-space body .sidebar-item.recent > a[href*="ochat"]:focus-visible { color: var(--gc-space-glow-primary); background: linear-gradient(180deg, rgba(79, 210, 255, 0.18) 0%, rgba(140, 93, 248, 0.18) 100%), rgba(12, 25, 55, 0.8); border-color: rgba(79, 210, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.3), 0 0 20px rgba(79, 210, 255, 0.3), 0 0 40px rgba(79, 210, 255, 0.15); text-shadow: 0 0 8px rgba(79, 210, 255, 0.8), 0 0 16px rgba(79, 210, 255, 0.4); transform: translateY(-1px); } /* Footer toggle active/press */ html.gc-theme-space body .sidebar-item.recent > a[href*="ochat"]:active { transform: translateY(0); background: linear-gradient(180deg, rgba(79, 210, 255, 0.12) 0%, rgba(140, 93, 248, 0.12) 100%), rgba(8, 18, 35, 0.8); box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.4), inset 0 0 15px rgba(0, 0, 0, 0.3), 0 0 15px rgba(79, 210, 255, 0.2); } /* Chat messages wrapper - contains all messages */ html.gc-theme-space body .sidebar-item.recent > *:not(:first-child):not(a[href*="ochat"]) { flex: 1; overflow-y: auto; overflow-x: hidden; padding: clamp(8px, 1.5vw, 12px); background: rgba(4, 10, 22, 0.4); scrollbar-width: thin; scrollbar-color: rgba(79, 210, 255, 0.35) transparent; min-height: 0; order: 2; } /* Individual chat message - transmission style */ html.gc-theme-space body .sidebar-item.recent .media { background: transparent; border-left: 2px solid rgba(79, 210, 255, 0.2); padding: clamp(6px, 1.2vw, 10px) clamp(8px, 1.5vw, 12px); margin: clamp(4px, 0.8vw, 6px) 0; text-align: left; position: relative; transition: all 0.25s ease; } /* Message accent glow */ html.gc-theme-space body .sidebar-item.recent .media::before { content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 0%; background: linear-gradient(180deg, rgba(79, 210, 255, 0.8) 0%, rgba(140, 93, 248, 0.8) 100%); box-shadow: 0 0 8px rgba(79, 210, 255, 0.5); transition: height 0.3s ease; } html.gc-theme-space body .sidebar-item.recent .media:hover::before { height: 100%; } html.gc-theme-space body .sidebar-item.recent .media:hover { background: rgba(79, 210, 255, 0.05); border-left-color: rgba(79, 210, 255, 0.5); padding-left: clamp(10px, 1.8vw, 14px); } /* Chat username - transmission header */ html.gc-theme-space body .sidebar-item.recent .media .pull-left, html.gc-theme-space body .sidebar-item.recent .media span[style*="font-weight"] { display: inline-block; color: var(--gc-space-glow-primary) !important; font-size: clamp(0.75rem, 1.3vw, 0.85rem); font-weight: 700 !important; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 0 8px rgba(79, 210, 255, 0.5); margin-right: 6px; } /* Username underline removed - cleaner look */ html.gc-theme-space body .sidebar-item.recent .media u { text-decoration: none; border-bottom: 1px solid rgba(79, 210, 255, 0.3); padding-bottom: 1px; } /* Chat message text - transmission content */ html.gc-theme-space body .sidebar-item.recent .media .pull-left + *, html.gc-theme-space body .sidebar-item.recent .media span + * { color: var(--gc-space-text-muted); font-size: clamp(0.78rem, 1.35vw, 0.88rem); line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; } /* Scrollbar styling - tactical UI */ html.gc-theme-space body .sidebar-item.recent > *:not(:first-child):not(a[href*="ochat"])::-webkit-scrollbar { width: 6px; } html.gc-theme-space body .sidebar-item.recent > *:not(:first-child):not(a[href*="ochat"])::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 3px; } html.gc-theme-space body .sidebar-item.recent > *:not(:first-child):not(a[href*="ochat"])::-webkit-scrollbar-thumb { background: rgba(79, 210, 255, 0.35); border-radius: 3px; box-shadow: 0 0 6px rgba(79, 210, 255, 0.4); } html.gc-theme-space body .sidebar-item.recent > *:not(:first-child):not(a[href*="ochat"])::-webkit-scrollbar-thumb:hover { background: rgba(79, 210, 255, 0.55); box-shadow: 0 0 10px rgba(79, 210, 255, 0.6); } /* Mobile responsive chat */ @media (max-width: 992px) { html.gc-theme-space body .sidebar.blog-sidebar { margin: clamp(12px, 2vw, 18px) 0; } html.gc-theme-space body .sidebar-item.recent { max-height: clamp(400px, 50vh, 500px); } } @media (max-width: 768px) { html.gc-theme-space body .sidebar-item.recent { max-height: 400px; } html.gc-theme-space body .sidebar-item.recent > *:first-child:not(a[href*="ochat"]) { padding: 0; gap: 0; } html.gc-theme-space body .sidebar-item.recent > div:first-of-type a, html.gc-theme-space body .sidebar-item.recent > *:first-child:not(a[href*="ochat"]) a { padding: 6px 4px; font-size: 0.68rem; } html.gc-theme-space body .sidebar-item.recent > a[href*="ochat"] { padding: 5px 8px; font-size: 0.65rem; } html.gc-theme-space body .sidebar-item.recent .media { padding: 6px 8px; margin: 4px 0; } } /* Modern Navigation Bar - Spacefront Theme Only */ html.gc-theme-space body .gc-space-nav { background: linear-gradient(135deg, rgba(14, 24, 46, 0.95) 0%, rgba(9, 18, 36, 0.92) 100%); border: 1px solid rgba(79, 210, 255, 0.25); border-radius: 16px; box-shadow: 0 8px 24px -12px rgba(4, 12, 24, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.03); backdrop-filter: blur(18px); padding: 0; margin: 1rem auto; max-width: 1200px; position: relative; z-index: 100; } html.gc-theme-space body .gc-space-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; } html.gc-theme-space body .gc-space-nav-list li { position: relative; flex: 0 0 auto; } html.gc-theme-space body .gc-space-nav-link { display: inline-block; padding: 14px 24px; color: var(--gc-space-text); text-decoration: none; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.3s ease; position: relative; border-radius: 16px; } html.gc-theme-space body .gc-space-nav-link::before { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, var(--gc-space-glow-primary) 0%, var(--gc-space-glow-secondary) 100%); transform: translateX(-50%); transition: width 0.3s ease; } html.gc-theme-space body .gc-space-nav-link:hover { color: var(--gc-space-glow-primary); text-shadow: 0 0 10px rgba(79, 210, 255, 0.5); background: rgba(79, 210, 255, 0.08); } html.gc-theme-space body .gc-space-nav-link:hover::before { width: 80%; } html.gc-theme-space body .gc-space-nav-logout { color: #ff6b6b; margin-left: 12px; border-left: 1px solid rgba(79, 210, 255, 0.2); } html.gc-theme-space body .gc-space-nav-logout:hover { color: #ff9999; background: rgba(255, 107, 107, 0.1); text-shadow: 0 0 10px rgba(255, 107, 107, 0.5); } @media (max-width: 768px) { html.gc-theme-space body .gc-space-nav { margin: 0.5rem auto; border-radius: 12px; } html.gc-theme-space body .gc-space-nav-list { flex-direction: column; gap: 0; } html.gc-theme-space body .gc-space-nav-link { width: 100%; text-align: center; padding: 12px 20px; border-bottom: 1px solid rgba(79, 210, 255, 0.1); } html.gc-theme-space body .gc-space-nav-list li:last-child .gc-space-nav-link { border-bottom: none; } html.gc-theme-space body .gc-space-nav-logout { border-left: none; border-top: 1px solid rgba(79, 210, 255, 0.2); margin-left: 0; } } /* ===== LAYOUT RESTRUCTURING - MOVE POST-CONTENT-BOTTOM BELOW LAYOUT ===== */ /* Hide the post-content bottom from the right sidebar */ html.gc-theme-space body .gc-tight-row > .col-lg-2:last-child .post-content.bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: clamp(8px, 1.5vw, 16px); padding: clamp(10px, 1.5vw, 14px); background: linear-gradient(180deg, rgba(79, 210, 255, 0.02) 0%, transparent 50%, rgba(79, 210, 255, 0.02) 100%), linear-gradient(145deg, rgba(8, 15, 35, 0.98) 0%, rgba(6, 12, 28, 0.98) 100%); border-top: 2px solid transparent !important; border-image: linear-gradient(90deg, rgba(79, 210, 255, 0.5) 0%, rgba(140, 93, 248, 0.5) 50%, rgba(79, 210, 255, 0.5) 100%) 1 !important; box-shadow: 0 -8px 32px rgba(4, 12, 28, 0.95), 0 0 40px rgba(79, 210, 255, 0.15), inset 0 1px 0 0 rgba(79, 210, 255, 0.15); backdrop-filter: blur(20px) saturate(180%); text-align: center; margin: 0; } /* Individual info segments in horizontal footer */ html.gc-theme-space body .gc-tight-row > .col-lg-2:last-child .post-content.bottom > * { flex: 0 1 auto; font-size: 0.85rem; } /* Keep match timer separate and prominent */ html.gc-theme-space body .gc-tight-row > .col-lg-2:last-child .post-content.bottom > span:last-child { flex: 1 1 100%; margin-top: clamp(6px, 1vw, 8px); padding-top: clamp(6px, 1vw, 8px); border-top: 1px solid rgba(79, 210, 255, 0.3); font-size: 1rem; } /* Mobile layout - stack footer items */ @media (max-width: 768px) { html.gc-theme-space body .gc-tight-row > .col-lg-2:last-child .post-content.bottom { flex-direction: column; gap: clamp(6px, 1vw, 10px); padding: clamp(8px, 1.5vw, 12px); } html.gc-theme-space body .gc-tight-row > .col-lg-2:last-child .post-content.bottom > * { flex: 1 1 auto; width: 100%; font-size: 0.8rem; } html.gc-theme-space body .gc-tight-row > .col-lg-2:last-child .post-content.bottom > span:last-child { font-size: 0.9rem; } } /* ===== DEFAULT TABLE STYLING - SPACEFRONT THEME ===== */ /* Modern data table with sci-fi aesthetic */ html.gc-theme-space Table.Default { border: 2px solid transparent; border-image: linear-gradient(135deg, rgba(79, 210, 255, 0.4) 0%, rgba(140, 93, 248, 0.4) 50%, rgba(79, 210, 255, 0.4) 100%) 1; margin: 0 auto; /* Allow inline width styles to work - don't override */ background: linear-gradient(180deg, rgba(79, 210, 255, 0.03) 0%, transparent 50%, rgba(79, 210, 255, 0.03) 100%), linear-gradient(145deg, rgba(10, 20, 42, 0.85) 0%, rgba(6, 12, 28, 0.85) 100%); border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 0 20px rgba(79, 210, 255, 0.12), 0 10px 25px -15px rgba(4, 12, 24, 0.8), inset 0 0 0 1px rgba(79, 210, 255, 0.08); backdrop-filter: blur(12px) saturate(140%); } /* Table header - tactical command style */ html.gc-theme-space Table.Default thead { text-align: center; background: linear-gradient(180deg, rgba(79, 210, 255, 0.12) 0%, rgba(140, 93, 248, 0.08) 100%), rgba(10, 20, 45, 0.9); position: relative; } html.gc-theme-space Table.Default thead tr { border: none; background: transparent; color: var(--gc-space-text); } html.gc-theme-space Table.Default thead tr.Header { background: linear-gradient(180deg, rgba(79, 210, 255, 0.15) 0%, rgba(140, 93, 248, 0.1) 100%), rgba(12, 25, 50, 0.95); border-bottom: 2px solid rgba(79, 210, 255, 0.4); position: relative; } /* Header accent line */ html.gc-theme-space Table.Default thead tr.Header::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(79, 210, 255, 0.8) 50%, transparent 100%); box-shadow: 0 0 8px rgba(79, 210, 255, 0.6); pointer-events: none; } html.gc-theme-space Table.Default thead tr td { padding: 3px 6px; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gc-space-glow-primary); text-shadow: 0 0 8px rgba(79, 210, 255, 0.5); border: none; } /* Table body rows - data display */ html.gc-theme-space Table.Default tbody tr { color: var(--gc-space-text); background-color: rgba(8, 18, 38, 0.5); transition: all 0.2s ease; border-bottom: 1px solid rgba(79, 210, 255, 0.1); } html.gc-theme-space Table.Default tbody tr:nth-child(odd) { background-color: rgba(12, 22, 45, 0.6); } /* Hover effect only on rows containing links (interactive rows) */ html.gc-theme-space Table.Default tbody tr:has(a):hover { background: rgba(79, 210, 255, 0.08); box-shadow: inset 0 0 15px rgba(79, 210, 255, 0.1); border-left: 2px solid rgba(79, 210, 255, 0.5); cursor: pointer; } html.gc-theme-space Table.Default tbody td { border: none; text-align: center; padding: 4px 6px; font-size: 1.2rem; line-height: 1.5; } /* First column - often labels */ html.gc-theme-space Table.Default tbody td:first-child { border-left: none; font-weight: 600; color: var(--gc-space-text-muted); text-align: left; padding-left: 16px; } /* Last column */ html.gc-theme-space Table.Default tbody td:last-child { padding-right: 16px; text-align: right; } /* Links in tables */ html.gc-theme-space Table.Default a { color: var(--gc-space-glow-primary); text-decoration: none; transition: all 0.2s ease; text-shadow: 0 0 4px rgba(79, 210, 255, 0.3); } html.gc-theme-space Table.Default a:hover { color: var(--gc-space-glow-secondary); text-shadow: 0 0 8px rgba(140, 93, 248, 0.6); text-decoration: underline; } /* Centered content tables (like action buttons) */ html.gc-theme-space Table.Default tbody td[style*="text-align: center"], html.gc-theme-space Table.Default tbody td[colspan] { text-align: center !important; padding: 3px 6px; } /* Yellow font styling for warnings/special info - flashy complementary color */ html.gc-theme-space .yellowfont2 { color: #ffcc00; font-weight: 700; text-shadow: 0 0 10px rgba(255, 204, 0, 0.8), 0 0 20px rgba(255, 204, 0, 0.5), 0 0 30px rgba(255, 204, 0, 0.3); animation: gcYellowPulse 3s ease-in-out infinite; } @keyframes gcYellowPulse { 0%, 100% { text-shadow: 0 0 10px rgba(255, 204, 0, 0.8), 0 0 20px rgba(255, 204, 0, 0.5), 0 0 30px rgba(255, 204, 0, 0.3); } 50% { text-shadow: 0 0 15px rgba(255, 204, 0, 1), 0 0 30px rgba(255, 204, 0, 0.8), 0 0 45px rgba(255, 204, 0, 0.5); } } /* Images in tables */ html.gc-theme-space Table.Default img { vertical-align: middle; margin: 0 4px; filter: drop-shadow(0 0 3px rgba(79, 210, 255, 0.3)); } /* Market page specific table layouts */ html.gc-theme-space .col-lg-7 Table.Default { width: 100% !important; max-width: 100% !important; } html.gc-theme-space .col-lg-5 Table.Default { width: 100% !important; max-width: 100% !important; } html.gc-theme-space .col-xs-8 Table.Default, html.gc-theme-space .col-s-8 Table.Default { width: 100% !important; max-width: 100% !important; } html.gc-theme-space .col-xs-4 Table.Default, html.gc-theme-space .col-s-4 Table.Default { width: 100% !important; max-width: 100% !important; } /* Mobile responsiveness for tables and columns */ @media (max-width: 768px) { html.gc-theme-space Table.Default { font-size: 0.95rem; border-radius: 6px; } html.gc-theme-space Table.Default thead tr td { padding: 4px 8px; font-size: 0.85rem; } html.gc-theme-space Table.Default tbody td { padding: 3px 6px; font-size: 0.82rem; } html.gc-theme-space Table.Default tbody td:first-child { padding-left: 5px; } html.gc-theme-space Table.Default tbody td:last-child { padding-right: 5px; } /* Stack market columns on mobile */ html.gc-theme-space body .col-lg-7, html.gc-theme-space body .col-lg-5, html.gc-theme-space body .col-s-8, html.gc-theme-space body .col-xs-8, html.gc-theme-space body .col-s-4, html.gc-theme-space body .col-xs-4 { flex: 0 0 100%; max-width: 100%; padding: 5px; margin-bottom: 10px; } } /* ===== INPUT FIELD STYLING - SPACEFRONT THEME ===== */ /* Text inputs - tactical data entry */ html.gc-theme-space input[type="text"], html.gc-theme-space input[type="password"], html.gc-theme-space input[type="email"], html.gc-theme-space input[type="number"], html.gc-theme-space input[type="search"], html.gc-theme-space textarea, html.gc-theme-space select { background: linear-gradient(180deg, rgba(79, 210, 255, 0.03) 0%, transparent 100%), rgba(8, 18, 38, 0.8); border: 1px solid rgba(79, 210, 255, 0.3); border-radius: 4px; color: var(--gc-space-text); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 1rem; padding: 4px 6px; transition: all 0.3s ease; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(79, 210, 255, 0); outline: none; } html.gc-theme-space input[type="text"]::placeholder, html.gc-theme-space input[type="password"]::placeholder, html.gc-theme-space input[type="email"]::placeholder, html.gc-theme-space input[type="number"]::placeholder, html.gc-theme-space input[type="search"]::placeholder, html.gc-theme-space textarea::placeholder { color: var(--gc-space-text-muted); opacity: 0.6; } /* Input focus state - active data entry */ html.gc-theme-space input[type="text"]:focus, html.gc-theme-space input[type="password"]:focus, html.gc-theme-space input[type="email"]:focus, html.gc-theme-space input[type="number"]:focus, html.gc-theme-space input[type="search"]:focus, html.gc-theme-space textarea:focus, html.gc-theme-space select:focus { background: linear-gradient(180deg, rgba(79, 210, 255, 0.08) 0%, rgba(140, 93, 248, 0.03) 100%), rgba(10, 22, 45, 0.9); border-color: rgba(79, 210, 255, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(79, 210, 255, 0.15), 0 0 12px rgba(79, 210, 255, 0.3); color: var(--gc-space-glow-primary); } /* Input hover state */ html.gc-theme-space input[type="text"]:hover, html.gc-theme-space input[type="password"]:hover, html.gc-theme-space input[type="email"]:hover, html.gc-theme-space input[type="number"]:hover, html.gc-theme-space input[type="search"]:hover, html.gc-theme-space textarea:hover, html.gc-theme-space select:hover { border-color: rgba(79, 210, 255, 0.5); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 8px rgba(79, 210, 255, 0.2); } /* Submit/Button inputs - tactical action buttons */ html.gc-theme-space input[type="submit"], html.gc-theme-space input[type="button"], html.gc-theme-space input[type="reset"], html.gc-theme-space button { background: linear-gradient(180deg, rgba(79, 210, 255, 0.15) 0%, rgba(140, 93, 248, 0.1) 100%), rgba(12, 25, 50, 0.9); border: 2px solid rgba(79, 210, 255, 0.4); border-radius: 6px; clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ); color: var(--gc-space-text); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; text-align: center; text-shadow: 0 0 6px rgba(79, 210, 255, 0.3); padding: 5px 10px; margin: 4px; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.15), 0 0 15px rgba(79, 210, 255, 0.1), 0 4px 8px -2px rgba(4, 12, 24, 0.6); position: relative; overflow: hidden; display: inline-block; } /* Button glow effect on hover */ html.gc-theme-space input[type="submit"]:hover, html.gc-theme-space input[type="button"]:hover, html.gc-theme-space input[type="reset"]:hover, html.gc-theme-space button:hover { background: linear-gradient(180deg, rgba(79, 210, 255, 0.25) 0%, rgba(140, 93, 248, 0.18) 100%), rgba(15, 30, 60, 0.95); border-color: rgba(79, 210, 255, 0.7); color: var(--gc-space-glow-primary); box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.3), 0 0 25px rgba(79, 210, 255, 0.3), 0 0 45px rgba(79, 210, 255, 0.15), 0 6px 12px -4px rgba(4, 12, 24, 0.8); text-shadow: 0 0 10px rgba(79, 210, 255, 0.8), 0 0 20px rgba(79, 210, 255, 0.4); transform: translateY(-2px); } /* Button active/pressed state */ html.gc-theme-space input[type="submit"]:active, html.gc-theme-space input[type="button"]:active, html.gc-theme-space input[type="reset"]:active, html.gc-theme-space button:active { background: linear-gradient(180deg, rgba(79, 210, 255, 0.08) 0%, rgba(140, 93, 248, 0.05) 100%), rgba(8, 18, 35, 0.95); border-color: rgba(79, 210, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.4), inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 15px rgba(79, 210, 255, 0.2); transform: translateY(0); } /* Button disabled state */ html.gc-theme-space input[type="submit"]:disabled, html.gc-theme-space input[type="button"]:disabled, html.gc-theme-space input[type="reset"]:disabled, html.gc-theme-space button:disabled { background: rgba(20, 30, 50, 0.5); border-color: rgba(79, 210, 255, 0.15); color: var(--gc-space-text-muted); text-shadow: none; cursor: not-allowed; opacity: 0.5; box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.05), 0 0 5px rgba(0, 0, 0, 0.3); } html.gc-theme-space input[type="submit"]:disabled:hover, html.gc-theme-space input[type="button"]:disabled:hover, html.gc-theme-space input[type="reset"]:disabled:hover, html.gc-theme-space button:disabled:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(79, 210, 255, 0.05), 0 0 5px rgba(0, 0, 0, 0.3); } /* Select dropdowns */ html.gc-theme-space select { cursor: pointer; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, rgba(79, 210, 255, 0.8) 50%), linear-gradient(135deg, rgba(79, 210, 255, 0.8) 50%, transparent 50%); background-position: calc(100% - 15px) center, calc(100% - 10px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; appearance: none; -webkit-appearance: none; -moz-appearance: none; } /* Textarea */ html.gc-theme-space textarea { resize: vertical; min-height: 80px; line-height: 1.5; } /* Mobile responsive inputs */ @media (max-width: 768px) { html.gc-theme-space input[type="text"], html.gc-theme-space input[type="password"], html.gc-theme-space input[type="email"], html.gc-theme-space input[type="number"], html.gc-theme-space input[type="search"], html.gc-theme-space textarea, html.gc-theme-space select { font-size: 0.95rem; padding: 3px 5px; } html.gc-theme-space input[type="submit"], html.gc-theme-space input[type="button"], html.gc-theme-space input[type="reset"], html.gc-theme-space button { font-size: 0.95rem; padding: 4px 8px; } }