/* Font Family Classes */ .font-default { font-family: var(--font-family); } .font-minecraft { font-family: 'Minecraft Ten', var(--font-family); } .font-minecrafter { font-family: 'Minecrafter', var(--font-family); } .font-pressstart { font-family: 'Press Start 2P', cursive; font-size: 16px; } .font-vt323 { font-family: 'VT323', monospace; font-size: 16px; } /* Header */ .site-header { background: var(--card); padding: 12px 0; border-bottom: 1px solid var(--glass); position: sticky; top: 0; z-index: 1000; } .header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; color: var(--text); } .logo img { width: 32px; height: 32px; } .nav ul { display: flex; gap: 20px; list-style: none; } .nav a { color: var(--text); text-decoration: none; padding: 6px 0; font-family: var(--font-family); font-weight: 600; } .nav a:hover, .nav a.disabled:hover { color: var(--accent); } .nav .submenu { display: none; position: absolute; top: 100%; left: 0; background: var(--card); border: 1px solid var(--glass); border-radius: 8px; min-width: 180px; padding: 8px 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); z-index: 1000; } .nav .submenu a { display: block; padding: 8px 16px; } .nav .submenu a.disabled { color: var(--muted); cursor: not-allowed; } @media (min-width: 769px) { .nav-toggle { display: none; } .nav { display: block !important; } .has-submenu { position: relative; } .has-submenu:hover .submenu { display: block; } } .nav-toggle { display: none; font-size: 1.6rem; background: none; border: none; color: var(--text); cursor: pointer; padding: 8px; } @media (max-width: 768px) { .nav-toggle { display: block; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--glass); border-radius: 8px; padding: 12px; } .nav.active { display: block !important; } .nav ul { flex-direction: column; gap: 12px; } .has-submenu>a::after { content: " ▼"; font-size: 0.8rem; } .has-submenu.open .submenu { display: block; position: relative; border: none; background: transparent; padding-left: 16px; } } /* Footer */ .site-footer { background: var(--card); padding: clamp(20px, 5vw, 40px) clamp(12px, 2vw, 20px); } .footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 20px); max-width: 1400px; margin: 0 auto; } .footer-col h4 { margin-bottom: clamp(8px, 1.5vw, 12px); color: var(--text); } .footer-col p, .footer-col ul { color: var(--muted); font-size: clamp(0.85rem, 2vw, 0.95rem); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: clamp(6px, 1vw, 8px); } .footer-col a { color: var(--muted); text-decoration: none; } .footer-col a:hover, .footer-col a:focus { color: var(--accent); } .footer-note { margin-top: clamp(12px, 2vw, 20px); text-align: center; font-size: clamp(12px, 1.8vw, 14px); color: var(--muted); } /* Responsive Design */ @media (max-width: 1024px) { .footer-columns { grid-template-columns: 1fr; } } a { text-decoration: none; }