/* ========================================================== * Votari ยท stylesheet base (Onyx Gold) * Suporte a tema dark (default) e light via classe em . * ========================================================== */ /* ====== Tokens ====== */ .dark { color-scheme: dark; --bg: #000000; --bg-2: #0a0a0a; --bg-3: #1a1a1a; --text: #f5f5f5; --text-muted:#a8a097; --accent: #d4af37; --accent-2: #fde68a; --accent-d: #92671c; --border: rgba(212, 175, 55, 0.18); --border-2: rgba(212, 175, 55, 0.30); --glow: rgba(212, 175, 55, 0.35); --grain-op: 0.05; --error: #f87171; --success: #34d399; } .light { color-scheme: light; --bg: #fdf8e8; --bg-2: #f5ecd8; --bg-3: #ffffff; --text: #1a1410; --text-muted:#5c4a2f; --accent: #92671c; --accent-2: #b8860b; --accent-d: #6b4d14; --border: rgba(146, 103, 28, 0.22); --border-2: rgba(146, 103, 28, 0.40); --glow: rgba(146, 103, 28, 0.25); --grain-op: 0.04; --error: #b91c1c; --success: #047857; } * { box-sizing: border-box; } html, body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.4s, color 0.4s; min-height: 100vh; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } img { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; } ::selection { background: var(--accent); color: var(--bg); } /* ====== Background layers ====== */ .bg-spot { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(800px 600px at 18% 22%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 60%), radial-gradient(700px 500px at 82% 78%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%); transition: background 0.4s; } .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain-op); background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } .spotlight { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(500px 500px at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%); } /* ====== Components ====== */ .glass { background: color-mix(in srgb, var(--bg-3) 70%, transparent); border: 1px solid var(--border); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } .light .glass { background: rgba(255, 255, 255, 0.55); } .gold-line { height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .gold-line-vert { width: 1px; background: linear-gradient(180deg, transparent, var(--border), transparent); } .text-gradient { background: linear-gradient(110deg, var(--text) 0%, var(--accent-2) 35%, var(--accent) 65%, var(--text) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 9s linear infinite; } @keyframes shine { 0% { background-position: 0 0; } 100% { background-position: 220% 0; } } .pulse-dot { position: relative; } .pulse-dot::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(16, 185, 129, 0.5); animation: pulse-ring 1.6s ease-out infinite; } @keyframes pulse-ring { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .marquee-track { animation: none !important; } } /* ====== Buttons ====== */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 0.85rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.3s; isolation: isolate; overflow: hidden; position: relative; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn-primary { background: var(--accent); color: var(--bg); box-shadow: 0 12px 30px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,0.18); } .btn-primary:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 16px 40px -8px var(--glow); } .light .btn-primary { color: #ffffff; } .light .btn-primary:hover { background: var(--accent); color: #ffffff; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%); transform: translateX(-120%); transition: transform 0.7s ease; } .btn-primary:hover::before { transform: translateX(120%); } .btn-ghost { color: var(--text); border: 1px solid var(--border); background: transparent; } .btn-ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); transform: translateY(-2px); } .btn-sm { padding: 0.55rem 1rem; font-size: 0.875rem; border-radius: 0.65rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* ====== Theme toggle ====== */ .theme-toggle { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: transparent; color: var(--accent); cursor: pointer; transition: all 0.25s; } .theme-toggle:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } .light .theme-toggle .icon-sun { display: block; } .light .theme-toggle .icon-moon { display: none; } /* ====== Logo ====== */ .logo-mark { color: var(--accent); } .logo-mark polygon { fill: color-mix(in srgb, var(--accent) 4%, transparent); } .logo-word { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -0.025em; color: var(--accent); font-size: 1.25rem; } /* ====== Section labels ====== */ .section-label { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); padding: 0.3rem 0.75rem; border-radius: 9999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 5%, transparent); } /* ====== Forms ====== */ .field { display: block; margin-bottom: 1.1rem; } .field-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text); margin-bottom: 0.4rem; } .field-label .req { color: var(--accent); margin-left: 0.2rem; } .field-input { width: 100%; padding: 0.85rem 1rem; background: color-mix(in srgb, var(--bg-3) 70%, transparent); color: var(--text); border: 1px solid var(--border); border-radius: 0.7rem; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; } .field-input::placeholder { color: var(--text-muted); opacity: 0.6; } .field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .field-help { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; } .field-error { font-size: 0.85rem; color: var(--error); margin-top: 0.4rem; } /* ====== Alerts ====== */ .alert { padding: 0.85rem 1rem; border-radius: 0.7rem; border: 1px solid var(--border); margin-bottom: 1rem; font-size: 0.9rem; display: flex; align-items: flex-start; gap: 0.6rem; } .alert-info { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); } .alert-error { color: var(--error); border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.07); } .alert-success { color: var(--success); border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.07); } /* ====== Cards ====== */ .bento { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.4s; } .bento:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 24px 60px -20px var(--glow); } /* ====== Vote bars ====== */ .vote-bar { position: relative; height: 12px; border-radius: 9999px; background: color-mix(in srgb, var(--accent) 8%, transparent); overflow: hidden; } .vote-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 9999px; background: linear-gradient(90deg, var(--accent-d), var(--accent), var(--accent-2)); box-shadow: 0 0 14px var(--glow); width: var(--pct, 0%); transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); } /* ====== Marquee ====== */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-track { animation: marquee 40s linear infinite; } /* ====== Top nav ====== */ .topnav { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 40; width: min(94%, 1100px); } .topnav-inner { padding: 0.6rem 1rem; border-radius: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } /* ====== Container utility ====== */ .container { max-width: 1100px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } .container-narrow { max-width: 720px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } /* ====== Footer ====== */ .footer { padding: 3rem 1.5rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; } /* ====== Responsive helpers ====== */ .hidden-mobile { display: none; } @media (min-width: 768px) { .hidden-mobile { display: inline-flex; } .hidden-desktop { display: none; } } /* ====== Utility classes ====== */ .text-accent { color: var(--accent); } .text-muted { color: var(--text-muted); } .font-mono { font-family: 'JetBrains Mono', monospace; } .font-display { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -0.025em; } /* ====== Markdown rendering (descricao da votacao) ====== */ .poll-description { color: var(--text-muted); line-height: 1.6; } .poll-description p { margin: 0 0 0.85rem; } .poll-description p:last-child { margin-bottom: 0; } .poll-description strong { color: var(--text); font-weight: 700; } .poll-description em { color: var(--text); font-style: italic; } .poll-description a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.15s; } .poll-description a:hover { color: color-mix(in srgb, var(--accent) 75%, white); } .poll-description code { font-family: 'JetBrains Mono', monospace; font-size: 0.88em; padding: 0.08rem 0.4rem; border-radius: 0.3rem; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); } .poll-description ul { margin: 0.5rem 0 0.85rem; padding-left: 1.25rem; } .poll-description li { margin: 0.2rem 0; }