/* ========================================================== * Votari · stylesheet base (Onyx Gold) * Suporte a tema dark (default) e light via classe em . * ========================================================== */ /* ====== Tokens ====== */ /* ====== Mobile-first tokens (shared) ====== */ :root { --tap-min: 48px; --input-font: 16px; --pad-mobile: 1rem; --pad-tablet: 1.5rem; --pad-desktop: 2.5rem; --radius-mobile: 12px; --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); } .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; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 0.85rem; min-height: var(--tap-min); font-weight: 600; font-size: 1rem; cursor: pointer; border: none; transition: all 0.3s; isolation: isolate; overflow: hidden; position: relative; line-height: 1.2; touch-action: manipulation; } .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; min-height: 40px; } .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; min-height: var(--tap-min); 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; font-size: var(--input-font); } .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: var(--pad-mobile); padding-right: var(--pad-mobile); } .container-narrow { max-width: 720px; margin: 0 auto; padding-left: var(--pad-mobile); padding-right: var(--pad-mobile); } @media (min-width: 480px) { .container, .container-narrow { padding-left: var(--pad-tablet); padding-right: var(--pad-tablet); } } /* ====== 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; word-break: break-word; overflow-wrap: anywhere; } .poll-description p { margin: 0 0 0.7rem; } .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.1rem 0.3rem; border-radius: 0.25rem; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); } .poll-description ul, .poll-description ol { margin: 0.4rem 0 0.7rem; padding-left: 1.25rem; } .poll-description li { margin: 0.2rem 0; } /* ========================================================== * MOBILE-FIRST FOUNDATION * Breakpoints: base (320px+), 480px, 768px, 1024px * ========================================================== */ /* Stretch base inputs/textarea on touch devices */ textarea.field-input { min-height: calc(var(--tap-min) * 2); resize: vertical; } select.field-input { min-height: var(--tap-min); } /* Tap-friendly interactive elements */ button, [role="button"], label.tap-target, .vote-option { touch-action: manipulation; } /* ====== Utility: visibility ====== */ .show-mobile { display: inline-flex; } @media (min-width: 768px) { .show-mobile { display: none; } } .hide-mobile { display: none; } @media (min-width: 768px) { .hide-mobile { display: inline-flex; } } /* ====== Utility: block button (full-width on mobile) ====== */ .btn-block { width: 100%; justify-content: center; } @media (min-width: 768px) { .btn-block { width: auto; } } /* ====== Utility: stack on mobile ====== */ .stack-mobile { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 768px) { .stack-mobile { flex-direction: row; align-items: center; } } /* ====== Utility: force 1-column grid on mobile ====== */ .grid-mobile-1 { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 600px) { .grid-mobile-1 { grid-template-columns: 1fr 1fr; } } /* ====== Utility: tap target ====== */ .tap-target { min-height: var(--tap-min); min-width: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; } /* ====== Utility: text alignment mobile ====== */ .text-center-mobile { text-align: center; } @media (min-width: 768px) { .text-center-mobile { text-align: inherit; } } /* ====== Utility: sticky bottom CTA ====== */ .sticky-bottom { position: sticky; bottom: 0; padding-bottom: calc(0.75rem + var(--safe-bottom)); padding-top: 0.75rem; background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 20; } /* Garante que alerts longos quebram em vez de overflow horizontal */ .alert > span { min-width: 0; flex: 1; word-break: break-word; } /* ====== Vote option (touch-friendly radio/checkbox label) ====== */ .vote-option { display: flex; align-items: center; gap: 0.85rem; min-height: var(--tap-min); padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-mobile); background: color-mix(in srgb, var(--bg-3) 55%, transparent); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.1s; -webkit-tap-highlight-color: transparent; user-select: none; } .vote-option:hover { border-color: var(--border-2); background: color-mix(in srgb, var(--bg-3) 75%, transparent); } .vote-option:active { transform: scale(0.99); background: color-mix(in srgb, var(--accent) 8%, transparent); } .vote-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); } .vote-option input { width: 22px; height: 22px; accent-color: var(--accent); flex-shrink: 0; } .vote-option-text { flex: 1; min-width: 0; word-break: break-word; } /* ====== Code input (access code, OTP) ====== */ .code-input { font-family: 'JetBrains Mono', monospace; font-weight: 700; text-align: center; font-size: 1.25rem; letter-spacing: 0.15em; text-transform: uppercase; } @media (min-width: 480px) { .code-input { font-size: 1.5rem; letter-spacing: 0.3em; } } /* ====== Sticky vote button (mobile sticky-bottom, desktop inline) ====== */ .sticky-vote-btn { position: sticky; bottom: 0; padding: 0.75rem 0 calc(0.75rem + var(--safe-bottom)); margin-top: 1rem; background: linear-gradient(to top, var(--bg) 60%, color-mix(in srgb, var(--bg) 80%, transparent) 90%, transparent); z-index: 20; } .sticky-vote-btn .btn { width: 100%; } @media (min-width: 768px) { .sticky-vote-btn { position: static; padding: 0; background: none; margin-top: 1.25rem; } .sticky-vote-btn .btn { width: auto; } } /* ====== Table scroll wrapper ====== */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; } .table-scroll::after { content: ''; position: absolute; top: 0; right: 0; bottom: 8px; width: 24px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; opacity: 0.7; } @media (min-width: 768px) { .table-scroll::after { display: none; } } /* ====== Spinner inline (button loading) ====== */ .btn-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 0.7s linear infinite; vertical-align: -0.15em; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* ====== Voto registrado: pop animation no checkmark ====== */ .poll-success-pop { animation: poll-success-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes poll-success-pop { 0% { transform: scale(0.25); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .poll-success-pop { animation: none; } } /* ====== Hamburger menu (mobile nav drawer) ====== */ .hamburger { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-mobile); color: var(--text); cursor: pointer; } .hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (min-width: 768px) { .hamburger { display: none; } } .mobile-drawer { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: calc(1rem + var(--safe-top)) 1.25rem 1.25rem; transform: translateX(100%); transition: transform 0.25s ease-out; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; } .mobile-drawer.open { transform: translateX(0); } .mobile-drawer a, .mobile-drawer .drawer-link { display: flex; align-items: center; min-height: var(--tap-min); padding: 0.75rem 1rem; border-radius: var(--radius-mobile); border: 1px solid var(--border); color: var(--text); font-weight: 500; background: color-mix(in srgb, var(--bg-3) 60%, transparent); } .mobile-drawer a:hover, .mobile-drawer a:focus-visible { border-color: var(--accent); color: var(--accent); } .mobile-drawer-close { position: absolute; top: calc(0.75rem + var(--safe-top)); right: 0.75rem; width: var(--tap-min); height: var(--tap-min); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-mobile); color: var(--text); cursor: pointer; font-size: 1.5rem; line-height: 1; } @media (min-width: 768px) { .mobile-drawer { display: none !important; } } /* Drawers estendidos: continuam disponíveis até o breakpoint do próprio hambúrguer (landing 880, admin 1024). Ficam off-screen (translateX) até .open. */ @media (min-width: 768px) and (max-width: 879.98px) { #landingDrawer.mobile-drawer { display: flex !important; } } @media (min-width: 768px) and (max-width: 1023.98px) { #adminDrawer.mobile-drawer { display: flex !important; } } /* Lock body scroll when drawer open */ body.drawer-open { overflow: hidden; } /* ====== Landing nav links (menu flutuante) ====== */ .landing-nav { display: none; gap: 0.1rem; align-items: center; } @media (min-width: 880px) { .landing-nav { display: flex; } } .landing-nav a { padding: 0.4rem 0.7rem; border-radius: 0.5rem; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; } .landing-nav a:hover, .landing-nav a:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); } /* Hamburger da landing: visível até 880px (a base .hamburger some em 768) */ @media (min-width: 768px) { .hamburger.landing-hamburger { display: inline-flex; } } @media (min-width: 880px) { .hamburger.landing-hamburger { display: none; } } /* ====== Admin nav (super admin) ====== */ .admin-nav { display: none; } /* Strip horizontal compacto: encolhe/rola em vez de quebrar linha e empurrar o user-menu (avatar+e-mail) pra baixo. min-width:0 permite encolher; overflow-x rola quando aperta; nowrap mantém tudo numa linha só. */ /* Poucos itens primários (Dashboard/Usuários/Votações/Diagnóstico) → cabe sempre, SEM rolagem horizontal. Os secundários vivem no menu do usuário/drawer. */ @media (min-width: 1024px) { .admin-nav { display: flex; align-items: center; gap: 0.15rem; flex-wrap: nowrap; } } .admin-nav-link { padding: 0.38rem 0.55rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; } .admin-nav-link:hover, .admin-nav-link:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); } .admin-nav-link.active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } @media (min-width: 768px) { .hamburger.admin-hamburger { display: inline-flex; } } @media (min-width: 1024px) { .hamburger.admin-hamburger { display: none; } } /* ====== User menu (dropdown de avatar do usuário logado) ====== */ .user-menu { position: relative; display: inline-flex; } .user-menu-trigger { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.28rem 0.55rem 0.28rem 0.32rem; border-radius: 9999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg-3) 50%, transparent); color: var(--text); cursor: pointer; font: inherit; max-width: 230px; min-height: 40px; } .user-menu-trigger:hover, .user-menu-trigger:focus-visible { border-color: var(--accent); } .user-menu-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--accent); color: var(--bg); font-weight: 800; font-size: 0.78rem; display: inline-flex; align-items: center; justify-content: center; } .user-menu-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; color: var(--text-muted); } /* Header com flex-wrap:nowrap (menu do usuário nunca quebra linha): em telas estreitas esconde o e-mail no gatilho pra o avatar+caret caberem sem estourar. */ @media (max-width: 640px) { .user-menu-email { display: none; } } .user-menu-caret { flex-shrink: 0; transition: transform 0.15s; color: var(--text-muted); } .user-menu.open .user-menu-caret { transform: rotate(180deg); } .user-menu-dropdown { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 70; min-width: 230px; padding: 0.4rem; border-radius: 0.85rem; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: 0 12px 40px -12px rgba(0,0,0,0.6); display: none; flex-direction: column; gap: 0.1rem; } .user-menu.open .user-menu-dropdown { display: flex; } .user-menu-dropdown a, .user-menu-dropdown .user-menu-item { display: flex; align-items: center; gap: 0.55rem; min-height: 40px; padding: 0.5rem 0.7rem; border-radius: 0.55rem; color: var(--text); text-decoration: none; font-size: 0.88rem; font-weight: 500; background: transparent; border: 0; width: 100%; cursor: pointer; text-align: left; font-family: inherit; } .user-menu-dropdown a:hover, .user-menu-dropdown .user-menu-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); } .user-menu-head { padding: 0.35rem 0.7rem 0.5rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-sep { height: 1px; background: var(--border); margin: 0.3rem 0.2rem; } .user-menu-item-danger { color: var(--error); } .user-menu-item-danger:hover { background: color-mix(in srgb, var(--error) 10%, transparent) !important; color: var(--error) !important; } /* ====== Section padding mobile-first ====== */ .section-pad { padding-left: var(--pad-mobile); padding-right: var(--pad-mobile); padding-top: 1.5rem; padding-bottom: 1.5rem; } @media (min-width: 480px) { .section-pad { padding-left: var(--pad-tablet); padding-right: var(--pad-tablet); padding-top: 2rem; padding-bottom: 2rem; } } @media (min-width: 768px) { .section-pad { padding-left: var(--pad-desktop); padding-right: var(--pad-desktop); padding-top: 2.5rem; padding-bottom: 2.5rem; } } /* ====== Backwards compat: keep .hidden-mobile / .hidden-desktop ====== */ /* (already defined above — preserved for existing markup) */ /* ====== Low-power devices: reduce blur cost ====== */ @media (max-width: 480px) { .glass { backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); } .bg-spot { background: radial-gradient(500px 400px at 18% 22%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%), radial-gradient(420px 320px at 82% 78%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%); } } @media (prefers-reduced-motion: reduce) { .btn-primary::before, .text-gradient { animation: none; } .vote-option:active { transform: none; } } /* Botão brilhante de upsell (lock de feature por plano) */ .feature-lock-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1rem; border-radius: 0.6rem; font-weight: 700; font-size: 0.85rem; color: #1a1408; text-decoration: none; white-space: nowrap; line-height: 1.2; background: linear-gradient(135deg, #a07a14, #d4af37 45%, #fde68a, #d4af37 75%, #a07a14); background-size: 200% 100%; animation: feature-lock-shine 3.5s linear infinite; } .feature-lock-cta:hover { filter: brightness(1.06); } @keyframes feature-lock-shine { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } /* Override DEPOIS da regra base pra vencer por ordem (mesma especificidade). */ @media (prefers-reduced-motion: reduce) { .feature-lock-cta { animation: none; } }