/* ═══════════════════════════════════════════════════════════════════════ WIKITURB — design system Tema claro/escuro via [data-theme] no . ═══════════════════════════════════════════════════════════════════════ */ :root { /* Paleta VTURB — as 4 paradas do gradiente oficial da marca. */ --vt-1: #f04e1f; --vt-2: #e84438; --vt-3: #fb0047; --vt-4: #e90058; --vt-gradient: linear-gradient(100deg, var(--vt-1), var(--vt-2) 27%, var(--vt-3) 65%, var(--vt-4)); --brand-500: #fb0047; --brand-600: #e90058; --brand-400: #f04e1f; --a1: #7c3aed; /* violeta */ --a2: #0ea5e9; /* azul */ --a3: #059669; /* verde */ --a4: #ea580c; /* laranja */ --a5: #db2777; /* rosa */ --a6: #0891b2; /* ciano */ --a7: #ca8a04; /* âmbar */ --a8: #4f46e5; /* índigo */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --wrap: 1180px; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(0.32, 0.72, 0, 1); } :root[data-theme="light"] { --bg: #ffffff; --bg-soft: #f7f7fb; --bg-sunken: #f1f1f7; --surface: #ffffff; --surface-2: #fafafd; --ink: #12121a; --ink-muted: #4c4c5c; --ink-faint: #7b7b8f; --border: #e6e6ef; --border-strong: #d2d2e0; --shadow-sm: 0 1px 2px rgba(18, 18, 26, 0.05), 0 1px 3px rgba(18, 18, 26, 0.04); --shadow: 0 4px 16px rgba(18, 18, 26, 0.07), 0 1px 3px rgba(18, 18, 26, 0.05); --shadow-lg: 0 20px 50px rgba(18, 18, 26, 0.14); --hero-glow: radial-gradient(70% 120% at 50% -10%, rgba(251, 0, 71, 0.13), transparent 70%); --code-bg: #f4f4f9; } :root[data-theme="dark"] { --bg: #0a0a11; --bg-soft: #101019; --bg-sunken: #08080e; --surface: #14141f; --surface-2: #191926; --ink: #ececf3; --ink-muted: #a8a8bd; --ink-faint: #7a7a95; --border: #26263a; --border-strong: #35354e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 6px 22px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6); --hero-glow: radial-gradient(70% 120% at 50% -10%, rgba(251, 0, 71, 0.2), transparent 70%); --code-bg: #0f0f18; /* No escuro o vermelho puro vibra demais — sobe o brilho sem perder a marca. */ --brand-500: #ff2d63; --brand-600: #fb0047; --brand-400: #ff7a4d; --a1: #a78bfa; --a2: #38bdf8; --a3: #34d399; --a4: #fb923c; --a5: #f472b6; --a6: #22d3ee; --a7: #fbbf24; --a8: #818cf8; } /* ── Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); } img, svg { max-width: 100%; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.021em; font-weight: 700; } p { margin: 0; } ul, ol, dl, dd { margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.75rem 1.25rem; background: var(--brand-600); color: #fff; border-radius: 0 0 var(--radius) 0; } .skip:focus { left: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; } .icon { flex: none; vertical-align: -0.18em; } .logo { display: block; width: auto; color: inherit; } /* ── Accents ─────────────────────────────────────────────────────────── */ .accent1 { --accent: var(--a1); } .accent2 { --accent: var(--a2); } .accent3 { --accent: var(--a3); } .accent4 { --accent: var(--a4); } .accent5 { --accent: var(--a5); } .accent6 { --accent: var(--a6); } .accent7 { --accent: var(--a7); } .accent8 { --accent: var(--a8); } /* ── Header ──────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; gap: 1.25rem; height: 62px; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; } .brand__name { font-weight: 800; font-size: 1.06rem; letter-spacing: -0.03em; } .brand__accent { background: var(--vt-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .site-nav { display: flex; gap: 0.25rem; margin-left: auto; } .site-nav a { padding: 0.45rem 0.8rem; border-radius: var(--radius-sm); font-size: 0.925rem; font-weight: 500; color: var(--ink-muted); transition: color 0.15s, background-color 0.15s; } .site-nav a:hover { color: var(--ink); background: var(--bg-soft); } .site-nav a.is-active { color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 10%, transparent); } .site-header__actions { display: flex; gap: 0.35rem; align-items: center; } .btn-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s var(--ease); } .btn-icon:hover { color: var(--ink); border-color: var(--border-strong); transform: translateY(-1px); } .nav-toggle { display: none; } :root[data-theme="light"] .only-dark, :root[data-theme="dark"] .only-light { display: none; } /* Faixa "Uma iniciativa Atlas Scale" */ .partners { border-top: 1px solid var(--border); background: var(--bg-soft); } .partners__inner { display: flex; align-items: center; gap: 0.9rem; height: 46px; color: var(--ink-muted); } .partners__label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } /* A logo da VTURB é branca no escuro e preta no claro — currentColor resolve. */ .logo--vturb { color: var(--ink); } /* ── Botões ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.94rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: all 0.16s var(--ease); } .btn--primary { background: var(--vt-gradient); color: #fff; box-shadow: 0 4px 14px rgba(251, 0, 71, 0.3); } .btn--primary:hover { transform: translateY(-1.5px); box-shadow: 0 8px 22px rgba(251, 0, 71, 0.4); } .btn--ghost { background: var(--surface); border-color: var(--border); color: var(--ink); } .btn--ghost:hover { border-color: var(--border-strong); transform: translateY(-1.5px); } /* ── Hero ────────────────────────────────────────────────────────────── */ .hero { position: relative; padding: 4.5rem 0 3rem; background: var(--hero-glow); text-align: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--ink-muted); } .hero__title { margin: 1.25rem 0 0; font-size: clamp(2.75rem, 8vw, 4.75rem); letter-spacing: -0.045em; font-weight: 800; } .hero__lede { max-width: 640px; margin: 1rem auto 0; font-size: clamp(1rem, 2.2vw, 1.16rem); color: var(--ink-muted); } .hero__actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.85rem; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 3.25rem auto 0; max-width: 780px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .stats > div { background: var(--surface); padding: 1.1rem 0.75rem; } .stats dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 600; } .stats dd { margin: 0.25rem 0 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; } /* ── Counter ───────────────────────────────────────────────────────────── Carretel de dígitos: cada coluna tem 0-9 empilhados e sobe até o número certo. Sem JS o valor original continua no HTML. ──────────────────────────────────────────────────────────────────────── */ .counter { /* Altura da janela do carretel. Precisa de folga além do 1em: com line-height exato o topo dos dígitos encosta na borda e o overflow corta. */ --reel-h: 1.3em; display: inline-flex; line-height: 1; /* o -0.03em do .stats dd empurra o glifo pra fora da coluna de 1ch */ letter-spacing: 0; } .counter__digit { position: relative; overflow: hidden; height: var(--reel-h); width: 1ch; font-variant-numeric: tabular-nums; } .counter__reel { display: block; transform: translateY(0); /* leve overshoot pra dar o peso de mola do original */ transition: transform 1.15s cubic-bezier(0.22, 1.4, 0.36, 1); } .counter__reel span { display: grid; place-items: center; height: var(--reel-h); } /* Só pro leitor de tela — o carretel visual é decorativo. */ .counter__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── SplitText / ScrollFloat ─────────────────────────────────────────── */ .is-split .split-char { display: inline-block; opacity: 0; transform: translateY(0.55em) scaleY(1.6) scaleX(0.82); transform-origin: 50% 0%; transition: opacity 0.6s var(--ease), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .is-split.is-revealed .split-char { opacity: 1; transform: none; } /* Espaço não pode colapsar depois do inline-block. */ .is-split .split-char:empty { width: 0.28em; } /* ── Seções ──────────────────────────────────────────────────────────── */ .section { padding: 3.25rem 0; } .section__head { margin-bottom: 1.75rem; } .section__head h2 { font-size: clamp(1.5rem, 3.5vw, 1.95rem); } .section__head p { margin-top: 0.4rem; color: var(--ink-muted); max-width: 62ch; } .pillar { margin-top: 2.5rem; } .pillar__head { display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 1rem; } .pillar__head h3 { font-size: 1.1rem; } .pillar__head h3::before { content: ""; } .pillar__head p { color: var(--ink-faint); font-size: 0.9rem; } .grid { display: grid; gap: 1rem; } .grid--cards { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); } /* ── Cards ───────────────────────────────────────────────────────────── */ .card { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent, var(--brand-500)) 42%, var(--border)); } /* GlareHover — faixa de luz diagonal atravessando o card no hover. */ .card { position: relative; overflow: hidden; } .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( -30deg, transparent 60%, color-mix(in srgb, var(--accent, var(--brand-500)) 22%, transparent) 70%, transparent 78%, transparent 100% ); background-repeat: no-repeat; background-size: 250% 250%; background-position: -100% -100%; transition: background-position 0.8s ease; } .card:hover::after { background-position: 100% 100%; } .card__meta { display: flex; gap: 0.4rem; flex-wrap: wrap; } .card__title { font-size: 1.02rem; letter-spacing: -0.015em; } .card__summary { font-size: 0.895rem; color: var(--ink-muted); flex: 1; } .card__foot { font-size: 0.77rem; color: var(--ink-faint); display: flex; align-items: center; gap: 0.35rem; } .card--category .card__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); margin-bottom: 0.35rem; } /* ── Chips / tags ────────────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.24rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; border: 1px solid var(--border); color: var(--ink-muted); background: var(--bg-soft); white-space: nowrap; } .chip--accent1 { color: var(--a1); background: color-mix(in srgb, var(--a1) 11%, transparent); border-color: color-mix(in srgb, var(--a1) 26%, transparent); } .chip--accent2 { color: var(--a2); background: color-mix(in srgb, var(--a2) 11%, transparent); border-color: color-mix(in srgb, var(--a2) 26%, transparent); } .chip--accent3 { color: var(--a3); background: color-mix(in srgb, var(--a3) 11%, transparent); border-color: color-mix(in srgb, var(--a3) 26%, transparent); } .chip--accent4 { color: var(--a4); background: color-mix(in srgb, var(--a4) 11%, transparent); border-color: color-mix(in srgb, var(--a4) 26%, transparent); } .chip--accent5 { color: var(--a5); background: color-mix(in srgb, var(--a5) 11%, transparent); border-color: color-mix(in srgb, var(--a5) 26%, transparent); } .chip--accent6 { color: var(--a6); background: color-mix(in srgb, var(--a6) 11%, transparent); border-color: color-mix(in srgb, var(--a6) 26%, transparent); } .chip--accent7 { color: var(--a7); background: color-mix(in srgb, var(--a7) 11%, transparent); border-color: color-mix(in srgb, var(--a7) 26%, transparent); } .chip--accent8 { color: var(--a8); background: color-mix(in srgb, var(--a8) 11%, transparent); border-color: color-mix(in srgb, var(--a8) 26%, transparent); } .chip--plain { color: var(--ink-faint); } .chip--iniciante { color: var(--a3); border-color: color-mix(in srgb, var(--a3) 30%, transparent); background: transparent; } .chip--intermediario { color: var(--a7); border-color: color-mix(in srgb, var(--a7) 30%, transparent); background: transparent; } .chip--avancado { color: var(--a5); border-color: color-mix(in srgb, var(--a5) 30%, transparent); background: transparent; } .tag { font-size: 0.78rem; color: var(--ink-faint); } /* ── Cabeçalho de página ─────────────────────────────────────────────── */ .page-head { padding: 2.5rem 0 1rem; } .page-head h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); letter-spacing: -0.035em; } .page-head__main { display: flex; gap: 1rem; align-items: flex-start; margin-top: 0.9rem; } .page-head__icon { display: inline-grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 13px; color: var(--accent, var(--brand-500)); background: color-mix(in srgb, var(--accent, var(--brand-500)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent, var(--brand-500)) 24%, transparent); } .page-head__tagline { color: var(--ink-muted); margin-top: 0.3rem; } .page-head__desc { margin-top: 1rem; color: var(--ink-muted); max-width: 68ch; } .page-head__count { margin-top: 0.85rem; font-size: 0.82rem; color: var(--ink-faint); font-weight: 600; } .crumbs { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--ink-faint); flex-wrap: wrap; } .crumbs a { color: var(--ink-faint); } .crumbs a:hover { color: var(--brand-500); } .crumbs__sep { opacity: 0.5; } .jump { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; } .jump .chip { cursor: pointer; } /* ── Artigo ──────────────────────────────────────────────────────────── */ .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 3rem; align-items: start; padding-top: 2.25rem; padding-bottom: 3rem; } .article { min-width: 0; } .article__head { margin: 1rem 0 2rem; } .article__head h1 { font-size: clamp(1.85rem, 4.6vw, 2.55rem); margin-top: 0.9rem; letter-spacing: -0.035em; } .article__summary { margin-top: 0.9rem; font-size: 1.06rem; color: var(--ink-muted); max-width: 68ch; } .article__updated { margin-top: 0.9rem; font-size: 0.79rem; color: var(--ink-faint); } .article__tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .article-aside { position: sticky; top: 122px; } .toc { border-left: 2px solid var(--border); padding-left: 1rem; } .toc__title { /* É um