/* Home publica | camada light | componente hero. */ /* * Página inicial — tema claro. * * Sobrescritas do tema claro. Ficam isoladas porque a home foi desenhada * sobre superfícies escuras: aqui as seções marinho passam a claras sem * tocar na estrutura definida nos outros dois arquivos. * * Esta é a terceira camada declarada pelo HomeController: o tema claro * sobrescreve os componentes-base e seus ajustes responsivos. */ /* Paleta clara: superfícies marinho e pretas ficam exclusivas do tema escuro. */ /* * Hero no tema claro. * * A composição é a mesma do tema escuro — foto à direita, chamada à esquerda, * painel de perfis e faixa de números —, mas o véu sobre a fotografia é claro * em vez de escuro, e o texto passa a ser escuro sobre fundo claro. * * A própria fotografia é atenuada: ela retrata uma cena noturna e, sem isso, * o lado direito continuaria pesado demais para um tema claro. */ html[data-theme="light"] .pt-home-hero { color: var(--pt-text); /* Azul acinzentado: um branco puro deixaria a hero sem profundidade. */ background: linear-gradient(160deg, #dce8f7 0%, #cfdff2 55%, #c6d8ee 100%); } /* * A fotografia mantém boa presença — atenuá-la demais era o que fazia o * conjunto parecer lavado. O véu à esquerda continua forte o bastante para * o texto escuro permanecer legível. */ html[data-theme="light"] .pt-home-hero-media { opacity: 1; } /* * O véu é forte apenas onde há texto escuro — o terço esquerdo — e se dissolve * antes da cabine. O painel de perfis tem fundo próprio, então não depende * dele para ser legível, o que permite liberar a fotografia bem antes. */ html[data-theme="light"] .pt-home-hero::before { background: linear-gradient( 90deg, rgba(216, 229, 246, 0.94) 0%, rgba(216, 229, 246, 0.84) 28%, rgba(216, 229, 246, 0.38) 46%, rgba(216, 229, 246, 0.08) 64%, transparent 76% ), linear-gradient(0deg, rgba(211, 226, 245, 0.88) 5%, transparent 32%); } /* A malha decorativa fica discreta para não sujar o fundo claro. */ html[data-theme="light"] .pt-home-hero::after { opacity: 0.2; background: radial-gradient(circle at 72% 40%, rgba(30, 86, 255, 0.14), transparent 24%), linear-gradient(90deg, rgba(30, 86, 255, 0.12) 1px, transparent 1px), linear-gradient(rgba(30, 86, 255, 0.1) 1px, transparent 1px); background-position: center, left bottom, left bottom; background-size: auto, 64px 64px, 64px 64px; } html[data-theme="light"] .pt-home-hero-grid { background: linear-gradient( 90deg, transparent, var(--pt-primary), var(--pt-info), transparent ); box-shadow: 0 0 18px rgba(30, 86, 255, 0.35); } /* ---- Chamada -------------------------------------------------------- */ html[data-theme="light"] .pt-home-kicker { color: var(--pt-text); } html[data-theme="light"] .pt-home-kicker i, html[data-theme="light"] .pt-home-kicker strong { color: var(--pt-primary); } /* Sem sombra: sobre fundo claro ela deixaria o título embaçado. */ html[data-theme="light"] .pt-home-hero h1 { text-shadow: none; } html[data-theme="light"] .pt-home-hero-title-detail { color: var(--pt-text); } html[data-theme="light"] .pt-home-hero h1 em { color: var(--pt-primary); text-shadow: none; } html[data-theme="light"] .pt-home-hero-copy > p { color: var(--pt-text-muted); } /* A ação secundária vira um contorno legível sobre o fundo claro. */ html[data-theme="light"] .pt-home-hero .btn-outline-light { color: var(--pt-primary); background: rgba(255, 255, 255, 0.88); border-color: color-mix(in srgb, var(--pt-primary), transparent 55%); box-shadow: 0 8px 20px rgba(13, 43, 87, 0.1); } html[data-theme="light"] .pt-home-hero .btn-outline-light:hover, html[data-theme="light"] .pt-home-hero .btn-outline-light:focus-visible { color: #fff; background: var(--pt-primary); border-color: var(--pt-primary); } /* ---- Painel de perfis ------------------------------------------------ */ html[data-theme="light"] .pt-home-hero-entries { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.76) ); border-color: color-mix(in srgb, var(--pt-primary), transparent 84%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 22px 50px rgba(13, 43, 87, 0.13); } html[data-theme="light"] .pt-home-hero-entry + .pt-home-hero-entry { border-left-color: color-mix(in srgb, var(--pt-primary), transparent 88%); } /* * Sobre fundo claro os acentos precisam ser mais fechados para manter * contraste no texto do botão; o tom de fundo do ícone fica mais leve. */ html[data-theme="light"] .pt-home-hero-entry.is-orange { --pt-hero-accent: #c96a00; --pt-hero-accent-soft: rgba(255, 138, 0, 0.14); } html[data-theme="light"] .pt-home-hero-entry.is-blue { --pt-hero-accent: var(--pt-primary); --pt-hero-accent-soft: rgba(30, 86, 255, 0.12); } html[data-theme="light"] .pt-home-hero-entry.is-violet { --pt-hero-accent: #7433e0; --pt-hero-accent-soft: rgba(141, 75, 255, 0.13); } html[data-theme="light"] .pt-home-hero-entry.is-cyan { --pt-hero-accent: #0090b8; --pt-hero-accent-soft: rgba(0, 144, 184, 0.13); } html[data-theme="light"] .pt-home-hero-entry h2 { color: var(--pt-heading); } html[data-theme="light"] .pt-home-hero-entry p { color: var(--pt-text-muted); } html[data-theme="light"] .pt-home-hero-entry__action { color: var(--pt-hero-accent); background: #fff; border-color: color-mix(in srgb, var(--pt-hero-accent), transparent 62%); } html[data-theme="light"] .pt-home-hero-entry__action:hover, html[data-theme="light"] .pt-home-hero-entry__action:focus-visible { color: #fff; background: var(--pt-hero-accent); border-color: var(--pt-hero-accent); } /* No celular a ação é só a seta: ela não se preenche, apenas escurece. */ @media (max-width: 767.98px) { html[data-theme="light"] .pt-home-hero-entry__action:hover, html[data-theme="light"] .pt-home-hero-entry__action:focus-visible { color: var(--pt-hero-accent); background: none; } } /* * Tema claro da composição mobile. * O véu vertical mantém uma luminosidade uniforme atrás da chamada; o antigo * gradiente horizontal de desktop dividia cada linha entre claro e escuro. */ @media (max-width: 767.98px) { html[data-theme="light"] .pt-home-hero::before { background: linear-gradient( 180deg, rgba(218, 232, 248, 0.96) 0%, rgba(216, 230, 247, 0.92) 44%, rgba(219, 232, 247, 0.22) 61%, rgba(230, 239, 249, 0.34) 78%, rgba(241, 246, 252, 0.9) 100% ); } html[data-theme="light"] .pt-home-hero::after { opacity: 0.13; background: radial-gradient( circle at 50% 64%, rgba(30, 86, 255, 0.24), transparent 30% ), linear-gradient(90deg, rgba(30, 86, 255, 0.12) 1px, transparent 1px), linear-gradient(rgba(30, 86, 255, 0.1) 1px, transparent 1px); background-position: center, center bottom, center bottom; background-size: auto, 56px 56px, 56px 56px; mask-image: linear-gradient(180deg, transparent 22%, #000 58%, transparent); -webkit-mask-image: linear-gradient( 180deg, transparent 22%, #000 58%, transparent ); } html[data-theme="light"] .pt-public-home .pt-home-hero-entries { background: rgba(245, 250, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 34px rgba(13, 43, 87, 0.16); } html[data-theme="light"] .pt-public-home .pt-home-hero-entry, html[data-theme="light"] .pt-public-home .pt-home-hero-entry + .pt-home-hero-entry { background: linear-gradient( 155deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.82) ); border-color: color-mix(in srgb, var(--pt-hero-accent), transparent 68%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 7px 16px rgba(13, 43, 87, 0.12); } html[data-theme="light"] .pt-public-home .pt-home-hero-entry__action { color: var(--pt-hero-accent); background: none; border: 0; } }