/* ===== WORDPRESS / ASTRA PAGE RESET ===== */
body.neta-portal-page {
margin: 0;
background: #000;
}
body.neta-portal-page #page,
body.neta-portal-page .site,
body.neta-portal-page .site-content,
body.neta-portal-page .ast-container,
body.neta-portal-page .content-area,
body.neta-portal-page .site-main,
body.neta-portal-page article,
body.neta-portal-page .entry-content {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
body.neta-portal-page .entry-header,
body.neta-portal-page .entry-title,
body.neta-portal-page .post-thumb,
body.neta-portal-page .comments-area {
display: none !important;
}
body.neta-portal-page .entry-content > * {
max-width: none;
margin-left: 0;
margin-right: 0;
}
#netaPortal {
width: 100%;
min-height: 100vh;
overflow-x: hidden;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body.neta-portal-page { background: #000; font-family: 'Inter', sans-serif; color: #F1F5F9; }
body.neta-portal-page.splash-active { overflow: hidden; }
/* ===== SPLASH ===== */
.splash-screen { position: fixed; inset: 0; z-index: 99999; background: #000; overflow-y: auto; overflow-x: hidden; transition: opacity 0.8s ease, visibility 0.8s ease; }
.splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-bg-layer { position: fixed; inset: 0; pointer-events: none; }
.splash-bg-grain { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size: 128px 128px; opacity: 0.5; }
.splash-bg-vignette { background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,0.95) 100%); }
.splash-bg-radial { background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.03) 0%, transparent 55%); }
.splash-smoke-container { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.splash-smoke { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0; animation: smokeDrift 14s ease-in-out infinite; }
.splash-smoke:nth-child(1) { width:450px;height:450px;background:rgba(255,255,255,0.03);left:15%;top:20%;animation-duration:16s; }
.splash-smoke:nth-child(2) { width:350px;height:350px;background:rgba(255,255,255,0.02);right:10%;top:40%;animation-delay:-5s;animation-duration:18s; }
.splash-smoke:nth-child(3) { width:550px;height:550px;background:rgba(255,255,255,0.015);left:35%;top:10%;animation-delay:-9s;animation-duration:20s; }
@keyframes smokeDrift { 0%,100%{opacity:0;transform:translate(0,0) scale(1);} 25%{opacity:1;} 50%{opacity:0.5;transform:translate(30px,-25px) scale(1.1);} 75%{opacity:0.2;} }
.splash-dust-container { position: fixed; inset: 0; pointer-events: none; }
.splash-dust { position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:0;animation:dustFloat linear infinite; }
@keyframes dustFloat { 0%{opacity:0;transform:translateY(100vh) translateX(0);} 10%{opacity:0.4;} 90%{opacity:0.4;} 100%{opacity:0;transform:translateY(-30px) translateX(35px);} }
.splash-scanline { position:fixed;top:0;left:0;width:100%;height:2px;background:linear-gradient(to right,transparent,rgba(255,255,255,0.04),transparent);pointer-events:none;animation:scanMove 9s linear infinite; }
@keyframes scanMove { 0%{top:-2px;} 100%{top:100%;} }
.splash-scroll-wrapper { position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:0 2rem;min-height:100vh; }
.splash-spacer-top { height:18vh;flex-shrink:0; }
.splash-content { display:flex;flex-direction:column;align-items:center;max-width:800px;width:100%;animation:contentReveal 2s ease-out forwards;opacity:0; }
@keyframes contentReveal { 0%{opacity:0;transform:translateY(30px) scale(0.96);filter:blur(8px);} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);} }
.splash-emblem-wrapper { position:relative;margin-bottom:3.5rem;animation:emblemPulse 4s ease-in-out infinite; }
@keyframes emblemPulse { 0%,100%{filter:drop-shadow(0 0 20px rgba(255,255,255,0.08));} 50%{filter:drop-shadow(0 0 40px rgba(255,255,255,0.2));} }
.splash-emblem-ring { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,0.1);border-radius:50%;animation:ringExpand 6s ease-in-out infinite; }
.splash-emblem-ring:nth-child(1){width:220px;height:220px;} .splash-emblem-ring:nth-child(2){width:260px;height:260px;animation-delay:-2s;opacity:0.5;} .splash-emblem-ring:nth-child(3){width:300px;height:300px;animation-delay:-4s;opacity:0.25;}
@keyframes ringExpand { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.4;border-color:rgba(255,255,255,0.06);} 50%{transform:translate(-50%,-50%) scale(1.05);opacity:1;border-color:rgba(255,255,255,0.2);} }
.splash-emblem-img { width:190px;height:190px;object-fit:contain;position:relative;z-index:2;filter:contrast(1.1) brightness(1.1); }
.splash-emblem-glow { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:170px;height:170px;background:radial-gradient(circle,rgba(255,255,255,0.06) 0%,transparent 70%);border-radius:50%;z-index:1;animation:glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;} 50%{transform:translate(-50%,-50%) scale(1.35);opacity:0.4;} }
.splash-laurel-line { display:flex;align-items:center;gap:1rem;margin-bottom:3rem;opacity:0;animation:lineReveal 1.5s ease-out 0.8s forwards; }
@keyframes lineReveal { to{opacity:1;} }
.splash-laurel-line .s-line { width:60px;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,0.3),transparent); }
.splash-laurel-line .s-diamond { width:6px;height:6px;background:#fff;transform:rotate(45deg);opacity:0.5; }
.splash-title-main { font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2rem,6vw,3.8rem);letter-spacing:0.04em;line-height:1.15;margin-bottom:0.6rem;color:#fff;opacity:0;animation:textReveal 1.2s ease-out 0.5s forwards; }
.splash-title-sub { font-family:'Playfair Display',serif;font-weight:400;font-style:italic;font-size:clamp(1rem,3vw,1.6rem);color:rgba(255,255,255,0.6);letter-spacing:0.12em;margin-bottom:4rem;opacity:0;animation:textReveal 1.2s ease-out 0.9s forwards; }
@keyframes textReveal { 0%{opacity:0;transform:translateY(15px);} 100%{opacity:1;transform:translateY(0);} }
.splash-code-section { opacity:0;animation:textReveal 1.2s ease-out 1.3s forwards;width:100%;max-width:380px; }
.splash-code-label { font-size:0.7rem;text-transform:uppercase;letter-spacing:0.2em;color:rgba(255,255,255,0.3);margin-bottom:0.75rem;font-weight:600; }
.splash-code-wrapper { display:flex;align-items:center;border:1px solid rgba(255,255,255,0.12);border-radius:8px;background:rgba(255,255,255,0.02);transition:all 0.4s ease;overflow:hidden; }
.splash-code-wrapper:focus-within { border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.04);box-shadow:0 0 30px rgba(255,255,255,0.03); }
.splash-code-wrapper.error { border-color:rgba(220,50,50,0.5);animation:shake 0.5s ease-in-out; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);} }
.splash-code-input { flex:1;background:none;border:none;outline:none;color:#fff;font-family:'Inter',sans-serif;font-size:1rem;font-weight:500;letter-spacing:0.15em;padding:1rem 1.25rem;text-align:center; }
.splash-code-input::placeholder { color:rgba(255,255,255,0.1);letter-spacing:0.2em;font-size:0.85rem; }
.splash-code-submit { background:none;border:none;border-left:1px solid rgba(255,255,255,0.12);color:#fff;padding:1rem 1.5rem;cursor:pointer;font-size:1.1rem;transition:all 0.3s;display:flex;align-items:center;justify-content:center; }
.splash-code-submit:hover { background:rgba(255,255,255,0.05); }
.splash-code-msg { margin-top:0.75rem;font-size:0.8rem;min-height:1.2em;transition:all 0.3s;font-weight:500; }
.splash-code-msg.error{color:rgba(220,80,80,0.8);} .splash-code-msg.success{color:rgba(255,255,255,0.6);}
.splash-spacer-bottom { height:25vh;flex-shrink:0; }
.splash-copyright { position:relative;z-index:10;text-align:center;padding:0 2rem 3rem 2rem;opacity:0;animation:lineReveal 1.5s ease-out 2.2s forwards; }
.splash-copyright p { font-size:0.7rem;color:rgba(255,255,255,0.15);letter-spacing:0.15em;text-transform:uppercase;font-weight:500; }
.main-site { display: none; }
.main-site.visible { display: block; }
/* ===== LANG TOGGLE ===== */
.lang-toggle { position: fixed; top: 16px; right: 16px; z-index: 9000; display: none; gap: 3px; background: #111; border: 1px solid #333; border-radius: 6px; padding: 3px; }
.lang-toggle.visible { display: flex; }
.lang-toggle button { background: none; border: none; color: #666; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 0.75rem; transition: all 0.2s; }
.lang-toggle button.active { background: #fff; color: #000; }
/* ===== HERO ===== */
.hero-section { background: #0a0a0a; color: white; padding: 4rem 3rem; position: relative; overflow: hidden; }
.hero-section::before { content:''; position:absolute; top:-50%; right:-10%; width:600px; height:600px; background:radial-gradient(circle, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0) 70%); border-radius:50%; pointer-events:none; }
.hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; text-align: center; }
.hero-logo { width: 120px; height: 120px; object-fit: contain; margin-bottom: 1.5rem; filter: contrast(1.1) brightness(1.1); }
.hero-org-name { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(1.4rem, 3.5vw, 2.4rem); letter-spacing: 0.06em; color: #fff; margin-bottom: 0.4rem; }
.hero-motto { font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; font-size: clamp(1rem, 2.5vw, 1.5rem); color: rgba(255,255,255,0.5); letter-spacing: 0.08em; margin-bottom: 2.5rem; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; text-align: left; }
.hero-content p { font-size: 1.05rem; color: rgba(255,255,255,0.6); margin-bottom: 2rem; line-height: 1.6; }
.hero-accent-box { background: rgba(255,255,255,0.03); border-left: 4px solid #fff; padding: 2rem; border-radius: 0 12px 12px 0; }
.accent-box-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-bottom: 1rem; font-weight: 700; }
.hero-cta { display: inline-flex; align-items: center; gap: 0.5rem; color: #000; text-decoration: none; font-weight: 600; margin-top: 1.5rem; padding: 0.75rem 1.5rem; background: #fff; border-radius: 6px; transition: background 0.2s; cursor: pointer; border: none; font-size: 0.95rem; }
.hero-cta:hover { background: #ddd; }
/* ===== PRINCIPLES MODAL ===== */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 50000; align-items: center; justify-content: center; padding: 2rem; }
.modal-overlay.active { display: flex; }
.modal-box { background: #111; border: 1px solid #333; border-radius: 20px; width: 100%; max-width: 680px; max-height: 85vh; overflow-y: auto; padding: 2.5rem; position: relative; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.modal-box::-webkit-scrollbar { width: 6px; }
.modal-box::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #666; font-size: 28px; cursor: pointer; transition: color 0.2s; line-height: 1; }
.modal-close:hover { color: #fff; }
.modal-box h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin-bottom: 0.3rem; }
.modal-box h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 1.5rem 0 0.6rem 0; padding-top: 1.2rem; border-top: 1px solid #222; }
.modal-box h3:first-of-type { margin-top: 1rem; border-top: none; padding-top: 0; }
.modal-box p { font-size: 0.95rem; color: #94A3B8; line-height: 1.7; margin-bottom: 0.5rem; }
.modal-box ul { padding-left: 1.2rem; margin-bottom: 0.8rem; }
.modal-box li { font-size: 0.95rem; color: #94A3B8; line-height: 1.7; margin-bottom: 0.3rem; }
/* ===== FEED WRAPPER ===== */
.feed-wrapper { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 340px; gap: 24px; padding: 0 24px; }
.feed-main { min-width: 0; }
.feed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #fff; }
.feed-header h1 { color: #fff; font-size: 24px; }
.announcement-card { background: linear-gradient(135deg, #111, #0a0a0a); border: 1px solid #fff; border-radius: 20px; padding: 20px; margin-bottom: 24px; }
.announcement-card h4 { font-size: 20px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; color: #fff; }
.announcement-video { position: relative; width: 100%; border-radius: 16px; overflow: hidden; margin-bottom: 12px; background: #000; }
.announcement-video iframe { width: 100%; aspect-ratio: 16/9; border: none; }
.live-badge { position: absolute; top: 10px; left: 10px; background: #ff0000; color: white; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 6px; z-index: 2; }
.live-dot { width: 8px; height: 8px; background: white; border-radius: 50%; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:0.4;transform:scale(0.8);} 50%{opacity:1;transform:scale(1.2);} }
.stats-card { background: #111; border: 1px solid #333; border-radius: 20px; padding: 20px; margin-bottom: 20px; }
.stats-card h3 { color: #fff; font-size: 14px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; }
.stat-number { font-size: 28px; font-weight: 800; color: #fff; }
.stat-label { font-size: 12px; color: #94A3B8; margin-top: 4px; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 20px; background: #111; border: 1px solid #333; border-radius: 16px; padding: 4px; }
.filter-btn { flex: 1; padding: 10px; text-align: center; background: none; border: none; color: #94A3B8; font-weight: 600; cursor: pointer; border-radius: 12px; }
.filter-btn.active { background: #fff; color: #000; }
.compose-box { background: #111; border: 1px solid #333; border-radius: 20px; padding: 20px; margin-bottom: 20px; }
.compose-top { display: flex; gap: 12px; }
.compose-avatar { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; color: #000; }
.compose-input { flex: 1; background: transparent; border: none; color: #F1F5F9; font-size: 16px; resize: none; min-height: 60px; font-family: inherit; }
.compose-input:focus { outline: none; }
.compose-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #333; }
.tool-buttons { display: flex; gap: 4px; }
.tool-buttons button { background: transparent; border: none; color: #888; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 16px; transition: 0.15s; }
.tool-buttons button:hover { background: #222; color: #fff; }
.post-btn { background: #fff; color: #000; border: none; padding: 8px 24px; border-radius: 30px; font-weight: 700; cursor: pointer; }
.post-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.post-card { background: #111; border: 1px solid #333; border-radius: 20px; margin-bottom: 20px; padding: 20px; }
.post-header { display: flex; gap: 12px; margin-bottom: 12px; }
.post-avatar { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; color: #000; }
.post-name { font-weight: 700; }
.post-time { font-size: 12px; color: #94A3B8; }
.post-body { margin: 0 0 12px 0; line-height: 1.6; font-size: 15px; }
.post-stats { display: flex; gap: 20px; padding: 8px 0; border-bottom: 1px solid #333; font-size: 13px; color: #94A3B8; }
.post-actions { display: flex; gap: 20px; padding-top: 8px; }
.action-btn { background: none; border: none; color: #94A3B8; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 12px; border-radius: 20px; font-size: 13px; }
.action-btn:hover { background: #222; color: #fff; }
/* ===== RIGHT SIDEBAR ===== */
.feed-sidebar { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; scrollbar-width: thin; scrollbar-color: #333 transparent; max-height: calc(100vh - 40px); overflow-y: auto; }
.feed-sidebar::-webkit-scrollbar { width: 6px; }
.feed-sidebar::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.sidebar-card { background: #111; border: 1px solid #333; border-radius: 20px; padding: 20px; }
.sidebar-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; color: #fff; }
.hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.hub-tab { flex: 1 1 auto; min-width: 0; padding: 8px 6px; background: none; border: 1px solid #333; color: #94A3B8; font-weight: 600; cursor: pointer; border-radius: 10px; font-size: 0.72rem; transition: all 0.2s; text-align: center; white-space: nowrap; }
.hub-tab:hover { color: #fff; border-color: #666; }
.hub-tab.active { background: #fff; color: #000; border-color: #fff; }
.hub-content { display: none; animation: fadeUp 0.3s ease; }
.hub-content.active { display: block; }
@keyframes fadeUp { 0%{opacity:0;transform:translateY(8px);} 100%{opacity:1;transform:translateY(0);} }
.hub-section-title { font-size: 12px; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-weight: 700; }
.hub-item { background: #1a1a1a; padding: 12px 14px; border-radius: 12px; margin-bottom: 8px; border: 1px solid #333; transition: all 0.2s; cursor: pointer; }
.hub-item:hover { border-color: #fff; transform: translateX(4px); }
.hub-item h5 { font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.hub-item p { font-size: 0.75rem; color: #94A3B8; line-height: 1.4; }
.hub-room-tag { display: inline-block; font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; background: #222; color: #94A3B8; margin-top: 4px; }
.hub-chapter { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #222; cursor: pointer; }
.hub-chapter:last-child { border-bottom: none; }
.hub-chapter i { font-size: 6px; color: #666; }
.hub-chapter span { font-size: 0.85rem; font-weight: 600; color: #F1F5F9; }
.hub-chapter:hover span { color: #fff; }
.hub-statute { display: inline-block; padding: 6px 12px; background: #1a1a1a; border: 1px solid #333; border-radius: 20px; font-size: 0.75rem; color: #F1F5F9; margin: 3px; cursor: pointer; transition: all 0.2s; }
.hub-statute:hover { background: #fff; color: #000; border-color: #fff; }
.hub-fundraiser { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #222; cursor: pointer; }
.hub-fundraiser:last-child { border-bottom: none; }
.hub-fundraiser-icon { width: 36px; height: 36px; background: #1a1a1a; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; }
.hub-fundraiser h5 { font-size: 0.85rem; font-weight: 600; color: #fff; }
.hub-fundraiser small { font-size: 0.72rem; color: #94A3B8; }
.hub-member { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #222; }
.hub-member:last-child { border-bottom: none; }
.hub-member-avatar { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; color: #000; font-size: 0.85rem; }
.hub-member-info { flex: 1; }
.hub-member-name { font-size: 0.85rem; font-weight: 700; }
.hub-member-role { font-size: 0.7rem; color: #94A3B8; }
.hub-view-btn { background: none; border: 1px solid #333; padding: 5px 14px; border-radius: 20px; color: #F1F5F9; font-weight: 600; cursor: pointer; font-size: 0.72rem; transition: all 0.2s; }
.hub-view-btn:hover { background: #fff; color: #000; border-color: #fff; }
.trending-item { padding: 10px 0; border-bottom: 1px solid #222; cursor: pointer; }
.trending-item:last-child { border-bottom: none; }
.trending-topic { font-weight: 700; font-size: 0.85rem; }
.trending-count { font-size: 11px; color: #94A3B8; margin-top: 2px; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gallery-thumb { aspect-ratio: 1; background: #1a1a1a; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #444; font-size: 24px; cursor: pointer; transition: all 0.2s; border: 1px solid #222; }
.gallery-thumb:hover { border-color: #fff; color: #fff; }
/* ===== FOOTER ===== */
.footer-section { background: #0a0a0a; padding: 3rem; border-radius: 12px 12px 0 0; color: white; }
.footer-header { font-family:'Playfair Display',serif; font-size:1.5rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:0.75rem; }
.statute-pill { display:inline-block; padding:0.5rem 1rem; background:rgba(255,255,255,0.05); border-radius:20px; font-size:0.85rem; text-decoration:none; color:#F1F5F9; margin:0.25rem; transition:all 0.2s; cursor:pointer; border:1px solid #333; }
.statute-pill:hover { background:#fff; color:#000; border-color:#fff; }
/* ===== MOBILE ===== */
@media (max-width: 1024px) {
.feed-wrapper { grid-template-columns: 1fr; }
.feed-sidebar { position: static; order: 2; max-height: none; }
.hero-grid { grid-template-columns: 1fr; gap: 2rem; text-align: left; }
}
@media (max-width: 768px) {
.hero-section { padding: 2.5rem 1.5rem; }
.hero-logo { width: 90px; height: 90px; }
.feed-wrapper { margin-left: -24px; margin-right: -24px; padding: 0; display: block; }
.feed-sidebar { display: none; }
.feed-main { padding: 0 16px 80px 16px; }
.stats-card { display: none; }
.announcement-card { background: transparent; border: none; border-radius: 0; border-bottom: 1px solid #333; margin-bottom: 0; padding: 12px 16px; }
.announcement-video { border-radius: 0; margin-bottom: 8px; }
.compose-box { position: sticky; top: 0; z-index: 100; background: #000; border: none; border-radius: 0; margin: 0; padding: 12px 16px; border-bottom: 1px solid #333; }
.filter-bar { background: transparent; border: none; border-radius: 0; border-bottom: 1px solid #333; margin: 0; padding: 8px 16px; }
.post-card { background: #0a0a0a; border: none; border-radius: 0; margin: 0; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.post-card:not(:last-child) { margin-bottom: 8px; }
.post-body { font-size: 14px; padding: 12px; border-left: 3px solid #fff; background: #000; }
.post-stats { border-bottom: none; }
.action-btn { flex: 1; justify-content: center; }
.footer-section { padding: 2rem 1.5rem; border-radius: 0; }
.modal-box { padding: 1.5rem; border-radius: 16px; }
.mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #111; border-top: 1px solid #333; padding: 8px 16px; justify-content: center; gap: 40%; z-index: 99; }
.mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; color: #94A3B8; font-size: 12px; padding: 8px; cursor: pointer; }
.mobile-nav-item i { font-size: 22px; }
.mobile-nav-item.active { color: #fff; }
.mobile-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; }
.mobile-sidebar-overlay.active { display: block; }
.mobile-sidebar-drawer { position: fixed; top: 0; right: 0; width: 85%; max-width: 360px; height: 100%; background: #000; z-index: 201; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; padding: 20px; }
.mobile-sidebar-drawer.active { transform: translateX(0); }
.mobile-drawer-close { background: none; border: none; color: #94A3B8; font-size: 24px; float: right; cursor: pointer; }
}
@media (min-width: 769px) {
.mobile-bottom-nav { display: none !important; }
.mobile-sidebar-overlay { display: none !important; }
.mobile-sidebar-drawer { display: none !important; }
}
@media (max-width: 640px) {
.splash-spacer-top { height: 14vh; }
.splash-spacer-bottom { height: 20vh; }
.splash-emblem-img { width: 160px; height: 160px; }
.splash-emblem-ring:nth-child(1){width:200px;height:200px;} .splash-emblem-ring:nth-child(2){width:230px;height:230px;} .splash-emblem-ring:nth-child(3){width:260px;height:260px;}
.splash-emblem-glow { width:140px;height:140px; }
.splash-laurel-line .s-line { width: 40px; }
}
Skip to content