/* ═══════════════════════════════════════════════════════════════════════════ Bridge Club — camada de marca sobre o Espelho de Liderança Identidade aprovada pelo Felipe em 16/08/2026 (brand book "Sociedade das Marcas", 26 págs). Ativa com . COMO FUNCIONA — e por que não reescreve componente nenhum: o theme.css declara que "nenhum componente carrega cor literal". Então vestir a plataforma com outra marca é redefinir os MESMOS tokens que os componentes já consomem. Este arquivo não tem um seletor de componente sequer: só tokens. Trocar de marca é trocar um atributo no . FONTE DOS VALORES (extraídos do PDF em 16/08, não estimados): - Paleta oficial, p.5 do book: Bridge White #FFFFFF · Structural Silver #9297A1 · Light Silver #E4E4E4 · Architectural Grey #5E6671, e o "signature gradient" #9297A1 → #E4E4E4 → #FFFFFF. - Tinta de texto #2E2E2E e dourado de realce #A87730: lidos dos operadores de preenchimento vetorial das páginas do próprio PDF. - A paleta oficial é FRIA e monocromática ("cool silvers, soft greys, crisp whites"). O dourado NÃO está nela: aparece só na capa e como detalhe de seção — por isso aqui ele é realce raro, nunca cor de interface. LIMITAÇÃO DECLARADA (Regra 20): o book define princípios tipográficos (estrutura, clareza, autoridade, amplitude, estabilidade) mas NÃO nomeia uma fonte. As fontes embutidas no PDF são Montserrat e Public Sans, que são do documento, não necessariamente da marca. Mantemos a tipografia do Espelho e aplicamos os princípios (caixa alta + amplitude no wordmark). Confirmar a fonte oficial com o Felipe antes de tratar como fechado. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Primitivas da marca (não usar direto em componente; servem de origem) ── */ :root[data-brand="bridge-club"] { --bc-white: #FFFFFF; /* Bridge White */ --bc-silver: #9297A1; /* Structural Silver */ --bc-silver-lt: #E4E4E4; /* Light Silver */ --bc-grey: #5E6671; /* Architectural Grey */ --bc-tinta: #2E2E2E; /* tinta de texto do book */ --bc-ouro: #A87730; /* realce raro (detalhe de seção do book) — FILL apenas */ --bc-ouro-texto: #9A6D2C; /* o mesmo ouro escurecido até 4.57:1 sobre branco. #A87730 dá 3.93:1 e REPROVA como texto: usar este sempre que o ouro virar letra, nunca o de cima. */ --bc-gradiente: linear-gradient(135deg, #9297A1 0%, #E4E4E4 55%, #FFFFFF 100%); } /* ── CLARO — o modo nativo da marca (arquitetura, luz, vidro) ─────────────── */ :root[data-brand="bridge-club"], :root[data-brand="bridge-club"][data-theme="claro"] { --ink: #F2F3F5; /* base fria entre Light Silver e Bridge White */ --ink-2: #FFFFFF; /* Bridge White — superfície de cartão */ --ink-3: #E9EBEE; --ink-4: #E4E4E4; /* Light Silver */ --line: #D9DCE1; --line-soft: #E9EBEE; --paper: #2E2E2E; /* tinta do book — 12.6:1 sobre branco */ --paper-mute: #5E6671; /* Architectural Grey — 6.0:1 */ --paper-dim: #6A6F78; /* Structural Silver escurecido até passar 4.5:1 nas DUAS superfícies (cartão 5.05:1 e base 4.55:1) — em #767C86 passava só no cartão */ /* Acento monocromático: a marca não tem cor vibrante, e forçar uma seria inventar identidade. Architectural Grey é o acento; o ouro fica no realce. */ --amber: #5E6671; --amber-soft: #4A515A; --amber-dim: rgba(94, 102, 113, .10); /* Status no eixo daltônico-seguro (laranja→âmbar→teal, nunca verde↔vermelho), escurecidos até passarem 4.5:1 na superfície MAIS exigente (a base #F2F3F5). Nos valores originais da paleta, aviso dava 3.97:1 e perigo 4.41:1 e ambos reprovavam sobre fundo claro. */ --sage: #14776A; /* 4.88:1 na base */ --clay: #8B6A0F; /* era #A07A12 */ --rust: #B45312; /* era #C25A14 */ --sobre-acento: #FFFFFF; --acento-borda: rgba(94, 102, 113, .26); --acento-foco: rgba(94, 102, 113, .45); --acento-realce: rgba(168, 119, 48, .40); /* ouro só aqui */ --brilho-1: rgba(146, 151, 161, .05); --brilho-2: rgba(255, 255, 255, .55); --sombra: rgba(46, 46, 46, .12); --sombra-forte: rgba(46, 46, 46, .17); --scrim: rgba(46, 46, 46, .38); --grid-color: rgba(94, 102, 113, .05); --grid-color-strong: rgba(94, 102, 113, .09); --rail-hover: #E9EBEE; --rail-active: #E4E4E4; } /* ── ESCURO — carvão frio, prata como luz. Não é o navy da capa: a capa é material de apresentação, não de produto (o book separa os dois). ───── */ :root[data-brand="bridge-club"][data-theme="escuro"], :root[data-brand="bridge-club"][data-theme="grafite"] { --ink: #17191C; --ink-2: #1D2024; --ink-3: #24282D; --ink-4: #2C3137; --line: #333940; --line-soft: #24282D; --paper: #E8EAED; --paper-mute: #9297A1; /* Structural Silver serve nos dois temas */ --paper-dim: #818791; /* clareado até 4.52:1 no cartão (em #7E848E dava 4.34) */ --amber: #C9CDD4; /* prata clara: o acento vira luz no escuro */ --amber-soft: #E4E4E4; --amber-dim: rgba(201, 205, 212, .12); --sage: #46B9A4; --clay: #D9AC44; --rust: #F0863C; --sobre-acento: #17191C; --acento-borda: rgba(201, 205, 212, .24); --acento-foco: rgba(201, 205, 212, .48); --acento-realce: rgba(198, 161, 91, .45); --brilho-1: rgba(201, 205, 212, .045); --brilho-2: rgba(146, 151, 161, .03); --sombra: rgba(0, 0, 0, .70); --sombra-forte: rgba(0, 0, 0, .80); --scrim: rgba(0, 0, 0, .58); --grid-color: rgba(201, 205, 212, .04); --grid-color-strong: rgba(201, 205, 212, .08); --rail-hover: #24282D; --rail-active: #2C3137; } /* ── Tipografia: os princípios do book aplicados à fonte que já existe ───── "Amplitude — espaçamento generoso cria respiro e sofisticação" e "Estrutura — formas construídas com lógica e precisão" (p.7). */ :root[data-brand="bridge-club"] .marca-bc { font-family: var(--serif); font-weight: 300; text-transform: uppercase; letter-spacing: .30em; /* a "amplitude" do wordmark, medida no book */ text-indent: .30em; /* compensa o trailing space do letter-spacing */ } /* Assinatura de gradiente da marca — disponível para hero/splash */ :root[data-brand="bridge-club"] .bc-gradiente { background: var(--bc-gradiente); } /* ── Símbolo ─────────────────────────────────────────────────────────────── Desenhado com `mask` e não com `background-image`: em data URI o SVG não enxerga currentColor, então a cor ficaria cravada e erraria um dos temas. Com máscara, quem pinta é o --amber do tema vigente. */ /* Acima do título, na tela de acesso — o ponto de confiança do Endorsed Brand: é onde a marca do Felipe se apresenta antes de a pessoa entrar. */ :root[data-brand="bridge-club"] .entrada-box .rail-mark::before { content: ''; display: block; width: 54px; height: 54px; margin: 0 auto 16px; background-color: var(--amber); -webkit-mask: var(--bc-simbolo) center / contain no-repeat; mask: var(--bc-simbolo) center / contain no-repeat; } /* Menu recolhido: o Espelho põe uma lua âmbar aqui. Sob Bridge Club entra a variante de ícone — a mesma que vai ao favicon. A especificidade sobe de (0,2,1) para (0,3,1) para vencer a regra original sem !important, e a regra precisa morar no mesmo @media, senão não se aplica onde a lua se aplica. */ @media (min-width: 901px) { :root[data-brand="bridge-club"][data-rail="recolhido"] .rail-mark::before { content: ''; display: block; width: 22px; height: 22px; margin: 0 auto; background-color: var(--amber); -webkit-mask: var(--bc-icone) center / contain no-repeat; mask: var(--bc-icone) center / contain no-repeat; } } /* Cabeçalho do painel do mentor: o Espelho usa o emoji 🧭 como marca. Emoji não é identidade — some o glifo e entra o símbolo, pintado pelo token. */ :root[data-brand="bridge-club"] .mark { font-size: 0; /* engole o emoji sem tocar no mentor.js */ display: inline-block; width: 26px; height: 26px; background-color: var(--amber); -webkit-mask: var(--bc-simbolo) center / contain no-repeat; mask: var(--bc-simbolo) center / contain no-repeat; } /* Os SVG ficam como token para não repetir o data URI em cada regra. */ :root[data-brand="bridge-club"] { --bc-simbolo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M56 16 V104'/%3E%3Cpath d='M64 16 V104'/%3E%3Cpath d='M60 16 L18 58 H60'/%3E%3Cpath d='M60 16 H74 a26 21 0 0 1 0 42 H60'/%3E%3Cpath d='M60 104 L102 62 H60'/%3E%3Cpath d='M60 104 H46 a26 21 0 0 1 0-42 H60'/%3E%3C/g%3E%3C/svg%3E"); --bc-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M50 18 V102'/%3E%3Cpath d='M70 18 V102'/%3E%3Cpath d='M22 88 C22 56 98 64 98 32'/%3E%3C/g%3E%3C/svg%3E"); }