/* ════════════════════════════════════════════════════════════════════ TITAN DS — cor de acento por seção (rollout do design do Endurance). Cada página define data-area no (ou ) e ganha sua cor. Componentes compartilhados (cards, ícones, abas, charts) usam var(--accent). Inclua junto com js/icons.js. Aditivo e seguro: só define variáveis. ════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@400;600;700;800;900&display=swap'); :root{ --accent:#ff6b2c; --accent-2:#ff8a4c; --accent-3:#ffb13c; --accent-soft:rgba(255,107,44,.12); --accent-line:rgba(255,107,44,.30); /* tipografia do DS — Bebas Neue p/ números heróis (assinatura do Endurance) */ --font-num:'Bebas Neue', sans-serif; --font-ui:'Outfit', system-ui, -apple-system, sans-serif; } /* número-herói: condensado, impactante, opcionalmente na cor da aba */ .t-num{font-family:var(--font-num);line-height:.85;letter-spacing:.01em;font-variant-numeric:tabular-nums} .t-num--accent{background:linear-gradient(180deg,#fff,var(--accent-2) 55%,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 18px var(--accent-soft))} /* ── Shimmer: brilho que varre o gradiente (heróis das abas). Usa o accent da aba. Aplicar em wordmarks/números-herói: 42.5 ── */ .t-shine{background:linear-gradient(100deg,var(--accent-3,#fff) 0%,var(--accent,#fff) 30%,var(--accent-2,#fff) 50%,var(--accent,#fff) 70%,var(--accent-3,#fff) 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:tShine 4s ease-in-out infinite} @keyframes tShine{0%,100%{background-position:0% center}50%{background-position:130% center}} @media(prefers-reduced-motion:reduce){.t-shine{animation:none}} [data-area="endurance"]{ --accent:#ff6b2c; --accent-2:#ff8a4c; --accent-3:#ffb13c; --accent-soft:rgba(255,107,44,.12); --accent-line:rgba(255,107,44,.30); } [data-area="progresso"],[data-area="evolucao"]{ --accent:#4ea8de; --accent-2:#5bb8ee; --accent-3:#8fd0ff; --accent-soft:rgba(78,168,222,.13); --accent-line:rgba(78,168,222,.32); } [data-area="treinos"]{ --accent:#e2543e; --accent-2:#ff6b54; --accent-3:#ff9180; --accent-soft:rgba(226,84,62,.13); --accent-line:rgba(226,84,62,.32); } [data-area="nutricao"],[data-area="fuel"]{ --accent:#5fc77f; --accent-2:#74d893; --accent-3:#9fe7b5; --accent-soft:rgba(95,199,127,.13); --accent-line:rgba(95,199,127,.32); } [data-area="comunidade"],[data-area="feed"]{ --accent:#9d86ff; --accent-2:#b09cff; --accent-3:#cdc0ff; --accent-soft:rgba(157,134,255,.14); --accent-line:rgba(157,134,255,.34); /* Espectro roxo (anti-monocromatico, estilo Endurance): violeta profundo -> magenta -> indigo -> ciano pop */ --c-violet:#7c5cff; --c-royal:#8b5cf6; --c-lilac:#b794f6; --c-magenta:#c264e0; --c-indigo:#6d6bff; --c-cyan:#5be0ff; --grad-feed:linear-gradient(135deg,var(--c-violet),var(--c-magenta)); --grad-feed-2:linear-gradient(135deg,var(--c-indigo),var(--c-cyan)); } [data-area="temporada"]{ --accent:#e8b923; --accent-2:#ffce4a; --accent-3:#ffe08a; --accent-soft:rgba(232,185,35,.14); --accent-line:rgba(232,185,35,.34); } [data-area="periodo"],[data-area="woman"]{ --accent:#e05a77; --accent-2:#f06f8c; --accent-3:#ff9db1; --accent-soft:rgba(224,90,119,.14); --accent-line:rgba(224,90,119,.34); } [data-area="perfil"]{ --accent:#cd8b5b; --accent-2:#e0a072; --accent-3:#efc098; --accent-soft:rgba(205,139,91,.15); --accent-line:rgba(205,139,91,.34); } [data-area="home"],[data-area="plataforma"]{ --accent:#2ec4b6; --accent-2:#46d6c8; --accent-3:#86e8de; --accent-soft:rgba(46,196,182,.13); --accent-line:rgba(46,196,182,.32); } [data-area="exercicios"],[data-area="biblioteca"]{ --accent:#7c8cff; --accent-2:#94a1ff; --accent-3:#bcc4ff; --accent-soft:rgba(124,140,255,.14); --accent-line:rgba(124,140,255,.34); } /* superficies secundarias / utilitarias */ [data-area="edu"]{ --accent:#cda13e; --accent-2:#e0bb5e; --accent-3:#efd79a; --accent-soft:rgba(205,161,62,.14); --accent-line:rgba(205,161,62,.34); } [data-area="configuracoes"]{ --accent:#5b8def; --accent-2:#7ea7f5; --accent-3:#aecbfa; --accent-soft:rgba(91,141,239,.14); --accent-line:rgba(91,141,239,.34); } [data-area="globo"],[data-area="earth"]{ --accent:#18b2c4; --accent-2:#4fc8d6; --accent-3:#9ce2ea; --accent-soft:rgba(24,178,196,.14); --accent-line:rgba(24,178,196,.34); } [data-area="coach"],[data-area="bob"]{ --accent:#ffb547; --accent-2:#ffca78; --accent-3:#ffe0ad; --accent-soft:rgba(255,181,71,.15); --accent-line:rgba(255,181,71,.36); } [data-area="admin"],[data-area="painel"]{ --accent:#7c8aa3; --accent-2:#9aa6bb; --accent-3:#c2cad8; --accent-soft:rgba(124,138,163,.14); --accent-line:rgba(124,138,163,.34); } /* ícone genérico pinta com o acento da página quando dentro de um chip .ds-ic-chip */ .ds-ic-chip .ic{ color:var(--accent-2); } /* ════════════════════════════════════════════════════════════════════ KIT DE COMPONENTES (prefixo t-) — usa --accent da página. Aditivo: nenhuma página usa ainda, então é 100% seguro. Conversões viram "montar". Fallbacks garantem que funciona em qualquer página (tokens variam). ════════════════════════════════════════════════════════════════════ */ /* — card calmo — */ .t-card{position:relative;background:var(--card,#0f1117);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.22)} .t-card--accent{background:linear-gradient(150deg,var(--accent-soft),var(--card,#0f1117) 70%);border-color:var(--accent-line)} .t-card-head{display:flex;align-items:center;gap:12px;margin-bottom:10px} .t-ic-chip{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;background:var(--accent-soft);color:var(--accent-2)} .t-ic-chip .ic{width:1.35rem;height:1.35rem} .t-card-t{font-weight:800;font-size:1rem;letter-spacing:-.01em} .t-card-s{font-size:.72rem;color:var(--ink-3,rgba(255,255,255,.5));margin-top:1px} /* — abas — */ .t-tabs{display:flex;gap:5px;background:var(--card-2,#0d0f17);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:14px;padding:4px;position:sticky;top:6px;z-index:30;box-shadow:0 6px 18px rgba(0,0,0,.32)} .t-tab{flex:1;border:none;background:none;color:var(--ink-3,rgba(255,255,255,.5));font-family:inherit;font-weight:700;font-size:.8rem;padding:9px 4px;border-radius:10px;cursor:pointer;transition:color .2s,background .2s} .t-tab.on{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#0b0c08;box-shadow:0 4px 12px var(--accent-soft)} .t-tab:active{transform:scale(.96)} /* — rail (netflix) + poster — */ .t-rail{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch} .t-rail::-webkit-scrollbar{display:none} .t-rail-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:8px 2px 9px} .t-rail-t{font-weight:800;font-size:.94rem}.t-rail-s{font-size:.64rem;color:var(--ink-3,rgba(255,255,255,.5));font-weight:700} .t-poster{flex:0 0 auto;width:clamp(150px,42vw,172px);border-radius:16px;overflow:hidden;scroll-snap-align:start;position:relative;background:#0c0e16;border:1px solid var(--line,rgba(255,255,255,.08));box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .25s cubic-bezier(.22,1,.36,1)} .t-poster:active{transform:scale(.97)} .t-poster-art{position:relative;height:118px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 28%,var(--accent-soft),#0a0c14 74%)} .t-poster-art .ic{width:42%;height:42%;color:var(--accent-2)} .t-poster-body{padding:10px 12px 13px;background:linear-gradient(180deg,#0c0e16,#070810)} .t-poster-big{font-family:'Bebas Neue',sans-serif;font-size:2rem;line-height:.9;color:#fff;letter-spacing:.01em} .t-poster-nm{font-size:.74rem;font-weight:700;color:var(--ink-2,rgba(255,255,255,.78));margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* — pódio — */ .t-podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:8px 0 14px} .t-pod{flex:1;max-width:108px;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit} .t-pod .pav{border-radius:50%;background:var(--accent-soft);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;border:2.5px solid var(--line,rgba(255,255,255,.1));overflow:hidden} .t-pod.p1 .pav{width:74px;height:74px;border-color:#e8b923;box-shadow:0 0 22px rgba(232,185,35,.35)} .t-pod.p2 .pav{width:60px;height:60px;border-color:#c0c8d4}.t-pod.p3 .pav{width:60px;height:60px;border-color:#cd8b5b} .t-pod .pnm{font-size:.78rem;font-weight:800;margin-top:7px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .t-pod .psc{font-size:.7rem;color:var(--ink-3,rgba(255,255,255,.5))} .t-pod .base{width:100%;border-radius:12px 12px 0 0;margin-top:8px;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;font-family:'Bebas Neue',sans-serif;font-size:1.4rem;color:var(--ink-3,rgba(255,255,255,.5));background:linear-gradient(180deg,var(--accent-soft),transparent);border:1px solid var(--line,rgba(255,255,255,.08));border-bottom:0} .t-pod.p1 .base{height:58px;color:#e8b923;background:linear-gradient(180deg,rgba(232,185,35,.18),transparent);border-color:rgba(232,185,35,.3)} .t-pod.p2 .base{height:42px}.t-pod.p3 .base{height:32px} /* — selo de recompensa — */ .t-seal{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;background:radial-gradient(circle at 50% 28%,var(--accent-soft),transparent);border:2px solid var(--accent-line)} .t-seal b{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;color:var(--accent-3)} .t-seal span{font-size:.46rem;letter-spacing:.12em;color:var(--accent-2);font-weight:800;margin-top:1px} /* — trio de stats — */ .t-trio{display:flex;gap:8px} .t-trio>div{flex:1;text-align:center;background:rgba(255,255,255,.04);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:12px;padding:10px 4px} .t-trio b{display:block;font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:#fff;line-height:1} .t-trio span{font-size:.56rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3,rgba(255,255,255,.5))} /* — barra de progresso + sparkline na cor da aba — */ .t-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden} .t-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-3));transition:width .8s cubic-bezier(.22,1,.36,1)} .t-spark{width:100%;height:auto;display:block} /* — anel de atividade na cor da aba — */ .t-ring-bg{fill:none;stroke:rgba(255,255,255,.06)} .t-ring-fg{fill:none;stroke:var(--accent-2);stroke-linecap:round;filter:drop-shadow(0 0 8px var(--accent-soft));transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1)} /* ═══════════════ SISTEMA DE BOTÕES PADRÃO (3 tipos) ═══════════════ Adaptam ao --accent da aba. Usar em TODA a plataforma. .t-btn--solid = cor chapada/sólida .t-btn--grad = degradê com brilho (assinatura Endurance) .t-btn--outline = só contorno Modificadores: .t-btn--block (largura total), .t-btn--lg / .t-btn--sm */ .t-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:99px;font-family:var(--font-ui,'Outfit'),system-ui,sans-serif;font-weight:800;font-size:.95rem;letter-spacing:.01em;line-height:1;cursor:pointer;border:1.5px solid transparent;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .2s,filter .15s,background .15s,border-color .15s} .t-btn:active{transform:scale(.97)} .t-btn:disabled,.t-btn[aria-disabled="true"]{opacity:.5;pointer-events:none} .t-btn .ic,.t-btn>svg{width:1.2em;height:1.2em;flex-shrink:0} .t-btn--block{display:flex;width:100%} .t-btn--lg{padding:16px 26px;font-size:1.02rem;border-radius:18px} .t-btn--sm{padding:8px 15px;font-size:.82rem;gap:6px} /* 1 — sólido chapado */ .t-btn--solid{background:var(--accent);color:#fff;border-color:var(--accent)} .t-btn--solid:hover{filter:brightness(1.09)} /* 2 — degradê com brilho */ .t-btn--grad{position:relative;overflow:hidden;color:#fff;background:linear-gradient(100deg,var(--accent-2,var(--accent)) 0%,var(--accent) 52%,color-mix(in oklch,var(--accent) 70%,#000) 100%);box-shadow:0 10px 28px color-mix(in oklch,var(--accent) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35)} .t-btn--grad::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:tBtnShine 4.5s ease-in-out infinite;pointer-events:none} @keyframes tBtnShine{0%,55%{left:-60%}80%,100%{left:135%}} .t-btn--grad:hover{box-shadow:0 13px 34px color-mix(in oklch,var(--accent) 58%,transparent),inset 0 1px 0 rgba(255,255,255,.42)} /* 3 — contorno */ .t-btn--outline{background:color-mix(in oklch,var(--accent) 7%,transparent);color:var(--accent-2,var(--accent));border-color:color-mix(in oklch,var(--accent) 45%,transparent)} .t-btn--outline:hover{background:color-mix(in oklch,var(--accent) 14%,transparent);border-color:var(--accent)} @media(prefers-reduced-motion:reduce){.t-btn--grad::after{animation:none;display:none}}