/* --- CONFIGURATION TOGGLE (CHANGE THIS TO SWITCH MODAL STYLES) --- */ /* Set to 'simple' for basic modal, or 'video' for the video entry system */ :root { --modal-style: simple; /* Options: 'simple' or 'video' */ --forge-ember: #b0b8b6; --forge-ember-dim: rgba(192, 192, 192, 0.42); --forge-ember-hot: #e4e8e6; --knight-teal: #0a1214; --knight-teal-mid: #0f1a1d; --knight-moss: #1a2e24; --knight-fog: rgba(45, 72, 78, 0.45); --void-deep: #070a0b; --void-mid: #0a1214; --steel-edge: #4a5c5a; --steel-bright: #b8c4c2; } /* --- DO NOT REMOVE THIS COMMENT, DO NOT IGNORE THIS COMMENT, ALL CSS DECLARATIONS MUST MATCH THE EXISTING FORMAT OF SINGL-LINE --- */ /* --- Global Styles & Variables - FORTRESS METALLIC GREY THEME (matches fort background) --- */ html { zoom: 0.85; } :root { --primary-bg: rgba(32, 32, 32, 0.95); --secondary-bg: rgba(40, 40, 40, 0.98); --accent-color: #C0C0C0; --accent-primary: #A9A9A9; --accent-primary-bright: #D0D0D0; --accent-gold: #A9A9A9; --accent-magenta: #909090; --accent-purple: #808080; --accent-cyan: #B0B0B0; --accent-orange: #909898; --discord-color: #5865F2; --mordhau-color: #909898; --minecraft-color: #708090; --text-primary: #D0D0D0; --text-secondary: #8A8A8A; --text-glow: rgba(192, 192, 192, 0.5); --border-color: rgba(169, 169, 169, 0.4); --border-glow: rgba(192, 192, 192, 0.5); --hover-bg: rgba(192, 192, 192, 0.08); --font-primary: 'Cinzel', serif; --font-secondary: 'Rajdhani', sans-serif; --font-decorative: 'Cinzel', serif; --font-tech: 'Cinzel', serif; --transition: all 0.3s ease; --super-admin-color: #708090; --admin-color: #A9A9A9; --accent-glow: rgba(192, 192, 192, 0.25); --accent-glow-strong: rgba(192, 192, 192, 0.4); --accent-secondary-glow: rgba(169, 169, 169, 0.3); --accent-tertiary-glow: rgba(128, 128, 128, 0.3); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-secondary); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #1a1a1a; background-image: radial-gradient(ellipse at 50% 50%, rgba(48, 48, 48, 0.4) 0%, transparent 70%), linear-gradient(180deg, rgba(32, 32, 32, 0.95) 0%, rgba(26, 26, 26, 0.98) 100%); background-attachment: fixed; min-height: 125vh; background-size: cover; line-height: 1.6; font-size: 18px; position: relative; } /* HUD Corner Decorations - Arc Raiders style */ .page-overlay::before { display: none; } .page-overlay::after { display: none; } /* --- SPA Page Content Hiding --- */ .page-content { display: none; opacity: 1; transform: none; } .page-content.active { display: block; } .page-content.page-exiting { opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease-in, transform 0.3s ease-in; } .page-content.active.page-enter:not(#starcitizen) { animation: pageShellIn 0.45s ease-out; } @keyframes pageShellIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .page-content.page-exiting, .page-content.active.page-enter { animation: none; transition: none; transform: none; } } /* --- Persistent Elements Styling (Atmosphere, Modal, Nav) --- */ .fort-fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; } #site-atmosphere { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 2.8s ease-in; } #site-atmosphere.active { opacity: 1; } body.modal-visible #site-atmosphere { opacity: 0 !important; transition: opacity 0.4s ease-out; } body.page-starcitizen #site-atmosphere { opacity: 0 !important; visibility: hidden; } .atmosphere-smoke { position: absolute; inset: 0; pointer-events: none; opacity: 0.88; background: radial-gradient(ellipse 170% 100% at 50% 100%, rgba(32, 54, 60, 0.75) 0%, rgba(32, 54, 60, 0.48) 42%, transparent 72%), radial-gradient(ellipse 130% 75% at 50% 0%, rgba(32, 54, 60, 0.42) 0%, transparent 62%), radial-gradient(ellipse 85% 60% at 8% 75%, rgba(32, 54, 60, 0.3) 0%, transparent 55%), radial-gradient(ellipse 85% 60% at 92% 72%, rgba(32, 54, 60, 0.26) 0%, transparent 55%); animation: atmosphereSmokeDrift 75s ease-in-out infinite alternate; } .atmosphere-smoke-texture { position: absolute; inset: 0; pointer-events: none; background: #4a626a; filter: url(#fort-smoke); opacity: 0.48; animation: atmosphereSmokePulse 50s ease-in-out infinite alternate; } .atmosphere-grain { position: absolute; inset: 0; pointer-events: none; background: #808080; opacity: 0.06; filter: url(#fort-grain); mix-blend-mode: overlay; animation: atmosphereGrainShift 9s steps(6) infinite; } .atmosphere-vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 74% 64% at 50% 42%, transparent 26%, rgba(0, 0, 0, 0.42) 54%, rgba(0, 0, 0, 0.7) 100%), radial-gradient(ellipse 55% 45% at 0% 0%, rgba(0, 0, 0, 0.55) 0%, transparent 65%), radial-gradient(ellipse 55% 45% at 100% 0%, rgba(0, 0, 0, 0.55) 0%, transparent 65%), radial-gradient(ellipse 55% 50% at 0% 100%, rgba(0, 0, 0, 0.58) 0%, transparent 65%), radial-gradient(ellipse 55% 50% at 100% 100%, rgba(0, 0, 0, 0.58) 0%, transparent 65%); box-shadow: inset 0 0 200px 75px rgba(0, 0, 0, 0.48); } @keyframes atmosphereSmokeDrift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(2%, -1%) scale(1.035); } } @keyframes atmosphereSmokePulse { 0% { opacity: 0.42; } 100% { opacity: 0.55; } } @keyframes atmosphereGrainShift { 0% { transform: translate(0, 0); } 100% { transform: translate(-2%, -1.5%); } } .knight-bg { position: fixed; inset: 0; z-index: -3; pointer-events: none; opacity: 0; transition: opacity 2.2s ease-in; overflow: hidden; } .knight-bg.active { opacity: 1; } body.modal-visible .knight-bg { opacity: 0 !important; transition: opacity 0.4s ease-out; } body.page-starcitizen .knight-bg { opacity: 0 !important; visibility: hidden; } .knight-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transform: scale(1.06); filter: saturate(0.9) brightness(0.5) contrast(1.08); } html[data-hero="portal"] body:not(.page-starcitizen) { background-color: var(--void-deep); background-image: none; } html[data-hero="portal"] { --primary-bg: rgba(10, 18, 20, 0.88); --secondary-bg: rgba(14, 24, 26, 0.94); --accent-color: #c0c0c0; --accent-primary: #a8b0ae; --accent-primary-bright: #e4e8e6; --accent-gold: var(--steel-bright); --text-primary: #d4ddd9; --text-secondary: #7a8f8a; --border-color: rgba(74, 92, 90, 0.5); --border-glow: rgba(192, 192, 192, 0.38); --hover-bg: rgba(192, 192, 192, 0.1); } html[data-hero="portal"] .navbar { top: 1rem; margin-left: 1.25rem; margin-right: 1.25rem; border-radius: 10px; background: linear-gradient(180deg, rgba(8, 14, 16, 0.99) 0%, rgba(10, 18, 20, 0.97) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(74, 92, 90, 0.5); border-bottom: 2px solid rgba(192, 192, 192, 0.5); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12); } html[data-hero="portal"] #nav-music-controls { background: linear-gradient(135deg, rgba(14, 24, 26, 0.98), rgba(8, 14, 16, 0.98)); border-color: rgba(169, 169, 169, 0.4); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08); } html[data-hero="portal"] .nav-control-btn { border-color: rgba(169, 169, 169, 0.55); color: var(--accent-primary-bright); background: linear-gradient(145deg, rgba(30, 42, 44, 0.95), rgba(16, 24, 26, 0.98)); } html[data-hero="portal"] .nav-item a { color: var(--text-primary); background: rgba(8, 16, 18, 0.75); border-color: rgba(74, 92, 90, 0.55); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } html[data-hero="portal"] .nav-item a:hover, html[data-hero="portal"] .nav-item a.active { color: var(--forge-ember-hot); border-color: rgba(192, 192, 192, 0.55); background: rgba(20, 28, 30, 0.9); text-shadow: 0 0 12px var(--forge-ember-dim), 0 1px 3px rgba(0, 0, 0, 0.9); } html[data-hero="portal"] #song-readout { color: var(--text-primary); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } html[data-hero="portal"] .discord-info { background: rgba(10, 18, 20, 0.55); border-color: rgba(74, 92, 90, 0.45); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05); } html[data-hero="portal"] #discord-banner-container::before { background: linear-gradient(to top, rgba(10, 18, 20, 0.12) 0%, transparent 50%); } html[data-hero="portal"] .discord-widget-content { background: transparent; } html[data-hero="portal"] .discord-title { color: var(--accent-primary-bright); text-shadow: 0 0 20px var(--forge-ember-dim), 1px 1px 2px rgba(0, 0, 0, 0.9); } html[data-hero="portal"] .community-section { background: rgba(10, 18, 20, 0.55); border-color: rgba(74, 92, 90, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html[data-hero="portal"] .community-section::before { background: linear-gradient(90deg, #505858, var(--steel-bright), #707878, #505858); } html[data-hero="portal"] .widget { background: rgba(10, 18, 20, 0.55) !important; border-color: rgba(74, 92, 90, 0.45) !important; } html[data-hero="portal"] .fortress-entry-modal { background: linear-gradient(135deg, rgba(10, 18, 20, 0.98), rgba(14, 24, 26, 0.98)); border-color: rgba(169, 169, 169, 0.45); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.85), 0 0 50px rgba(192, 192, 192, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); } html[data-hero="portal"] .fortress-entry-modal::before { background: linear-gradient(90deg, #505858, var(--steel-bright), #707878, #505858); } html[data-hero="portal"] .gate-title { background: linear-gradient(180deg, #f0f4f2 0%, #c0c8c6 50%, #707878 100%); -webkit-background-clip: text; background-clip: text; } .page-overlay { position: relative; z-index: 1; } html[data-hero="portal"] .page-overlay { padding-top: 0; } /* --- MERGED AND CONDITIONAL MODAL STYLES --- */ #audio-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; z-index: 10000; cursor: pointer; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; opacity: 1; visibility: visible; } #audio-modal-overlay .modal-content { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #audio-modal-overlay video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } #audio-modal-overlay.hidden { opacity: 0; visibility: hidden; } /* Hide main content when modal is visible */ body.modal-visible #app-content { visibility: hidden; overflow: hidden; } body.modal-visible main { visibility: hidden; overflow: hidden; } /* Hide Default Knight chatbot and mini-bard until modal is dismissed */ body.modal-visible .chatbot-toggle, body.modal-visible .chatbot-container, body.modal-visible .chat-prompt, body.modal-visible .mini-bard-toggle, body.modal-visible .mini-bard-player { display: none !important; visibility: hidden; pointer-events: none; } /* Style Overrides for the 'simple' modal */ .modal-style-simple #audio-modal-overlay { background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .modal-style-simple #entry-video { display: none; } .modal-style-simple .modal-content { z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; animation: floatVertical 4s ease-in-out infinite; background: rgba(32, 32, 32, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 2.5rem 3rem; border: 2px solid rgba(192, 192, 192, 0.5); border-radius: 15px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3); max-width: 550px; width: 90%; margin: 0 auto; position: relative; } .modal-style-simple .enter-button { font-family: var(--font-tech) !important; font-size: 1.8rem !important; font-weight: 700; color: var(--text-primary) !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), -1px -1px 1px rgba(255, 255, 255, 0.2) !important; display: inline-block; padding: 0.8rem 2.5rem; margin-top: 1rem; background: linear-gradient(145deg, #707070 0%, #505050 50%, #404040 100%); border: 2px solid rgba(192, 192, 192, 0.6); border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15); cursor: pointer; transition: var(--transition); } .modal-style-simple .enter-button:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2); background: linear-gradient(145deg, #808080 0%, #606060 50%, #505050 100%); border-color: var(--accent-color); color: var(--accent-primary-bright) !important; } /* Fortress Entry Modal Styling */ .fortress-entry-modal { max-width: 700px; width: 95%; margin: 0; background: linear-gradient(135deg, rgba(32, 32, 32, 0.98), rgba(40, 40, 40, 0.98)); border: 3px solid rgba(192, 192, 192, 0.5); border-radius: 25px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; animation: fortressFloat 6s ease-in-out infinite; } .fortress-entry-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #606060, #909090, #707070, #606060); background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; } .fortress-gate { text-align: center; padding: 2rem 2rem 1rem 2rem; border-bottom: 2px solid rgba(169, 169, 169, 0.4); position: relative; } .gate-icon { font-size: 4rem; margin-bottom: 1rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); animation: gateGlow 2s ease-in-out infinite alternate; } .gate-title { font-family: var(--font-tech); font-size: 2.8rem; color: var(--accent-primary-bright); margin-bottom: 0.5rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), -1px -1px 1px rgba(255, 255, 255, 0.15); letter-spacing: 4px; background: linear-gradient(180deg, #E0E0E0 0%, #A0A0A0 50%, #707070 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gate-subtitle { font-family: var(--font-secondary); font-size: 1.2rem; color: var(--text-secondary); font-style: italic; } .entry-description { padding: 2rem; } .medieval-welcome { font-size: 1.1rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 2rem; text-align: center; } .medieval-text { font-family: var(--font-primary); color: var(--accent-color); font-weight: 600; text-shadow: 0 0 15px rgba(255, 215, 0, 0.4); } .entry-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2rem 0 2rem 0; max-width: 600px; margin-left: auto; margin-right: auto; } .feature-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(169, 169, 169, 0.4); border-radius: 12px; transition: var(--transition); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .feature-item:hover { border-color: var(--accent-color); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .feature-icon { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); } .feature-item span { font-family: var(--font-secondary); color: var(--text-primary); font-weight: 600; font-size: 0.9rem; } .entry-actions { padding: 0 2rem 2rem 2rem; text-align: center; } .fortress-enter-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.2rem 3rem; border: 3px solid rgba(192, 192, 192, 0.6); border-radius: 15px; font-family: var(--font-tech); font-size: 1.4rem; font-weight: 700; text-decoration: none; transition: var(--transition); overflow: hidden; cursor: pointer; background: linear-gradient(145deg, #606060 0%, #404040 50%, #303030 100%); color: #D0D0D0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .fortress-enter-btn:hover { background: linear-gradient(145deg, #707070 0%, #505050 50%, #404040 100%); transform: translateY(-3px); box-shadow: 0 8px 35px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-glow { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s ease; } .fortress-enter-btn:hover .btn-glow { left: 100%; } .entry-note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; color: var(--text-secondary); font-size: 0.9rem; font-style: italic; } .entry-note i { color: var(--accent-primary-bright); } @keyframes fortressFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-5px) rotate(0.5deg); } 50% { transform: translateY(-10px) rotate(0deg); } 75% { transform: translateY(-5px) rotate(-0.5deg); } } @keyframes gateGlow { 0% { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); } 100% { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 8px rgba(192, 192, 192, 0.2)); } } /* Styles for the 'video' modal */ .modal-style-video .modal-content { z-index: 2; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; animation: float 5s ease-in-out infinite; transition: opacity 0.3s ease; } .modal-style-video .enter-button { font-size: 4rem !important; color: var(--accent-primary-bright) !important; text-shadow: 0 0 20px black, 0 2px 4px rgba(0, 0, 0, 0.8); background: transparent; border: none; box-shadow: none; transition: transform 0.3s ease, text-shadow 0.3s ease; } .modal-style-video .enter-button:hover { transform: scale(1.1) translateY(0); text-shadow: 0 0 25px black, 0 2px 6px rgba(0, 0, 0, 0.8); background: transparent; border-color: transparent; box-shadow: none; color: #E0E0E0 !important; } #audio-modal-overlay.video-playing .modal-content { opacity: 0; } .navbar { background: linear-gradient(135deg, rgba(32, 32, 32, 0.98), rgba(40, 40, 40, 0.95)); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 2px solid rgba(192, 192, 192, 0.4); padding: 1rem 0; position: sticky; top: 0; z-index: 200; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .nav-container { max-width: 2000px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 2rem; gap: 2rem; } #nav-left-section { display: flex; align-items: center; gap: 2rem; justify-self: start; } #nav-music-controls { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem; background: linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(32, 32, 32, 0.95)); border: 2px solid rgba(169, 169, 169, 0.5); border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); position: relative; overflow: visible; } .wave-bars { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; gap: 2px; align-items: flex-end; pointer-events: none; z-index: 0; opacity: 0.5; } .wave-bar { width: 3px; background-color: #707070; animation: wave 1.2s ease-in-out infinite; } .wave-bars.paused .wave-bar { animation-play-state: paused; height: 5% !important; } .wave-bar:nth-child(2) { animation-delay: 0.2s; } .wave-bar:nth-child(3) { animation-delay: 0.4s; } .wave-bar:nth-child(4) { animation-delay: 0.1s; } .wave-bar:nth-child(5) { animation-delay: 0.5s; } .wave-bar:nth-child(6) { animation-delay: 0.2s; } .wave-bar:nth-child(7) { animation-delay: 0.6s; } .wave-bar:nth-child(8) { animation-delay: 0.3s; } .wave-bar:nth-child(9) { animation-delay: 0.1s; } .wave-bar:nth-child(10) { animation-delay: 0.4s; } .wave-bar:nth-child(11) { animation-delay: 0.2s; } .wave-bar:nth-child(12) { animation-delay: 0.5s; } .wave-bar:nth-child(13) { animation-delay: 0.1s; } .wave-bar:nth-child(14) { animation-delay: 0.6s; } .wave-bar:nth-child(15) { animation-delay: 0.3s; } .wave-bar:nth-child(16) { animation-delay: 0.2s; } .wave-bar:nth-child(17) { animation-delay: 0.4s; } .wave-bar:nth-child(18) { animation-delay: 0.1s; } .wave-bar:nth-child(19) { animation-delay: 0.5s; } .wave-bar:nth-child(20) { animation-delay: 0.3s; } .wave-bar:nth-child(21) { animation-delay: 0.6s; } .wave-bar:nth-child(22) { animation-delay: 0.2s; } .wave-bar:nth-child(23) { animation-delay: 0.4s; } .wave-bar:nth-child(24) { animation-delay: 0.1s; } .wave-bar:nth-child(25) { animation-delay: 0.5s; } .wave-bar:nth-child(26) { animation-delay: 0.3s; } .wave-bar:nth-child(27) { animation-delay: 0.1s; } .wave-bar:nth-child(28) { animation-delay: 0.6s; } .wave-bar:nth-child(29) { animation-delay: 0.2s; } .wave-bar:nth-child(30) { animation-delay: 0.4s; } @keyframes wave { 0%, 100% { height: 5%; } 50% { height: 60%; } } #song-readout { color: var(--accent-color); font-family: var(--font-secondary); font-size: 0.8rem; font-weight: 600; width: 120px; white-space: nowrap; overflow: hidden; position: relative; background: rgba(0, 0, 0, 0.4); padding: 0.3rem 0.6rem; border-radius: 15px; border: 1px solid rgba(169, 169, 169, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } #song-readout .song-title-marquee { display: inline-block; padding-left: 100%; animation: marquee 8s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .nav-control-btn { background: linear-gradient(145deg, rgba(80, 80, 80, 0.8), rgba(50, 50, 50, 0.9)); border: 2px solid rgba(192, 192, 192, 0.5); color: var(--accent-color); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); z-index: 1; position: relative; overflow: hidden; } .nav-control-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transition: left 0.4s ease; } .nav-control-btn:hover::before { left: 100%; } .nav-control-btn:hover { background: linear-gradient(145deg, #707070, #505050); color: var(--accent-primary-bright); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15); transform: scale(1.1) translateY(-2px); } #nav-music-controls input[type=range] { -webkit-appearance: none; width: 60px; background: transparent; cursor: pointer; z-index: 1; } #nav-music-controls input[type=range]:focus { outline: none; } #nav-music-controls input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: var(--border-color); border-radius: 3px; } #nav-music-controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 12px; border-radius: 3px; background: var(--accent-color); margin-top: -6px; box-shadow: 0 0 4px rgba(255, 215, 0, 0.4); transition: background 0.2s ease; } #nav-music-controls input[type=range]:hover::-webkit-slider-thumb { background: #fff; } #nav-music-controls input[type=range]::-moz-range-track { width: 100%; height: 6px; background: var(--border-color); border-radius: 3px; } #nav-music-controls input[type=range]::-moz-range-thumb { height: 16px; width: 12px; border-radius: 3px; background: var(--accent-color); border: none; box-shadow: 0 0 4px rgba(255, 215, 0, 0.4); transition: background 0.2s ease; } #nav-music-controls input[type=range]:hover::-moz-range-thumb { background: #fff; } /* Navbar Mini Video Player (lyrics videos) */ .nav-video-mini-player { display: none; position: absolute; top: 100%; left: 0; margin-top: 10px; width: 320px; max-width: calc(100vw - 4rem); background: linear-gradient(135deg, rgba(40, 40, 40, 0.98), rgba(32, 32, 32, 0.98)); border: 2px solid rgba(169, 169, 169, 0.5); border-radius: 15px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05); z-index: 9998; overflow: hidden; backdrop-filter: blur(15px); transition: margin-top 0.25s ease; } .nav-video-mini-player.active { display: block !important; animation: navVideoSlideIn 1s ease-out; } .nav-video-mini-player.collapsed { margin-top: 0; border-radius: 0 0 15px 15px; } @keyframes navVideoSlideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .nav-video-mini-player .nav-video-header { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.5rem 0.4rem 0.8rem; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(169, 169, 169, 0.3); gap: 0.5rem; transition: padding 0.2s ease; } .nav-video-mini-player .nav-video-title { font-size: 0.8rem; color: var(--accent-primary-bright); font-family: var(--font-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-video-toggle-btn { background: transparent; border: none; color: var(--accent-color); width: 22px; height: 22px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; transition: all 0.2s ease; flex-shrink: 0; } .nav-video-toggle-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--accent-primary-bright); } .nav-video-mini-player .nav-video-body { overflow: hidden; max-height: 200px; transition: max-height 0.25s ease; } .nav-video-mini-player.collapsed .nav-video-body { max-height: 0; } .nav-video-mini-player.collapsed .nav-video-header { border-bottom: none; padding: 0.25rem 0.5rem 0.25rem 0.6rem; } .nav-video-mini-player.collapsed .nav-video-toggle-btn i { transform: rotate(180deg); } .nav-video-element { width: 100%; display: block; background: #000; aspect-ratio: 16/9; } /* Navbar Playlist Dropdown */ .nav-playlist-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: 10px; width: 350px; max-height: 400px; background: linear-gradient(135deg, rgba(40, 40, 40, 0.98), rgba(32, 32, 32, 0.98)); border: 2px solid rgba(169, 169, 169, 0.5); border-radius: 15px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05); z-index: 9999; overflow: hidden; backdrop-filter: blur(15px); } .nav-playlist-dropdown.active { display: block !important; animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .nav-playlist-header { background: linear-gradient(135deg, rgba(80, 80, 80, 0.5), rgba(60, 60, 60, 0.5)); padding: 0.8rem 1rem; border-bottom: 2px solid rgba(169, 169, 169, 0.5); display: flex; justify-content: space-between; align-items: center; } .nav-playlist-header h4 { font-family: var(--font-decorative); font-size: 1.1rem; color: var(--accent-primary-bright); margin: 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); } .playlist-close-btn { background: rgba(240, 71, 71, 0.2); border: 2px solid #f04747; color: #f04747; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); line-height: 1; } .playlist-close-btn:hover { background: #f04747; color: white; } .nav-playlist-content { max-height: 350px; overflow-y: auto; padding: 0.5rem; } .nav-playlist-content::-webkit-scrollbar { width: 6px; } .nav-playlist-content::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } .nav-playlist-content::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.6); border-radius: 3px; } .nav-playlist-item { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem; margin: 0.2rem 0; border-radius: 8px; cursor: pointer; transition: var(--transition); background: rgba(0, 0, 0, 0.2); } .nav-playlist-item:hover { background: rgba(255, 255, 255, 0.1); } .nav-playlist-item.active { background: rgba(192, 192, 192, 0.1); border-left: 3px solid var(--accent-color); } .nav-playlist-item-title { flex: 1; font-size: 0.85rem; color: var(--text-primary); } .nav-playlist-item.active .nav-playlist-item-title { color: var(--accent-color); font-weight: 600; } .nav-download-btn { background: rgba(80, 80, 80, 0.5); border: 1px solid rgba(169, 169, 169, 0.5); color: var(--accent-color); padding: 0.3rem 0.5rem; border-radius: 6px; font-size: 0.7rem; transition: var(--transition); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; } .nav-download-btn:hover { background: rgba(100, 100, 100, 0.6); color: var(--accent-primary-bright); transform: scale(1.05); } .nav-download-btn i { font-size: 0.65rem; } /* Navbar volume slider specific styling */ #volume-slider { width: 100px; height: 6px; background: rgba(255, 215, 0, 0.3); border-radius: 3px; outline: none; -webkit-appearance: none; cursor: pointer; margin: 0 10px; } #volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: all 0.2s ease; } #volume-slider::-webkit-slider-thumb:hover { background: #fff; box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); } #volume-slider::-moz-range-track { width: 100%; height: 6px; background: rgba(255, 215, 0, 0.3); border-radius: 3px; } #volume-slider::-moz-range-thumb { height: 18px; width: 18px; border-radius: 50%; background: var(--accent-color); border: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background 0.2s ease; } #volume-slider::-moz-range-thumb:hover { background: #fff; box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); } /* Volume control container */ .volume-control-container { display: flex; align-items: center; gap: 5px; } .nav-logo { font-family: var(--font-tech); font-size: 2rem; font-weight: 700; color: var(--accent-primary-bright); text-decoration: none; letter-spacing: 4px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); background: linear-gradient(180deg, #E0E0E0 0%, #A0A0A0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-menu { display: flex; list-style: none; gap: 1rem; justify-content: center; justify-self: center; } .nav-item { position: relative; } .nav-item a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; color: var(--text-secondary); text-decoration: none; font-family: var(--font-secondary); font-size: 0.8rem; font-weight: 600; padding: 0.8rem 1.2rem; border-radius: 12px; transition: all 0.3s ease; cursor: pointer; background: rgba(60, 60, 60, 0.1); border: 2px solid rgba(128, 128, 128, 0.3); position: relative; overflow: hidden; width: 135px; min-height: 72px; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .nav-item a::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s ease; } .nav-item a:hover::before { left: 100%; } .nav-item a:hover, .nav-item a.active { color: var(--accent-primary-bright); background: rgba(70, 70, 70, 0.2); border-color: rgba(192, 192, 192, 0.5); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .nav-item a .nav-emoji { font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); transition: filter 0.3s ease; } .nav-item a:hover .nav-emoji, .nav-item a.active .nav-emoji { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); } .nav-actions { display: flex; gap: 1rem; align-items: center; justify-self: end; } .nav-btn { background: linear-gradient(45deg, var(--discord-color), #4752C4); color: white; border: 2px solid var(--discord-color); padding: 0.5rem 1rem; border-radius: 6px; font-family: var(--font-secondary); font-weight: 600; text-decoration: none; transition: var(--transition); text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 3px 15px rgba(88, 101, 242, 0.4), 0 0 30px rgba(88, 101, 242, 0.2); font-size: 0.8rem; } .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(88, 101, 242, 0.6), 0 0 40px rgba(88, 101, 242, 0.3); border-color: #7289da; } /* --- Page-Specific Styles --- */ .main-container, .container { max-width: 1400px; margin: 0 auto; padding: 2rem; position: relative; z-index: 1; } .page-title { font-family: var(--font-tech); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), -1px -1px 1px rgba(255, 255, 255, 0.1); letter-spacing: 6px; animation: floatVertical 4s ease-in-out infinite; margin-bottom: 1rem; text-align: center; color: var(--accent-primary-bright); background: linear-gradient(180deg, #E0E0E0 0%, #A0A0A0 50%, #707070 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; opacity: 0; transition: opacity 1.5s ease-in; } .page-title.fade-in { opacity: 1; } #home .page-title { opacity: 1; } .page-title::before { content: ''; } .page-title::after { display: none; } /* Page content fade-in for non-home pages (exclude page-title which has its own fade-in) */ .page-content:not(#home):not(#starcitizen) .main-container > *:not(.page-title) { opacity: 0; transform: translateY(22px); transition: opacity 1.1s ease-out, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .page-content:not(#home):not(#starcitizen).page-enter .main-container > *:not(.page-title) { opacity: 1; transform: translateY(0); } .page-content:not(#home):not(#starcitizen).page-enter .main-container > *:not(.page-title):nth-child(2) { transition-delay: 0.15s; } .page-content:not(#home):not(#starcitizen).page-enter .main-container > *:not(.page-title):nth-child(3) { transition-delay: 0.3s; } .page-content:not(#home):not(#starcitizen).page-enter .main-container > *:not(.page-title):nth-child(4) { transition-delay: 0.45s; } .page-content:not(#home):not(#starcitizen).page-enter .main-container > *:not(.page-title):nth-child(5) { transition-delay: 0.6s; } .page-content:not(#home):not(#starcitizen).page-enter .main-container > *:not(.page-title):nth-child(6) { transition-delay: 0.75s; } .page-content:not(#home):not(#starcitizen).page-enter .main-container > *:not(.page-title):nth-child(7) { transition-delay: 0.9s; } /* Star Citizen — same fade-in pattern as #home (JS adds .fade-in on a schedule) */ #starcitizen .sc-hero, #starcitizen .sc-comics-section-header, #starcitizen #sc-comic-panorama, #starcitizen .container > .sc-section { opacity: 0; transform: translateY(22px); transition: opacity 1.1s ease-out, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } #starcitizen .sc-hero.fade-in, #starcitizen .sc-comics-section-header.fade-in, #starcitizen #sc-comic-panorama.fade-in, #starcitizen .container > .sc-section.fade-in { opacity: 1; transform: translateY(0); } #starcitizen .horizontal-sections .sc-section { opacity: 0; transform: translateY(22px); transition: opacity 0.95s ease-out, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1); } #starcitizen .horizontal-sections.fade-in .sc-section:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.08s; } #starcitizen .horizontal-sections.fade-in .sc-section:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.22s; } .hero-title { font-family: var(--font-tech); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; color: #E0E0E0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), -1px -1px 1px rgba(255, 255, 255, 0.15), 0 4px 8px rgba(0, 0, 0, 0.8); letter-spacing: 6px; animation: float 4s ease-in-out infinite; text-align: center; position: fixed; top: 110px; left: 50%; transform: translateX(-50%); z-index: 1000; display: inline-block; padding: 1.5rem 3rem; margin-bottom: 0; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)); opacity: 0; transition: opacity 0.7s ease-in; } .hero-title.fade-in { opacity: 1; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)) brightness(1.1); } .hero-title::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(32, 32, 32, 0.6); border: 2px solid rgba(192, 192, 192, 0.5); border-radius: 15px; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08); z-index: -1; } .hero-title::after { display: none; } @keyframes float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } } @keyframes floatVertical { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Home Page Styles */ #home { position: relative; } html[data-hero="blend"] #home::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 60% at 50% 40%, transparent 0%, transparent 65%, rgba(35, 32, 28, 0.85) 85%); } .hero-section { text-align: center; margin: 0; padding: 0; position: relative; min-height: 72vh; height: 72vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; z-index: 1; width: 100%; margin-bottom: 0; } @media (min-aspect-ratio: 4/3) { .hero-section { min-height: 70vh; height: 70vh; } .discord-focus { margin-top: 2vh; } } /* --- Knight cinematic hero (html data-hero="portal") --- */ html[data-hero="portal"] #home .main-container { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vh, 2.5rem); padding-top: 0.5rem; } html[data-hero="portal"] .hero-section { min-height: auto; height: auto; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1rem, 4vh, 3rem) 0 0; background: transparent; } html[data-hero="portal"] .discord-focus { margin-top: 0; flex: 0 0 auto; } html[data-hero="portal"] .knight-hero-plaque { position: relative; text-align: center; pointer-events: none; opacity: 0; transform: translateY(0.75rem); transition: opacity 1.2s ease 0.4s, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s; } html[data-hero="portal"] .knight-hero-plaque.fade-in { opacity: 1; transform: translateY(0); } html[data-hero="portal"] .knight-hero-plaque__eyebrow { display: block; font-family: var(--font-secondary); font-size: clamp(0.75rem, 1.5vw, 0.95rem); letter-spacing: 0.55em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.5rem; } html[data-hero="portal"] .knight-hero-plaque__title { font-family: var(--font-tech); font-size: clamp(2rem, 5.5vw, 4rem); font-weight: 700; letter-spacing: 0.18em; color: #e8ece9; text-shadow: 0 0 40px var(--forge-ember-dim), 0 0 80px rgba(192, 192, 192, 0.2), 0 4px 12px rgba(0, 0, 0, 0.95); background: linear-gradient(180deg, #f0f4f2 0%, #c8d0cc 45%, #8a9a94 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)); } @media (min-width: 3840px) { .hero-section { min-height: 70vh; height: 70vh; } .discord-focus { margin-top: 2vh; } } /* --- Legacy blend hero (html data-hero="blend") --- */ html[data-hero="blend"] .hero-gif { position: fixed; top: 42%; left: 50%; transform: translate(-50%, -50%); width: 65vw; height: 65vh; max-width: 65vw; max-height: 65vh; object-fit: contain; object-position: center center; opacity: 0; z-index: -2; pointer-events: none; border: none; border-radius: 0; box-shadow: none; mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 15%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 65%); -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 15%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 65%); transition: opacity 0.7s ease-in; } html[data-hero="blend"] .hero-gif.fade-in { opacity: 0.5; transition: opacity 0.7s ease-in; } html[data-hero="blend"] .hero-gif.scroll-active { transition: opacity 0.1s linear; } html[data-hero="blend"] .knight-bg { display: none; } html[data-hero="blend"] .knight-hero-plaque { display: none; } @media (orientation: portrait) { html[data-hero="blend"] .hero-gif { top: 28%; width: 96vw; height: 54vw; max-width: 96vw; max-height: 54vw; object-fit: contain; } } @media (max-aspect-ratio: 4/5) { html[data-hero="blend"] .hero-gif { top: 28%; width: 96vw; height: 54vw; max-width: 96vw; max-height: 54vw; object-fit: contain; } } .discord-focus { margin-top: 2vh; margin-bottom: 4rem; position: relative; z-index: 1; } #home .discord-focus { opacity: 0; transform: translateY(22px); transition: opacity 1.1s ease-out, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } #home .discord-focus.fade-in { opacity: 1; transform: translateY(0); } #home .about-section { opacity: 0; transition: opacity 0.7s ease-in, transform 0.7s ease-in; transform: translateY(20px); } #home .about-section.fade-in { opacity: 1; transform: translateY(0); } #home .content-grid .widget { opacity: 0; transform: translateY(22px); transition: opacity 0.95s ease-out, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1); } #home .content-grid.fade-in .widget:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.08s; } #home .content-grid.fade-in .widget:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.22s; } /* Scroll Indicator */ .discord-info { background: rgba(32, 32, 32, 0.04); border: 2px solid rgba(169, 169, 169, 0.5); border-radius: 15px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 350px; gap: 0; align-items: stretch; z-index: 1; } #discord-banner-container { grid-column: 1 / 2; background-size: cover; background-position: center; position: relative; color: white; display: flex; flex-direction: column; padding: 2.5rem; min-height: 500px; } #discord-banner-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(32, 32, 32, 0.08) 0%, rgba(32, 32, 32, 0.04) 40%, transparent 100%); } .discord-dynamic-content { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .guild-content-wrapper { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; text-align: center; } .guild-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; } #guild-icon { width: 80px; height: 80px; border-radius: 50%; border: 3px solid rgba(192, 192, 192, 0.6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } #guild-name { font-family: var(--font-primary); font-size: 2.5rem; text-shadow: 2px 2px 4px #000; margin: 0; } #member-count { font-size: 1.2rem; font-weight: 600; background: rgba(0,0,0,0.4); padding: 0.25rem 0.75rem; border-radius: 20px; display: inline-block; } .guild-body { flex-grow: 1; position: relative; } .discord-widget-content { grid-column: 2 / 3; background: rgba(44, 47, 51, 0.05); } .discord-widget-content iframe { width: 100%; height: 100%; border: none; } .cta-buttons { display: flex; gap: 1.5rem; margin-top: auto; padding-top: 1rem; flex-wrap: wrap; } .cta-primary { background: linear-gradient(45deg, var(--discord-color), #4752C4); color: white; padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-family: var(--font-secondary); font-size: 1.2rem; font-weight: 600; transition: var(--transition); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 0.5rem; border: 2px solid #7289da; } .cta-primary:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25); border-color: #7289da; } .cta-secondary { background: transparent; color: var(--accent-color); border: 2px solid rgba(192, 192, 192, 0.6); padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-family: var(--font-secondary); font-size: 1.2rem; font-weight: 600; transition: var(--transition); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } .cta-secondary:hover { background: rgba(192, 192, 192, 0.08); color: var(--accent-primary-bright); transform: translateY(-3px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .discord-title { font-family: var(--font-tech); font-size: 1.8rem; color: var(--accent-primary-bright); margin-top: 1.5rem; margin-bottom: 0.75rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } .discord-description { font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; max-width: 100%; color: var(--text-secondary); } .discord-community-info { padding: 2rem 2.5rem; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); } 50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); } } .community-section { background: rgba(32, 32, 32, 0.12); border: 2px solid rgba(169, 169, 169, 0.5); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05); border-radius: 15px; padding: 3rem; margin: 4rem 0; text-align: center; position: relative; overflow: visible; } .community-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #606060, #909090, #707070, #606060); background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; z-index: 1; } .community-section::after { content: ''; position: absolute; top: -2px; left: -2px; width: 15px; height: 15px; border-width: 3px 0 0 3px; border-style: solid; border-color: rgba(192, 192, 192, 0.6); border-radius: 15px 0 0 0; opacity: 0.7; } .community-section:hover::after { opacity: 1; border-color: var(--accent-color); } .community-title { font-family: var(--font-tech); font-size: 2.5rem; color: var(--accent-primary-bright); margin-bottom: 1.5rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } .community-text { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto; } /* --- Star Citizen Perseus Space Backdrop --- */ @keyframes sc-nebula-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.88; } } body.page-starcitizen { --sc-void: #080a12; --sc-nebula: rgba(45, 65, 110, 0.35); --sc-steel: rgba(42, 53, 69, 0.6); --sc-rsi-blue: #7289da; --sc-gold: #ffd700; --sc-alert: rgba(139, 38, 53, 0.12); background-color: var(--sc-void); background-image: radial-gradient(ellipse 120% 80% at 70% 20%, var(--sc-nebula) 0%, transparent 55%), radial-gradient(ellipse 90% 60% at 15% 75%, var(--sc-alert) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(114, 137, 218, 0.08) 0%, transparent 60%), radial-gradient(1px 1px at 40.8% 21.2%, rgba(255,255,255,0.73), transparent), radial-gradient(1px 1px at 25.8% 74.9%, rgba(255,255,255,0.77), transparent), radial-gradient(1px 1px at 38.8% 67.7%, rgba(255,255,255,0.94), transparent), radial-gradient(1px 1px at 92.1% 49.0%, rgba(255,255,255,0.87), transparent), radial-gradient(1px 1px at 60.9% 22.8%, rgba(255,255,255,1.00), transparent), radial-gradient(1px 1px at 37.9% 39.3%, rgba(255,255,255,1.00), transparent), radial-gradient(1px 1px at 16.6% 65.4%, rgba(255,255,255,1.00), transparent), radial-gradient(1px 1px at 34.5% 92.9%, rgba(255,255,255,0.92), transparent), radial-gradient(1px 1px at 76.3% 47.0%, rgba(255,255,255,0.85), transparent), radial-gradient(1px 1px at 27.9% 2.7%, rgba(255,255,255,0.74), transparent), radial-gradient(1px 1px at 97.0% 53.3%, rgba(255,255,255,0.88), transparent), radial-gradient(1px 1px at 88.4% 60.1%, rgba(255,255,255,1.00), transparent), radial-gradient(1px 1px at 36.3% 22.7%, rgba(255,255,255,1.00), transparent), radial-gradient(1px 1px at 17.4% 78.0%, rgba(255,255,255,0.97), transparent), radial-gradient(1px 1px at 96.4% 92.6%, rgba(255,255,255,0.99), transparent), radial-gradient(1px 1px at 5.6% 4.2%, rgba(255,255,255,0.90), transparent), radial-gradient(1px 1px at 80.7% 9.8%, rgba(255,255,255,0.87), transparent), radial-gradient(1px 1px at 10.3% 31.7%, rgba(255,255,255,0.63), transparent), radial-gradient(1px 1px at 33.7% 52.2%, rgba(255,255,255,0.74), transparent), radial-gradient(1px 1px at 77.6% 7.3%, rgba(255,255,255,0.74), transparent), radial-gradient(1px 1px at 26.7% 40.8%, rgba(255,255,255,1.00), transparent), radial-gradient(1px 1px at 36.0% 68.7%, rgba(255,255,255,1.00), transparent), radial-gradient(1px 1px at 14.6% 84.9%, rgba(255,255,255,0.97), transparent), radial-gradient(1px 1px at 73.7% 60.4%, rgba(255,255,255,0.85), transparent); , radial-gradient(2px 2px at 18% 44%, rgba(255,255,255,0.85), transparent), radial-gradient(2px 2px at 62% 28%, rgba(200,220,255,0.9), transparent), radial-gradient(2px 2px at 84% 78%, rgba(255,255,255,0.75), transparent), radial-gradient(1.5px 1.5px at 48% 58%, rgba(255,215,0,0.55), transparent), radial-gradient(2px 2px at 8% 82%, rgba(255,255,255,0.7), transparent), radial-gradient(1.5px 1.5px at 92% 18%, rgba(200,220,255,0.8), transparent); background-attachment: fixed; } body.page-starcitizen::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 100% 70% at 65% 25%, rgba(45, 65, 110, 0.25) 0%, transparent 60%); animation: sc-nebula-pulse 10s ease-in-out infinite; } body.page-starcitizen::before { content: ''; position: fixed; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; z-index: 0; box-shadow: 197px 486px 0 0 rgba(200,220,255,0.96), 363px 1678px 0 0 rgba(200,220,255,0.98), 1148px 1307px 0 0 rgba(255,255,255,0.72), 1732px 1055px 0 0 rgba(200,220,255,1.00), 380px 2778px 0 0 rgba(200,220,255,1.00), 1199px 3410px 0 0 rgba(200,220,255,0.99), 817px 1379px 0 0 rgba(255,255,255,0.54), 848px 3332px 0 0 rgba(255,255,255,0.40), 1801px 153px 0 0 rgba(255,255,255,0.69), 816px 3157px 0 0 rgba(255,255,255,0.49), 1340px 925px 0 0 rgba(255,255,255,0.49), 1790px 2817px 0 0 rgba(255,255,255,0.47), 1657px 2914px 0 0 rgba(255,255,255,0.47), 606px 1794px 0 0 rgba(255,255,255,0.39), 896px 1724px 0 0 rgba(255,255,255,0.48), 1030px 1200px 0 0 rgba(255,255,255,0.75), 1614px 1954px 0 0 rgba(255,255,255,0.78), 525px 1765px 0 0 rgba(255,255,255,0.54), 1348px 3384px 0 0 rgba(255,255,255,0.48), 1389px 2778px 0 0 rgba(255,255,255,0.81), 1365px 2927px 0 0 rgba(255,255,255,0.53), 1817px 809px 0 0 rgba(255,255,255,0.66), 1422px 1209px 0 0 rgba(255,255,255,0.45), 1361px 2735px 0 0 rgba(200,220,255,1.00), 1345px 1706px 0 0 rgba(255,255,255,0.75), 473px 1672px 0 0 rgba(255,255,255,0.51), 818px 14px 0 0 rgba(200,220,255,1.00), 2px 2138px 0 0 rgba(255,255,255,0.66), 1530px 685px 0 0 rgba(255,255,255,0.72), 1910px 840px 0 0 rgba(255,255,255,0.75), 853px 1917px 0 0 rgba(255,255,255,0.65), 1572px 2587px 0 0 rgba(255,255,255,0.63), 588px 820px 0 0 rgba(255,255,255,0.81), 1651px 1259px 0 0 rgba(200,220,255,0.87), 119px 1707px 0 0 rgba(255,255,255,0.79), 1282px 3884px 0 0 rgba(255,255,255,0.61), 397px 3099px 0 0 rgba(200,220,255,1.00), 808px 1632px 0 0 rgba(255,255,255,0.48), 673px 526px 0 0 rgba(255,255,255,0.76), 1777px 3482px 0 0 rgba(255,255,255,0.54), 1150px 3908px 0 0 rgba(255,255,255,0.53), 425px 1120px 0 0 rgba(255,255,255,0.73), 1433px 1567px 0 0 rgba(255,255,255,0.76), 981px 2346px 0 0 rgba(255,255,255,0.76), 975px 2723px 0 0 rgba(200,220,255,0.90), 490px 1883px 0 0 rgba(255,255,255,0.40), 1630px 2023px 0 0 rgba(200,220,255,1.00), 8px 2333px 0 0 rgba(255,255,255,0.48), 24px 2387px 0 0 rgba(255,255,255,0.48), 278px 2409px 0 0 rgba(255,255,255,0.54), 97px 1402px 0 0 rgba(255,255,255,0.61), 598px 649px 0 0 rgba(255,255,255,0.39), 1587px 1710px 0 0 rgba(255,255,255,0.45), 992px 703px 0 0 rgba(255,255,255,0.66), 144px 2292px 0 0 rgba(255,255,255,0.70), 355px 2874px 0 0 rgba(255,255,255,0.79), 1095px 333px 0 0 rgba(255,255,255,0.40), 257px 3379px 0 0 rgba(200,220,255,1.00), 67px 3109px 0 0 rgba(255,255,255,0.53), 724px 3567px 0 0 rgba(255,255,255,0.47), 1245px 3115px 0 0 rgba(255,255,255,0.43), 1583px 216px 0 0 rgba(255,255,255,0.72), 893px 770px 0 0 rgba(255,255,255,0.69), 300px 2033px 0 0 rgba(255,255,255,0.60), 1904px 51px 0 0 rgba(255,255,255,0.78), 1624px 397px 0 0 rgba(255,255,255,0.81), 1160px 1818px 0 0 rgba(255,255,255,0.63), 1823px 328px 0 0 rgba(255,255,255,0.43), 1823px 3434px 0 0 rgba(200,220,255,1.00), 518px 1283px 0 0 rgba(255,255,255,0.63), 41px 1231px 0 0 rgba(255,255,255,0.42), 23px 3608px 0 0 rgba(255,255,255,0.61), 594px 506px 0 0 rgba(255,255,255,0.72), 82px 1448px 0 0 rgba(200,220,255,1.00), 1733px 1370px 0 0 rgba(255,255,255,0.72), 70px 1542px 0 0 rgba(255,255,255,0.63), 1122px 617px 0 0 rgba(255,255,255,0.38), 1767px 3845px 0 0 rgba(255,255,255,0.54), 1049px 2931px 0 0 rgba(255,255,255,0.47), 1073px 1664px 0 0 rgba(255,255,255,0.45), 1326px 1064px 0 0 rgba(200,220,255,1.00), 890px 17px 0 0 rgba(255,255,255,0.38), 413px 539px 0 0 rgba(255,255,255,0.43), 615px 250px 0 0 rgba(255,255,255,0.48), 1187px 3130px 0 0 rgba(255,255,255,0.36), 1318px 145px 0 0 rgba(255,255,255,0.78), 913px 303px 0 0 rgba(200,220,255,0.99), 890px 541px 0 0 rgba(255,255,255,0.63), 756px 2056px 0 0 rgba(200,220,255,1.00), 992px 853px 0 0 rgba(255,255,255,0.40), 1252px 826px 0 0 rgba(255,255,255,0.43), 973px 3023px 0 0 rgba(255,255,255,0.43), 1405px 1050px 0 0 rgba(200,220,255,1.00), 1639px 2066px 0 0 rgba(255,255,255,0.75), 158px 961px 0 0 rgba(255,255,255,0.47), 1443px 1724px 0 0 rgba(255,255,255,0.61), 494px 1026px 0 0 rgba(255,255,255,0.61), 1015px 774px 0 0 rgba(200,220,255,1.00), 78px 1788px 0 0 rgba(200,220,255,0.98), 102px 2715px 0 0 rgba(255,255,255,0.48), 1890px 2751px 0 0 rgba(255,255,255,0.61), 604px 803px 0 0 rgba(255,255,255,0.40), 705px 1594px 0 0 rgba(200,220,255,1.00), 533px 811px 0 0 rgba(255,255,255,0.78), 55px 1453px 0 0 rgba(255,255,255,0.63), 1709px 3527px 0 0 rgba(255,255,255,0.53), 651px 3644px 0 0 rgba(255,255,255,0.60), 1597px 303px 0 0 rgba(200,220,255,0.96), 454px 1407px 0 0 rgba(255,255,255,0.70), 144px 2641px 0 0 rgba(200,220,255,0.93), 892px 331px 0 0 rgba(255,255,255,0.79), 757px 2036px 0 0 rgba(255,255,255,0.75), 1572px 2290px 0 0 rgba(255,255,255,0.48), 1458px 1412px 0 0 rgba(255,255,255,0.48), 498px 263px 0 0 rgba(255,255,255,0.47), 667px 2543px 0 0 rgba(200,220,255,1.00), 1272px 2559px 0 0 rgba(255,255,255,0.55), 910px 2138px 0 0 rgba(200,220,255,1.00), 158px 3181px 0 0 rgba(255,255,255,0.69), 578px 2024px 0 0 rgba(255,255,255,0.76), 1441px 1808px 0 0 rgba(255,255,255,0.78), 657px 2087px 0 0 rgba(255,255,255,0.63), 1094px 3778px 0 0 rgba(255,255,255,0.40), 586px 1631px 0 0 rgba(255,255,255,0.39), 1894px 1145px 0 0 rgba(255,255,255,0.58), 1219px 348px 0 0 rgba(255,255,255,0.38), 171px 2597px 0 0 rgba(200,220,255,1.00), 867px 3617px 0 0 rgba(255,255,255,0.63), 36px 80px 0 0 rgba(200,220,255,1.00), 417px 2735px 0 0 rgba(255,255,255,0.40); } #starcitizen.page-content.active { position: relative; } #starcitizen.page-content.active .container { position: relative; z-index: 1; } #starcitizen.page-content.active::before { content: ''; position: fixed; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; z-index: 0; box-shadow: 880px 2350px 0 0 rgba(200,220,255,0.93), 1584px 2349px 0 0 rgba(255,255,255,0.68), 214px 2537px 0 0 rgba(255,255,255,0.70), 790px 788px 0 0 rgba(200,220,255,1.00), 622px 2049px 0 0 rgba(255,255,255,0.69), 1542px 2245px 0 0 rgba(255,255,255,0.38), 1238px 572px 0 0 rgba(255,255,255,0.54), 1819px 2381px 0 0 rgba(255,255,255,0.47), 1765px 4109px 0 0 rgba(255,255,255,0.55), 1024px 2072px 0 0 rgba(255,255,255,0.57), 305px 1559px 0 0 rgba(255,255,255,0.42), 1029px 1883px 0 0 rgba(255,255,255,0.63), 144px 1857px 0 0 rgba(255,255,255,0.70), 1173px 2px 0 0 rgba(255,255,255,0.72), 818px 4757px 0 0 rgba(255,255,255,0.36), 181px 3487px 0 0 rgba(255,255,255,0.40), 399px 721px 0 0 rgba(255,255,255,0.49), 234px 1200px 0 0 rgba(255,255,255,0.68), 354px 4546px 0 0 rgba(255,255,255,0.45), 1262px 913px 0 0 rgba(255,255,255,0.79), 446px 2439px 0 0 rgba(255,255,255,0.58), 907px 2048px 0 0 rgba(255,255,255,0.63), 446px 2851px 0 0 rgba(200,220,255,1.00), 1424px 4532px 0 0 rgba(255,255,255,0.76), 1742px 1709px 0 0 rgba(255,255,255,0.65), 1238px 3478px 0 0 rgba(255,255,255,0.79), 1236px 2847px 0 0 rgba(255,255,255,0.69), 1730px 4373px 0 0 rgba(255,255,255,0.36), 1215px 2818px 0 0 rgba(200,220,255,1.00), 139px 4373px 0 0 rgba(255,255,255,0.66), 599px 2973px 0 0 rgba(200,220,255,1.00), 1583px 823px 0 0 rgba(255,255,255,0.49), 1367px 2811px 0 0 rgba(255,255,255,0.65), 82px 1438px 0 0 rgba(255,255,255,0.57), 878px 4457px 0 0 rgba(255,255,255,0.53), 1313px 3091px 0 0 rgba(255,255,255,0.78), 1593px 2881px 0 0 rgba(200,220,255,1.00), 201px 36px 0 0 rgba(255,255,255,0.49), 485px 4862px 0 0 rgba(200,220,255,1.00), 592px 2262px 0 0 rgba(255,255,255,0.42), 1365px 1062px 0 0 rgba(255,255,255,0.68), 1604px 221px 0 0 rgba(255,255,255,0.60), 291px 2022px 0 0 rgba(255,255,255,0.61), 542px 2484px 0 0 rgba(255,255,255,0.54), 1715px 2831px 0 0 rgba(200,220,255,1.00), 979px 543px 0 0 rgba(255,255,255,0.49), 1596px 4157px 0 0 rgba(255,255,255,0.42), 1661px 572px 0 0 rgba(255,255,255,0.61), 264px 2910px 0 0 rgba(255,255,255,0.60), 82px 529px 0 0 rgba(200,220,255,0.99), 1505px 127px 0 0 rgba(255,255,255,0.65), 1560px 3753px 0 0 rgba(255,255,255,0.69), 443px 365px 0 0 rgba(255,255,255,0.43), 1311px 3534px 0 0 rgba(200,220,255,0.93), 1763px 4499px 0 0 rgba(255,255,255,0.73), 42px 267px 0 0 rgba(255,255,255,0.65), 1406px 2041px 0 0 rgba(255,255,255,0.73), 1555px 4081px 0 0 rgba(255,255,255,0.49), 713px 1225px 0 0 rgba(255,255,255,0.38), 675px 4718px 0 0 rgba(255,255,255,0.60), 411px 3398px 0 0 rgba(255,255,255,0.48), 1049px 2081px 0 0 rgba(255,255,255,0.39), 1448px 3378px 0 0 rgba(255,255,255,0.48), 1241px 2484px 0 0 rgba(255,255,255,0.61), 1577px 248px 0 0 rgba(255,255,255,0.47), 1851px 145px 0 0 rgba(200,220,255,1.00), 613px 2095px 0 0 rgba(255,255,255,0.53), 330px 2172px 0 0 rgba(255,255,255,0.43), 318px 4480px 0 0 rgba(255,255,255,0.48), 1719px 3943px 0 0 rgba(255,255,255,0.69), 363px 2684px 0 0 rgba(255,255,255,0.68), 98px 4123px 0 0 rgba(255,255,255,0.66), 314px 3826px 0 0 rgba(200,220,255,0.93), 1408px 3250px 0 0 rgba(255,255,255,0.70), 1089px 2590px 0 0 rgba(255,255,255,0.45), 131px 733px 0 0 rgba(255,255,255,0.65), 506px 3167px 0 0 rgba(200,220,255,1.00), 834px 1884px 0 0 rgba(255,255,255,0.45), 1484px 462px 0 0 rgba(200,220,255,1.00), 440px 2144px 0 0 rgba(255,255,255,0.58), 373px 4556px 0 0 rgba(255,255,255,0.55), 1786px 3559px 0 0 rgba(255,255,255,0.69), 345px 1174px 0 0 rgba(255,255,255,0.53), 1724px 1112px 0 0 rgba(255,255,255,0.81), 950px 1501px 0 0 rgba(255,255,255,0.60), 1222px 4880px 0 0 rgba(255,255,255,0.55), 950px 803px 0 0 rgba(255,255,255,0.79), 1847px 3723px 0 0 rgba(200,220,255,1.00), 23px 3121px 0 0 rgba(255,255,255,0.78), 1696px 490px 0 0 rgba(255,255,255,0.42), 1604px 997px 0 0 rgba(255,255,255,0.60), 1107px 2px 0 0 rgba(200,220,255,1.00), 386px 1096px 0 0 rgba(255,255,255,0.70), 519px 165px 0 0 rgba(255,255,255,0.79), 88px 1644px 0 0 rgba(200,220,255,0.99), 1235px 1692px 0 0 rgba(200,220,255,1.00), 376px 3778px 0 0 rgba(255,255,255,0.53), 751px 2840px 0 0 rgba(255,255,255,0.51), 598px 142px 0 0 rgba(255,255,255,0.40), 1191px 336px 0 0 rgba(255,255,255,0.78), 437px 3276px 0 0 rgba(255,255,255,0.48), 1669px 3021px 0 0 rgba(255,255,255,0.68), 964px 2738px 0 0 rgba(255,255,255,0.72), 983px 4049px 0 0 rgba(200,220,255,0.87), 1097px 4954px 0 0 rgba(200,220,255,0.92), 1913px 231px 0 0 rgba(255,255,255,0.68), 1891px 3056px 0 0 rgba(255,255,255,0.78), 7px 1432px 0 0 rgba(255,255,255,0.53), 694px 2208px 0 0 rgba(255,255,255,0.78), 1830px 2173px 0 0 rgba(255,255,255,0.63), 472px 2529px 0 0 rgba(255,255,255,0.79), 161px 719px 0 0 rgba(255,255,255,0.39), 167px 1656px 0 0 rgba(200,220,255,1.00), 657px 1809px 0 0 rgba(255,255,255,0.39), 271px 4532px 0 0 rgba(255,255,255,0.61), 343px 59px 0 0 rgba(255,255,255,0.49), 772px 2200px 0 0 rgba(255,255,255,0.72), 347px 4745px 0 0 rgba(255,255,255,0.66), 1344px 506px 0 0 rgba(200,220,255,1.00), 724px 3844px 0 0 rgba(200,220,255,0.93), 1333px 2899px 0 0 rgba(255,255,255,0.47), 1896px 1958px 0 0 rgba(200,220,255,1.00), 1910px 925px 0 0 rgba(255,255,255,0.40), 1146px 1441px 0 0 rgba(200,220,255,1.00), 394px 2594px 0 0 rgba(255,255,255,0.53), 1261px 1906px 0 0 rgba(200,220,255,1.00), 1043px 3716px 0 0 rgba(255,255,255,0.79), 1798px 1610px 0 0 rgba(255,255,255,0.47), 1541px 2305px 0 0 rgba(255,255,255,0.68), 1791px 2785px 0 0 rgba(255,255,255,0.72), 420px 822px 0 0 rgba(255,255,255,0.69), 357px 256px 0 0 rgba(255,255,255,0.48), 1737px 3582px 0 0 rgba(200,220,255,0.90), 32px 2038px 0 0 rgba(200,220,255,0.90), 161px 155px 0 0 rgba(255,255,255,0.78), 1632px 3042px 0 0 rgba(255,255,255,0.43), 789px 4911px 0 0 rgba(200,220,255,0.96), 401px 4199px 0 0 rgba(255,255,255,0.78), 725px 1426px 0 0 rgba(255,255,255,0.66), 629px 4905px 0 0 rgba(200,220,255,0.99), 410px 364px 0 0 rgba(255,255,255,0.49), 1334px 1928px 0 0 rgba(255,255,255,0.40), 1761px 4535px 0 0 rgba(255,255,255,0.45), 69px 1338px 0 0 rgba(255,255,255,0.42), 1542px 1496px 0 0 rgba(200,220,255,0.96), 872px 634px 0 0 rgba(255,255,255,0.79), 542px 658px 0 0 rgba(255,255,255,0.45), 1059px 4388px 0 0 rgba(200,220,255,1.00), 1389px 4982px 0 0 rgba(255,255,255,0.48), 1182px 2079px 0 0 rgba(255,255,255,0.42), 1578px 3806px 0 0 rgba(255,255,255,0.78), 1540px 3917px 0 0 rgba(255,255,255,0.72), 1244px 890px 0 0 rgba(255,255,255,0.39), 1848px 570px 0 0 rgba(200,220,255,0.99), 1791px 4326px 0 0 rgba(200,220,255,1.00), 1557px 2384px 0 0 rgba(255,255,255,0.48), 380px 2959px 0 0 rgba(255,255,255,0.63), 147px 4917px 0 0 rgba(200,220,255,1.00), 516px 2959px 0 0 rgba(200,220,255,0.95), 1598px 3951px 0 0 rgba(255,255,255,0.75); } #starcitizen.page-content.active::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(to bottom, transparent, transparent 1px, rgba(114, 137, 218, 0.04) 1px, rgba(114, 137, 218, 0.04) 2px), radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.35) 100%), linear-gradient(135deg, rgba(114, 137, 218, 0.2) 0 2px, transparent 2px 28px) top left / 28px 28px no-repeat, linear-gradient(225deg, rgba(114, 137, 218, 0.2) 0 2px, transparent 2px 28px) bottom right / 28px 28px no-repeat; } @media (prefers-reduced-motion: reduce) { body.page-starcitizen::after { animation: none; } } /* --- Star Citizen Page Styles --- */ .sc-hero { background-image: url('/images/starcitizengif.gif'); background-size: cover; background-position: center; height: 280px; margin-bottom: 30px; position: relative; overflow: hidden; } .sc-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, transparent, #080a12); pointer-events: none; z-index: 1; } .sc-comics-section-header { text-align: center; margin: 0 0 1.25rem; padding: 0.5rem 0.75rem 0; position: relative; } .sc-comics-section-header::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(100%, 520px); height: 120%; transform: translate(-50%, -50%) rotate(-2deg); background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.14) 0%, transparent 68%); pointer-events: none; z-index: 0; } .sc-comics-section-title { position: relative; z-index: 1; margin: 0; font-family: 'Bangers', Impact, 'Arial Black', sans-serif; font-size: clamp(1.85rem, 5.5vw, 3.1rem); font-weight: 400; line-height: 0.95; letter-spacing: 0.06em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 0.1em; filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.85)); } .sc-comics-title-line { display: block; padding: 0.05em 0.25em; transform: rotate(-2deg); color: #ffeb3b; -webkit-text-stroke: 3px #0d0d12; paint-order: stroke fill; text-shadow: 4px 4px 0 #d32f2f, 5px 5px 0 #0d0d12, 6px 6px 0 #0d0d12; } .sc-comics-title-line--galaxy { transform: rotate(1.5deg) scale(1.04); color: #90caf9; text-shadow: 4px 4px 0 #1565c0, 5px 5px 0 #0d0d12, 6px 6px 0 #0d0d12, 0 0 30px rgba(114, 137, 218, 0.45); } .sc-panorama-wrapper { margin-bottom: 30px; background: linear-gradient(180deg, rgba(14, 16, 28, 0.92) 0%, rgba(8, 10, 18, 0.95) 100%); border: 1px solid rgba(114, 137, 218, 0.45); border-radius: 10px; padding: 18px 16px 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -20px 40px rgba(0, 0, 0, 0.35), 0 6px 24px rgba(0, 0, 0, 0.4); } .sc-panorama-hint { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; margin: 10px 0 0; text-align: center; } .sc-coverflow-scene { width: 100%; height: 340px; perspective: 900px; position: relative; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; background: radial-gradient(ellipse 80% 60% at 50% 85%, rgba(114, 137, 218, 0.14) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 215, 0, 0.04) 0%, transparent 60%), rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 8px; box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.5); overflow: hidden; } .sc-coverflow-scene::before { content: ''; position: absolute; bottom: 28px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(114, 137, 218, 0.35), rgba(255, 215, 0, 0.2), rgba(114, 137, 218, 0.35), transparent); pointer-events: none; z-index: 0; } .sc-coverflow-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.25) 100%); pointer-events: none; z-index: 0; border-radius: 8px; } .sc-coverflow-scene.dragging { cursor: grabbing; } .sc-coverflow-item { position: absolute; left: calc(50% - 90px); top: calc(50% - 130px); width: 180px; height: 260px; border-radius: 4px; overflow: hidden; background: #12121c; border: 3px solid #3a3a52; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 10px 28px rgba(0, 0, 0, 0.75), inset 0 0 12px rgba(0, 0, 0, 0.4); cursor: pointer; z-index: 1; transition: border-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; } .sc-coverflow-item::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; pointer-events: none; z-index: 2; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .sc-coverflow-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.15) 100%); pointer-events: none; z-index: 2; } .sc-coverflow-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; position: relative; z-index: 1; } .sc-coverflow-item:not(.center) { filter: brightness(0.72) saturate(0.8); border-color: #2e2e42; } .sc-coverflow-item.center { border-color: #ffd700; background: #1a1828; box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.4), 0 0 30px rgba(255, 215, 0, 0.2), 0 14px 36px rgba(0, 0, 0, 0.85), inset 0 0 16px rgba(255, 215, 0, 0.05); filter: brightness(1.05); z-index: 10; } .sc-coverflow-item.center::before { border-color: rgba(255, 215, 0, 0.25); inset: 6px; } .sc-comic-info { text-align: center; padding: 16px 20px 4px; min-height: 80px; border-top: 1px solid rgba(114, 137, 218, 0.2); margin-top: 14px; } .sc-comic-title { font-family: 'Cinzel', serif; color: #ffd700; font-size: 1.15rem; margin: 0 0 8px; } .sc-comic-desc { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; margin: 0 auto; max-width: 620px; line-height: 1.5; } .sc-comic-reader { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: 2000; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .sc-comic-reader.active { display: flex; } .sc-reader-close { position: absolute; top: 16px; right: 24px; font-size: 2.5rem; color: #ffd700; background: none; border: none; cursor: pointer; line-height: 1; z-index: 1; } .sc-reader-close:hover { color: #fff; } .sc-reader-img-wrap { max-height: calc(100vh - 120px); display: flex; align-items: center; } .sc-reader-img-wrap img { max-height: calc(100vh - 120px); max-width: 90vw; object-fit: contain; border-radius: 4px; display: block; } .sc-reader-controls { display: flex; align-items: center; gap: 20px; } .sc-reader-btn { background: rgba(20, 20, 30, 0.8); border: 1px solid #7289da; color: #7289da; border-radius: 4px; padding: 10px 18px; cursor: pointer; font-size: 1rem; transition: all 0.2s ease; } .sc-reader-btn:hover:not(:disabled) { border-color: #ffd700; color: #ffd700; } .sc-reader-btn:disabled { opacity: 0.3; cursor: default; } .sc-reader-counter { color: rgba(255, 255, 255, 0.7); font-family: 'Cinzel', serif; font-size: 0.95rem; min-width: 80px; text-align: center; } .sc-section { margin-bottom: 40px; background: rgba(14, 16, 28, 0.72); border-radius: 8px; padding: 20px; border: 1px solid rgba(114, 137, 218, 0.2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sc-section h2 { font-family: 'Cinzel', serif; color: #7289da; margin-bottom: 20px; border-bottom: 1px solid #7289da; padding-bottom: 15px; position: relative; } .sc-section h2::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 50px; height: 2px; background: linear-gradient(90deg, #ffd700, transparent); } .sc-buttons { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin: 20px 0; } .sc-button { display: inline-block; background: #7289da; color: white; padding: 10px 20px; border-radius: 4px; text-decoration: none; font-family: 'Cinzel', serif; font-weight: bold; transition: all 0.3s ease; border: none; cursor: pointer; font-size: 1rem; } .sc-button:hover { background: linear-gradient(135deg, #7289da 0%, #ffd700 100%); border: 1px solid #ffd700; transform: translateY(-2px); box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); } .sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .sc-card { background: rgba(30, 30, 40, 0.12); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; } .sc-card:hover { transform: translateY(-5px); border-top: 3px solid #ffd700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); } .sc-card-content { padding: 15px; } .sc-card-content h3 { color: #7289da; margin-top: 0; } .sc-video { margin: 30px 0; } .sc-profile { display: flex; align-items: center; margin-bottom: 20px; } .sc-profile-image { width: 100px; height: 100px; border-radius: 50%; margin-right: 20px; background-size: cover; background-position: center; border: 3px solid #ffd700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); } .sc-profile-info { flex: 1; } .sc-profile-info h3 { margin-top: 0; color: #7289da; } .sc-bio { font-style: italic; border-left: 3px solid #7289da; padding-left: 15px; margin: 20px 0; } .horizontal-sections { display: flex; gap: 20px; margin-bottom: 40px; align-items: stretch; } .horizontal-sections .sc-section { flex: 1; margin-bottom: 0; min-width: 0; display: flex; flex-direction: column; } .sc-org-banner { flex: 1; min-height: 90px; margin: 14px 0; border-radius: 6px; overflow: hidden; border: 1px solid rgba(114, 137, 218, 0.35); display: block; background: rgba(0, 0, 0, 0.35); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .sc-org-banner:hover { border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 0 16px rgba(255, 215, 0, 0.15); } .sc-org-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; min-height: 90px; } .sc-section .sc-buttons:last-child { margin-bottom: 0; } .sc-audio-section { padding: 0; overflow: hidden; } .sc-audio-player { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; background: linear-gradient(160deg, rgba(18, 18, 28, 0.95) 0%, rgba(25, 25, 40, 0.9) 100%); padding: 18px; gap: 14px; box-sizing: border-box; } .sc-audio-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid rgba(114, 137, 218, 0.25); } .sc-audio-label { font-family: 'Cinzel', serif; font-size: 0.85rem; color: #ffd700; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .sc-audio-label i { font-size: 0.9rem; opacity: 0.85; } .sc-audio-track-count { font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); font-family: monospace; } .sc-audio-now { display: flex; gap: 14px; align-items: center; } .sc-audio-art { position: relative; width: 72px; height: 72px; flex-shrink: 0; } .sc-audio-disc { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a3a50 0%, #1a1a28 60%, #0d0d14 100%); border: 2px solid rgba(255, 215, 0, 0.35); box-shadow: 0 0 20px rgba(255, 215, 0, 0.15), inset 0 0 12px rgba(0, 0, 0, 0.5); position: relative; transition: box-shadow 0.3s ease; } .sc-audio-disc::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: #ffd700; box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); } .sc-audio-player.is-playing .sc-audio-disc { animation: sc-disc-spin 4s linear infinite; box-shadow: 0 0 28px rgba(255, 215, 0, 0.35), inset 0 0 12px rgba(0, 0, 0, 0.5); } @keyframes sc-disc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .sc-audio-bars { position: absolute; bottom: -4px; right: -4px; display: flex; align-items: flex-end; gap: 2px; height: 16px; opacity: 0; transition: opacity 0.3s ease; } .sc-audio-player.is-playing .sc-audio-bars { opacity: 1; } .sc-audio-bars span { display: block; width: 3px; background: #ffd700; border-radius: 1px; height: 4px; } .sc-audio-player.is-playing .sc-audio-bars span:nth-child(1) { animation: sc-eq 0.8s ease-in-out infinite alternate; } .sc-audio-player.is-playing .sc-audio-bars span:nth-child(2) { animation: sc-eq 0.6s ease-in-out 0.1s infinite alternate; } .sc-audio-player.is-playing .sc-audio-bars span:nth-child(3) { animation: sc-eq 0.7s ease-in-out 0.2s infinite alternate; } .sc-audio-player.is-playing .sc-audio-bars span:nth-child(4) { animation: sc-eq 0.5s ease-in-out 0.15s infinite alternate; } @keyframes sc-eq { from { height: 4px; } to { height: 14px; } } .sc-audio-meta { flex: 1; min-width: 0; } .sc-audio-track-num { font-size: 0.65rem; color: rgba(114, 137, 218, 0.8); font-family: monospace; letter-spacing: 0.08em; display: block; margin-bottom: 2px; } .sc-audio-title { font-family: 'Cinzel', serif; font-size: 1rem; color: #fff; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .sc-audio-artist { font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); margin: 0; } .sc-audio-progress { display: flex; align-items: center; gap: 10px; } .sc-audio-time { font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); font-family: monospace; min-width: 36px; flex-shrink: 0; } .sc-audio-time:last-child { text-align: right; } .sc-audio-seek { flex: 1; height: 5px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; cursor: pointer; position: relative; } .sc-audio-seek:hover { height: 7px; transition: height 0.15s ease; } .sc-audio-seek-fill { height: 100%; background: linear-gradient(90deg, #7289da, #ffd700); border-radius: 3px; width: 0; pointer-events: none; position: relative; transition: width 0.05s linear; } .sc-audio-seek:hover .sc-audio-seek-fill::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: #ffd700; box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); } .sc-audio-controls { display: flex; align-items: center; justify-content: center; gap: 8px; } .sc-audio-ctrl { background: transparent; border: 1px solid transparent; color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; flex-shrink: 0; } .sc-audio-ctrl:hover { color: #ffd700; border-color: rgba(255, 215, 0, 0.3); background: rgba(255, 215, 0, 0.08); } .sc-audio-play-btn { width: 46px; height: 46px; background: linear-gradient(135deg, #ffd700 0%, #c9a800 100%); color: #1a1a1a; border: none; font-size: 1.05rem; box-shadow: 0 2px 12px rgba(255, 215, 0, 0.3); } .sc-audio-play-btn:hover { transform: scale(1.06); box-shadow: 0 4px 18px rgba(255, 215, 0, 0.45); color: #000; background: linear-gradient(135deg, #ffe033 0%, #ffd700 100%); } .sc-audio-volume { display: flex; align-items: center; gap: 6px; margin-left: 8px; padding-left: 12px; border-left: 1px solid rgba(114, 137, 218, 0.2); } .sc-audio-vol-btn { width: 32px; height: 32px; font-size: 0.85rem; } .sc-audio-vol-slider { width: 72px; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, 0.12); border-radius: 2px; cursor: pointer; outline: none; } .sc-audio-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #ffd700; cursor: pointer; box-shadow: 0 0 6px rgba(255, 215, 0, 0.4); } .sc-audio-vol-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #ffd700; cursor: pointer; border: none; } .sc-audio-playlist { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(114, 137, 218, 0.2); padding-top: 12px; } .sc-audio-playlist-heading { font-family: 'Cinzel', serif; font-size: 0.75rem; color: rgba(114, 137, 218, 0.8); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; flex-shrink: 0; } .sc-audio-playlist-items { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; scrollbar-color: rgba(114, 137, 218, 0.4) transparent; } .sc-audio-playlist-items::-webkit-scrollbar { width: 4px; } .sc-audio-playlist-items::-webkit-scrollbar-thumb { background: rgba(114, 137, 218, 0.4); border-radius: 2px; } .sc-audio-playlist-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 5px; cursor: pointer; transition: background 0.15s ease; border: 1px solid transparent; } .sc-audio-playlist-item:hover { background: rgba(114, 137, 218, 0.1); border-color: rgba(114, 137, 218, 0.15); } .sc-audio-playlist-item.active { background: rgba(255, 215, 0, 0.07); border-color: rgba(255, 215, 0, 0.25); } .sc-audio-playlist-num { font-size: 0.65rem; color: rgba(255, 255, 255, 0.3); font-family: monospace; min-width: 20px; flex-shrink: 0; } .sc-audio-playlist-item.active .sc-audio-playlist-num { color: #ffd700; } .sc-audio-playlist-info { flex: 1; min-width: 0; } .sc-audio-playlist-title { display: block; font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .sc-audio-playlist-item.active .sc-audio-playlist-title { color: #ffd700; font-weight: 600; } .sc-audio-playlist-artist { display: block; font-size: 0.68rem; color: rgba(255, 255, 255, 0.35); } .sc-audio-playlist-eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; width: 16px; flex-shrink: 0; opacity: 0; } .sc-audio-playlist-item.active.is-playing-track .sc-audio-playlist-eq { opacity: 1; } .sc-audio-playlist-eq span { display: block; width: 2px; background: #ffd700; border-radius: 1px; height: 3px; } .sc-audio-playlist-item.active.is-playing-track .sc-audio-playlist-eq span:nth-child(1) { animation: sc-eq 0.7s ease-in-out infinite alternate; } .sc-audio-playlist-item.active.is-playing-track .sc-audio-playlist-eq span:nth-child(2) { animation: sc-eq 0.5s ease-in-out 0.1s infinite alternate; } .sc-audio-playlist-item.active.is-playing-track .sc-audio-playlist-eq span:nth-child(3) { animation: sc-eq 0.6s ease-in-out 0.05s infinite alternate; } .sc-audio-download { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: rgba(114, 137, 218, 0.7); border: 1px solid rgba(114, 137, 218, 0.25); background: transparent; text-decoration: none; font-size: 0.72rem; transition: all 0.2s ease; } .sc-audio-download:hover { color: #ffd700; border-color: rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.08); } .sc-torm-product { padding: 18px; overflow: hidden; background: rgba(20, 20, 30, 0.12); display: flex; flex-direction: column; } .sc-torm-store { display: flex; flex-direction: column; gap: 14px; position: relative; flex: 1; min-height: 0; } .sc-torm-badge-row { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; } .sc-torm-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 3px; background: rgba(114, 137, 218, 0.25); color: #7289da; border: 1px solid rgba(114, 137, 218, 0.5); } .sc-torm-badge-warn { background: rgba(255, 215, 0, 0.12); color: #ffd700; border-color: rgba(255, 215, 0, 0.45); } .sc-torm-product-grid { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: stretch; flex-shrink: 0; } .sc-torm-image-wrap { background: rgba(0, 0, 0, 0.35); border-radius: 8px; border: 1px solid rgba(114, 137, 218, 0.3); overflow: hidden; width: 170px; min-height: 100%; height: auto; display: flex; align-items: center; justify-content: center; } .sc-torm-gif { width: 100%; height: 100%; object-fit: cover; display: block; } .sc-torm-reviews { position: relative; background: rgba(15, 20, 35, 0.85); border: 1px solid rgba(114, 137, 218, 0.35); border-radius: 6px; padding: 12px 12px 8px; flex: 1; min-height: 0; display: flex; flex-direction: column; } .sc-torm-reviews-label { display: block; font-family: 'Cinzel', serif; font-size: 0.68rem; color: rgba(114, 137, 218, 0.75); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; flex-shrink: 0; } .sc-torm-reviews-badge { position: absolute; top: 10px; right: 10px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; color: #43b581; opacity: 0.85; font-family: monospace; } .sc-torm-reviews-viewport { overflow: hidden; flex: 1; min-height: 0; display: flex; align-items: center; } .sc-torm-reviews-track { display: flex; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .sc-torm-review { flex: 0 0 100%; display: flex; gap: 10px; padding: 4px 2px 8px; min-width: 0; box-sizing: border-box; } .sc-torm-review-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); } .sc-torm-review-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; position: relative; padding-bottom: 18px; } .sc-torm-review-user { font-size: 0.78rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; } .sc-torm-review-text { font-size: 0.78rem; line-height: 1.45; color: rgba(255, 255, 255, 0.85); margin: 0; font-family: 'Lato', sans-serif; } .sc-torm-review-likes { position: absolute; bottom: 0; right: 0; font-size: 0.68rem; color: rgba(255, 255, 255, 0.55); display: flex; align-items: center; gap: 4px; } .sc-torm-review-likes i { color: #e74c3c; font-size: 0.6rem; } .sc-torm-review-press { padding: 6px 4px 10px; } .sc-torm-review-body-full { padding-bottom: 0; width: 100%; gap: 6px; } .sc-torm-review-stars { color: #ffd700; font-size: 0.75rem; letter-spacing: 2px; line-height: 1; } .sc-torm-review-quote { font-size: 0.74rem; line-height: 1.4; color: #e8d5a3; margin: 0; font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-family: 'Lato', sans-serif; } .sc-torm-review-source { font-size: 0.62rem; color: #6aab9a; font-style: italic; letter-spacing: 0.04em; text-transform: uppercase; } .sc-torm-reviews-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(114, 137, 218, 0.2); flex-shrink: 0; } .sc-torm-reviews-btn { width: 24px; height: 24px; border: 1px solid rgba(114, 137, 218, 0.4); background: rgba(30, 30, 45, 0.8); color: #7289da; border-radius: 3px; cursor: pointer; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; } .sc-torm-reviews-btn:hover { border-color: #ffd700; color: #ffd700; } .sc-torm-reviews-dots { display: flex; gap: 6px; } .sc-torm-reviews-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(114, 137, 218, 0.35); border: none; padding: 0; cursor: pointer; transition: all 0.2s ease; } .sc-torm-reviews-dot.active { background: #ffd700; box-shadow: 0 0 6px rgba(255, 215, 0, 0.5); } .sc-torm-details { display: flex; flex-direction: column; gap: 10px; min-width: 0; text-align: left; height: 100%; } .sc-torm-name { font-family: 'Cinzel', serif; color: #ffd700; font-size: 1.15rem; margin: 0; line-height: 1.3; } .sc-torm-subtitle { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.4; } .sc-torm-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.82rem; padding: 6px 0; border-top: 1px solid rgba(114, 137, 218, 0.15); border-bottom: 1px solid rgba(114, 137, 218, 0.15); } .sc-torm-stars { color: #ffd700; letter-spacing: 1px; font-size: 0.9rem; } .sc-torm-rating-meta { color: rgba(255, 255, 255, 0.55); } .sc-torm-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .sc-torm-price-now { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; } .sc-torm-price-was { font-size: 0.88rem; color: rgba(255, 255, 255, 0.35); text-decoration: line-through; } .sc-torm-price-save { font-size: 0.75rem; font-weight: 700; color: #43b581; background: rgba(67, 181, 129, 0.18); padding: 3px 8px; border-radius: 3px; } .sc-torm-desc { font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0; } .sc-torm-buybox { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(114, 137, 218, 0.2); border-radius: 6px; margin-top: auto; } .sc-torm-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); } .sc-torm-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #e67e22; box-shadow: 0 0 6px rgba(230, 126, 34, 0.6); flex-shrink: 0; } .sc-torm-stock-label strong { color: #e67e22; } .sc-torm-stock-note { color: rgba(255, 255, 255, 0.45); font-style: italic; } .sc-torm-buy-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; } .sc-torm-qty { display: flex; align-items: center; gap: 4px; } .sc-torm-qty label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); margin-right: 4px; } .sc-torm-qty-btn { width: 28px; height: 28px; border: 1px solid rgba(114, 137, 218, 0.5); background: rgba(30, 30, 40, 0.8); color: #7289da; border-radius: 4px; cursor: pointer; font-size: 1rem; line-height: 1; transition: all 0.2s ease; } .sc-torm-qty-btn:hover:not(:disabled) { border-color: #ffd700; color: #ffd700; } .sc-torm-qty-btn:disabled { opacity: 0.35; cursor: default; } .sc-torm-qty-input { width: 36px; height: 28px; text-align: center; border: 1px solid rgba(114, 137, 218, 0.5); background: rgba(20, 20, 30, 0.9); color: #fff; border-radius: 4px; font-size: 0.85rem; -moz-appearance: textfield; } .sc-torm-qty-input::-webkit-outer-spin-button, .sc-torm-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sc-torm-cart-btn { flex: 1; min-width: 140px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: linear-gradient(135deg, #ffd700 0%, #e6b800 100%); color: #1a1a1a; border: none; border-radius: 4px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(255, 215, 0, 0.25); } .sc-torm-cart-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255, 215, 0, 0.4); } .sc-torm-buy-now { width: 100%; padding: 8px 12px; background: transparent; border: 1px solid rgba(114, 137, 218, 0.6); color: #7289da; border-radius: 4px; font-family: 'Lato', sans-serif; font-size: 0.82rem; cursor: pointer; transition: all 0.2s ease; } .sc-torm-buy-now:hover { border-color: #ffd700; color: #ffd700; } .sc-torm-disclaimer { font-size: 0.65rem; color: rgba(255, 255, 255, 0.35); margin: 0; line-height: 1.35; font-style: italic; } .sc-torm-toast { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px; background: rgba(20, 20, 30, 0.95); border: 1px solid #ffd700; border-radius: 4px; font-size: 0.82rem; color: #ffd700; text-align: center; animation: sc-torm-toast-in 0.3s ease; z-index: 2; } .sc-torm-toast[hidden] { display: none; } @keyframes sc-torm-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1200px) { .sc-torm-product-grid { grid-template-columns: 1fr; } .sc-torm-image-wrap { width: 100%; max-width: 320px; min-height: unset; height: auto; aspect-ratio: 1; margin: 0 auto; } } .scrollable-section { max-height: 600px; overflow-y: auto; padding-right: 5px; } .member-card { display: flex; align-items: center; background: rgba(30, 30, 40, 0.12); border-radius: 8px; padding: 10px; margin-bottom: 10px; transition: transform 0.3s ease; } .member-card:hover { transform: translateY(-3px); border-left: 3px solid #ffd700; box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2); } .member-avatar { width: 100px; height: 100px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid #7289da; margin-right: 15px; flex-shrink: 0; } .member-info { flex-grow: 1; } .member-name { color: #7289da; font-weight: bold; margin: 0 0 5px 0; } .member-name a { color: #7289da; text-decoration: none; transition: all 0.3s ease; } .member-name a:hover { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); text-decoration: underline; } .member-rank { font-size: 0.9em; opacity: 0.8; margin: 0; } .verification-modal, .error-report-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); } .verification-content, .error-report-content { background: rgba(20, 20, 30, 0.95); margin: 10% auto; padding: 30px; border: 1px solid #ffd700; border-radius: 8px; width: 90%; max-width: 600px; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); position: relative; color: #fff; font-family: 'Lato', sans-serif; } .close-button { color: #7289da; float: right; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } .close-button:hover { color: #ffd700; } .verification-step { margin-top: 20px; } .verification-step h2 { font-family: 'Cinzel', serif; color: #7289da; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #7289da; text-align: center; } .step-indicator { display: flex; justify-content: center; margin-bottom: 30px; } .step-circle { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(40, 40, 60, 0.8); border: 2px solid #7289da; color: #7289da; display: flex; align-items: center; justify-content: center; margin: 0 20px; font-family: 'Cinzel', serif; font-weight: bold; font-size: 1.2rem; position: relative; } .step-circle.active { background: linear-gradient(135deg, #ffd700 0%, #e6b800 100%); color: #000; border-color: #ffd700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); } .step-circle.completed { background-color: #43b581; border-color: #43b581; color: white; } .step-circle::after { content: ''; position: absolute; height: 2px; width: 40px; background-color: #7289da; top: 50%; left: 100%; } .step-circle:last-child::after { display: none; } .verification-input { width: 100%; padding: 12px; margin: 10px 0; background-color: rgba(40, 40, 60, 0.8); border: 1px solid #7289da; border-radius: 4px; color: white; font-family: 'Lato', sans-serif; font-size: 1rem; } .verification-code-container { background-color: rgba(40, 40, 60, 0.8); border: 1px solid #ffd700; border-radius: 4px; padding: 15px; margin: 20px 0; position: relative; text-align: center; font-family: monospace; font-size: 1.2rem; letter-spacing: 1px; color: #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); } .copy-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background-color: #7289da; color: white; border: none; border-radius: 4px; padding: 5px 10px; cursor: pointer; font-family: 'Cinzel', serif; font-size: 0.8rem; transition: all 0.3s ease; } .copy-button:hover { background: linear-gradient(135deg, #7289da 0%, #ffd700 100%); } .verification-instructions { margin: 20px 0; text-align: left; } .verification-instructions ol { padding-left: 20px; } .verification-instructions li { margin-bottom: 10px; } .verification-instructions a { color: #7289da; text-decoration: none; } .verification-instructions a:hover { color: #ffd700; text-decoration: underline; } .verification-button { background-color: #7289da; color: white; border: none; border-radius: 4px; padding: 12px 24px; cursor: pointer; font-family: 'Cinzel', serif; font-weight: bold; font-size: 1rem; transition: all 0.3s ease; display: block; margin: 20px auto; min-width: 200px; } .verification-button:hover { background: linear-gradient(135deg, #7289da 0%, #ffd700 100%); border: 1px solid #ffd700; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3); } .verification-button:disabled { background-color: #4a5573; cursor: not-allowed; transform: none; box-shadow: none; } .discord-section { margin-top: 20px; padding: 15px; background-color: rgba(88, 101, 242, 0.2); border-radius: 4px; border-left: 3px solid #5865f2; } .discord-status { display: flex; align-items: center; margin-top: 10px; } .discord-status i { margin-right: 10px; color: #5865f2; } .discord-user-info { display: flex; align-items: center; justify-content: center; margin: 15px 0; padding: 10px; background-color: rgba(88, 101, 242, 0.2); border-radius: 4px; } .discord-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; border: 2px solid #5865f2; } .discord-username { font-weight: bold; color: white; } .rsi-account-info { margin: 15px 0; padding: 10px; background-color: rgba(67, 181, 129, 0.1); border-radius: 4px; border-left: 3px solid #43b581; font-size: 0.9rem; } .referral-code { font-weight: bold; background: linear-gradient(135deg, #ffd700 20%, rgba(255, 215, 0, 0.2) 100%); border: 1px solid #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); color: #000; padding: 2px 5px; border-radius: 3px; } .rsi-profile-url { margin: 10px 0; padding: 10px; background-color: rgba(40, 40, 60, 0.8); border-radius: 4px; font-family: monospace; display: none; } .rsi-profile-url a { color: #7289da; text-decoration: none; word-break: break-all; } .rsi-profile-url a:hover { color: #ffd700; text-decoration: underline; } .error-report-button { display: block; background-color: #f04747; color: white; border: none; border-radius: 4px; padding: 8px 16px; font-family: 'Cinzel', serif; font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; margin: 15px auto 0; } .error-report-button:hover { background-color: #d04040; transform: translateY(-2px); } .error-report-content h2 { font-family: 'Cinzel', serif; color: #f04747; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #f04747; text-align: center; } .char-counter { color: #aaa; text-align: right; font-size: 0.8rem; margin-top: 5px; } .char-counter.limit { color: #f04747; font-weight: bold; } .error-report-textarea { width: 100%; height: 120px; padding: 12px; margin: 10px 0; background-color: rgba(40, 40, 60, 0.8); border: 1px solid #f04747; border-radius: 4px; color: white; font-family: 'Lato', sans-serif; font-size: 1rem; resize: none; } .error-report-buttons { display: flex; justify-content: space-between; margin-top: 20px; } .error-cancel-button { background-color: #4a5573; color: white; border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer; font-family: 'Cinzel', serif; font-size: 0.9rem; transition: all 0.3s ease; } .error-cancel-button:hover { background-color: #5b6eae; } .error-submit-button { background-color: #f04747; color: white; border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer; font-family: 'Cinzel', serif; font-size: 0.9rem; transition: all 0.3s ease; } .error-submit-button:hover { background-color: #d04040; } .error-submit-button:disabled { background-color: #7f3a3a; cursor: not-allowed; } .error-report-status { margin-top: 15px; padding: 10px; border-radius: 4px; text-align: center; display: none; } .simple-audio-player { background: rgba(30, 30, 40, 0.7); border-radius: 6px; padding: 15px; border: 1px solid #ffd700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); } .player-controls { margin-bottom: 15px; } .now-playing { margin-bottom: 10px; text-align: center; } .song-title { color: #7289da; margin: 0 0 5px 0; font-size: 1.2rem; } .song-artist { color: #aaa; margin: 0; font-size: 0.9rem; } .progress-container { display: flex; align-items: center; margin: 15px 0; } .progress-bar { height: 6px; background: rgba(50, 50, 60, 0.8); border-radius: 3px; flex-grow: 1; margin: 0 10px; cursor: pointer; position: relative; overflow: hidden; } .progress { height: 100%; background: linear-gradient(90deg, #7289da 0%, #ffd700 100%); width: 0; border-radius: 3px; transition: width 0.1s linear; } .time-display { color: #aaa; font-size: 0.8rem; min-width: 40px; text-align: center; } .control-buttons { display: flex; justify-content: center; align-items: center; margin-top: 15px; } .player-button { background: transparent; border: none; color: #7289da; font-size: 1.2rem; margin: 0 10px; cursor: pointer; transition: all 0.2s ease; padding: 10px; border-radius: 50%; } .player-button:hover { color: #ffd700; background: rgba(255, 215, 0, 0.2); } .play-btn { background: linear-gradient(135deg, #ffd700 0%, #e6b800 100%); color: #000; padding: 15px; } .volume-container { display: flex; align-items: center; position: relative; margin-left: 10px; } .volume-slider { width: 0; height: 6px; opacity: 0; transition: all 0.3s ease; margin-left: 0; cursor: pointer; background: rgba(50, 50, 60, 0.8); border-radius: 3px; appearance: none; -webkit-appearance: none; } .volume-container:hover .volume-slider { width: 100px; opacity: 1; margin-left: 10px; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); transition: all 0.2s ease; } .volume-slider::-webkit-slider-thumb:hover { background: #fff; box-shadow: 0 0 12px rgba(255, 215, 0, 0.6); transform: scale(1.1); } .volume-slider::-moz-range-track { width: 100%; height: 6px; background: rgba(50, 50, 60, 0.8); border-radius: 3px; border: none; } .volume-slider::-moz-range-thumb { height: 18px; width: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; border: none; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); } .playlist { margin-top: 20px; border-top: 1px solid rgba(114, 137, 218, 0.3); padding-top: 15px; } .playlist-title { color: #7289da; margin: 0 0 10px 0; font-size: 1rem; } .playlist-items { max-height: 250px; overflow-y: auto; } .playlist-item { display: flex; align-items: center; padding: 8px; margin-bottom: 5px; border-radius: 4px; cursor: pointer; transition: background 0.2s ease; } .playlist-item:hover { background: rgba(50, 50, 60, 0.8); } .playlist-item.active { background: linear-gradient(135deg, rgba(114, 137, 218, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%); border-left: 3px solid #ffd700; } /* --- About Page Styles --- */ .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 3rem; } .widget { background: rgba(32, 32, 32, 0.04); border: 2px solid rgba(169, 169, 169, 0.5); border-radius: 15px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05); padding: 2.5rem; position: relative; overflow: visible; } .widget::after { content: ''; position: absolute; top: -2px; left: -2px; width: 15px; height: 15px; border-width: 3px 0 0 3px; border-style: solid; border-color: rgba(192, 192, 192, 0.6); border-radius: 15px 0 0 0; opacity: 0.7; } .widget:hover::after { opacity: 1; border-color: var(--accent-color); } .youtube-widget .video-container { position: relative; width: 100%; padding-bottom: 56.25%; margin: 1rem 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(169, 169, 169, 0.3); } .youtube-widget iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .widget-title { margin: 0 0 1.5rem 0; } .widget-title a { color: var(--accent-primary-bright); text-decoration: none; font-family: var(--font-tech); font-size: 1.8rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); transition: var(--transition); } .widget-title a:hover { color: var(--accent-color); } .description { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.7; margin: 1rem 0; } .music-player { background: linear-gradient(rgba(32, 32, 32, 0.85), rgba(32, 32, 32, 0.92)); min-height: 500px; color: var(--text-primary); position: relative; } .player-title { font-family: var(--font-decorative); font-size: 2.2rem; color: var(--accent-primary-bright); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); text-align: center; margin-bottom: 2rem; } .player-controls { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; } .control-btn { background: rgba(0, 0, 0, 0.7); border: 2px solid var(--accent-color); color: var(--text-primary); font-size: 1.5rem; cursor: pointer; transition: var(--transition); padding: 0.75rem; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; } .control-btn:hover { color: var(--accent-color); background: rgba(255, 215, 0, 0.1); box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); } .music-player .volume-slider { width: 200px; height: 6px; background: rgba(255, 215, 0, 0.3); border-radius: 3px; outline: none; -webkit-appearance: none; cursor: pointer; transition: all 0.2s ease; } .music-player .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); transition: all 0.2s ease; } .music-player .volume-slider::-webkit-slider-thumb:hover { background: #fff; box-shadow: 0 0 12px rgba(255, 215, 0, 0.6); transform: scale(1.1); } .music-player .volume-slider::-moz-range-track { width: 100%; height: 6px; background: rgba(255, 215, 0, 0.3); border-radius: 3px; border: none; } .music-player .volume-slider::-moz-range-thumb { height: 18px; width: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; border: none; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); } .music-player .playlist { max-height: 350px; overflow-y: auto; margin-top: 1.5rem; padding-right: 10px; border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 8px; background: rgba(0, 0, 0, 0.5); } .song-list { list-style: none; padding: 0; } .song-list li { padding: 1rem; cursor: pointer; transition: var(--transition); border-radius: 4px; margin: 0.25rem; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; } .song-list li:hover { background: rgba(255, 255, 255, 0.1); } .song-list li.active { background: rgba(255, 215, 0, 0.2); color: var(--accent-color); font-weight: bold; } .song-title-text { flex: 1; } .song-download-btn { background: rgba(255, 215, 0, 0.2); border: 1px solid var(--accent-color); color: var(--accent-color); padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.9rem; transition: var(--transition); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; } .song-download-btn:hover { background: var(--accent-color); color: #000; transform: scale(1.05); } .song-download-btn i { font-size: 0.85rem; } .about-section { background: rgba(32, 32, 32, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(169, 169, 169, 0.5); border-radius: 15px; padding: 3rem; margin: 3rem 0; position: relative; overflow: visible; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .about-section::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 15px; height: 15px; border-width: 0 3px 3px 0; border-style: solid; border-color: rgba(192, 192, 192, 0.5); border-radius: 0 0 15px 0; opacity: 0.7; } .about-section:hover::after { opacity: 1; border-color: var(--accent-color); } .about-content { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: center; } .about-image { width: 100%; border-radius: 15px; border: 3px solid rgba(192, 192, 192, 0.5); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); transition: var(--transition); } .about-image:hover { transform: scale(1.05); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); } .about-text p { font-size: 1.2rem; line-height: 1.8; color: var(--text-secondary); margin-bottom: 1.5rem; } /* --- Fixed Elements (Chatbot & Mini Music Player) --- */ .chatbot-toggle { position: fixed; bottom: 20px; left: 20px; width: 60px; height: 60px; background: url('/images/defknight.png') center/cover; border: 2px solid rgba(74, 92, 90, 0.55); border-radius: 50%; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(192, 192, 192, 0.12); z-index: 1001; transition: var(--transition); } .chatbot-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7), 0 0 28px rgba(192, 192, 192, 0.22); border-color: rgba(192, 192, 192, 0.45); } /* Mini Enchanted Bard Player */ .mini-bard-toggle { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(145deg, #707070, #505050); border: 2px solid rgba(192, 192, 192, 0.5); border-radius: 50%; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); z-index: 1001; transition: var(--transition); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #D0D0D0; } .mini-bard-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .mini-bard-toggle.playing { animation: bardPulse 2s ease-in-out infinite; } @keyframes bardPulse { 0%, 100% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); transform: scale(1); } 50% { box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7); transform: scale(1.05); } } .mini-bard-player { display: none; position: fixed; bottom: 90px; right: 20px; width: 380px; max-height: 600px; background: linear-gradient(135deg, rgba(40, 40, 40, 0.98), rgba(32, 32, 32, 0.98)); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 2px solid rgba(169, 169, 169, 0.5); border-radius: 20px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05); z-index: 1000; overflow: hidden; } .mini-bard-player.active { display: block; animation: slideInUp 0.3s ease-out; } @keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .mini-bard-header { background: linear-gradient(135deg, rgba(80, 80, 80, 0.5), rgba(60, 60, 60, 0.5)); padding: 1rem; border-bottom: 2px solid rgba(169, 169, 169, 0.5); display: flex; justify-content: space-between; align-items: center; } .mini-bard-title { font-family: var(--font-decorative); font-size: 1.4rem; color: var(--accent-primary-bright); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); margin: 0; } .mini-bard-close { background: rgba(240, 71, 71, 0.2); border: 2px solid #f04747; color: #f04747; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .mini-bard-close:hover { background: #f04747; color: white; transform: scale(1.1); } .mini-bard-content { padding: 1rem; } .mini-now-playing { text-align: center; margin-bottom: 1rem; padding: 0.8rem; background: rgba(0, 0, 0, 0.3); border-radius: 10px; border: 1px solid rgba(255, 215, 0, 0.2); } .mini-song-title { font-size: 1.1rem; color: var(--accent-primary-bright); margin: 0 0 0.3rem 0; font-weight: 600; } .mini-song-artist { font-size: 0.9rem; color: var(--text-secondary); margin: 0; } .mini-controls { display: flex; justify-content: center; align-items: center; gap: 0.8rem; margin: 1rem 0; } .mini-control-btn { background: rgba(80, 80, 80, 0.5); border: 2px solid rgba(169, 169, 169, 0.5); color: var(--accent-color); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .mini-control-btn:hover { background: rgba(100, 100, 100, 0.6); color: var(--accent-primary-bright); transform: scale(1.1); } .mini-control-btn.play { width: 50px; height: 50px; font-size: 1.3rem; background: linear-gradient(145deg, #707070, #505050); color: #D0D0D0; } .mini-volume-container { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0; } .mini-volume-slider { flex: 1; height: 6px; background: rgba(255, 215, 0, 0.3); border-radius: 3px; outline: none; -webkit-appearance: none; cursor: pointer; } .mini-volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-color); cursor: pointer; box-shadow: 0 0 6px rgba(255, 215, 0, 0.5); } .mini-volume-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-color); border: none; cursor: pointer; } .mini-playlist { max-height: 280px; overflow-y: auto; margin-top: 1rem; border-top: 1px solid rgba(255, 215, 0, 0.3); padding-top: 0.5rem; } .mini-playlist::-webkit-scrollbar { width: 6px; } .mini-playlist::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } .mini-playlist::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.6); border-radius: 3px; } .mini-playlist-item { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem; margin: 0.2rem 0; border-radius: 8px; cursor: pointer; transition: var(--transition); background: rgba(0, 0, 0, 0.2); } .mini-playlist-item:hover { background: rgba(255, 255, 255, 0.1); } .mini-playlist-item.active { background: rgba(192, 192, 192, 0.1); border-left: 3px solid var(--accent-color); } .mini-song-name { flex: 1; font-size: 0.9rem; color: var(--text-primary); } .mini-playlist-item.active .mini-song-name { color: var(--accent-primary-bright); font-weight: 600; } .mini-download-btn { background: rgba(80, 80, 80, 0.5); border: 1px solid rgba(169, 169, 169, 0.5); color: var(--accent-color); padding: 0.3rem 0.5rem; border-radius: 6px; font-size: 0.75rem; transition: var(--transition); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; } .mini-download-btn:hover { background: rgba(100, 100, 100, 0.6); color: var(--accent-primary-bright); transform: scale(1.05); } .mini-download-btn i { font-size: 0.7rem; } .chatbot-container { display: none; flex-direction: column; position: fixed; bottom: 90px; left: 20px; width: min(560px, calc(100vw - 40px)); height: min(780px, 85vh); background: rgba(10, 18, 20, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 2px solid rgba(74, 92, 90, 0.5); border-radius: 16px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 40px rgba(192, 192, 192, 0.06); z-index: 999; overflow: hidden; } .chatbot-container.is-open { display: flex; animation: slideInUp 0.3s ease-out; } .chatbot-header { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1rem; background: linear-gradient(180deg, rgba(14, 24, 26, 0.98) 0%, rgba(8, 14, 16, 0.95) 100%); border-bottom: 2px solid rgba(192, 192, 192, 0.35); } .chatbot-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #505858, var(--steel-bright), #707878, #505858); border-radius: 16px 16px 0 0; pointer-events: none; } .chatbot-title { font-family: var(--font-decorative); font-size: 1.35rem; color: var(--accent-primary-bright); text-shadow: 0 0 16px var(--forge-ember-dim), 1px 1px 2px rgba(0, 0, 0, 0.8); margin: 0; letter-spacing: 0.04em; } .chatbot-close { flex: 0 0 auto; background: rgba(240, 71, 71, 0.15); border: 2px solid rgba(240, 71, 71, 0.55); color: #f04747; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .chatbot-close:hover { background: #f04747; color: #fff; transform: scale(1.08); } .chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.1rem 1rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 0.75rem; } .chat-messages::-webkit-scrollbar { width: 6px; } .chat-messages::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(74, 92, 90, 0.65); border-radius: 3px; } .chat-message { line-height: 1.55; font-size: 0.98rem; padding: 0.65rem 0.85rem; border-radius: 10px; background: rgba(8, 16, 18, 0.55); border: 1px solid rgba(74, 92, 90, 0.35); } .chat-message--user { align-self: flex-end; max-width: 92%; background: rgba(20, 36, 32, 0.65); border-color: rgba(106, 171, 138, 0.35); } .chat-message--knight { align-self: flex-start; max-width: 92%; } .chat-message__sender { font-weight: 700; display: block; margin-bottom: 0.2rem; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase; } .chat-message--user .chat-message__sender { color: #6abf8a; } .chat-message--knight .chat-message__sender { color: var(--forge-ember-hot); } .chat-message__text { color: var(--text-primary); word-break: break-word; } .chat-typing { color: var(--text-secondary); padding: 0.65rem 0.85rem; border-radius: 10px; background: rgba(8, 16, 18, 0.55); border: 1px solid rgba(74, 92, 90, 0.35); align-self: flex-start; max-width: 92%; } .chat-typing .chat-message__sender { display: inline; margin-bottom: 0; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--forge-ember-hot); } .typing-dots { display: inline-flex; align-items: center; gap: 0.25rem; vertical-align: middle; margin-left: 0.15rem; } .typing-dots span { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--forge-ember); opacity: 0.35; animation: typing-bounce 1.2s infinite ease-in-out; } .typing-dots span:nth-child(2) { animation-delay: 0.15s; } .typing-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes typing-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-0.2rem); opacity: 1; } } .chat-form { flex: 0 0 auto; display: flex; gap: 0.5rem; padding: 0.9rem 1rem 1rem; background: linear-gradient(180deg, rgba(8, 14, 16, 0.95) 0%, rgba(6, 10, 12, 0.98) 100%); border-top: 1px solid rgba(74, 92, 90, 0.4); } .chat-input { flex: 1; min-width: 0; background: rgba(8, 16, 18, 0.75); border: 1px solid rgba(74, 92, 90, 0.5); color: var(--text-primary); padding: 0.8rem 0.9rem; border-radius: 8px; font-family: var(--font-secondary); font-size: 0.95rem; transition: var(--transition); } .chat-input::placeholder { color: var(--text-secondary); opacity: 0.85; } .chat-input:focus { outline: none; border-color: rgba(192, 192, 192, 0.5); box-shadow: 0 0 0 2px rgba(192, 192, 192, 0.15); } .chat-submit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; background: linear-gradient(145deg, rgba(112, 120, 118, 0.98), rgba(72, 80, 78, 0.98)); color: #f0f4f2; border: 1px solid rgba(192, 192, 192, 0.45); padding: 0.8rem 1rem; border-radius: 8px; font-family: var(--font-secondary); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: var(--transition); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .chat-submit:hover { background: linear-gradient(145deg, #909898, #707878); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(192, 192, 192, 0.3); } .chat-prompt { display: none; position: fixed; bottom: 90px; left: 92px; max-width: 280px; background: rgba(10, 18, 20, 0.94); color: var(--text-primary); padding: 0.85rem 1.1rem; border-radius: 12px; font-family: var(--font-secondary); border: 1px solid rgba(74, 92, 90, 0.5); border-left: 3px solid var(--forge-ember); cursor: pointer; animation: float 3s ease-in-out infinite; z-index: 1000; box-sizing: border-box; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65); font-size: 0.95rem; } /* --- Responsive & Utility --- */ @media (max-width: 1024px) { .discord-info { grid-template-columns: 1fr; gap: 0; } #discord-banner-container { min-height: 400px; } .discord-widget-content { grid-column: 1 / 2; grid-row: 2 / 3; height: 500px; } .content-grid { grid-template-columns: 1fr; } .horizontal-sections { flex-direction: column; } /* Mini bard responsive */ .mini-bard-player { width: calc(100vw - 40px); right: 20px; left: 20px; max-height: 70vh; } } @media (max-width: 768px) { .nav-container { padding: 0 1rem; grid-template-columns: 1fr; gap: 0.8rem; } #nav-left-section { justify-self: center; } .nav-menu { gap: 0.3rem; flex-wrap: wrap; justify-content: center; justify-self: center; } .nav-actions { justify-self: center; } .nav-item a { padding: 0.6rem 0.8rem; min-width: 50px; } .nav-item a .nav-emoji { font-size: 1.2rem; } .nav-item a { font-size: 0.7rem; } #nav-music-controls { padding: 0.3rem 0.6rem; gap: 0.4rem; } .nav-control-btn { width: 28px; height: 28px; font-size: 0.8rem; } #song-readout { width: 100px; font-size: 0.7rem; padding: 0.3rem 0.5rem; } .nav-btn { padding: 0.4rem 0.8rem; font-size: 0.7rem; } .main-container, .container { padding: 1rem; } .chatbot-container { width: calc(100vw - 40px); height: min(85vh, 780px); left: 20px; right: 20px; } .cta-buttons { flex-direction: column; align-items: stretch; } .about-content { grid-template-columns: 1fr; text-align: center; } .verification-content { width: 95%; margin: 5% auto; padding: 20px; } .step-circle { width: 30px; height: 30px; font-size: 1rem; margin: 0 10px; } .step-circle::after { width: 20px; } } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.6); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(169, 169, 169, 0.7); } /* Fortress Modal Styling */ .fortress-modal { max-width: 600px; background: linear-gradient(135deg, rgba(40, 40, 40, 0.98), rgba(32, 32, 32, 0.98)); border: 2px solid rgba(192, 192, 192, 0.5); border-radius: 20px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; } .fortress-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #606060, #909090, #606060); animation: shimmer 3s ease-in-out infinite; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem 1rem 2rem; border-bottom: 1px solid rgba(169, 169, 169, 0.4); position: relative; } .modal-icon { font-size: 2rem; margin-right: 1rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); } .modal-header h2 { font-family: var(--font-primary); color: var(--accent-primary-bright); margin: 0; font-size: 1.8rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); flex: 1; } .modal-close-btn { background: rgba(0, 0, 0, 0.4); border: 2px solid rgba(192, 192, 192, 0.5); color: var(--accent-color); width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .modal-close-btn:hover { background: rgba(80, 80, 80, 0.6); color: var(--accent-primary-bright); transform: scale(1.1); } .fortress-content { padding: 2rem; } .scroll-container { max-height: 300px; overflow-y: auto; padding-right: 10px; } .scroll-container::-webkit-scrollbar { width: 6px; } .scroll-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } .scroll-container::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 3px; } .fortress-description { font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 2rem; text-align: center; } .medieval-text { font-family: var(--font-primary); color: var(--accent-color); font-weight: 600; text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); } .quest-steps { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; } .quest-step { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 12px; transition: var(--transition); } .quest-step:hover { border-color: var(--accent-color); box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); } .step-icon { font-size: 2rem; filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4)); } .step-content h3 { font-family: var(--font-primary); color: var(--accent-color); margin: 0 0 0.25rem 0; font-size: 1.2rem; } .step-content p { margin: 0; color: var(--text-secondary); font-size: 0.9rem; } .fortress-actions { display: flex; flex-direction: column; gap: 1.5rem; } .fortress-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem 2rem; border: 2px solid var(--accent-color); border-radius: 12px; font-family: var(--font-primary); font-size: 1.1rem; font-weight: 600; text-decoration: none; transition: var(--transition); overflow: hidden; cursor: pointer; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1)); } .join-guild-btn { background: linear-gradient(135deg, #5865F2, #4752C4); color: white; border-color: #5865F2; } .join-guild-btn:hover { background: linear-gradient(135deg, #4752C4, #5865F2); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4); } .authenticate-btn { background: linear-gradient(135deg, var(--accent-color), #ffa500); color: #000; } .authenticate-btn:hover { background: linear-gradient(135deg, #ffa500, var(--accent-color)); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4); } .btn-glow { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .fortress-btn:hover .btn-glow { left: 100%; } .divider-container { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0; } .divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-color), transparent); } .divider-text { color: var(--text-secondary); font-size: 0.9rem; font-style: italic; white-space: nowrap; } @keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --- NEW DISCORD AUTH STYLES --- */ .discord-auth-section { background: rgba(88, 101, 242, 0.1); border: 1px solid rgba(88, 101, 242, 0.3); border-radius: 12px; padding: 1.5rem; margin: 1rem 0; text-align: center; } .discord-auth-btn { background: linear-gradient(45deg, #5865F2, #4752C4); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-family: var(--font-secondary); font-weight: 600; text-decoration: none; transition: var(--transition); display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 1rem; } .discord-auth-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(88, 101, 242, 0.5); background: linear-gradient(45deg, #4752C4, #5865F2); } .discord-auth-btn:disabled { opacity: 0.6; transform: none; box-shadow: none; cursor: not-allowed; } .artist-item img { border-radius: 50%; margin-right: 8px; } .loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #ffffff; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } .verification-status { padding: 1rem; border-radius: 6px; margin: 1rem 0; display: flex; align-items: center; gap: 0.5rem; } .status-loading { background-color: rgba(114, 137, 218, 0.1); border-left: 3px solid #7289da; color: #7289da; } .status-success { background-color: rgba(67, 181, 129, 0.1); border-left: 3px solid #43b581; color: #43b581; } .status-error { background-color: rgba(240, 71, 71, 0.1); border-left: 3px solid #f04747; color: #f04747; } .admin-badge { background: linear-gradient(45deg, #28a745, #20c997); color: white; font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 10px; margin-left: 0.5rem; display: inline-block; } /* Gallery insertion point styling */ .discord-community-info { padding: 2rem 2.5rem; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); } 50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); } } /* 3D Artwork Gallery Styles */ .artwork-gallery { margin: 4rem 0; padding: 3rem 0; background: rgba(20, 20, 30, 0.7); border-radius: 20px; overflow: hidden; position: relative; backdrop-filter: blur(10px); } .gallery-title { font-family: var(--font-primary); font-size: 2.5rem; color: var(--accent-color); text-align: center; margin-bottom: 3rem; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); animation: float 4s ease-in-out infinite; } .gallery-viewport { position: relative; height: 450px; overflow: hidden; perspective: 1200px; display: flex; align-items: center; justify-content: center; } .gallery-track { display: flex; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; width: 100%; /* Adjusted for new transform logic */ height: 100%; position: absolute; } .gallery-item { position: absolute; width: 25%; /* Adjust width of items */ height: 400px; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer; transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; opacity: 0.4; filter: blur(2px); } /* Positioning items with transform */ .gallery-item.active { transform: translate(-50%, -50%) translateZ(0) scale(1) rotateY(0deg); opacity: 1; z-index: 10; filter: blur(0); } .gallery-item.prev { transform: translate(-100%, -50%) translateZ(-200px) scale(0.85) rotateY(35deg); opacity: 0.6; z-index: 5; filter: blur(1px); } .gallery-item.next { transform: translate(0%, -50%) translateZ(-200px) scale(0.85) rotateY(-35deg); opacity: 0.6; z-index: 5; filter: blur(1px); } .gallery-image-container { width: 100%; height: 100%; border-radius: 15px; overflow: hidden; position: relative; border: 3px solid transparent; background: linear-gradient(45deg, rgba(255, 215, 0, 0.5), rgba(255, 165, 0, 0.5)) padding-box, linear-gradient(45deg, var(--accent-color), #ffa500) border-box; transition: var(--transition); transform-style: preserve-3d; } .gallery-item.active .gallery-image-container { border-color: var(--accent-color); box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), inset 0 0 20px rgba(255, 215, 0, 0.1); } .gallery-image { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; border-radius: 12px; } .gallery-item:hover .gallery-image { transform: scale(1.05); } .gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.6), transparent); padding: 1.5rem; color: white; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0 0 12px 12px; } .gallery-item:hover .gallery-overlay, .gallery-item.active .gallery-overlay { transform: translateY(0); } .gallery-overlay h3 { font-family: var(--font-primary); font-size: 1.4rem; margin: 0 0 0.5rem 0; color: var(--accent-color); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); } .gallery-overlay p { margin: 0 0 0.5rem 0; font-size: 1rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } .gallery-overlay small { font-size: 0.85rem; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } .artist-info { display: flex; align-items: center; gap: 1rem; } .artist-avatar { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--accent-color); object-fit: cover; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); } .artist-details { flex: 1; } .artist-details h3 { margin: 0 0 0.25rem 0; font-size: 1.2rem; } .artist-details p { margin: 0 0 0.25rem 0; font-size: 0.9rem; } .artist-details small { font-size: 0.8rem; } .gallery-controls { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 2rem; pointer-events: none; z-index: 20; transform: translateY(-50%); } .gallery-nav { background: rgba(0, 0, 0, 0.8); color: var(--accent-color); border: 2px solid var(--accent-color); width: 60px; height: 60px; border-radius: 50%; font-size: 1.8rem; font-weight: bold; cursor: pointer; transition: var(--transition); pointer-events: auto; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); user-select: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .gallery-nav:hover { background: var(--accent-color); color: #000; transform: scale(1.1); box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); } .gallery-nav:active { transform: scale(0.95); } .gallery-indicators { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 20; background: rgba(0, 0, 0, 0.5); padding: 10px 20px; border-radius: 25px; backdrop-filter: blur(10px); } .gallery-indicator { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 215, 0, 0.6); background: transparent; cursor: pointer; transition: var(--transition); position: relative; } .gallery-indicator::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); opacity: 0; transition: opacity 0.3s ease; } .gallery-indicator.active::before, .gallery-indicator:hover::before { opacity: 1; } .gallery-indicator.active { border-color: var(--accent-color); box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); transform: scale(1.2); } .gallery-indicator:hover { border-color: var(--accent-color); transform: scale(1.1); } /* Responsive Gallery */ @media (max-width: 1024px) { .gallery-item { height: 350px; } .gallery-viewport { height: 400px; } .gallery-title { font-size: 2.2rem; margin-bottom: 2rem; } .gallery-controls { padding: 0 1rem; } .gallery-nav { width: 50px; height: 50px; font-size: 1.5rem; } } @media (max-width: 768px) { .artwork-gallery { margin: 3rem 0; padding: 2rem 0; } .gallery-item { height: 300px; width: 40%; } .gallery-viewport { height: 350px; } .gallery-title { font-size: 2rem; } .gallery-nav { width: 45px; height: 45px; font-size: 1.3rem; } .gallery-overlay h3 { font-size: 1.2rem; } .gallery-overlay p { font-size: 0.9rem; } } @media (max-width: 480px) { .artwork-gallery { margin: 2rem 0; padding: 1.5rem 0; } .gallery-item { height: 250px; width: 60%; } .gallery-viewport { height: 300px; } .gallery-title { font-size: 1.8rem; margin-bottom: 1.5rem; } .gallery-controls { padding: 0 0.5rem; } .gallery-nav { width: 40px; height: 40px; font-size: 1.2rem; } .gallery-indicators { bottom: 20px; padding: 8px 15px; gap: 8px; } .gallery-indicator { width: 10px; height: 10px; } .gallery-indicator::before { width: 4px; height: 4px; } } /* Loading state for gallery */ .gallery-loading { display: flex; justify-content: center; align-items: center; height: 400px; color: var(--text-secondary); font-size: 1.2rem; } .gallery-empty { text-align: center; padding: 3rem; color: var(--text-secondary); } .gallery-empty h3 { color: var(--accent-color); margin-bottom: 1rem; font-family: var(--font-primary); } /* Smooth transitions for gallery updates */ .gallery-track.updating { transition: none; } .gallery-track.updating .gallery-item { transition: none; } /* Hover effects for non-active items */ .gallery-item:not(.active):hover { transform: translate(-50%, -50%) translateZ(-80px) scale(0.9) rotateY(0deg); opacity: 0.8; filter: blur(0.5px); } .theatre-avatar { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--accent-color); object-fit: cover; box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); } .theatre-artist-info h3 { margin: 0; color: var(--text-primary); font-size: 1.2rem; } .theatre-artist-info p { margin: 0.25rem 0 0 0; color: var(--text-secondary); font-size: 0.9rem; } .theatre-close { position: absolute; top: 20px; right: 20px; background: rgba(0, 0, 0, 0.8); color: var(--accent-color); border: 2px solid var(--accent-color); width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); } .theatre-close:hover { background: var(--accent-color); color: #000; transform: scale(1.1); } .theatre-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.8); color: var(--accent-color); border: 2px solid var(--accent-color); width: 60px; height: 60px; border-radius: 50%; font-size: 1.8rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); } .theatre-nav:hover { background: var(--accent-color); color: #000; transform: translateY(-50%) scale(1.1); } .theatre-nav.prev { left: 20px; } .theatre-nav.next { right: 20px; } @media (max-width: 768px) { .theatre-content { max-width: 95vw; max-height: 95vh; } .theatre-image { max-height: 60vh; } .theatre-info { padding: 1rem; } .theatre-info h2 { font-size: 1.5rem; } .theatre-avatar { width: 50px; height: 50px; } .theatre-nav { width: 50px; height: 50px; font-size: 1.5rem; } .theatre-close { width: 40px; height: 40px; font-size: 1.2rem; } }