:root { /* Existing variables retained */ --bg: #1a0d2b; --panel: #0e1627; --card: #2b1a47; --muted: #b8a4d2; --accent: #a100a1; --glass: rgba(161, 0, 161, 0.1); --glass-2: rgba(161, 0, 161, 0.05); --text: #e6d7f8; --button-text: #2b0047; --radius: 12px; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace; --repeat-gradient: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px); --font-family: 'Inter', ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial; } /* Light Theme */ [data-theme="light"] { --bg: #f0f4f8; --card: #ffffff; --muted: #6b7280; --accent: #10b981; --glass: rgba(0, 0, 0, 0.05); --glass-2: rgba(0, 0, 0, 0.03); --text: #1f2937; --button-text: #ffffff; } /* Minecraft Nether Theme */ [data-theme="nether"] { --bg: #2f0b0b; --card: #3f1616; --muted: #d4a29a; --accent: #e25822; --glass: rgba(255, 69, 0, 0.1); --glass-2: rgba(255, 69, 0, 0.05); --text: #f4d7d3; --button-text: #3f1208; } /* Minecraft Dark Theme */ [data-theme="end"] { --bg: #071021; --card: #0e1627; --muted: #b0b8c4; --accent: #36b37e; --glass: rgba(255, 255, 255, 0.1); --glass-2: rgba(255, 255, 255, 0.02); --text: #e6eef6; --button-text: #042018; } /* Font Family Classes */ .font-default { font-family: var(--font-family); } .font-pressstart { font-family: 'Press Start 2P', cursive; font-size: 16px; } .font-vt323 { font-family: 'VT323', monospace; font-size: 16px; } /* Global Styles */ * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-family); transition: all 0.3s ease; } a { text-decoration: none; color: var(--text); } /* Main Content */ .center { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } /* Privacy Hero */ .privacy-hero { text-align: center; padding: 60px 20px; background: var(--repeat-gradient); } .privacy-hero h1 { font-size: 2.5rem; margin-bottom: 20px; } .privacy-hero p { font-size: 1.1rem; max-width: 600px; margin: 0 auto 30px; color: var(--muted); } /* Privacy Sections */ .privacy-section { padding: 60px 20px; background: var(--card); text-align: left; } .privacy-section h2 { font-size: 2rem; margin-bottom: 40px; color: var(--text); text-align: center; } .panel { background: var(--glass); border-radius: 8px; margin-bottom: 20px; padding: 20px; } .panel-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 12px 0; font-size: 1.5rem; font-weight: 600; color: var(--text); } .panel-content { display: none; padding-top: 12px; } .panel.active .panel-content { display: block; } .panel-header::after { content: '▼'; font-size: 12px; color: var(--muted); transition: transform 0.3s; } .panel.active .panel-header::after { transform: rotate(180deg); } .panel-content p { font-size: 0.95rem; color: var(--muted); margin-bottom: 16px; } .panel-content ul { list-style: disc; padding-left: 20px; color: var(--muted); font-size: 0.95rem; } .panel-content ul li { margin-bottom: 8px; } .contact-link { color: var(--accent); text-decoration: none; transition: color 0.3s; } .contact-link:hover { color: #fff; } /* CTA Button */ .cta-button { padding: 12px 24px; font-size: 1.1rem; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s ease; } .cta-button:hover { background: #2e9b67; } /* Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .privacy-hero, .privacy-section { animation: fadeIn 0.5s ease-out; } /* Responsive Design */ @media (max-width: 768px) { body, html { font-size: 15px; overflow-x: hidden; } .privacy-hero h1 { font-size: 1.8rem; } .privacy-hero p { font-size: 1rem; } .privacy-section { padding: 40px 16px; } .privacy-section h2 { font-size: 1.8rem; } .panel-header { font-size: 1.3rem; } } @media (max-width: 600px) { .privacy-hero { padding: 40px 16px; } .privacy-section h2 { font-size: 1.5rem; } .panel-header { font-size: 1.2rem; } }