/* ============================================================================
STRIVE — Camada de refinamento visual
----------------------------------------------------------------------------
Carregada DEPOIS do bundle principal. Não altera estrutura nem layout:
só materiais (vidro, sombra), tipografia e microestados.
Para reverter tudo: remover a linha do index.html.
========================================================================== */
/* --------------------------------------------------------------------------
0. Tokens
-------------------------------------------------------------------------- */
:root {
--ease-glass: cubic-bezier(.22, 1, .36, 1);
/* Paleta calibrada pela arte do LinkedIn:
coral #F8595E (menos neon que o #FF5757 anterior)
azul #34478A (o mesmo do selo "FOUNDERS DA STRIVE") */
--strive-coral: 358 92% 66%;
--strive-blue: 226 46% 37%;
--gradient-strive: linear-gradient(135deg, hsl(var(--strive-blue)), hsl(var(--strive-coral)));
/* Dock — vidro do painel Breeze/Plasma, com um véu do azul da marca */
--dock-glass: rgba(255, 255, 255, .95);
--dock-glass-hover: rgba(255, 255, 255, .985);
--dock-hairline: transparent;
--dock-item-hover: hsl(226 20% 40% / .07);
--dock-item-outline: transparent;
/* ícone "users" do lucide, usado como máscara no botão Comunidade */
--icon-users: url('data:image/svg+xml;utf8,');
--font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
--font-ui: "Inter", "Poppins", ui-sans-serif, system-ui, sans-serif;
/* Hairline mais fria e leve que o cinza padrão do Tailwind */
--border: 220 16% 91%;
/* Cantos levemente mais macios em todos os componentes */
--radius: .625rem;
}
/* --------------------------------------------------------------------------
1. Tipografia — Poppins nos títulos (marca), Inter no corpo/UI (legibilidade)
-------------------------------------------------------------------------- */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body,
.font-poppins {
font-family: var(--font-ui);
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
h1, h2, h3, h4, h5, h6,
.font-poppins:is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-display);
}
h1, h2 { letter-spacing: -.028em; text-wrap: balance; }
h3, h4 { letter-spacing: -.015em; text-wrap: balance; }
h1 { letter-spacing: -.035em; }
p { text-wrap: pretty; }
/* Display H1: escala fluida entre os mesmos extremos já usados hoje
(30px no mobile → 72px no desktop), sem os saltos entre breakpoints. */
h1.leading-tight {
font-size: clamp(1.875rem, .6rem + 4.4vw, 4.5rem);
line-height: 1.1;
}
/* --------------------------------------------------------------------------
2. Links — o padrão global era font-weight 800 + sublinhado no hover,
o que pesava a página e sublinhava até os botões.
-------------------------------------------------------------------------- */
a { font-weight: 600; }
a:hover,
a:focus-visible { text-decoration: none; }
/* O bundle aplica a:hover{color:hsl(var(--nav-coral))} a TODO . Num link de
texto é o efeito desejado; num botão, pinta o texto da cor do próprio fundo —
o Apply ficava coral sobre coral no hover. Botões preservam a sua cor. */
a[class*="bg-strive-coral"]:hover,
a[class*="bg-strive-coral"]:focus-visible,
button[class*="bg-strive-coral"]:hover,
button[class*="bg-strive-coral"]:focus-visible,
a[class*="text-white"]:hover,
a[class*="text-white"]:focus-visible,
a[class*="bg-primary"]:hover,
a[class*="bg-primary"]:focus-visible {
color: #fff;
}
/* Sublinhado animado só onde faz sentido: links de texto do rodapé */
footer a:not([class*="bg-"]):not([class*="border"]):not([class*="rounded"]) {
background-image: linear-gradient(hsl(var(--strive-coral)), hsl(var(--strive-coral)));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 1.5px;
padding-bottom: 2px;
transition: background-size .38s var(--ease-glass), color .22s ease;
}
footer a:not([class*="bg-"]):not([class*="border"]):not([class*="rounded"]):hover {
background-size: 100% 1.5px;
}
/* --------------------------------------------------------------------------
3. Seleção e foco visível (acessibilidade)
-------------------------------------------------------------------------- */
::selection {
background: hsl(var(--strive-coral) / .22);
color: #0d1117;
}
:focus-visible {
outline: 2px solid hsl(var(--strive-coral) / .8);
outline-offset: 3px;
border-radius: 6px;
}
/* --------------------------------------------------------------------------
4. Sombras — de "caixa escura" para camadas suaves e difusas
(redefine só o token do Tailwind, então os :hover continuam funcionando)
-------------------------------------------------------------------------- */
.shadow-sm { --tw-shadow: 0 1px 2px rgba(16, 22, 40, .05); }
.shadow-md { --tw-shadow: 0 1px 2px rgba(16, 22, 40, .04), 0 4px 12px -4px rgba(16, 22, 40, .10); }
.shadow-lg { --tw-shadow: 0 1px 2px rgba(16, 22, 40, .04), 0 8px 24px -8px rgba(16, 22, 40, .12); }
.shadow-xl { --tw-shadow: 0 1px 2px rgba(16, 22, 40, .04), 0 16px 40px -14px rgba(16, 22, 40, .16); }
.shadow-2xl { box-shadow: 0 2px 4px rgba(16, 22, 40, .04), 0 26px 60px -22px rgba(16, 22, 40, .22); }
/* --------------------------------------------------------------------------
5. Barra de rolagem discreta
-------------------------------------------------------------------------- */
html {
scrollbar-width: thin;
scrollbar-color: rgba(16, 22, 40, .2) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(16, 22, 40, .2);
border: 3px solid transparent;
background-clip: content-box;
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(16, 22, 40, .34);
background-clip: content-box;
}
/* ==========================================================================
6. O DOCK — painel no idioma do Breeze / KDE Plasma
--------------------------------------------------------------------------
Regras do painel do Plasma que estão sendo aplicadas aqui:
· vidro fosco levemente frio, não branco puro
· cantos de painel (~18px), não pílula
· hairline escura por fora + realce claro de 1px por dentro
· "task" com highlight retangular arredondado no hover
· item ativo marcado por uma barra de acento embaixo
· à direita, um agrupamento tipo system tray, separado por divisor
Toda a paleta vem de --strive-coral / --strive-blue: sem terceira cor.
========================================================================== */
nav.fixed > div {
background-color: var(--dock-glass);
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
border-color: transparent;
box-shadow:
0 2px 6px hsl(226 30% 20% / .06),
0 14px 34px -10px hsl(226 30% 20% / .16),
0 34px 70px -28px hsl(226 30% 20% / .24);
transition:
background-color .5s var(--ease-glass),
box-shadow .5s var(--ease-glass),
transform .5s var(--ease-glass);
}
/* Cápsula, como no mockup */
nav.fixed > div.rounded-3xl { border-radius: 999px; }
nav.fixed:hover > div,
nav.fixed:focus-within > div {
background-color: var(--dock-glass-hover);
transform: translateY(-2px);
box-shadow:
0 2px 6px hsl(226 30% 20% / .06),
0 20px 42px -12px hsl(226 30% 20% / .2),
0 46px 90px -32px hsl(226 30% 20% / .28);
}
/* --- Itens de navegação = "tasks" do painel ------------------------------
O padding é neutralizado por margem negativa igual, então a largura
total do dock não muda em relação ao layout original. */
nav.fixed a:not([class*="bg-strive-coral"]):not([class*="border-community"]) {
position: relative;
padding: .45rem .5rem;
margin: -.45rem -.5rem;
border-radius: .5rem;
font-weight: 600;
color: hsl(226 24% 22%);
transition:
color .18s ease,
background-color .25s var(--ease-glass),
box-shadow .25s var(--ease-glass);
}
nav.fixed a:not([class*="bg-strive-coral"]):not([class*="border-community"]):hover {
background-color: var(--dock-item-hover);
box-shadow: inset 0 0 0 1px var(--dock-item-outline);
color: hsl(358 76% 52%);
}
/* Página atual: só o acento coral e a barra indicadora embaixo, como o Plasma
marca a janela ativa. O fundo rosa que havia aqui sujava o vidro. */
/* Os :not() repetidos não são decoração: sem eles a regra genérica dos itens
acima ganha por especificidade e o item ativo sai cinza em vez de coral. */
nav.fixed a.text-strive-coral:not([class*="bg-strive-coral"]):not([class*="border-community"]) {
color: hsl(358 76% 52%);
background-color: transparent;
font-weight: 700;
}
/* O ativo se comporta como qualquer outro item no hover: a única diferença
em relação aos demais é a cor do texto e a barra embaixo. */
nav.fixed a.text-strive-coral:not([class*="bg-strive-coral"]):not([class*="border-community"]):hover {
background-color: var(--dock-item-hover);
color: hsl(358 76% 48%);
box-shadow: inset 0 0 0 1px var(--dock-item-outline);
}
/* Sem barra indicadora: no mockup o ativo é só a cor coral do texto. */
/* --- Divisor do "system tray" ------------------------------------------- */
nav.fixed .w-px {
background: linear-gradient(
to bottom,
transparent,
hsl(226 46% 37% / .2) 22%,
hsl(226 46% 37% / .2) 78%,
transparent
);
}
/* --- Seletor de idioma: controle segmentado embutido no painel ----------- */
nav.fixed .shadow-lg { --tw-shadow: 0 0 #0000; }
nav.fixed .rounded-lg.p-1 {
background-color: #fff;
box-shadow: inset 0 0 0 1px rgba(16, 22, 40, .07);
border-radius: .625rem;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
nav.fixed .rounded-lg.p-1 button {
border-radius: .4rem;
color: hsl(226 14% 42%);
transition: background-color .22s var(--ease-glass), color .18s ease;
}
nav.fixed .rounded-lg.p-1 button:not([class*="bg-primary"]):hover {
background-color: rgba(16, 22, 40, .06);
color: hsl(226 24% 24%);
}
/* No mockup o idioma ativo é o quase-preto original, não o azul da marca. */
nav.fixed .rounded-lg.p-1 button[class*="bg-primary"] {
background-color: hsl(var(--primary));
color: #fff;
box-shadow: none;
}
/* --- Comunidade: o âmbar era a terceira cor solta do dock.
Reescrito no coral da marca — o mesmo do Apply e da barra do item ativo.
Escopo local: o resto do site (área de membros) segue âmbar. */
nav.fixed { --community: 358 92% 66%; }
nav.fixed a[class*="border-community"] {
background-color: transparent;
color: hsl(226 24% 18%);
border-radius: 999px;
border-color: hsl(var(--strive-coral) / .65);
font-weight: 600;
transition:
background-color .25s var(--ease-glass),
border-color .25s var(--ease-glass);
}
/* O mockup troca o cadeado por um ícone de pessoas. Como não há código-fonte
do app, o SVG original é escondido e o novo entra como máscara no ::before,
herdando a cor coral. */
nav.fixed a[class*="border-community"] > svg { display: none; }
nav.fixed a[class*="border-community"]::before {
content: "";
width: .875rem;
height: .875rem;
flex: none;
background-color: hsl(var(--strive-coral));
-webkit-mask: var(--icon-users) center / contain no-repeat;
mask: var(--icon-users) center / contain no-repeat;
}
nav.fixed a[class*="border-community"]:hover {
background-color: hsl(var(--strive-coral) / .07);
border-color: hsl(var(--strive-coral) / .9);
}
/* --- Apply: cápsula coral chapada, com o peso mais leve do mockup -------- */
nav.fixed a[class*="bg-strive-coral"] {
border-radius: 999px;
font-weight: 600;
letter-spacing: .002em;
background-image: none;
background-color: hsl(var(--strive-coral));
box-shadow: none;
}
nav.fixed a[class*="bg-strive-coral"]:hover {
background-color: hsl(358 76% 61%);
box-shadow: none;
}
/* Os três controles da direita têm alturas diferentes (40 / 34 / 36px) e topos
desalinhados por 3px. A correção existe e está descrita no README, mas foi
deixada de fora a pedido: nada aqui altera tamanho ou espaçamento. */
/* --- Botão do menu no mobile -------------------------------------------- */
nav.fixed button[aria-label] {
border-radius: 999px;
color: hsl(226 24% 22%);
transition: background-color .22s var(--ease-glass), color .18s ease;
}
nav.fixed button[aria-label]:hover {
background-color: var(--dock-item-hover);
color: hsl(var(--strive-blue));
}
/* Segurança em telas estreitas: o dock nunca encosta nas bordas.
Entre 768px e ~1024px o dock original transbordava da viewport
(o "Apply" ficava cortado); aqui ele compacta e depois reduz de escala. */
nav.fixed {
max-width: min(calc(100vw - 1.5rem), 100%);
}
@media (max-width: 1023px) {
nav.fixed > div { padding-left: 1.15rem; padding-right: 1.15rem; }
nav.fixed > div > div { gap: 1.125rem; }
}
@media (max-width: 900px) {
/* usa as variáveis de transform do Tailwind para não quebrar o
-translate-x-1/2 que centraliza o dock */
nav.fixed { --tw-scale-x: .88; --tw-scale-y: .88; }
}
/* ==========================================================================
7. CTAs coral — mesmo material em todo o site
========================================================================== */
a[class*="bg-strive-coral"],
button[class*="bg-strive-coral"] {
background-image: linear-gradient(135deg, hsl(358 92% 71%), hsl(358 74% 59%));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .3),
0 6px 18px -7px hsl(358 74% 55% / .65);
transition:
transform .3s var(--ease-glass),
box-shadow .3s var(--ease-glass);
}
a[class*="bg-strive-coral"]:hover,
button[class*="bg-strive-coral"]:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .38),
0 12px 28px -8px hsl(358 74% 52% / .78);
}
/* ==========================================================================
8. Acessibilidade — respeita quem pediu menos movimento
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
nav.fixed:hover > div,
nav.fixed:focus-within > div { transform: none; }
}