/* ========================================================================== CAMARLEON EVENTOS — LINK NA BIO (links.html) Folha de estilo dedicada só a esta página (não é o site principal). Mobile-first: estilos base valem para telas pequenas, media query no final ajusta para telas maiores. ========================================================================== */ /* -------------------------------------------------------------------------- RESET BÁSICO -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background-color: var(--cor-preto); color: var(--cor-branco); font-family: var(--fonte-corpo); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } p { margin: 0; } a { color: inherit; } /* Respeita quem prefere menos movimento na tela */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- VARIÁVEIS DE MARCA -------------------------------------------------------------------------- */ :root { /* Paleta oficial extraída das imagens da marca — usar exatamente estes valores, sem substituir por tons "padrão" de biblioteca de cores. */ --cor-preto: #0B0B0A; --cor-dourado: #C9A227; --cor-dourado-claro: #E0C158; --cor-branco: #FDFDFD; /* Famílias tipográficas (ver do Google Fonts no ) */ --fonte-display: 'Cinzel', serif; /* marca, eyebrows */ --fonte-titulo: 'Cormorant Garamond', serif; /* legenda */ --fonte-corpo: 'Jost', sans-serif; /* botões */ --raio-pill: 999px; --raio-padrao: 6px; --transicao: 0.4s cubic-bezier(0.22, 1, 0.36, 1); --sombra-dourada-sutil: 0 0 28px rgba(201, 162, 39, 0.18); } /* Foco de teclado sempre visível em qualquer elemento interativo */ a:focus-visible { outline: 2px solid var(--cor-dourado-claro); outline-offset: 3px; border-radius: 2px; } /* Link "Pular para o conteúdo": invisível até receber foco de teclado */ .skip-link { position: absolute; top: -100%; left: 12px; z-index: 10; background: var(--cor-dourado); color: var(--cor-preto); padding: 12px 20px; border-radius: var(--raio-padrao); font-family: var(--fonte-corpo); font-weight: 600; text-decoration: none; transition: top var(--transicao); } .skip-link:focus { top: 12px; } /* -------------------------------------------------------------------------- ÍCONES (traço fino, cor dourada) -------------------------------------------------------------------------- */ .icone { color: var(--cor-dourado); width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------------- BOTÕES -------------------------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--fonte-corpo); font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--raio-padrao); transition: var(--transicao); transition-property: transform, box-shadow, background-color, border-color, color; } .botao:active { transform: translateY(1px) scale(0.98); } .botao--whatsapp { background-color: var(--cor-dourado); color: var(--cor-preto); } /* O ícone herdaria a cor dourada padrão de .icone — invisível sobre um fundo também dourado. Força a mesma cor do texto do botão. */ .botao--whatsapp .icone { color: var(--cor-preto); } .botao--whatsapp:hover { background-color: var(--cor-dourado-claro); box-shadow: var(--sombra-dourada-sutil); } .botao--contorno { background-color: rgba(253, 253, 253, 0.02); border-color: rgba(201, 162, 39, 0.5); color: var(--cor-dourado); } .botao--contorno:hover { border-color: var(--cor-dourado-claro); color: var(--cor-dourado-claro); box-shadow: var(--sombra-dourada-sutil); } .botao--pill { width: 100%; border-radius: var(--raio-pill); /* Alvo de toque generoso — pensado para dedo, não cursor */ padding: 17px 28px; font-size: 1.05rem; } .botao .icone { width: 20px; height: 20px; flex-shrink: 0; } /* -------------------------------------------------------------------------- PÁGINA LINK NA BIO -------------------------------------------------------------------------- */ /* Padrão dourado bem sutil no fundo — sem isso a página fica seca demais, só preto liso. env(safe-area-inset-*) evita que o conteúdo fique colado no entalhe/barra de gestos de celulares com tela cheia (iPhone etc). */ .pagina-links { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: max(40px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); background-color: var(--cor-preto); background-image: linear-gradient(rgba(11, 11, 10, 0.96), rgba(11, 11, 10, 0.96)), url('../assets/img/detalhesdourados.jpg'); background-size: auto, 360px; background-position: center, center; background-repeat: no-repeat, repeat; } /* "Avatar" circular em volta do camaleão — deixa a página com a leitura imediata de um perfil de link na bio, em vez de um logo solto no topo */ .pagina-links__avatar { width: 108px; height: 108px; border-radius: 50%; border: 1px solid rgba(201, 162, 39, 0.45); background-color: rgba(201, 162, 39, 0.06); box-shadow: var(--sombra-dourada-sutil); display: flex; align-items: center; justify-content: center; padding: 14px; margin-bottom: 22px; animation: entrada-suave 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .pagina-links__avatar .icone-camaleao-topo { width: 100%; height: 100%; object-fit: contain; } .pagina-links__marca { font-family: var(--fonte-display); letter-spacing: 0.22em; text-transform: uppercase; font-size: 1.1rem; color: var(--cor-dourado); margin-bottom: 0.5em; animation: entrada-suave 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; } .pagina-links__legenda { font-family: var(--fonte-titulo); font-style: italic; font-size: 1.05rem; color: rgba(253, 253, 253, 0.75); margin-bottom: 2.4em; animation: entrada-suave 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; } .pagina-links__lista { list-style: none; padding: 0; margin: 0; width: 100%; max-width: 380px; display: grid; gap: 14px; } .pagina-links__lista li { animation: entrada-suave 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .pagina-links__lista li:nth-child(1) { animation-delay: 0.24s; } .pagina-links__lista li:nth-child(2) { animation-delay: 0.32s; } .pagina-links__lista li:nth-child(3) { animation-delay: 0.4s; } .pagina-links__rodape { margin-top: 2.6em; font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(253, 253, 253, 0.4); animation: entrada-suave 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both; } @keyframes entrada-suave { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- FALLBACK DE IMAGEM AUSENTE (ativado via JS só se o arquivo falhar) -------------------------------------------------------------------------- */ .img-fallback { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-family: var(--fonte-corpo); font-size: 0.7rem; color: rgba(201, 162, 39, 0.85); background: repeating-linear-gradient( 135deg, rgba(201, 162, 39, 0.06), rgba(201, 162, 39, 0.06) 10px, transparent 10px, transparent 20px ); border: 1px dashed rgba(201, 162, 39, 0.35); } /* ========================================================================== MEDIA QUERIES — MOBILE-FIRST (telas maiores a partir daqui) ========================================================================== */ @media (min-width: 420px) { .pagina-links__avatar { width: 128px; height: 128px; } .pagina-links__lista { max-width: 420px; gap: 16px; } } @media (min-width: 600px) { .pagina-links__marca { font-size: 1.25rem; } .pagina-links__legenda { font-size: 1.1rem; } }