/* ============================================================ ENCICLOPÉDIA DO TEATRO BRASILEIRO shared.css — Estilos Globais, Navegação, Rodapé, Manifesto www.parkjuju.com.br/teatro-brasileiro/ ============================================================ */ /* ── GOOGLE FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap'); /* ============================================================ VARIÁVEIS GLOBAIS ============================================================ */ :root { /* Paleta Principal */ --preto: #0d0d0d; --preto-palco: #121212; --preto-fundo: #0f0f0f; --vermelho: #8B1A1A; --vermelho-vivo: #C0392B; --vermelho-escuro: #5a0f0f; --dourado: #d4b86a; --dourado-claro: #E8C96A; --dourado-escuro: #8B6914; --dourado-suave: #d4b86a; --creme: #F5EDD6; --creme-escuro: #E8D9B5; --creme-palha: #f0e6c8; --cinza-palco: #1e1e1e; --cinza-medio: #3a3a3a; --branco: #ffffff; /* Paletas por Seção (aplicadas via classe no ) */ --sec-raizes-bg: #1a2e1a; --sec-raizes-accent: #b5651d; --sec-raizes-text: #f0e6c8; --sec-imperial-bg: #0d1b2a; --sec-imperial-accent:#c9a84c; --sec-imperial-text: #f5f0e8; --sec-republica-bg: #2a1a0e; --sec-republica-accent:#c9844c; --sec-republica-text: #ede0c4; --sec-moderno-bg: #080808; --sec-moderno-accent: #c0392b; --sec-moderno-text: #f0f0f0; --sec-ditadura-bg: #1a1a1a; --sec-ditadura-accent:#7a0000; --sec-ditadura-text: #e8e8e8; --sec-abdias-bg: #0f1a0f; --sec-abdias-accent: #d4a017; --sec-abdias-text: #f5f5f5; --sec-popular-bg: #fefefe; --sec-popular-accent: #c0392b; --sec-popular-text: #1a1a1a; --sec-redemocratizacao-bg: #0f1f15; --sec-redemocratizacao-accent:#e85d04; --sec-redemocratizacao-text: #f0f0f0; --sec-metodos-bg: #f8f5ee; --sec-metodos-accent: #8B6914; --sec-metodos-text: #1a1a1a; --sec-festivais-bg: #0a0a0a; --sec-festivais-accent:#c9a84c; --sec-festivais-text: #f5edd6; /* Tipografia */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'EB Garamond', Georgia, serif; --font-ui: 'Cormorant Garamond', Georgia, serif; --font-prose: 'Crimson Pro', Georgia, serif; /* Espaçamentos */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; --space-2xl: 10rem; /* Transições */ --transition-fast: 0.2s ease; --transition-mid: 0.4s ease; --transition-slow: 0.8s ease; /* Bordas */ --border-dourado: 1px solid rgba(201,168,76,0.3); --border-dourado-vivo: 1px solid rgba(201,168,76,0.7); --border-vermelho: 1px solid rgba(139,26,26,0.4); /* Sombras */ --shadow-leve: 0 4px 20px rgba(0,0,0,0.3); --shadow-medio: 0 10px 40px rgba(0,0,0,0.5); --shadow-pesado: 0 20px 80px rgba(0,0,0,0.7); /* Nav */ --nav-height: 70px; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 18px; /* base maior — serifadas precisam de mais espaço */ -webkit-text-size-adjust: 100%; color-scheme: dark light; overflow-x: hidden; } @media (max-width: 768px) { html { font-size: 17px; } } @media (max-width: 480px) { html { font-size: 16px; } } body { font-family: var(--font-body); background: var(--preto-fundo); color: var(--creme); line-height: 1.85; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 768px) { body { line-height: 1.78; } p, li { font-size: 1.05rem; hyphens: auto; -webkit-hyphens: auto; } img { max-width: 100%; height: auto; } } /* ============================================================ NAVEGAÇÃO GLOBAL ============================================================ */ .etb-nav { position: fixed; top: 22px; left: 0; right: 0; z-index: 9000; height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; background: rgba(10,10,10,0.97); border-bottom: 1px solid rgba(201,168,76,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color var(--transition-mid), background var(--transition-mid); } .etb-nav.nav-scrolled { border-bottom-color: rgba(201,168,76,0.25); background: rgba(8,8,8,0.99); } /* Logo */ .etb-nav__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex-shrink: 0; } .etb-nav__logo-sigla { font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; color: var(--dourado); letter-spacing: 0.05em; line-height: 1; } .etb-nav__logo-texto { display: flex; flex-direction: column; line-height: 1.2; } .etb-nav__logo-linha1 { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--creme); opacity: 0.85; } .etb-nav__logo-linha2 { font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dourado); opacity: 1; } /* Menu principal */ .etb-nav__menu { display: flex; align-items: center; gap: 0; list-style: none; } .etb-nav__menu > li { position: relative; } .etb-nav__menu > li > a, .etb-nav__menu > li > button { display: flex; align-items: center; gap: 0.3rem; padding: 0 1rem; height: var(--nav-height); font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--creme); text-decoration: none; background: none; border: none; cursor: pointer; opacity: 0.85; transition: opacity var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .etb-nav__menu > li > a:hover, .etb-nav__menu > li > button:hover, .etb-nav__menu > li > a.ativo, .etb-nav__menu > li > button.ativo { opacity: 1; color: var(--dourado); } .etb-nav__menu > li > a.ativo::after, .etb-nav__menu > li > button.ativo::after { content: ''; position: absolute; bottom: 0; left: 1rem; right: 1rem; height: 2px; background: var(--dourado); } /* Seta dropdown */ .etb-nav__arrow { font-size: 0.55rem; transition: transform var(--transition-fast); opacity: 0.7; } li:hover .etb-nav__arrow, li:focus-within .etb-nav__arrow { transform: rotate(180deg); } /* Dropdown */ .etb-nav__dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 280px; background: rgba(10,10,10,0.98); border: var(--border-dourado); border-top: 2px solid var(--dourado); padding: 0.5rem 0; list-style: none; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 9100; } .etb-nav__menu > li:hover .etb-nav__dropdown, .etb-nav__menu > li:focus-within .etb-nav__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .etb-nav__dropdown li a { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.7rem 1.4rem; font-family: var(--font-ui); font-size: 0.9rem; color: var(--creme); text-decoration: none; opacity: 0.9; transition: opacity var(--transition-fast), background var(--transition-fast), padding-left var(--transition-fast); border-left: 2px solid transparent; } .etb-nav__dropdown li a:hover { opacity: 1; background: rgba(201,168,76,0.06); padding-left: 1.8rem; border-left-color: var(--dourado); color: var(--dourado-claro); } .etb-nav__dropdown-num { font-size: 0.75rem; color: var(--dourado); opacity: 0.85; font-family: var(--font-display); font-style: italic; min-width: 1.5rem; } /* Separador no dropdown */ .etb-nav__dropdown li.sep { height: 1px; background: rgba(201,168,76,0.1); margin: 0.4rem 1rem; } /* Busca / ícone direita */ .etb-nav__direita { display: flex; align-items: center; gap: 0.5rem; } .etb-nav__busca-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: var(--border-dourado); color: var(--dourado); cursor: pointer; font-size: 0.9rem; transition: background var(--transition-fast), border-color var(--transition-fast); } .etb-nav__busca-btn:hover { background: rgba(201,168,76,0.1); border-color: var(--dourado); } /* Hamburger mobile */ .etb-nav__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 0 4px; } .etb-nav__hamburger span { display: block; height: 1.5px; background: var(--creme); transition: all var(--transition-fast); } .etb-nav__hamburger.aberto span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .etb-nav__hamburger.aberto span:nth-child(2) { opacity: 0; } .etb-nav__hamburger.aberto span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Menu mobile */ .etb-nav__mobile-menu { position: fixed; top: var(--nav-height); left: 0; right: 0; background: rgba(8,8,8,0.99); border-bottom: var(--border-dourado); padding: 1.5rem 2rem 2rem; transform: translateY(-110%); transition: transform var(--transition-mid); z-index: 8999; overflow-y: auto; max-height: calc(100vh - var(--nav-height)); } .etb-nav__mobile-menu.aberto { transform: translateY(0); } .etb-nav__mobile-section-title { font-family: var(--font-ui); font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--dourado); opacity: 0.7; margin: 1.2rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(201,168,76,0.15); } .etb-nav__mobile-menu a { display: block; padding: 0.65rem 0; font-family: var(--font-ui); font-size: 1rem; color: var(--creme); text-decoration: none; opacity: 0.9; border-bottom: 1px solid rgba(255,255,255,0.06); transition: opacity var(--transition-fast), color var(--transition-fast); } .etb-nav__mobile-menu a:hover { opacity: 1; color: var(--dourado); } /* ============================================================ BREADCRUMB ============================================================ */ .etb-breadcrumb { padding: calc(var(--nav-height) + 1rem) 2.5rem 0; } .etb-breadcrumb__lista { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; } .etb-breadcrumb__lista li { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-ui); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; } .etb-breadcrumb__lista li::after { content: '›'; color: var(--dourado); opacity: 0.7; font-size: 0.9rem; } .etb-breadcrumb__lista li:last-child::after { display: none; } .etb-breadcrumb__lista a { color: var(--creme); opacity: 0.9; text-decoration: none; transition: opacity var(--transition-fast), color var(--transition-fast); } .etb-breadcrumb__lista a:hover { opacity: 1; color: var(--dourado); } .etb-breadcrumb__lista li[aria-current="page"] { color: var(--dourado); opacity: 1; } /* ============================================================ LAYOUT UTILITÁRIO ============================================================ */ .etb-container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; } .etb-container--estreito { max-width: 780px; margin: 0 auto; padding: 0 2rem; } .etb-container--largo { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } .etb-section { padding: var(--space-xl) 0; } .etb-section--menor { padding: var(--space-lg) 0; } /* ============================================================ CABEÇALHO DE SEÇÃO ============================================================ */ .etb-section-header { text-align: center; margin-bottom: 3.5rem; } .etb-kicker { display: block; font-family: var(--font-ui); font-size: 0.82rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--dourado); opacity: 1; margin-bottom: 0.8rem; } .etb-titulo { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--creme); line-height: 1.1; } .etb-titulo em { font-style: italic; color: var(--dourado); } .etb-regua { width: 50px; height: 1px; background: var(--dourado); margin: 1.5rem auto 0; opacity: 0.75; } /* ============================================================ HERO DE PÁGINA INTERNA ============================================================ */ .etb-page-hero { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: calc(var(--nav-height) + 3rem) 2rem 4rem; position: relative; overflow: hidden; text-align: center; } .etb-page-hero__bg { position: absolute; inset: 0; background: var(--preto-fundo); z-index: 0; } .etb-page-hero__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.08) 0%, transparent 65% ); } .etb-page-hero__parte { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--dourado); opacity: 1; margin-bottom: 1rem; position: relative; z-index: 1; } .etb-page-hero__titulo { font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 900; line-height: 1; color: var(--creme); position: relative; z-index: 1; } .etb-page-hero__titulo em { display: block; font-style: italic; color: var(--dourado); } .etb-page-hero__subtitulo { font-family: var(--font-ui); font-size: clamp(0.85rem, 1.8vw, 1.1rem); letter-spacing: 0.25em; text-transform: uppercase; color: var(--creme); opacity: 0.82; margin-top: 1.2rem; position: relative; z-index: 1; } .etb-page-hero__divisor { display: flex; align-items: center; gap: 1rem; margin: 2rem auto 0; position: relative; z-index: 1; } .etb-page-hero__divisor span { width: 60px; height: 1px; background: linear-gradient(to right, transparent, var(--dourado)); } .etb-page-hero__divisor span:last-child { background: linear-gradient(to left, transparent, var(--dourado)); } .etb-page-hero__divisor i { font-style: normal; color: var(--dourado); font-size: 0.6rem; } /* ============================================================ BLOCO DE BIOGRAFIA ============================================================ */ .etb-biografia { display: grid; grid-template-columns: 200px 1fr; gap: 3rem; margin: 3rem 0; padding: 2.5rem; border: var(--border-dourado); background: rgba(201,168,76,0.02); position: relative; } .etb-biografia::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--dourado), transparent); } .etb-biografia__foto { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .etb-biografia__inicial { width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; background: rgba(201,168,76,0.08); border: var(--border-dourado); font-family: var(--font-display); font-size: 4rem; font-weight: 900; color: var(--dourado); font-style: italic; flex-shrink: 0; } .etb-biografia__datas { font-family: var(--font-ui); font-size: 0.88rem; letter-spacing: 0.12em; color: var(--dourado); opacity: 1; text-align: center; } .etb-biografia__local { font-family: var(--font-ui); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--creme); opacity: 0.9; text-align: center; text-transform: uppercase; } .etb-biografia__conteudo {} .etb-biografia__nome { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--creme); line-height: 1.1; margin-bottom: 0.3rem; } .etb-biografia__movimento { font-family: var(--font-ui); font-size: 0.82rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--dourado); opacity: 1; margin-bottom: 1.5rem; } .etb-biografia__texto { font-family: var(--font-prose); font-size: 1.1rem; line-height: 1.95; color: var(--creme); opacity: 0.95; } .etb-biografia__texto p + p { margin-top: 1.2em; } /* ============================================================ FICHA TÉCNICA DE ESPETÁCULO ============================================================ */ .etb-ficha-espetaculo { margin: 2.5rem 0; border: var(--border-dourado); background: rgba(10,10,10,0.6); position: relative; overflow: hidden; } .etb-ficha-espetaculo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--vermelho), var(--dourado), var(--vermelho)); } .etb-ficha-espetaculo__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem 0.8rem; background: rgba(139,26,26,0.12); border-bottom: 1px solid rgba(201,168,76,0.1); } .etb-ficha-espetaculo__tipo { font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dourado); opacity: 1; } .etb-ficha-espetaculo__ano { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--dourado); font-style: italic; } .etb-ficha-espetaculo__body { padding: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .etb-ficha-espetaculo__titulo-obra { grid-column: 1 / -1; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--creme); font-style: italic; margin-bottom: 0.5rem; } .etb-ficha-espetaculo__item { display: flex; flex-direction: column; gap: 0.2rem; } .etb-ficha-espetaculo__label { font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--dourado); opacity: 1; } .etb-ficha-espetaculo__valor { font-family: var(--font-body); font-size: 1rem; color: var(--creme); opacity: 0.95; } .etb-ficha-espetaculo__descricao { grid-column: 1 / -1; font-family: var(--font-prose); font-size: 1rem; line-height: 1.75; color: var(--creme); opacity: 0.92; padding-top: 0.5rem; border-top: 1px solid rgba(201,168,76,0.1); } /* ============================================================ PULLQUOTE / CITAÇÃO EM DESTAQUE ============================================================ */ .etb-pullquote { margin: 3rem auto; max-width: 720px; padding: 2.5rem 3rem; border-left: 3px solid var(--dourado); background: rgba(201,168,76,0.03); position: relative; } .etb-pullquote::before { content: '\201C'; position: absolute; top: -1.5rem; left: 2rem; font-family: var(--font-display); font-size: 6rem; color: var(--dourado); opacity: 0.15; line-height: 1; pointer-events: none; } .etb-pullquote__texto { font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-style: italic; line-height: 1.65; color: var(--creme); margin-bottom: 1rem; } .etb-pullquote__autor { font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--dourado); opacity: 1; } /* ============================================================ NOTA DE CURIOSIDADE / ASIDE ============================================================ */ .etb-curiosidade { margin: 2rem 0; padding: 1.5rem 1.5rem 1.5rem 2rem; border: 1px solid rgba(201,168,76,0.25); border-left: 3px solid var(--vermelho); background: rgba(139,26,26,0.07); font-family: var(--font-prose); font-size: 1rem; line-height: 1.85; color: var(--creme); opacity: 1; } .etb-curiosidade__titulo { display: block; font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--vermelho-vivo); opacity: 1; margin-bottom: 0.6rem; } /* ============================================================ TEXTO CORRIDO / PROSA ============================================================ */ .etb-prosa { font-family: var(--font-prose); font-size: clamp(1.05rem, 1.8vw, 1.18rem); line-height: 2; color: var(--creme); opacity: 1; } .etb-prosa p { margin-bottom: 1.5em; } .etb-prosa p:last-child { margin-bottom: 0; } .etb-prosa strong { color: var(--dourado-claro); font-weight: 600; } .etb-prosa em { font-style: italic; opacity: 1; } .etb-prosa a { color: var(--dourado); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.4); transition: border-color var(--transition-fast), color var(--transition-fast); } .etb-prosa a:hover { color: var(--dourado-claro); border-bottom-color: var(--dourado); } /* ============================================================ LINHA DO TEMPO (componente reutilizável) ============================================================ */ .etb-timeline { position: relative; padding-left: 2.5rem; } .etb-timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient( to bottom, transparent, rgba(201,168,76,0.4) 10%, rgba(201,168,76,0.4) 90%, transparent ); } .etb-timeline__item { position: relative; padding-bottom: 2.5rem; } .etb-timeline__item::before { content: ''; position: absolute; left: -2.5rem; top: 0.4rem; width: 9px; height: 9px; border-radius: 50%; background: var(--preto-fundo); border: 1.5px solid var(--dourado); transition: background var(--transition-fast), transform var(--transition-fast); } .etb-timeline__item:hover::before { background: var(--dourado); transform: scale(1.4); } .etb-timeline__ano { font-family: var(--font-display); font-size: 0.88rem; font-style: italic; color: var(--dourado); letter-spacing: 0.1em; margin-bottom: 0.3rem; } .etb-timeline__titulo { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--creme); margin-bottom: 0.4rem; } .etb-timeline__texto { font-family: var(--font-prose); font-size: 1rem; line-height: 1.85; color: var(--creme); opacity: 0.9; } /* ============================================================ VER TAMBÉM (links internos / SEO) ============================================================ */ .etb-ver-tambem { margin-top: var(--space-lg); padding: 2rem 2.5rem; border: var(--border-dourado); background: rgba(201,168,76,0.02); } .etb-ver-tambem__titulo { font-family: var(--font-ui); font-size: 0.82rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--dourado); opacity: 1; margin-bottom: 1.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(201,168,76,0.4); } .etb-ver-tambem__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; list-style: none; } .etb-ver-tambem__lista li a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; font-family: var(--font-ui); font-size: 0.92rem; color: var(--creme); text-decoration: none; opacity: 0.88; border: 1px solid transparent; transition: all var(--transition-fast); } .etb-ver-tambem__lista li a::before { content: '◆'; font-size: 0.45rem; color: var(--dourado); flex-shrink: 0; } .etb-ver-tambem__lista li a:hover { opacity: 1; color: var(--dourado-claro); background: rgba(201,168,76,0.05); border-color: rgba(201,168,76,0.2); } /* ============================================================ ANIMAÇÕES DE SCROLL (reveal) ============================================================ */ .etb-reveal { opacity: 0; transform: translateY(35px); transition: opacity 0.75s ease, transform 0.75s ease; } .etb-reveal.visivel { opacity: 1; transform: translateY(0); } .etb-reveal--esquerda { opacity: 0; transform: translateX(-30px); transition: opacity 0.75s ease, transform 0.75s ease; } .etb-reveal--esquerda.visivel { opacity: 1; transform: translateX(0); } .etb-reveal--direita { opacity: 0; transform: translateX(30px); transition: opacity 0.75s ease, transform 0.75s ease; } .etb-reveal--direita.visivel { opacity: 1; transform: translateX(0); } /* Delays escalonados */ .etb-reveal--delay-1 { transition-delay: 0.1s; } .etb-reveal--delay-2 { transition-delay: 0.2s; } .etb-reveal--delay-3 { transition-delay: 0.3s; } .etb-reveal--delay-4 { transition-delay: 0.4s; } .etb-reveal--delay-5 { transition-delay: 0.5s; } /* ============================================================ RODAPÉ GLOBAL + MANIFESTO ============================================================ */ .etb-footer { background: #1c1a14; border-top: 1px solid rgba(201,168,76,0.65); padding: 5rem 0 2rem; position: relative; overflow: hidden; } .etb-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( to right, transparent, var(--vermelho), var(--dourado-claro), var(--vermelho), transparent ); } /* Manifesto */ .etb-manifesto { max-width: 860px; margin: 0 auto; padding: 0 2rem 4rem; text-align: center; border-bottom: 1px solid rgba(201,168,76,0.4); } .etb-manifesto__cabecalho { margin-bottom: 2.5rem; } .etb-manifesto__etiqueta { display: inline-block; font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--dourado); opacity: 1; margin-bottom: 0.8rem; } .etb-manifesto__titulo { font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 900; font-style: italic; color: #f5edd6; line-height: 1.2; text-shadow: 0 1px 12px rgba(0,0,0,0.5); } .etb-manifesto__titulo em { color: #f0c84a; font-style: normal; text-shadow: 0 0 40px rgba(240,200,74,0.45); } .etb-manifesto__divisor { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; } .etb-manifesto__divisor span { width: 50px; height: 1px; background: linear-gradient(to right, transparent, rgba(201,168,76,0.5)); } .etb-manifesto__divisor span:last-child { background: linear-gradient(to left, transparent, rgba(201,168,76,0.5)); } .etb-manifesto__divisor i { font-style: normal; color: var(--dourado); font-size: 0.5rem; opacity: 0.8; } .etb-manifesto__texto { font-family: var(--font-prose); font-size: clamp(1.02rem, 1.8vw, 1.14rem); line-height: 2.0; color: #ede0c4; opacity: 1; text-align: left; } .etb-manifesto__texto p { margin-bottom: 1.2em; } .etb-manifesto__texto p:last-child { margin-bottom: 0; } .etb-manifesto__texto strong { color: var(--dourado-suave); font-weight: 500; opacity: 1; } /* Rodapé inferior */ .etb-footer__inferior { padding: 2.5rem 2rem 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; max-width: 1100px; margin: 0 auto; } .etb-footer__coluna-titulo { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--dourado-claro); opacity: 1; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(201,168,76,0.75); } .etb-footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; } .etb-footer__links a { font-family: var(--font-ui); font-size: 0.95rem; color: #ede0c4; opacity: 1; text-decoration: none; transition: opacity var(--transition-fast), color var(--transition-fast); } .etb-footer__links a:hover { opacity: 1; color: var(--dourado-claro); } .etb-footer__logo-area { text-align: center; } .etb-footer__logo-sigla { font-family: var(--font-display); font-size: 2.5rem; font-weight: 900; color: #f0c84a; font-style: italic; line-height: 1; display: block; margin-bottom: 0.5rem; text-shadow: 0 0 30px rgba(240,200,74,0.5); } .etb-footer__logo-nome { font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.25em; text-transform: uppercase; color: #ede0c4; opacity: 1; } .etb-footer__copy { text-align: center; padding: 2rem 2rem 1.5rem; margin-top: 2rem; border-top: 1px solid rgba(201,168,76,0.4); max-width: 1100px; margin-left: auto; margin-right: auto; } .etb-footer__copy p { font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.08em; color: #e8dcc8; opacity: 1; } .etb-footer__copy a { color: var(--dourado-claro); opacity: 1; text-decoration: none; transition: color 0.2s; } .etb-footer__copy a:hover { color: #fff; } /* ============================================================ BORDA DECORATIVA DE PALCO (global, fixa) ============================================================ */ .etb-stage-border { position: fixed; inset: 10px; z-index: 8000; border: 1px solid rgba(201,168,76,0.1); pointer-events: none; } .etb-stage-border::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(201,168,76,0.05); } /* ============================================================ RESPONSIVIDADE GLOBAL ============================================================ */ @media (max-width: 1024px) { .etb-footer__inferior { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { :root { --nav-height: 60px; } .etb-nav__menu { display: none; } .etb-nav__hamburger { display: flex; } .etb-nav__busca-btn { display: none; } .etb-nav { padding: 0 1.5rem; } .etb-biografia { grid-template-columns: 1fr; gap: 1.5rem; } .etb-biografia__foto { flex-direction: row; align-items: center; } .etb-biografia__inicial { width: 80px; height: 80px; font-size: 2rem; } .etb-ficha-espetaculo__body { grid-template-columns: 1fr; } .etb-pullquote { padding: 1.5rem 1.5rem 1.5rem 2rem; } .etb-footer__inferior { grid-template-columns: 1fr; gap: 2rem; } .etb-footer__logo-area { order: -1; } .etb-stage-border { display: none; } .etb-container, .etb-container--estreito, .etb-container--largo { padding: 0 1.2rem; } .etb-section { padding: 4rem 0; } } @media (max-width: 480px) { .etb-page-hero { min-height: 45vh; } .etb-manifesto__texto { font-size: 1rem; } .etb-ver-tambem__lista { grid-template-columns: 1fr; } .etb-prosa { font-size: 1.05rem; } } /* ============================================================ SCRIPT INLINE UTILITÁRIO (nav scroll + reveal) Incluir no de cada página via */ /* ============================================================ FIM DO shared.css Enciclopédia do Teatro Brasileiro www.parkjuju.com.br/teatro-brasileiro/ ============================================================ */ /* ============================================================ BARRA DE CRÉDITO DO DESENVOLVEDOR (BERA) ============================================================ */ .etb-dev-bar { position: fixed; top: 0; left: 0; right: 0; height: 22px; z-index: 9500; background: rgba(6,6,6,0.97); border-bottom: 1px solid rgba(201,168,76,0.15); display: flex; align-items: center; justify-content: flex-end; padding: 0 1.5rem; pointer-events: none; } .etb-dev-bar__texto { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.62rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(201,168,76,0.45); white-space: nowrap; } .etb-dev-bar__texto strong { color: rgba(201,168,76,0.7); font-weight: 600; letter-spacing: 0.2em; } /* Empurra nav para baixo quando dev bar está presente */ body.has-dev-bar .etb-nav { top: 22px; } body.has-dev-bar { padding-top: 22px; } @media (max-width: 480px) { .etb-dev-bar { display: none; } } /* ============================================================ TEMA — DARK / LIGHT TOGGLE Sistema: prefers-color-scheme → override via data-theme ============================================================ */ /* ── Paleta Light (sépia teatral) ── */ [data-theme="light"] { --preto: #f8f1e9; --preto-palco: #f0e8d8; --preto-fundo: #f5ede0; --cinza-palco: #e8dccb; --creme: #1a1410; --creme-escuro: #2a2018; --creme-palha: #3a2e1e; --dourado: #8b6200; --dourado-claro: #a87800; --dourado-escuro: #5a3e00; --dourado-suave: #7a5500; --vermelho: #7a0e0e; --vermelho-vivo: #991414; --border-dourado: 1px solid rgba(139,98,0,0.35); --border-dourado-vivo: 1px solid rgba(139,98,0,0.7); } [data-theme="light"] body { background: #f5ede0; color: #1a1410; } [data-theme="light"] .etb-nav { background: rgba(248,241,233,0.97) !important; border-bottom: 1px solid rgba(139,98,0,0.18); } [data-theme="light"] .etb-nav__logo-sigla, [data-theme="light"] .etb-nav__logo-linha2 { color: #8b6200; } [data-theme="light"] .etb-nav__logo-linha1 { color: #3a2e1e; } [data-theme="light"] .etb-nav__menu > li > a, [data-theme="light"] .etb-nav__menu > li > button { color: #2a2018; } [data-theme="light"] .etb-nav__dropdown { background: rgba(248,241,233,0.99); border-color: rgba(139,98,0,0.25); } [data-theme="light"] .etb-nav__dropdown li a { color: #2a2018; } [data-theme="light"] .etb-nav__dropdown li a:hover { background: rgba(139,98,0,0.08); color: #8b6200; } [data-theme="light"] .etb-nav__mobile-menu { background: #f0e8d8; } [data-theme="light"] .etb-nav__mobile-menu a { color: #2a2018; border-bottom-color: rgba(139,98,0,0.1); } [data-theme="light"] .etb-footer, [data-theme="light"] .etb-manifesto { background: #ede4d4; } [data-theme="light"] .etb-footer__copy p, [data-theme="light"] .etb-footer__links a { color: #3a2e1e; opacity: 1; } [data-theme="light"] .etb-footer__logo-nome { color: #3a2e1e; opacity: 0.88; } [data-theme="light"] .etb-footer__copy a { color: #8b6200; opacity: 1; } [data-theme="light"] .etb-manifesto__titulo { color: #1a1410; } [data-theme="light"] .etb-manifesto__texto { color: #2a2018; } [data-theme="light"] .etb-manifesto__texto strong { color: #5a3e00; } [data-theme="light"] .etb-dev-bar { background: rgba(240,232,216,0.97); border-bottom-color: rgba(139,98,0,0.15); } [data-theme="light"] .etb-dev-bar__texto { color: rgba(58,46,30,0.6); } [data-theme="light"] .etb-dev-bar__texto strong { color: rgba(58,46,30,0.85); } [data-theme="light"] .etb-stage-border { border-color: rgba(139,98,0,0.12); } [data-theme="light"] .etb-breadcrumb { background: transparent; border-bottom-color: rgba(139,98,0,0.12); } /* ── Toggle Button ── */ #theme-toggle { background: none; border: 1px solid rgba(201,168,76,0.3); border-radius: 50%; width: 36px; height: 36px; min-width: 36px; cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--dourado); transition: background 0.2s, border-color 0.2s, transform 0.2s; flex-shrink: 0; } #theme-toggle:hover { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.6); transform: rotate(20deg); } [data-theme="light"] #theme-toggle { border-color: rgba(139,98,0,0.3); color: #8b6200; } [data-theme="light"] #theme-toggle:hover { background: rgba(139,98,0,0.08); } /* ── System light fallback (sem JS) ── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --preto: #f8f1e9; --preto-fundo: #f5ede0; --cinza-palco: #e8dccb; --creme: #1a1410; --dourado: #8b6200; } }