/* ══════════════════════════════════════════ VARIÁVEIS GLOBAIS ══════════════════════════════════════════ */ :root { color-scheme: light dark; --detalhes: #46A5DC; --detalhes-dim: #3d91c2; /* Mesma família de azul que --detalhes, mas escurecida o suficiente para cumprir o contraste mínimo AA (4.5:1) sobre fundos claros (branco e --mission-blue). --detalhes/--detalhes-dim só passam esse mínimo sobre fundos escuros (--ink) — ver mission-kicker e mission-number, que usam esta variável por serem texto sobre fundo claro. */ --detalhes-a11y: #1c6996; --ink: #1a1a1a; --paper: #F2F3F7; --mission-blue: #CFE6F7; --wave-fade: #E7EDF6; --surface: #14181c; --font-heading: 'Space Grotesk', Arial, sans-serif; --font-body: 'Inter', Arial, sans-serif; } /* ══════════════════════════════════════════ TRANSIÇÕES DE SECÇÃO (scroll reveal) ══════════════════════════════════════════ */ /* "Progressive enhancement": por omissão tudo está visível. Só quando o JS confirma suporte a IntersectionObserver é que a classe "reveal-ready" é adicionada a — nessa altura, e só nessa altura, os elementos .reveal começam escondidos à espera de entrar no ecrã. Assim, se o JS falhar ou o browser for muito antigo, o conteúdo aparece na mesma. */ html.reveal-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } html.reveal-ready .reveal.is-visible { opacity: 1; transform: none; } /* Pequeno desfasamento para o segundo elemento de um par (ex: imagem a seguir ao texto), para não entrarem os dois em bloco ao mesmo tempo. */ html.reveal-ready .reveal-delay-1 { transition-delay: 0.12s; } /* Stagger leve nos 4 cards da Missão — cada um entra um pouco depois do anterior, dando uma sensação de cascata sem ser excessivo. */ html.reveal-ready .mission-grid > div:nth-child(1) .reveal { transition-delay: 0s; } html.reveal-ready .mission-grid > div:nth-child(2) .reveal { transition-delay: 0.08s; } html.reveal-ready .mission-grid > div:nth-child(3) .reveal { transition-delay: 0.16s; } html.reveal-ready .mission-grid > div:nth-child(4) .reveal { transition-delay: 0.24s; } /* ══════════════════════════════════════════ HERO — entrada ao carregar a página ══════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { #hero .hero-kicker, .hero-title, .hero-desc, .hero-actions { opacity: 0; animation: hero-fade-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } #hero .hero-kicker { animation-delay: 0.05s; } .hero-title { animation-delay: 0.15s; } .hero-desc { animation-delay: 0.28s; } .hero-actions{ animation-delay: 0.4s; } } @keyframes hero-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* ══════════════════════════════════════════ BASE ══════════════════════════════════════════ */ body { margin: 0; font-family: var(--font-body); background: var(--paper); } /* ══════════════════════════════════════════ ACESSIBILIDADE — link "saltar para o conteúdo" ══════════════════════════════════════════ */ /* Escondido por omissão (via .visually-hidden-focusable do Bootstrap), só aparece quando recebe foco pelo teclado (tecla Tab). */ .skip-link { position: fixed; top: 12px; left: 12px; z-index: 1030; padding: 10px 20px; border-radius: 25px; background: var(--detalhes); color: var(--ink); font-family: var(--font-heading); font-weight: 600; text-decoration: none; } /* ══════════════════════════════════════════ NAVEGAÇÃO — compensação do header fixo ══════════════════════════════════════════ */ /* Garante que, ao saltar para uma secção pelo menu, o header fixo nunca tapa o início do conteúdo — todas as secções param à mesma distância do topo, em vez de dependerem do padding próprio de cada uma (que varia de secção para secção). */ #who, #mission, #history, #sponsors, #contact { scroll-margin-top: 130px; } /* ══════════════════════════════════════════ HEADER — comportamento ao fazer scroll ══════════════════════════════════════════ */ #navbarGradient { position: fixed; top: 0; left: 0; right: 0; width: 100vw; max-width: 100%; height: 120px; background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 95%, transparent), transparent); pointer-events: none; opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 1019; } #navbarGradient.scrolled { opacity: 1; } #mainHeader { margin-top: 20px; transition: margin-top 0.3s ease-in-out; z-index: 1020; } #mainHeader.scrolled { margin-top: 4px; } /* ══════════════════════════════════════════ HEADER — Logótipo ══════════════════════════════════════════ */ .logo-img { height: 45px; width: auto; } /* Substitui o style="height: 90px" que estava inline no HTML */ .header-inner { height: 90px; } /* ══════════════════════════════════════════ NAVBAR — Pills dos links ══════════════════════════════════════════ */ /* Estilo base "pill" partilhado por todos os botões arredondados (links do menu e botões do hero) — antes estava duplicado. */ .pill-btn { display: inline-flex; align-items: center; border: 1.5px solid color-mix(in srgb, var(--paper) 75%, transparent); border-radius: 25px; background: color-mix(in srgb, var(--surface) 35%, transparent); color: var(--paper); text-decoration: none; transition: all 0.2s ease; } .pill-btn:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); border-color: var(--paper); color: var(--paper); transform: translateY(-1px); } /* Modificador específico dos links do menu */ .nav-link-block { gap: 12px; /* Espaço entre o número e o texto */ padding: 6px 20px; } .nav-number { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 500; color: color-mix(in srgb, var(--paper) 65%, transparent); } .nav-text { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--paper); /* white-space: nowrap -> classe Bootstrap .text-nowrap (ver script.js) */ } /* ══════════════════════════════════════════ NAVBAR — Botão de idioma (PT / EN) ══════════════════════════════════════════ */ .lang-switch { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid color-mix(in srgb, var(--paper) 75%, transparent); border-radius: 25px; background: color-mix(in srgb, var(--surface) 35%, transparent); padding: 6px 16px; } .lang-switch-btn { border: none; background: transparent; padding: 0; font-family: var(--font-body); font-size: 16px; font-weight: 500; color: color-mix(in srgb, var(--paper) 55%, transparent); cursor: pointer; transition: color 0.2s ease; } .lang-switch-btn:hover { color: var(--paper); } .lang-switch-btn.active { color: var(--paper); font-weight: 700; } .lang-switch-sep { color: color-mix(in srgb, var(--paper) 45%, transparent); font-size: 16px; } /* ══════════════════════════════════════════ NAVBAR — Botão hambúrguer (mobile) ══════════════════════════════════════════ */ .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F2F3F7' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; opacity: 1; } /* Acessibilidade — o "shadow-none" do Bootstrap remove o anel de foco destes botões (hambúrguer e fechar do offcanvas), deixando-os sem qualquer indicação visual ao navegar por teclado. ":focus-visible" só aparece para teclado/leitor de ecrã, nunca ao clicar com o rato — por isso não muda nada no aspeto habitual do site. */ .navbar-toggler:focus-visible, .btn-close:focus-visible { outline: 2px solid var(--detalhes); outline-offset: 2px; border-radius: 4px; } /* ══════════════════════════════════════════ NAVBAR — Menu offcanvas (mobile) ══════════════════════════════════════════ */ #menuRubibot { background-color: color-mix(in srgb, var(--surface) 55%, transparent) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ══════════════════════════════════════════ HERO ══════════════════════════════════════════ */ /* -- Secção / contentor -- */ .hero-section { min-height: 100vh; padding: 150px 5vw 80px; background: var(--ink); overflow: hidden; } .hero-section .container { z-index: 2; } /* -- Texto -- */ .hero-kicker { font-family: var(--font-heading); font-size: 15px; font-weight: 500; color: var(--detalhes); letter-spacing: 0.02em; } .hero-title { max-width: 12ch; font-family: var(--font-heading); font-weight: 600; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; color: var(--paper); } .hero-desc { max-width: 42ch; font-size: 17px; line-height: 1.6; color: color-mix(in srgb, var(--paper) 72%, transparent); } /* -- Ações (botões estilo pills da navbar) -- */ /* Modificador específico dos botões do hero */ .hero-btn { padding: 10px 28px; font-weight: 500; font-size: 15px; } .hero-btn-solid { background: var(--detalhes); border-color: var(--detalhes); color: var(--ink); font-weight: 600; } .hero-btn-solid:hover { background: var(--detalhes-dim); border-color: var(--detalhes-dim); color: var(--ink); } /* ══════════════════════════════════════════ MISSÃO ══════════════════════════════════════════ */ .mission-section { position: relative; overflow: hidden; padding: 40px 5vw 170px; background: var(--mission-blue); } .mission-kicker { color: var(--detalhes-a11y); } /* position:relative + z-index:2 -> classes Bootstrap .position-relative .z-2, já aplicadas diretamente no HTML */ /* Divisores de onda (hero, missão, wave-divider autónomo) partilham a mesma base — line-height:0 e svg em display:block a 100% de largura — pelo que essa parte comum fica declarada uma única vez aqui. Cada variante mantém só o que lhe é próprio (posição, altura, fundo). */ .hero-divider, .section-wave, .wave-divider { line-height: 0; } /* display:block + width:100% -> classes Bootstrap .d-block .w-100, já aplicadas diretamente em cada no HTML */ /* Substituem os style="fill: ..." que estavam inline nos do HTML */ .fill-paper { fill: var(--paper); } .fill-wave-fade { fill: var(--wave-fade); } .fill-mission-blue { fill: var(--mission-blue); } /* Ondas de transição — entram/saem da secção da Missão, ligando visualmente ao fundo (--paper) das secções vizinhas. */ /* position:absolute + left/right:0 + z-index:1 + pointer-events:none -> classes Bootstrap .position-absolute .start-0 .end-0 .z-1 .pe-none, já aplicadas diretamente no HTML */ .section-wave svg { height: 100px; } .section-wave-bottom { bottom: -1px; } /* Divisor autónomo entre secções — um único SVG em fluxo normal, com fundo próprio (--paper), para nunca desalinhar com a secção acima. */ .wave-divider { width: 100%; background: var(--paper); } .wave-divider svg { height: 150px; } /* Badge de destaque — mesma lógica visual do pill-btn, em tom claro */ .mission-title-main { max-width: 22ch; margin-left: auto; margin-right: auto; } .mission-lead { font-family: var(--font-heading); font-weight: 500; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.45; color: var(--ink); } .mission-grid { --bs-gutter-x: 1.75rem; } .mission-card { height: 100%; padding: 32px 26px; border: 1.5px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 16px; background: #ffffff; box-shadow: 0 4px 18px color-mix(in srgb, var(--ink) 5%, transparent); transition: all 0.25s ease; } .mission-card:hover { border-color: var(--detalhes); box-shadow: 0 10px 26px color-mix(in srgb, var(--detalhes) 15%, transparent); transform: translateY(-4px); } .mission-number { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--detalhes-a11y); margin-bottom: 14px; } .mission-title { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--ink); margin-bottom: 12px; } .mission-text { font-family: var(--font-body); font-size: 14.5px; line-height: 1.65; color: color-mix(in srgb, var(--ink) 65%, transparent); margin-bottom: 0; } /* ══════════════════════════════════════════ QUEM SOMOS ══════════════════════════════════════════ */ .who-section { position: relative; overflow: hidden; padding: 110px 5vw; background: var(--paper); } .section-title { max-width: 14ch; font-family: var(--font-heading); font-weight: 600; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; color: var(--ink); } .section-title-sub { font-size: clamp(22px, 2.4vw, 30px); } .text-accent { color: var(--detalhes); } /* Alguns títulos de secção não precisam do max-width por omissão de .section-title (ficam demasiado estreitos com o texto que têm). */ .history-title, .sponsors-title { max-width: none; } .section-text { max-width: 58ch; font-size: 16px; line-height: 1.75; color: color-mix(in srgb, var(--ink) 72%, transparent); } .who-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; } /* ══════════════════════════════════════════ PERCURSO ══════════════════════════════════════════ */ .history-section { position: relative; overflow: hidden; padding: 110px 5vw 130px; background: var(--paper); } .history-lead { max-width: 52ch; margin-left: auto; margin-right: auto; } /* -- Timeline: linha central, marcos alternados -- */ .timeline { position: relative; margin-top: 88px; } .timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 5px; width: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); } .timeline-item { position: relative; padding-left: 32px; padding-bottom: 44px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-node { position: absolute; left: -1px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--detalhes); border: 3px solid var(--paper); box-shadow: 0 0 0 1.5px var(--detalhes); } .timeline-item-muted .timeline-node { background: color-mix(in srgb, var(--ink) 48%, transparent); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 48%, transparent); } .timeline-item-current .timeline-node { background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); } .timeline-year { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--detalhes); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .timeline-item-muted .timeline-year { color: color-mix(in srgb, var(--ink) 62%, transparent); } .timeline-item-current .timeline-year { color: var(--ink); } .timeline-title { font-family: var(--font-heading); font-weight: 600; font-size: 19px; color: var(--ink); margin: 0 0 8px; } .timeline-text { max-width: 52ch; font-size: 15.5px; line-height: 1.7; color: color-mix(in srgb, var(--ink) 70%, transparent); margin-bottom: 0; } /* -- Ecrãs grandes: linha ao centro, marcos alternados esquerda/direita -- */ @media (min-width: 992px) { .timeline { max-width: 900px; margin-left: auto; margin-right: auto; } .timeline::before { left: 50%; top: 0; bottom: 0; transform: translateX(-50%); } .timeline-item { width: 50%; padding-left: 0; padding-bottom: 68px; } .timeline-item:nth-child(odd) { padding-right: 56px; text-align: right; } .timeline-item:nth-child(even) { left: 50%; padding-left: 56px; text-align: left; } .timeline-node { top: 4px; left: auto; } .timeline-item:nth-child(odd) .timeline-node { right: -7px; } .timeline-item:nth-child(even) .timeline-node { left: -7px; } .timeline-item:nth-child(odd) .timeline-text { margin-left: auto; margin-right: 0; } .timeline-item:nth-child(even) .timeline-text { margin-left: 0; margin-right: auto; } } /* ══════════════════════════════════════════ PARCERIAS ══════════════════════════════════════════ */ .sponsors-section { position: relative; overflow: hidden; padding: 10px 0 230px; background: var(--wave-fade); } .sponsors-lead { max-width: 50ch; margin-left: auto; margin-right: auto; } /* -- Faixa animada: duas cópias da lista, deslocadas em -50%, para o loop nunca mostrar uma quebra -- */ .marquee { /* Sem overflow nem mask-image aqui de propósito: qualquer um dos dois recorta a caixa do elemento onde é aplicado — tal como um overflow:hidden — e a bolha de fala, sendo filha deste elemento, ficava sempre cortada no topo por causa disso. O desvanecer nas pontas passa a ser feito com os pseudo-elementos abaixo (camadas por cima da faixa, não recortam nada). O corte horizontal da faixa em si fica a cargo do .sponsors-section (overflow:hidden), que é alto o suficiente para nunca cortar a bolha na vertical. Também garante que se algum patrocinador for adicionado no futuro, a lógica de desvanecimento se mantém isolada da bolha */ position: relative; margin-top: 8px; } /* Desvanece as pontas da faixa com um gradiente sobreposto — em vez de mask-image, que recortaria também a bolha de fala (ver acima). */ .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; min-width: 40px; z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(to right, var(--wave-fade), color-mix(in srgb, var(--wave-fade) 0%, transparent)); } .marquee::after { right: 0; background: linear-gradient(to left, var(--wave-fade), color-mix(in srgb, var(--wave-fade) 0%, transparent)); } .marquee-track { display: flex; align-items: center; width: max-content; gap: 20px; padding: 110px 5vw 0; /* espaço extra em cima para a bolha de fala não ficar apertada */ animation: marquee-scroll 28s linear infinite; } /* Antes pausava com .marquee:hover, que cobre toda a faixa — incluindo o espaço vazio reservado no topo para a bolha, largura toda — pelo que bastava passar o rato por essa zona (sem tocar em nenhum cartão) para parar o carrossel. Com :has(), só pausa quando o rato está mesmo sobre um cartão (ou sobre a sua bolha, que é filha dele). */ .marquee-track:has(.marquee-item:hover), .marquee-track:has(.marquee-item:focus-visible) { animation-play-state: paused; } .marquee-item { position: relative; flex: 0 0 auto; /* display:flex/align-items/justify-content -> .d-flex .align-items-center .justify-content-center, aplicadas no HTML gerado pelo script.js */ width: 180px; height: 88px; padding: 0 24px; border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 14px; background: #ffffff; text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Sem translateY aqui: era esse deslocamento vertical, combinado com o overflow:hidden da faixa (.marquee), que cortava o topo do cartão ao passar o rato. A elevação passa a ser dada só pela sombra. */ .marquee-item:hover, .marquee-item:focus-visible { border-color: var(--detalhes); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); z-index: 5; /* fica por cima dos cartões vizinhos enquanto a bolha estiver aberta */ outline: none; /* substituído pela mudança de border-color acima, igual ao :hover */ } .marquee-item img { max-width: 100%; max-height: 40px; width: auto; height: auto; filter: grayscale(100%); opacity: 0.55; transition: filter 0.2s ease, opacity 0.2s ease; } .marquee-item:hover img, .marquee-item:focus-visible img { filter: grayscale(0%); opacity: 1; } /* -- Bolha de fala com info do patrocinador -- Aparece por cima do cartão, fora dos seus limites, tipo balão de diálogo, com um "bico" a apontar para o cartão. */ .marquee-item-bubble { position: absolute; left: 50%; bottom: calc(100% + 14px); width: 200px; padding: 10px 12px; border-radius: 12px; background: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); text-align: center; opacity: 0; transform: translate(-50%, 6px) scale(0.96); transform-origin: bottom center; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 6; } /* Bico do balão, a apontar para baixo, para o cartão */ .marquee-item-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--ink); } .marquee-item:hover .marquee-item-bubble, .marquee-item:focus-visible .marquee-item-bubble { opacity: 1; transform: translate(-50%, 0) scale(1); } /* Linhas de texto livre dentro do balão. A 1ª linha destaca-se (título), as restantes ficam mais discretas — mas o texto em si é o que quiseres, basta escrevê-lo no array "sponsors" em script.js (usa "\n" para separar linhas). */ .marquee-item-bubble-line { display: block; color: #ffffff; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; line-height: 1.15; } .marquee-item-bubble-line:not(:first-child) { font-family: inherit; color: color-mix(in srgb, #ffffff 75%, transparent); font-size: 0.68rem; font-weight: 400; margin-top: 3px; } /* A faixa duplicada mede o dobro do conjunto original, por isso -50% avança exatamente uma volta completa. */ @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } .hero-bg-img { z-index: 0; } .hero-overlay { z-index: 1; background: linear-gradient( 90deg, color-mix(in srgb, var(--ink) 95%, transparent) 0%, color-mix(in srgb, var(--ink) 75%, transparent) 45%, color-mix(in srgb, var(--ink) 35%, transparent) 100% ); } .hero-fade-bottom { z-index: 2; height: 200px; pointer-events: none; background: linear-gradient( to bottom, transparent 0%, color-mix(in srgb, var(--ink) 85%, transparent) 65%, var(--ink) 100% ); } .hero-divider { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; pointer-events: none; } .hero-divider svg { height: 90px; } /* ══════════════════════════════════════════ CONTACTOS + FOOTER — bloco escuro final ══════════════════════════════════════════ */ /* Última transição da página: em vez de mais uma onda, um corte diagonal "recorta" o bloco escuro sobre o fundo claro dos Patrocínios — fecha a página no mesmo tom do hero (--ink), criando simetria entre o topo e o fim. */ .contact-section { /* position:relative + z-index:2 -> classes Bootstrap .position-relative .z-2 no HTML */ overflow: hidden; background: var(--ink); clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%); margin-top: -64px; padding: 92px 5vw 24px; } @media (min-width: 992px) { .contact-section { clip-path: polygon(0 120px, 100% 0, 100% 100%, 0 100%); margin-top: -120px; padding: 130px 5vw 26px; } } /* Grelha ténue de fundo, a desvanecer para as margens — referência discreta a PCB / circuito, sem competir com o conteúdo. */ .contact-grid-bg { /* position:absolute + inset:0 + pointer-events:none -> classes Bootstrap .position-absolute .top-0 .start-0 .end-0 .bottom-0 .pe-none no HTML */ background-image: linear-gradient(color-mix(in srgb, var(--paper) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--paper) 6%, transparent) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, #000 35%, transparent 100%); } .contact-top { /* position:relative -> classe Bootstrap .position-relative no HTML */ margin-bottom: 36px; } .contact-title { max-width: 20ch; color: var(--paper); } .contact-text { max-width: 44ch; font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--paper) 72%, transparent); } .contact-form { max-width: 46ch; } .contact-input { background: color-mix(in srgb, var(--paper) 6%, transparent); border: 1.5px solid color-mix(in srgb, var(--paper) 20%, transparent); border-radius: 12px; padding: 9px 16px; font-family: var(--font-body); font-size: 15px; color: var(--paper); transition: border-color 0.2s ease, background 0.2s ease; } .contact-input::placeholder { color: color-mix(in srgb, var(--paper) 50%, transparent); } .contact-input:focus { background: color-mix(in srgb, var(--paper) 9%, transparent); border-color: var(--detalhes); color: var(--paper); box-shadow: none; } .contact-form .pill-btn { border: none; cursor: pointer; } .contact-info { /* display:flex + flex-direction:column + align-items -> classes Bootstrap .d-flex .flex-column .align-items-start .align-items-lg-end .text-lg-end no HTML. Só o gap (22px não existe na escala do Bootstrap) fica aqui. */ gap: 22px; } .contact-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 500; font-size: 18px; color: var(--paper); text-decoration: none; transition: color 0.2s ease; } .contact-link i { font-size: 19px; color: var(--detalhes); } .contact-link:hover { color: var(--detalhes); } .contact-socials { display: flex; gap: 14px; } .contact-social-icon { /* display:flex/align-items/justify-content -> .d-flex .align-items-center .justify-content-center ; border-radius:50% -> .rounded-circle (no HTML) */ width: 44px; height: 44px; border: 1.5px solid color-mix(in srgb, var(--paper) 20%, transparent); color: var(--paper); font-size: 18px; text-decoration: none; transition: all 0.2s ease; } .contact-social-icon:hover { border-color: var(--detalhes); background: color-mix(in srgb, var(--detalhes) 12%, transparent); color: var(--detalhes); transform: translateY(-2px); } .contact-footer-bar { position: relative; margin: 0 -5vw; padding: 20px 5vw 0; border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); } .footer-copy, .footer-tag { font-family: var(--font-body); font-size: 13px; color: color-mix(in srgb, var(--paper) 50%, transparent); } /* Impede selecionar e arrastar imagens (proteção básica) */ #main-content img { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; }