/* ========================================================================== ACNB — ASSOCIAÇÃO DE CAPOEIRA NAÇÃO BRASILEIRA CSS Final — Mobile-First, Dark Mode, Cards Quadrados, Fundo Branco ========================================================================== */ /* -------------------------------------------------------------------------- 1. VARIÁVEIS — MODO CLARO (padrão) -------------------------------------------------------------------------- */ :root { --color-gold: #C69214; --color-gold-hover: #A9790E; --color-gold-light: #FDF8EA; --color-gold-border: rgba(198, 146, 20, 0.35); --color-gold-gradient: linear-gradient(135deg, #E5A93C 0%, #C69214 100%); --color-bg: #FFFFFF; --color-bg-light: #F8FAFC; --color-bg-alt: #F1F5F9; --color-border: #E2E8F0; --color-border-2: #CBD5E1; --color-title: #0F172A; --color-body: #334155; --color-muted: #64748B; --color-whatsapp: #25D366; --color-whatsapp-hover: #1EBE5D; --font-head: 'Montserrat', sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-serif: 'Cinzel', serif; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 9999px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .03); --shadow-md: 0 4px 12px rgba(0, 0, 0, .07); --shadow-lg: 0 10px 25px rgba(0, 0, 0, .10); --dur-fast: 0.18s ease; --dur-base: 0.25s ease; --max-w: 1100px; --header-h: 64px; } /* -------------------------------------------------------------------------- 2. MODO ESCURO — sobrescreve variáveis ao adicionar .dark-mode no -------------------------------------------------------------------------- */ html.dark-mode { --color-gold-light: rgba(198, 146, 20, 0.16); --color-gold-border: rgba(198, 146, 20, 0.45); --color-bg: #111111; --color-bg-light: #181818; --color-bg-alt: #222222; --color-border: #2B2B2B; --color-border-2: #383838; --color-title: #F8FAFC; --color-body: #E2E8F0; --color-muted: #A0AEC0; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --shadow-md: 0 4px 12px rgba(0, 0, 0, .5); --shadow-lg: 0 10px 25px rgba(0, 0, 0, .6); } html.dark-mode .site-header { background-color: rgba(17, 17, 17, .96); } html.dark-mode .logo-box { background: linear-gradient(180deg, #1A1A1A 0%, #222222 100%); } html.dark-mode .section:nth-of-type(even) { background-color: #161616; } html.dark-mode .mobile-drawer-content { background-color: #111111; } html.dark-mode .pdf-thumb, html.dark-mode .pdf-item { background-color: #1A1A1A; } html.dark-mode .berimbau-item, html.dark-mode .toque-rules-list { background-color: #1E1E1E; } html.dark-mode .lightbox-content { background-color: #000000; } html.dark-mode .site-footer { background-color: #000000; } /* -------------------------------------------------------------------------- 3. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-body); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color var(--dur-base), color var(--dur-base); } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast); } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul, ol { list-style: none; } .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 1rem; } .text-gold { color: var(--color-gold) !important; } .text-center { text-align: center; } /* -------------------------------------------------------------------------- 4. SEÇÕES -------------------------------------------------------------------------- */ .section { padding: 2.25rem 0; border-bottom: 1px solid var(--color-border); background-color: var(--color-bg); } .section:nth-of-type(even) { background-color: var(--color-bg-light); } @media (min-width: 768px) { .section { padding: 3rem 0; } } .section-header { margin-bottom: 1.35rem; } .section-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: var(--r-full); background: var(--color-gold-light); color: var(--color-gold); font-family: var(--font-head); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .35rem; border: 1px solid var(--color-gold-border); } .section-title { font-family: var(--font-head); font-size: 1.45rem; font-weight: 800; color: var(--color-title); line-height: 1.25; margin-bottom: .3rem; } @media (min-width: 768px) { .section-title { font-size: 1.8rem; } } .title-divider { width: 42px; height: 3px; background: var(--color-gold-gradient); border-radius: var(--r-full); margin: .35rem auto; } .section-subtitle { font-size: .88rem; color: var(--color-muted); max-width: 620px; margin-inline: auto; } .compact-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 1.15rem; box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .compact-card:hover { border-color: var(--color-gold-border); box-shadow: var(--shadow-md); } /* -------------------------------------------------------------------------- 5. BOTÕES -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem 1.2rem; font-family: var(--font-head); font-weight: 700; font-size: .85rem; border-radius: var(--r-md); transition: all var(--dur-base); text-align: center; user-select: none; touch-action: manipulation; } .btn:active { transform: scale(.98); } .btn-sm { padding: .4rem .85rem; font-size: .78rem; border-radius: var(--r-sm); } .btn-lg { padding: .85rem 1.6rem; font-size: .95rem; } .btn-block { display: flex; width: 100%; } @media (max-width: 640px) { .btn { padding: .5rem .9rem; font-size: .8rem; gap: .35rem; } .btn-sm { padding: .32rem .65rem; font-size: .74rem; } .btn-lg { padding: .65rem 1.1rem; font-size: .84rem; } } .btn-gold { background: var(--color-gold-gradient); color: #fff; box-shadow: 0 2px 8px rgba(198, 146, 20, .3); } .btn-gold:hover { background: linear-gradient(135deg, #F0B74B 0%, #B28210 100%); transform: translateY(-1px); } .btn-outline-dark { background: transparent; color: var(--color-title); border: 1.5px solid var(--color-border-2); } .btn-outline-dark:hover { border-color: var(--color-gold); color: var(--color-gold); background: var(--color-gold-light); } .btn-whatsapp { background: var(--color-whatsapp); color: #fff; } .btn-whatsapp:hover { background: var(--color-whatsapp-hover); } /* -------------------------------------------------------------------------- 6. HEADER -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 1000; background-color: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); height: var(--header-h); display: flex; align-items: center; transition: all var(--dur-fast); } .site-header.scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--color-gold-border); } .header-container { display: flex; align-items: center; justify-content: space-between; } .brand-logo { display: flex; align-items: center; gap: .55rem; } .logo-img { width: 42px; height: auto; } .brand-text { display: flex; flex-direction: column; } .brand-acronym { font-family: var(--font-head); font-weight: 900; font-size: 1.1rem; line-height: 1; color: var(--color-title); letter-spacing: .5px; } .brand-name { font-size: .68rem; font-weight: 600; color: var(--color-gold); } .desktop-nav { display: none; } @media (min-width: 880px) { .desktop-nav { display: block; } } .nav-list { display: flex; align-items: center; gap: 1.15rem; } .nav-link { font-family: var(--font-head); font-size: .82rem; font-weight: 600; color: var(--color-body); position: relative; padding: .25rem 0; } .nav-link:hover, .nav-link.active { color: var(--color-gold); } .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--color-gold); border-radius: 2px; } .header-actions { display: flex; align-items: center; gap: .45rem; } @media (min-width: 768px) { .header-actions { gap: .6rem; } } /* Botão Dark/Light */ .btn-theme-toggle { width: 30px; height: 30px; border-radius: var(--r-full); background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-muted); display: flex; align-items: center; justify-content: center; font-size: .82rem; transition: all var(--dur-fast); cursor: pointer; } @media (min-width: 768px) { .btn-theme-toggle { width: 36px; height: 36px; font-size: .95rem; } } .btn-theme-toggle:hover { background: var(--color-gold-light); border-color: var(--color-gold-border); color: var(--color-gold); } html.dark-mode .btn-theme-toggle { background: #222; border-color: #3A3A3A; color: #F1C40F; } /* Hambúrguer */ .hamburger-btn { display: flex; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; padding: 1px; } @media (min-width: 880px) { .hamburger-btn { display: none; } } .hamburger-bar { width: 100%; height: 2.2px; background: var(--color-title); border-radius: 2px; } /* -------------------------------------------------------------------------- 7. MENU MOBILE (DRAWER) -------------------------------------------------------------------------- */ .mobile-drawer { position: fixed; inset: 0; z-index: 2000; visibility: hidden; transition: visibility var(--dur-fast); } .mobile-drawer.open { visibility: visible; } .mobile-drawer-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, .6); opacity: 0; transition: opacity var(--dur-base); } .mobile-drawer.open .mobile-drawer-overlay { opacity: 1; } .mobile-drawer-content { position: absolute; top: 0; right: 0; bottom: 0; width: 82%; max-width: 300px; background: var(--color-bg); padding: 1.15rem; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-base); box-shadow: -4px 0 20px rgba(0, 0, 0, .15); } .mobile-drawer.open .mobile-drawer-content { transform: translateX(0); } .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: .85rem; border-bottom: 1px solid var(--color-border); margin-bottom: .85rem; } .mobile-brand { display: flex; align-items: center; gap: .5rem; } .mobile-brand strong { display: block; font-family: var(--font-head); font-size: .95rem; color: var(--color-title); line-height: 1; } .mobile-brand small { font-size: .72rem; color: var(--color-gold); } .btn-close-drawer { font-size: 1.25rem; color: var(--color-muted); } .mobile-nav-list { display: flex; flex-direction: column; gap: .35rem; flex-grow: 1; overflow-y: auto; } .mobile-nav-link { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: var(--r-sm); font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--color-title); } .mobile-nav-link:hover, .mobile-nav-link.active { background: var(--color-gold-light); color: var(--color-gold); } .mobile-drawer-footer { padding-top: .85rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: .5rem; } /* -------------------------------------------------------------------------- 8. HERO -------------------------------------------------------------------------- */ .hero-section { background: var(--color-bg); padding: 1.85rem 0 2rem; border-bottom: 1px solid var(--color-border); } .hero-container { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; } @media (min-width: 860px) { .hero-container { grid-template-columns: 1.25fr .75fr; gap: 2.5rem; padding-block: 1rem; } } .badge-subtle { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; background: var(--color-gold-light); border: 1px solid var(--color-gold-border); border-radius: var(--r-full); font-family: var(--font-head); font-size: .72rem; font-weight: 700; color: var(--color-gold); margin-bottom: .65rem; } .hero-title { font-family: var(--font-head); font-size: 1.65rem; font-weight: 900; line-height: 1.2; color: var(--color-title); margin-bottom: .65rem; } @media (min-width: 768px) { .hero-title { font-size: 2.2rem; } } .hero-slogan { font-size: .92rem; font-weight: 600; color: var(--color-gold); line-height: 1.45; margin-bottom: .65rem; } .hero-text { font-size: .85rem; color: var(--color-body); line-height: 1.5; margin-bottom: 1.15rem; } .hero-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.15rem; } .hero-pills { display: flex; flex-wrap: wrap; gap: .4rem; } .pill-item { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; color: var(--color-muted); background: var(--color-bg-light); border: 1px solid var(--color-border); padding: .25rem .55rem; border-radius: var(--r-full); } .hero-visual { display: flex; justify-content: center; align-items: center; } .logo-box { display: flex; flex-direction: column; align-items: center; padding: 1.25rem; background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-light) 100%); border: 1px solid var(--color-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); text-align: center; } .hero-logo-img { max-width: 190px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .08)); } .logo-caption { font-size: .75rem; font-weight: 700; color: var(--color-gold); margin-top: .5rem; } /* -------------------------------------------------------------------------- 9. AÇÕES SOCIAIS -------------------------------------------------------------------------- */ .social-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.15rem; } @media (min-width: 680px) { .social-grid { grid-template-columns: repeat(3, 1fr); } } .social-item { display: flex; gap: .75rem; align-items: flex-start; } .social-item h4 { font-family: var(--font-head); font-size: .9rem; font-weight: 700; color: var(--color-title); margin-bottom: .2rem; } .social-item p { font-size: .8rem; color: var(--color-muted); line-height: 1.45; } .social-action-bar { display: flex; flex-direction: column; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--color-border); align-items: flex-start; } @media (min-width: 600px) { .social-action-bar { flex-direction: row; align-items: center; justify-content: space-between; } } .social-action-text strong { display: block; font-size: .85rem; color: var(--color-title); } .social-action-text small { font-size: .75rem; color: var(--color-muted); } /* -------------------------------------------------------------------------- 10. A ESCOLA (PILARES) -------------------------------------------------------------------------- */ .pillars-compact-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; margin-bottom: 1.15rem; } @media (min-width: 640px) { .pillars-compact-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .pillars-compact-grid { grid-template-columns: repeat(4, 1fr); } } .pillar-mini-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 1.15rem 1rem; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast), border-color var(--dur-fast); } .pillar-mini-card:hover { transform: translateY(-2px); border-color: var(--color-gold); } .pillar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; } .pillar-badge { font-family: var(--font-head); font-size: .72rem; font-weight: 800; color: var(--color-gold); background: var(--color-gold-light); padding: .18rem .5rem; border-radius: var(--r-sm); border: 1px solid var(--color-gold-border); } .pillar-mini-card h4 { font-family: var(--font-head); font-size: .98rem; font-weight: 700; color: var(--color-title); margin-bottom: .45rem; } .pillar-mini-card p { font-size: .86rem; color: var(--color-body); line-height: 1.55; } .pillar-mini-card p strong { color: var(--color-title); font-weight: 700; } html.dark-mode .pillar-mini-card { background: #181818; border-color: #2D2D2D; } html.dark-mode .pillar-mini-card p { color: #E2E8F0; } html.dark-mode .pillar-mini-card p strong { color: #FFFFFF; } .capacitacao-compact { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm); } .cap-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; } .cap-header h4 { font-family: var(--font-head); font-size: .9rem; font-weight: 700; color: var(--color-title); } .cap-chips-grid { display: flex; flex-wrap: wrap; gap: .4rem; } .cap-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--color-bg-light); border: 1px solid var(--color-border); padding: .35rem .65rem; border-radius: var(--r-full); font-size: .76rem; font-weight: 500; color: var(--color-body); } .cap-chip.highlight-chip { background: var(--color-gold-light); border-color: var(--color-gold-border); font-weight: 700; color: var(--color-title); } html.dark-mode .cap-chip { background: #222222; border-color: #333333; color: #E2E8F0; } html.dark-mode .cap-chip.highlight-chip { background: rgba(198, 146, 20, 0.22); border-color: var(--color-gold); color: #FFFFFF; } /* -------------------------------------------------------------------------- 11. BATERIA & TOQUES -------------------------------------------------------------------------- */ .rules-compact-strip { display: grid; grid-template-columns: 1fr; gap: .65rem; margin-bottom: 1.15rem; } @media (min-width: 680px) { .rules-compact-strip { grid-template-columns: repeat(3, 1fr); } } .rule-box { display: flex; gap: .6rem; align-items: flex-start; background: var(--color-bg); border: 1px solid var(--color-border); border-left: 3px solid var(--color-gold); border-radius: var(--r-sm); padding: .75rem .85rem; box-shadow: var(--shadow-sm); } .rule-icon { color: var(--color-gold); font-size: .82rem; margin-top: 2px; } .rule-box strong { display: block; font-size: .82rem; color: var(--color-title); margin-bottom: .15rem; } .rule-box span { font-size: .76rem; color: var(--color-muted); line-height: 1.4; } .toques-compact-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 1.15rem; margin-bottom: 1.15rem; box-shadow: var(--shadow-sm); } .toques-tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--color-border); padding-bottom: .6rem; margin-bottom: .85rem; } .toque-tab { padding: .45rem .85rem; font-family: var(--font-head); font-size: .8rem; font-weight: 700; color: var(--color-muted); border-radius: var(--r-sm); transition: all var(--dur-fast); display: inline-flex; align-items: center; gap: .4rem; } .toque-tab.active { background: var(--color-gold-light); color: var(--color-gold); border: 1px solid var(--color-gold-border); } .toque-panel { display: none; } .toque-panel.active { display: block; } .berimbaus-grid { display: grid; grid-template-columns: 1fr; gap: .65rem; margin-bottom: .85rem; } @media (min-width: 600px) { .berimbaus-grid { grid-template-columns: repeat(3, 1fr); } } .berimbau-item { background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--r-sm); padding: .75rem; text-align: center; position: relative; } .b-num { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; background: var(--color-gold); color: #fff; border-radius: 50%; font-size: .65rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .berimbau-item strong { display: block; font-family: var(--font-head); font-size: .85rem; color: var(--color-title); margin-top: .35rem; } .b-toque { display: block; font-size: .76rem; font-weight: 700; margin: .2rem 0; } .berimbau-item small { font-size: .72rem; color: var(--color-muted); } .toque-note { display: flex; gap: .5rem; align-items: flex-start; background: var(--color-bg-light); border-radius: var(--r-sm); padding: .75rem .85rem; font-size: .78rem; color: var(--color-body); } /* Páginas PDF da bateria — fundo branco nítido */ .pdf-docs-compact { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 1.15rem; margin-bottom: 1.15rem; box-shadow: var(--shadow-sm); } .pdf-docs-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem; flex-wrap: wrap; } .pdf-docs-header h4 { font-family: var(--font-head); font-size: .92rem; font-weight: 700; color: var(--color-title); } .pdf-docs-header small { font-size: .75rem; color: var(--color-muted); } .pdf-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; } @media (min-width: 768px) { .pdf-grid-4 { grid-template-columns: repeat(4, 1fr); } } .pdf-item { cursor: pointer; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-sm); overflow: hidden; transition: transform var(--dur-fast), border-color var(--dur-fast); } .pdf-item:hover { transform: translateY(-2px); border-color: var(--color-gold); } .pdf-thumb { position: relative; background: #fff; padding: .35rem; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pdf-thumb img { width: 100%; height: 100%; object-fit: contain; } .zoom-badge { position: absolute; bottom: 5px; right: 5px; background: rgba(15, 23, 42, .75); color: #fff; font-size: .62rem; padding: .12rem .35rem; border-radius: 4px; display: inline-flex; align-items: center; gap: .25rem; } .pdf-title { display: block; font-size: .72rem; font-weight: 600; color: var(--color-title); padding: .4rem .5rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--color-border); } /* Ordem linear dos instrumentos */ .lineup-compact { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: .75rem .85rem; } .lineup-title strong { display: block; font-size: .8rem; color: var(--color-title); margin-bottom: .45rem; } .lineup-items { display: flex; flex-wrap: wrap; gap: .35rem; } .inst-pill { font-size: .72rem; padding: .2rem .5rem; background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--r-full); color: var(--color-body); } .inst-pill.highlight { background: var(--color-gold-light); border-color: var(--color-gold-border); font-weight: 700; color: var(--color-gold); } /* -------------------------------------------------------------------------- 12. SISTEMA DE GRADUAÇÃO -------------------------------------------------------------------------- */ .poster-display-card { max-width: 680px; margin-inline: auto; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 1.15rem; box-shadow: var(--shadow-sm); text-align: center; } .poster-preview-box { position: relative; cursor: pointer; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--color-border); margin-bottom: 1.15rem; background: var(--color-bg-light); } .poster-preview-img { width: 100%; max-height: 220px; object-fit: cover; object-position: top center; transition: transform var(--dur-base); } .poster-preview-box:hover .poster-preview-img { transform: scale(1.02); } .poster-overlay-cta { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; opacity: .92; transition: opacity var(--dur-fast); } .poster-preview-box:hover .poster-overlay-cta { opacity: 1; } .poster-overlay-cta span { font-family: var(--font-head); font-size: .82rem; font-weight: 700; } .poster-actions-center { display: flex; flex-direction: column; align-items: center; gap: .65rem; } .poster-note { font-size: .82rem; color: var(--color-body); max-width: 520px; line-height: 1.5; } .poster-note strong { color: var(--color-title); } /* -------------------------------------------------------------------------- 13. DIRETORIA (CARDS QUADRADOS E RESPONSIVOS) -------------------------------------------------------------------------- */ .directors-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 760px; margin-inline: auto; } @media (max-width: 639px) { .directors-grid { max-width: 320px; } } @media (min-width: 640px) { .directors-grid { grid-template-columns: repeat(2, 1fr); } } .director-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); display: flex; flex-direction: column; } .director-card:hover { transform: translateY(-3px); border-color: var(--color-gold); box-shadow: var(--shadow-md); } /* Caixa de imagem QUADRADA, 100% RESPONSIVA */ .director-img-box { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--color-bg-alt); overflow: hidden; cursor: pointer; } .director-img-box img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform var(--dur-base); display: block; } .director-card:hover .director-img-box img { transform: scale(1.04); } .director-tag { position: absolute; bottom: 8px; left: 8px; background: rgba(15, 23, 42, .85); color: var(--color-gold); font-family: var(--font-head); font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: .18rem .5rem; border-radius: 4px; border: 1px solid var(--color-gold-border); letter-spacing: .5px; } .director-info { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex-grow: 1; } .director-info h3 { font-family: var(--font-head); font-size: .95rem; font-weight: 800; color: var(--color-title); line-height: 1.25; } .director-subtitle { display: block; font-size: .72rem; font-weight: 600; color: var(--color-gold); margin-bottom: .2rem; } .director-info p { font-size: .78rem; color: var(--color-muted); line-height: 1.45; margin-bottom: .65rem; flex-grow: 1; } /* -------------------------------------------------------------------------- 14. CONTATO -------------------------------------------------------------------------- */ .contato-compact-box { max-width: 620px; margin-inline: auto; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 1.15rem; box-shadow: var(--shadow-sm); } .contato-items { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.15rem; } .c-item { display: flex; align-items: flex-start; gap: .65rem; } .c-item i { font-size: 1.1rem; margin-top: 2px; } .c-item strong { display: block; font-size: .82rem; color: var(--color-title); } .c-item span { font-size: .78rem; color: var(--color-muted); } /* -------------------------------------------------------------------------- 15. RODAPÉ -------------------------------------------------------------------------- */ .site-footer { background: var(--color-title); color: #fff; padding: 1.6rem 0 1rem; font-size: .78rem; transition: background-color var(--dur-base); } .footer-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .footer-brand { display: flex; align-items: center; gap: .6rem; } .footer-logo { width: 44px; height: auto; } .footer-title { display: block; font-family: var(--font-head); font-size: 1rem; font-weight: 800; color: #fff; line-height: 1; } .footer-brand small { font-size: .7rem; color: var(--color-gold); } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.25rem; } .footer-links a { color: #94A3B8; font-weight: 500; } .footer-links a:hover { color: var(--color-gold); } .footer-bottom { padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .1); width: 100%; font-size: .72rem; color: #94A3B8; } /* -------------------------------------------------------------------------- 16. MODAIS (PIX & LIGHTBOX) -------------------------------------------------------------------------- */ dialog { border: none; background: transparent; padding: 0; max-width: 95vw; margin: auto; } dialog::backdrop { background: rgba(15, 23, 42, .78); backdrop-filter: blur(4px); } .modal-content { background: var(--color-bg); border-radius: var(--r-md); padding: 1.15rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--color-border); } .modal-title-wrap { display: flex; align-items: center; gap: .5rem; } .modal-title-wrap h3 { font-family: var(--font-head); font-size: .95rem; font-weight: 800; color: var(--color-title); line-height: 1.2; } .modal-title-wrap small { font-size: .72rem; color: var(--color-muted); display: block; } .btn-close-modal { font-size: 1.15rem; color: var(--color-muted); } .modal-body p { font-size: .8rem; color: var(--color-muted); line-height: 1.45; margin-bottom: .85rem; } .pix-card { background: var(--color-bg-light); border: 1px dashed var(--color-gold); border-radius: var(--r-sm); padding: .65rem .75rem; margin-bottom: .85rem; } .pix-label { display: block; font-size: .72rem; font-weight: 700; color: var(--color-gold); margin-bottom: .25rem; } .pix-box { display: flex; align-items: center; justify-content: space-between; gap: .4rem; background: var(--color-bg); border: 1px solid var(--color-border); padding: .35rem .5rem; border-radius: var(--r-sm); } .pix-box code { font-family: monospace; font-size: .8rem; font-weight: 700; color: var(--color-title); overflow: hidden; text-overflow: ellipsis; } .btn-copy-pix { background: var(--color-gold); color: #fff; padding: .25rem .55rem; border-radius: 4px; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; } .btn-copy-pix:hover { background: var(--color-gold-hover); } .pix-caption { display: block; font-size: .7rem; color: var(--color-muted); margin-top: .35rem; } /* -------------------------------------------------------------------------- 17. BOTÕES FLUTUANTES & TOAST -------------------------------------------------------------------------- */ .floating-controls { position: fixed; bottom: .6rem; right: .5rem; z-index: 1000; display: flex; flex-direction: column; gap: .35rem; } /* -------------------------------------------------------------------------- 17. BOTÕES FLUTUANTES & TOAST -------------------------------------------------------------------------- */ .floating-controls { position: fixed; bottom: .6rem; right: .5rem; z-index: 1000; display: flex; flex-direction: column; gap: .35rem; } /* Mobile: botões super compactos para não tampar texto */ .float-btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .88rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform var(--dur-fast); } /* Desktop: tamanho normal */ @media (min-width: 768px) { .float-btn { width: 44px; height: 44px; font-size: 1.15rem; } .floating-controls { bottom: 1.25rem; right: 1.25rem; gap: .5rem; } } .float-btn:hover { transform: scale(1.08); } .float-whatsapp { background: var(--color-whatsapp); color: #fff; } .float-backtop { background-color: #111111 !important; color: #C69214 !important; font-size: .9rem; opacity: 0; pointer-events: none; border: 1px solid var(--color-gold-border, rgba(198, 146, 20, 0.4)); transition: opacity var(--dur-fast), transform var(--dur-fast), background-color var(--dur-fast); } .float-backtop i, .float-backtop svg { color: #C69214 !important; fill: #C69214 !important; } .float-backtop.visible { opacity: 1; pointer-events: auto; } .float-backtop:hover { background-color: #C69214 !important; color: #ffffff !important; } .float-backtop:hover i, .float-backtop:hover svg { color: #ffffff !important; fill: #ffffff !important; } .toast-notification { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--color-title); color: #fff; padding: .55rem 1.1rem; border-radius: var(--r-full); font-size: .8rem; font-weight: 600; z-index: 2100; box-shadow: var(--shadow-md); transition: transform var(--dur-base); pointer-events: none; display: flex; align-items: center; gap: .4rem; } .toast-notification.visible { transform: translateX(-50%) translateY(0); } /* /* ========================================================================== CORREÇÃO DE CONTRASTE E CORTE NO MODO CLARO (LIGHT MODE) & ESCURO ========================================================================== */ /* 1. Evita que o topo do círculo da imagem seja cortado */ .pillar-card { padding-top: 1.5rem !important; overflow: visible !important; } .pillar-img-wrapper { margin-top: 0 !important; display: block !important; } /* 2. Ajuste de cores para MODO CLARO (padrão) */ html:not(.dark-mode) .pillar-card p { color: #555555 !important; } html:not(.dark-mode) .escola-content-original p, html:not(.dark-mode) .card p { color: #333333 !important; /* Texto escuro no fundo claro */ } /* 3. Ajuste de cores para MODO ESCURO (força alta visibilidade) */ html.dark-mode .escola-content-original p, html.dark-mode .card p, html.dark-mode .pillar-card p { color: #E2E8F0 !important; /* Texto claro e bem visível no fundo escuro */ } /* ========================================================================== MODAL DE BIOGRAFIA (FIX DE DUPLICAÇÃO, TEMA E SCROLL) ========================================================================== */ /* 1. Limpa o Container NATIVO do Dialog para evitar a caixa duplicada por trás */ dialog#bio-dialog { background: transparent !important; border: none !important; padding: 0 !important; max-width: 480px; width: 90%; box-shadow: none !important; overflow: visible !important; } /* Estiliza a caixa REAL do conteúdo dentro do modal */ dialog#bio-dialog .modal-content { background-color: var(--color-bg, #ffffff) !important; color: var(--color-body, #334155) !important; border: 1px solid var(--color-gold-border, rgba(198, 146, 20, 0.4)) !important; border-radius: var(--r-md, 12px); padding: 1.5rem 1.25rem; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.5)); transition: background-color var(--dur-base), color var(--dur-base); } /* 2. Imagem Redonda Centralizada */ dialog#bio-dialog .bio-img-container { width: 130px; height: 130px; margin: 0 auto 1.2rem auto; border-radius: 50%; overflow: hidden; border: 3px solid var(--color-gold, #C69214); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); flex-shrink: 0; } dialog#bio-dialog .bio-img-container img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 3. Textos do Modal */ dialog#bio-dialog #bio-modal-title { color: var(--color-gold, #C69214) !important; font-family: var(--font-head); font-weight: 800; } dialog#bio-dialog #bio-modal-role { color: var(--color-muted, #64748B) !important; } dialog#bio-dialog #bio-modal-text { color: var(--color-body, #334155) !important; white-space: pre-line; text-align: left; line-height: 1.6; font-size: 0.92rem; max-height: 50vh; /* Aumentado para dar mais espaço */ overflow-y: auto; padding-right: 6px; padding-bottom: 1rem; /* Margem inferior para o texto não colar no final */ /* Oculta barra visual mantendo rolagem funcional */ scrollbar-width: none; -ms-overflow-style: none; } dialog#bio-dialog #bio-modal-text::-webkit-scrollbar { display: none; width: 0; height: 0; } dialog#bio-dialog .btn-close-modal { background: transparent; border: none; color: var(--color-muted, #64748B); font-size: 1.2rem; cursor: pointer; transition: color var(--dur-fast); } dialog#bio-dialog .btn-close-modal:hover { color: var(--color-gold, #C69214); } /* 4. Suporte ao MODO ESCURO (html.dark-mode) */ html.dark-mode dialog#bio-dialog .modal-content { background-color: var(--color-bg-light, #181818) !important; border-color: var(--color-gold-border, rgba(198, 146, 20, 0.4)) !important; } html.dark-mode dialog#bio-dialog #bio-modal-text { color: #E2E8F0 !important; /* Texto claro no escuro */ } html.dark-mode dialog#bio-dialog #bio-modal-role { color: #A0AEC0 !important; } html.dark-mode dialog#bio-dialog .btn-close-modal { color: #A0AEC0; } /* Oculta a barra de rolagem visual mantendo a capacidade de rolar */ html, body { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; /* Chrome, Safari e simuladores mobile */ width: 0; height: 0; } /* Ajuste para centralizar o rosto na imagem da modal de biografia */ #bio-modal-img { width: 150px; /* ou o tamanho configurado no seu layout */ height: 150px; /* mantém o container redondo */ object-fit: cover; /* preenche o círculo sem distorcer */ object-position: top center; /* alinha a imagem pelo topo para focar no rosto */ border-radius: 50%; } /* ========================================================================== SECÇÃO DO MESTRE ========================================================================== */ .mestre-section { padding: 3rem 0; } .mestre-card { background: var(--color-surface, #1e1e1e); border: 1px solid var(--color-gold-border, rgba(198, 146, 20, 0.3)); border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; max-width: 800px; margin: 0 auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } @media (min-width: 768px) { .mestre-card { flex-direction: row; text-align: left; padding: 2.5rem; } } .mestre-img-wrapper { position: relative; flex-shrink: 0; } .mestre-img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; border: 3px solid #C69214; box-shadow: 0 0 15px rgba(198, 146, 20, 0.3); } .mestre-badge-year { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); background: #C69214; color: #000; font-weight: 700; font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 20px; white-space: nowrap; } .mestre-info h3 { font-size: 1.5rem; color: #ffffff; margin-bottom: 0.25rem; } .mestre-subtitle { color: #C69214; font-size: 0.95rem; font-weight: 600; margin-bottom: 1rem; } .mestre-bio { color: #cccccc; line-height: 1.6; font-size: 0.95rem; } /* ========================================================================== LIGHTBOX & CARROSSEL MODAL (ROBUSTO E 100% RESPONSIVO PARA MOBILE/SAFARI) ========================================================================== */ /* Container Principal Dialog */ .lightbox-dialog { border: 1px solid rgba(198, 146, 20, 0.45); background: rgba(15, 15, 15, 0.97); padding: 3rem 1rem 1rem; border-radius: 16px; width: 95vw; max-width: 820px; min-height: 420px; max-height: 88vh; margin: auto; overflow: hidden; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-sizing: border-box; position: relative; } .lightbox-dialog[open] { display: flex !important; flex-direction: column !important; align-items: center !important; } .lightbox-dialog::backdrop { background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Estrutura interna */ .lightbox-content { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; flex: 1 1 auto; min-height: 320px; } /* Alerta de Deslize */ .alerta-deslize { background: var(--color-gold-gradient); color: #1A1200; padding: 6px 14px; border-radius: 20px; text-align: center; font-weight: 700; font-size: 0.8rem; margin-bottom: 12px; box-shadow: 0 3px 10px rgba(198, 146, 20, .35); max-width: calc(100% - 60px); } /* Carrossel de Imagens */ .carrossel-modal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; width: 100%; flex: 1 1 auto; min-height: 280px; align-items: center; scrollbar-width: none; touch-action: pan-x; } .carrossel-modal::-webkit-scrollbar { display: none; } /* Item do Carrossel */ .carrossel-item { min-width: 100%; width: 100%; min-height: 280px; display: flex; justify-content: center; align-items: center; scroll-snap-align: center; scroll-snap-stop: always; flex-shrink: 0; padding: 0.25rem 0; } .carrossel-item img { max-height: 60vh; max-width: 100%; min-height: 200px; width: auto; height: auto; object-fit: contain; border-radius: 8px; display: block; } /* Indicadores/Dots */ .carrossel-indicadores { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 0; } .carrossel-indicadores .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: all 0.3s ease; } .carrossel-indicadores .dot.active { background: var(--color-gold); width: 24px; border-radius: 6px; } /* Botão Fechar */ .lightbox-close { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; z-index: 100; transition: background 0.2s ease, transform 0.2s ease; } .lightbox-close:hover { background: var(--color-gold); color: #1A1200; transform: scale(1.08); } /* Ajustes para Telas Pequenas / Mobile */ @media (max-width: 600px) { .lightbox-dialog { width: 96vw; min-height: 360px; padding: 3.2rem 0.5rem 0.75rem; } .lightbox-content { min-height: 260px; } .carrossel-modal { min-height: 240px; } .carrossel-item { min-height: 240px; } .carrossel-item img { max-height: 52vh; min-height: 180px; } }