/* * 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: #030914; --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: radial-gradient(circle at 20% 20%, rgba(83, 195, 255, 0.12) 0%, transparent 55%), radial-gradient(circle at 80% 10%, rgba(146, 92, 255, 0.16) 0%, transparent 60%), radial-gradient(circle at 50% 75%, rgba(86, 255, 214, 0.1) 0%, transparent 55%), linear-gradient(160deg, #020510 0%, #051221 45%, #020510 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; } /* Column Layout - Spacefront */ html.gc-theme-space body .col-lg-8 { background: var(--gc-space-panel); border: 1px solid var(--gc-space-panel-border); border-radius: 12px; backdrop-filter: var(--gc-space-surface-blur); padding: 20px; } html.gc-theme-space body .col-lg-2 { 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; } /* Starfield layer */ html.gc-theme-space body::before { background-image: radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.7) 0%, transparent 55%), radial-gradient(1.3px 1.3px at 42% 65%, rgba(176, 226, 255, 0.8) 0%, transparent 60%), radial-gradient(1.4px 1.4px at 78% 32%, rgba(255, 217, 125, 0.75) 0%, transparent 65%), radial-gradient(1px 1px at 24% 80%, rgba(255, 255, 255, 0.55) 0%, transparent 55%), radial-gradient(1.2px 1.2px at 61% 12%, rgba(156, 214, 255, 0.65) 0%, transparent 60%); background-repeat: repeat; background-size: 220px 220px, 320px 320px, 420px 420px, 520px 520px, 620px 620px; opacity: 0.65; animation: gcStarfieldDrift 160s linear infinite; } /* Nebula glow */ html.gc-theme-space body::after { z-index: -1; background-image: radial-gradient(circle at 18% 28%, rgba(103, 93, 255, 0.28) 0%, transparent 55%), radial-gradient(circle at 72% 22%, rgba(90, 205, 255, 0.22) 0%, transparent 60%), radial-gradient(circle at 50% 76%, rgba(173, 91, 255, 0.18) 0%, transparent 55%); mix-blend-mode: screen; opacity: 0.85; animation: gcNebulaPulse 40s 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: 24px auto; padding: 20px 16px 32px; max-width: min(1100px, 96%); backdrop-filter: var(--gc-space-surface-blur); } /* ===== NAVIGATION COMPONENTS ===== */ /* Banner Component */ html.gc-theme-space .gc-banner, html.gc-theme-space body .icon-bar { background: linear-gradient(140deg, rgba(10, 22, 48, 0.94) 0%, rgba(15, 32, 70, 0.94) 100%) !important; border: 1px solid rgba(79, 210, 255, 0.28) !important; border-radius: 18px !important; box-shadow: 0 22px 48px -28px rgba(4, 12, 28, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(20px) !important; padding: clamp(16px, 2.1vw, 22px) !important; margin: 0 auto clamp(18px, 2vw, 28px) !important; position: relative; overflow: hidden; } /* Top Navigation */ html.gc-theme-space .gc-top-nav, html.gc-theme-space body .icon-bar:has(.buttonN-group) { background: linear-gradient(140deg, rgba(15, 25, 55, 0.95) 0%, rgba(20, 35, 75, 0.95) 100%) !important; border: 1px solid rgba(79, 210, 255, 0.35) !important; border-radius: 14px !important; backdrop-filter: blur(24px) !important; padding: 12px 20px !important; margin: 0 auto 24px auto !important; } /* Left Navigation */ html.gc-theme-space .gc-left-nav, html.gc-theme-space body .icon-bar2, html.gc-theme-space body .icon-bar2M { background: linear-gradient(140deg, rgba(8, 18, 40, 0.92) 0%, rgba(12, 25, 60, 0.92) 100%) !important; border: 1px solid rgba(79, 210, 255, 0.25) !important; border-radius: 16px !important; box-shadow: 0 18px 40px -24px rgba(4, 12, 28, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(18px) !important; padding: clamp(14px, 1.8vw, 20px) !important; margin: 0 auto clamp(16px, 1.8vw, 24px) auto !important; position: relative; overflow: hidden; } /* Navigation Links */ html.gc-theme-space .gc-left-nav a, html.gc-theme-space .gc-top-nav a, html.gc-theme-space .icon-bar2 a, html.gc-theme-space .buttonN-group a { color: var(--gc-space-text) !important; text-decoration: none !important; padding: 6px 12px !important; border-radius: 8px !important; transition: all 0.3s ease !important; display: inline-block !important; margin: 2px 4px !important; } html.gc-theme-space .gc-left-nav a:hover, html.gc-theme-space .gc-top-nav a:hover, html.gc-theme-space .icon-bar2 a:hover, html.gc-theme-space .buttonN-group a:hover { background: rgba(79, 210, 255, 0.15) !important; color: var(--gc-space-glow-primary) !important; box-shadow: 0 0 12px rgba(79, 210, 255, 0.3) !important; } /* Navigation Section Headers */ html.gc-theme-space .gc-left-nav span, html.gc-theme-space .icon-bar2 span { color: var(--gc-space-glow-secondary) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; font-size: 0.85em !important; } /* 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.5% 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: 11px 16px; display: flex !important; align-items: center; justify-content: space-between; gap: 10px; 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: 10px; margin: 0 0 14px 0; padding-bottom: 10px; 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: 16px; } 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 */ 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(150deg, rgba(14, 23, 46, 0.92) 0%, rgba(9, 18, 36, 0.88) 100%); border: 1px solid rgba(79, 210, 255, 0.15); border-radius: 14px; color: var(--gc-space-text); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.03); } 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.25); color: var(--gc-space-glow-primary); text-shadow: 0 0 12px rgba(79, 210, 255, 0.55); font-weight: 700; letter-spacing: 0.04em; } /* 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 responsiveness */ @media (max-width: 768px) { html.gc-theme-space body #blog { padding: 18px 14px 24px; margin: 16px auto; } 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; } } @media (prefers-reduced-motion: reduce) { html.gc-theme-space body::before, html.gc-theme-space body::after { animation: none; } } /* 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(14px, 2vw, 22px); } 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(145deg, rgba(14, 24, 46, 0.92) 0%, rgba(9, 18, 36, 0.9) 100%); border: 1px solid rgba(79, 210, 255, 0.25); border-radius: 16px; box-shadow: 0 12px 30px -18px rgba(4, 12, 24, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.03); backdrop-filter: blur(14px); } 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(16px, 3vw, 22px) !important; } html.gc-theme-space body .mobileHide > .row > .col-lg-4 .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } 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: 10px 18px !important; border-radius: 12px !important; border: 1px solid rgba(79, 210, 255, 0.4) !important; background: linear-gradient(120deg, rgba(79, 210, 255, 0.18) 0%, rgba(140, 93, 248, 0.22) 100%); color: var(--gc-space-text); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } html.gc-theme-space body .mobileHide > .row > .col-lg-4 .card-body .button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79, 210, 255, 0.35); border-color: rgba(140, 93, 248, 0.55) !important; } html.gc-theme-space body .mobileHide > .row > .col-lg-8 .card-body { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; 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: 10px 16px; border-radius: 999px; background: linear-gradient(135deg, rgba(79, 210, 255, 0.12) 0%, rgba(140, 93, 248, 0.15) 100%); border: 1px solid rgba(79, 210, 255, 0.35); color: var(--gc-space-text); font-weight: 600; letter-spacing: 0.06em; min-width: 96px; text-align: center; white-space: nowrap; } html.gc-theme-space body .stats:first-child, html.gc-theme-space body .statsM:first-child { margin-left: 0; } 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 */ html.gc-theme-space body .gc-space-chat { background: 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.25); border-radius: 16px; box-shadow: 0 12px 30px -18px rgba(4, 12, 24, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.03); backdrop-filter: blur(14px); padding: clamp(12px, 2vw, 18px); margin: 0; max-height: 450px; overflow-y: auto; font-size: 0.9em; text-align: center; } html.gc-theme-space body .gc-space-chat::-webkit-scrollbar { width: 8px; } html.gc-theme-space body .gc-space-chat::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 4px; } html.gc-theme-space body .gc-space-chat::-webkit-scrollbar-thumb { background: rgba(79, 210, 255, 0.3); border-radius: 4px; } html.gc-theme-space body .gc-space-chat::-webkit-scrollbar-thumb:hover { background: rgba(79, 210, 255, 0.5); } /* 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; } }