/* ═══════════════════════════════════════════════════════════════ PRIMEIRA PLATEIA — Base CSS Componentes partilhados: reset, nav, footer, botões, utilities Depende de: design/tokens.css + fonts/fonts.css ═══════════════════════════════════════════════════════════════ */ /* ── RESET ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; tab-size: 4; } body { font-family: var(--ff-body); font-size: var(--text-base); line-height: 1.6; background: var(--surface-bg); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background var(--transition-base), color var(--transition-base); } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font-family: inherit; font-size: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--ff-display); font-weight: 700; line-height: 1.15; color: var(--text-primary); } p { color: var(--text-secondary); line-height: 1.75; } /* ── ANTI-FOUC: tema antes do primeiro render ────────────────── */ /* Script inline obrigatório no de cada página: */ /* ── ACESSIBILIDADE ─────────────────────────────────────────── */ .skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: fixed; left: var(--space-4); top: var(--space-4); width: auto; height: auto; background: var(--color-accent); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; letter-spacing: .02em; z-index: 9999; box-shadow: var(--shadow-md); } /* Focus visível global — nunca remover sem substituir */ :focus-visible { outline: none; box-shadow: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* ── NAVEGAÇÃO ──────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-h); padding: 0 var(--space-12); display: flex; align-items: center; justify-content: space-between; background: rgba(248, 249, 250, 0.92); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--surface-divider); transition: background var(--transition-base), border-color var(--transition-base); } [data-theme="dark"] .nav { background: rgba(12, 15, 20, 0.92); border-bottom-color: rgba(255, 255, 255, 0.06); } /* Marca / logótipo */ .nav-brand { display: flex; align-items: baseline; gap: var(--space-1); text-decoration: none; flex-shrink: 0; } .nav-brand-primeira { font-family: var(--ff-display); font-size: 15px; font-weight: 700; color: var(--text-muted); letter-spacing: .01em; } .nav-brand-plateia { font-family: var(--ff-display); font-size: 19px; font-weight: 700; font-style: italic; color: var(--color-primary); letter-spacing: -.01em; } [data-theme="dark"] .nav-brand-plateia { color: var(--color-primary); } .nav-brand:focus-visible { border-radius: var(--radius-sm); } /* Links de navegação */ .nav-links { display: flex; align-items: center; gap: var(--space-1); } .nav-links a { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); white-space: nowrap; } .nav-links a:hover { color: var(--color-primary); background: var(--color-primary-light); } [data-theme="dark"] .nav-links a:hover { color: var(--text-primary); background: var(--surface-bg-2); } .nav-links a[aria-current="page"] { color: var(--color-accent); font-weight: 600; } /* Lado direito da nav */ .nav-right { display: flex; align-items: center; gap: var(--space-2); } /* Botão modo escuro/claro */ .theme-btn { width: 36px; height: 36px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: var(--surface-bg-2); border: 1px solid var(--surface-card-border); border-radius: var(--radius-full); color: var(--text-secondary); font-size: 16px; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); position: relative; } [data-theme="dark"] .theme-btn { background: var(--surface-card); border-color: var(--surface-card-border); } .theme-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } [data-theme="dark"] .theme-btn:hover { background: var(--surface-bg-2); } .theme-btn .i-sun { display: none; } .theme-btn .i-moon { display: block; } [data-theme="dark"] .theme-btn .i-sun { display: block; } [data-theme="dark"] .theme-btn .i-moon { display: none; } /* Tooltip do botão de tema */ .theme-btn::after { content: attr(data-tip); position: absolute; bottom: -34px; right: 0; background: var(--surface-card); color: var(--text-primary); font-size: 11px; font-family: var(--ff-body); white-space: nowrap; padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--surface-card-border); box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); z-index: 10; } .theme-btn:hover::after, .theme-btn:focus-visible::after { opacity: 1; } /* Botão hamburger (mobile) */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 22px; cursor: pointer; } .nav-toggle:focus-visible { box-shadow: var(--focus-ring-offset); } /* Pill de destaque na nav (ex: "Novo") */ .nav-pill { display: inline-block; padding: 2px 7px; background: var(--color-accent-light); color: var(--color-accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--radius-full); margin-left: var(--space-1); vertical-align: middle; } /* ── RODAPÉ ─────────────────────────────────────────────────── */ .footer { background: var(--surface-bg-2); border-top: 1px solid var(--surface-card-border); padding: var(--space-16) var(--space-12) var(--space-8); } [data-theme="dark"] .footer { background: var(--surface-bg-2); } .footer-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid var(--surface-card-border); } .footer-brand-col {} .footer-brand { display: flex; align-items: baseline; gap: var(--space-1); margin-bottom: var(--space-4); } .footer-brand-primeira { font-family: var(--ff-display); font-size: 14px; font-weight: 700; color: var(--text-muted); } .footer-brand-plateia { font-family: var(--ff-display); font-size: 18px; font-weight: 700; font-style: italic; color: var(--color-primary); } [data-theme="dark"] .footer-brand-plateia { color: var(--color-primary); } .footer-tagline { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; max-width: 240px; margin-bottom: var(--space-6); } /* Redes sociais */ .footer-social { display: flex; gap: var(--space-2); flex-wrap: wrap; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--surface-card); border: 1px solid var(--surface-card-border); border-radius: var(--radius-md); color: var(--text-muted); font-size: 16px; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .footer-social a:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); } [data-theme="dark"] .footer-social a:hover { background: var(--surface-bg); color: var(--text-primary); } /* Colunas de links */ .footer-col-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--space-4); } .footer-col-links { display: flex; flex-direction: column; gap: var(--space-2); } .footer-col-links a { font-size: var(--text-sm); color: var(--text-muted); transition: color var(--transition-fast); padding: 2px 0; } .footer-col-links a:hover { color: var(--color-accent); } /* Barra inferior do footer */ .footer-bottom { max-width: var(--max-w); margin: 0 auto; padding-top: var(--space-6); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); } .footer-legal { font-size: var(--text-xs); color: var(--text-muted); opacity: .7; letter-spacing: .02em; } .footer-meta { font-size: var(--text-xs); color: var(--text-muted); opacity: .6; display: flex; align-items: center; gap: var(--space-2); } .footer-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); opacity: .4; display: inline-block; } /* ── BOTÕES ─────────────────────────────────────────────────── */ /* Primário */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-family: var(--ff-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: .02em; line-height: 1; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; user-select: none; } .btn:focus-visible { box-shadow: var(--focus-ring-offset); } .btn:active { transform: translateY(1px); } /* Variantes */ .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(27, 43, 75, 0.2); } .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(27, 43, 75, 0.3); } .btn-accent { background: var(--color-accent); color: #fff; border-color: var(--color-accent); box-shadow: var(--shadow-accent); } .btn-accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(217, 31, 31, 0.35); } .btn-outline { background: transparent; color: var(--text-primary); border-color: var(--surface-divider); } .btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); transform: translateY(-1px); } [data-theme="dark"] .btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .btn-ghost:hover { background: var(--surface-bg-2); color: var(--text-primary); } /* Tamanhos */ .btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); } .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); } /* ── PILLS / BADGES ─────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 10px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--radius-full); white-space: nowrap; } .pill-primary { background: var(--color-primary-light); color: var(--color-primary); } [data-theme="dark"] .pill-primary { background: var(--color-primary-light); color: var(--color-primary); } .pill-accent { background: var(--color-accent-light); color: var(--color-accent); } .pill-neutral { background: var(--surface-bg-2); color: var(--text-muted); border: 1px solid var(--surface-card-border); } /* Categorias de espectáculos */ .pill-teatro { background: #E8EDF5; color: #1B2B4B; } .pill-danca { background: #F3E8F5; color: #6B21A8; } .pill-opera { background: #FEF3C7; color: #92400E; } .pill-musical { background: #ECFDF5; color: #065F46; } .pill-circo { background: #FFF7ED; color: #9A3412; } .pill-infantil { background: #EFF6FF; color: #1D4ED8; } .pill-performance { background: #FDF2F8; color: #9D174D; } .pill-musica { background: #F0FDF4; color: #166534; } .pill-outro { background: var(--surface-bg-2); color: var(--text-muted); } [data-theme="dark"] .pill-teatro { background: rgba(27,43,75,.3); color: #93AECF; } [data-theme="dark"] .pill-danca { background: rgba(107,33,168,.2); color: #C084FC; } [data-theme="dark"] .pill-opera { background: rgba(146,64,14,.2); color: #FCD34D; } [data-theme="dark"] .pill-musical { background: rgba(6,95,70,.2); color: #6EE7B7; } [data-theme="dark"] .pill-circo { background: rgba(154,52,18,.2); color: #FB923C; } [data-theme="dark"] .pill-infantil { background: rgba(29,78,216,.2); color: #93C5FD; } [data-theme="dark"] .pill-performance { background: rgba(157,23,77,.2); color: #F9A8D4; } [data-theme="dark"] .pill-musica { background: rgba(22,101,52,.2); color: #86EFAC; } /* ── CARDS ──────────────────────────────────────────────────── */ .card { background: var(--surface-card); border: 1px solid var(--surface-card-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast); } .card:hover { border-color: rgba(27, 43, 75, 0.2); box-shadow: var(--shadow-primary); transform: translateY(-3px); } [data-theme="dark"] .card:hover { border-color: rgba(74, 111, 165, 0.3); } /* ── SECTION HEADERS ────────────────────────────────────────── */ .section-label { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4); } .section-label::before { content: ''; width: 24px; height: 2px; background: var(--color-accent); display: block; flex-shrink: 0; } .section-h2 { font-family: var(--ff-display); font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); font-weight: 700; color: var(--text-primary); line-height: 1.1; letter-spacing: -.02em; margin-bottom: var(--space-4); } .section-h2 em { font-style: italic; color: var(--color-accent); } .section-lead { font-size: var(--text-lg); color: var(--text-muted); line-height: 1.7; max-width: 560px; } /* ── DIVIDER ────────────────────────────────────────────────── */ .divider { height: 1px; background: var(--surface-card-border); border: none; margin: var(--space-8) 0; } /* ── LAYOUT UTILITIES ───────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-12); } .container-tight { max-width: var(--max-w-tight); margin: 0 auto; padding: 0 var(--space-12); } .container-text { max-width: var(--max-w-text); margin: 0 auto; padding: 0 var(--space-12); } .pt-nav { padding-top: var(--nav-h); } /* ── ESTADO DE CARREGAMENTO ─────────────────────────────────── */ .skeleton { background: linear-gradient( 90deg, var(--surface-bg-2) 25%, var(--surface-card-border) 50%, var(--surface-bg-2) 75% ); background-size: 200% 100%; animation: skeleton-pulse 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── MENSAGENS DE ESTADO ────────────────────────────────────── */ .state-empty { text-align: center; padding: var(--space-24) var(--space-8); color: var(--text-muted); } .state-empty-icon { font-size: 48px; margin-bottom: var(--space-4); opacity: .4; } .state-empty-title { font-family: var(--ff-display); font-size: var(--text-2xl); font-weight: 700; color: var(--text-secondary); margin-bottom: var(--space-2); } .state-empty-text { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; max-width: 360px; margin: 0 auto var(--space-6); } /* ── TOAST / NOTIFICAÇÃO ────────────────────────────────────── */ .toast { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%) translateY(100px); background: var(--surface-card); border: 1px solid var(--surface-card-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-6); font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); box-shadow: var(--shadow-lg); z-index: var(--z-toast); opacity: 0; transition: transform var(--transition-spring), opacity var(--transition-base); white-space: nowrap; } .toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; } /* ── RESPONSIVE: NAVEGAÇÃO MOBILE ───────────────────────────── */ @media (max-width: 900px) { .nav { padding: 0 var(--space-5); } .nav-toggle { display: flex; } .nav-links { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; padding: var(--space-2) var(--space-4) var(--space-4); background: var(--surface-bg); border-bottom: 1px solid var(--surface-card-border); gap: var(--space-1); z-index: calc(var(--z-nav) - 1); box-shadow: var(--shadow-md); } [data-theme="dark"] .nav-links { background: var(--surface-bg-2); } .nav-links.open { display: flex; } .nav-links a { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--surface-card-border); border-radius: 0; } .nav-links a:last-child { border-bottom: none; } } @media (max-width: 768px) { .container, .container-tight, .container-text { padding: 0 var(--space-5); } .footer { padding: var(--space-12) var(--space-5) var(--space-6); } .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); } } @media (max-width: 480px) { .footer-inner { grid-template-columns: 1fr; } }