/* Theme Name: Bricks Child Theme URI: https://bricksbuilder.io/ Author: Fabio Description: Child theme for Bricks. Put all your customisations here so parent theme updates never overwrite them. Version: 1.1.0 Template: bricks License: GPLv2 License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: bricks-child Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready */ /* ------------------------------------------------------------------ Your custom CSS goes below this line. Loaded after the parent Bricks stylesheets, so it always wins. ------------------------------------------------------------------ */ /* ================================================================== 1. PALETA — "White + Blue + Strong Orange" Fonte: palette-blue-orange.html Azul faz a estrutura (nav, links, botão primário); laranja é o único acento forte (CTA). ================================================================== */ :root { /* ---- Azul azure (primário) ---- */ --blue-50: #EAF3FB; /* tint bg */ --blue-100: #CFE4F6; /* hover bg */ --blue-200: #A3CCEE; /* borders */ --blue-300: #6FB0E6; /* dark-mode text */ --blue-400: #3D93DC; /* accents */ --blue-500: #1F7FD1; /* primary/links */ --blue-600: #1668B4; /* hover */ --blue-700: #12538F; /* pressed */ --blue-800: #123F6B; /* navy header */ --blue-900: #0E2A47; /* deep */ /* ---- Laranja (acento forte) ---- */ --or-400: #FF8C33; /* dark strong */ --or-500: #FF7A1A; /* strong CTA */ --or-600: #E8650A; /* hover */ --or-700: #C25207; /* pressed */ --or-soft: #E8823C; /* CTA mais calmo (alternativa) */ /* ---- Tokens semânticos — modo claro (padrão) ---- */ --bg: #FFFFFF; --surface: #F6F9FC; --border: #D9E6F2; --text: #132132; --muted: #5C6E85; --nav: var(--blue-800); --primary: var(--blue-500); --primary-hover: var(--blue-600); --primary-active: var(--blue-700); --strong: var(--or-500); --strong-hover: var(--or-600); --strong-active: var(--or-700); --on-strong: #3D1A00; --on-primary: #FFFFFF; --card-shadow: 0 1px 2px rgba(19, 33, 50, .05), 0 8px 24px rgba(19, 33, 50, .06); /* ---- Mapeamento para as variáveis nativas do Bricks ---- Assim todos os elementos que usam "primary/secondary/dark/light" no builder já saem na paleta, sem precisar reconfigurar nada. */ --bricks-color-primary: var(--primary); --bricks-color-secondary: var(--strong); --bricks-text-dark: var(--text); --bricks-text-medium: var(--muted); --bricks-text-light: #8A9BB0; --bricks-text-info: var(--blue-400); --bricks-bg-info: var(--blue-50); --bricks-bg-dark: var(--nav); --bricks-bg-light: var(--surface); --bricks-border-color: var(--border); } /* ---- Modo escuro (opt-in) ---- Ativado apenas com ou . NÃO segue prefers-color-scheme automaticamente — decisão consciente para não mudar a aparência do site em produção sem controle. */ html[data-mode="dark"], html.dark { --bg: #0A0F16; --surface: #131B26; --border: #243546; --text: #E7EEF7; --muted: #93A6BD; --nav: #0E1826; --primary: #5AA6E6; --primary-hover: #7FBDF0; --primary-active: #A3CCEE; --strong: var(--or-400); --strong-hover: #FFA05C; --strong-active: var(--or-500); --on-strong: #2B1200; --on-primary: #0A0F16; --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .5); --bricks-text-light: #6B7F97; --bricks-bg-info: #12263A; color-scheme: dark; } /* ================================================================== 2. BASE — aplica os tokens aos elementos globais ================================================================== */ body { background-color: var(--bg); color: var(--text); } h1, h2, h3, h4, h5, h6 { color: var(--text); } a { color: var(--primary); transition: color .15s ease; } a:hover, a:focus-visible { color: var(--primary-hover); } ::selection { background-color: var(--blue-100); color: var(--text); } hr { border-color: var(--border); } /* Foco visível consistente com a paleta */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ================================================================== 3. BOTÕES DO BRICKS primary -> azul (ação padrão) secondary -> laranja (o único CTA forte) ================================================================== */ .bricks-button.bricks-background-primary { background-color: var(--primary); color: var(--on-primary); transition: background-color .15s ease, color .15s ease; } .bricks-button.bricks-background-primary:hover, .bricks-button.bricks-background-primary:focus-visible { background-color: var(--primary-hover); color: var(--on-primary); } .bricks-button.bricks-background-primary:active { background-color: var(--primary-active); } .bricks-button.bricks-background-secondary { background-color: var(--strong); color: var(--on-strong); transition: background-color .15s ease, color .15s ease; } .bricks-button.bricks-background-secondary:hover, .bricks-button.bricks-background-secondary:focus-visible { background-color: var(--strong-hover); color: var(--on-strong); } .bricks-button.bricks-background-secondary:active { background-color: var(--strong-active); } /* Botões outline ("ghost") herdam a cor da borda/texto da paleta */ .bricks-button.outline.bricks-color-primary { border-color: var(--border); color: var(--primary); } .bricks-button.outline.bricks-color-primary:hover { border-color: var(--primary); } .bricks-button.outline.bricks-color-secondary { border-color: var(--strong); color: var(--strong); } /* ================================================================== 4. SUPERFÍCIES / UTILITÁRIOS Classes utilitárias prontas para usar no builder. ================================================================== */ .bricks-background-light { background-color: var(--surface); } .bricks-background-dark { background-color: var(--nav); color: #FFFFFF; } .hx-nav { background-color: var(--nav); color: #FFFFFF; } .hx-nav a { color: #FFFFFF; opacity: .9; } .hx-nav a:hover { color: #FFFFFF; opacity: 1; } .hx-surface { background-color: var(--surface); } .hx-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--card-shadow); } .hx-muted { color: var(--muted); } .hx-strong { color: var(--strong); } /* ================================================================== 5. HEADER — logo à esquerda, toggle (busca + menu) à direita, overlay com busca no topo e menu_header abaixo. Markup em includes/header.php · JS em assets/js/header.js ================================================================== */ .hx-header { background-color: var(--nav); color: #FFFFFF; position: relative; z-index: 100; } .hx-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 0 20px; min-height: 64px; } .hx-header__logo { display: inline-flex; align-items: center; line-height: 0; color: #FFFFFF; } .hx-header__logo img { height: 28px; width: auto; max-width: 100%; display: block; } .hx-header__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; color: #FFFFFF; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .hx-header__toggle:hover, .hx-header__toggle:focus-visible { color: #FFFFFF; background-color: rgba(255, 255, 255, .10); } .hx-header__toggle:focus-visible { outline: 2px solid var(--strong); outline-offset: 2px; } .hx-icon { width: 24px; height: 24px; display: block; flex: none; } /* ---- Overlay ---- */ .hx-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background-color: rgba(14, 24, 38, .96); /* navy escuro */ color: #FFFFFF; overflow-y: auto; -webkit-overflow-scrolling: touch; } .hx-overlay.is-open, .hx-overlay:target { display: block; } html.hx-overlay-open { overflow: hidden; } .hx-overlay__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px 48px; } .hx-overlay__top { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } .hx-search { display: flex; flex: 1 1 auto; align-items: center; background-color: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; overflow: hidden; transition: border-color .15s ease, background-color .15s ease; } .hx-search:focus-within { border-color: var(--primary); background-color: rgba(255, 255, 255, .12); } .hx-search__input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: #FFFFFF; font-size: 17px; padding: 12px 16px; outline: none; appearance: none; -webkit-appearance: none; } .hx-search__input::placeholder { color: rgba(255, 255, 255, .6); } .hx-search__input::-webkit-search-decoration, .hx-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } .hx-search__submit { flex: none; display: inline-flex; align-items: center; justify-content: center; background-color: var(--strong); color: var(--on-strong); border: 0; padding: 0 16px; align-self: stretch; cursor: pointer; transition: background-color .15s ease; } .hx-search__submit:hover, .hx-search__submit:focus-visible { background-color: var(--strong-hover); } .hx-overlay__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; color: #FFFFFF; text-decoration: none; transition: background-color .15s ease; } .hx-overlay__close:hover, .hx-overlay__close:focus-visible { color: #FFFFFF; background-color: rgba(255, 255, 255, .10); } .hx-overlay__close:focus-visible { outline: 2px solid var(--strong); outline-offset: 2px; } .hx-overlay__nav { padding-top: 24px; } .hx-overlay__menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 24px; } .hx-overlay__menu li { margin: 0; } .hx-overlay__menu a { display: block; padding: 12px 8px; font-size: 18px; font-weight: 600; color: #FFFFFF; text-decoration: none; border-radius: 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); transition: background-color .15s ease, color .15s ease; } .hx-overlay__menu a:hover, .hx-overlay__menu a:focus-visible { color: #FFFFFF; background-color: rgba(255, 255, 255, .08); } .hx-overlay__menu .current-menu-item > a, .hx-overlay__menu .current_page_item > a { color: var(--strong); } @media (max-width: 600px) { .hx-header__inner { min-height: 56px; padding: 0 14px; } .hx-header__logo img { height: 22px; } .hx-overlay__menu { grid-template-columns: 1fr; } .hx-overlay__menu a { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .hx-header__toggle, .hx-search, .hx-search__submit, .hx-overlay__close, .hx-overlay__menu a { transition: none; } }