/* ============================================================ MMcorpo Coach — Marketing Premium (molduras de produto + motion) Reusável em TODAS as páginas de marketing. NÃO usar na home. Spec: BIBLIOTECA-UX-MARKETING-PAGES.md (PARTE 1 cor + PARTE 2 motion). Princípios: - "Moldura de produto" = near-black FRIO (#0A0B0D→#0e0f13→#15171d, viés azul) + hairline iridescente no topo + glow radial cyan 8% no canto. - Cor de estado Whoop (verde/âmbar/coral CALMO) SÓ dentro da moldura, sempre carregando um número real + rótulo/ícone (nunca só cor). - Cyan #22D3EE = ponte (marca + dado cru). - Motion premium SUAVE: easeOutExpo, durações longas, sem bounce/flash. - Progressive enhancement: sem JS, tudo visível; com JS (html.mm-js) revela. ============================================================ */ :root{ --mm-ease: cubic-bezier(0.22, 1, 0.36, 1); --mm-cyan:#22D3EE; --mm-irid: linear-gradient(127deg,#a5f3fc 0%,#4C8FFF 52%,#a7f3d0 100%); --mm-green:#34D399; /* ótimo */ --mm-amber:#F59E0B; /* atenção */ --mm-coral:#FB7185; /* recue (CALMO — nunca vermelho-sirene) */ --mm-ink-0:#0A0B0D; /* canvas frio */ --mm-ink-1:#0e0f13; /* card */ --mm-ink-2:#15171d; /* row / nível acima */ --mm-line: rgba(255,255,255,.08); --mm-grey:#939398; } /* ---------- Moldura de produto ---------- */ .mm-frame{ position:relative; background: radial-gradient(120% 90% at 18% 0%, rgba(34,211,238,.08), transparent 60%), linear-gradient(180deg, var(--mm-ink-1) 0%, var(--mm-ink-0) 100%); border:1px solid var(--mm-line); border-radius:2rem; padding:1.7rem 1.6rem; overflow:hidden; isolation:isolate; } /* hairline iridescente no topo (herói raro, 1×/moldura) */ .mm-frame::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:var(--mm-irid);opacity:.85;z-index:2; } .mm-frame--lg{padding:2rem 1.9rem;border-radius:2.2rem} .mm-frame__eyebrow{ font-family:'Satoshi Variable','Satoshi',sans-serif;font-weight:600; font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mm-grey);margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem; } /* selo "✦ gerado pelo seu agente" — costura Fitonist+Whoop */ .mm-seal{ display:inline-flex;align-items:center;gap:.42rem; font-family:'Satoshi Variable','Satoshi',sans-serif;font-weight:600; font-size:.74rem;letter-spacing:.04em;color:#cfd2d6; } .mm-seal__star{ -webkit-text-fill-color:transparent;background-image:var(--mm-irid); -webkit-background-clip:text;background-clip:text;font-size:.9rem; } /* ---------- Número-herói tabular ---------- */ .mm-num{ font-family:'Wixmadefordisplay',sans-serif;font-weight:700;line-height:1; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; color:#fff;letter-spacing:-.01em; } .mm-num--xl{font-size:clamp(3.2rem,7vw,4.6rem)} .mm-num--lg{font-size:clamp(2.4rem,5vw,3.2rem)} .mm-num__unit{font-size:.42em;font-weight:600;color:var(--mm-grey);margin-left:.18em;font-family:'Satoshi Variable','Satoshi',sans-serif} .mm-sub{font-family:'Satoshi Variable','Satoshi',sans-serif;color:var(--mm-grey);font-size:.95rem;line-height:1.5;margin:.5rem 0 0} /* ---------- Gauge ring (SVG injetado por JS) ---------- */ .mm-gauge{display:flex;flex-direction:column;align-items:center;gap:.1rem} .mm-gauge svg{display:block;width:100%;height:auto;max-width:200px} .mm-gauge__track{fill:none;stroke:rgba(255,255,255,.08);stroke-linecap:round} .mm-gauge__val{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1.4s var(--mm-ease)} .mm-gauge__center{display:flex;flex-direction:column;align-items:center;margin-top:-3.4rem;margin-bottom:1rem;position:relative;z-index:2} .mm-gauge__label{font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.78rem;color:var(--mm-grey);letter-spacing:.05em;text-transform:uppercase;margin-top:.15rem} /* ---------- Barra Time-in-Range (segmentada) ---------- */ .mm-tir{display:flex;flex-direction:column;gap:.7rem} .mm-tir__bar{display:flex;height:14px;border-radius:9999px;overflow:hidden;background:var(--mm-ink-2)} .mm-tir__seg{height:100%;transition:flex-grow 1s var(--mm-ease)} .mm-tir__seg--low{background:var(--mm-coral)} .mm-tir__seg--target{background:var(--mm-green)} .mm-tir__seg--high{background:var(--mm-amber)} .mm-tir__legend{display:flex;gap:1.1rem;flex-wrap:wrap;font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.8rem;color:var(--mm-grey)} .mm-tir__key{display:inline-flex;align-items:center;gap:.4rem} .mm-tir__dot{width:8px;height:8px;border-radius:2px;flex:none} .mm-tir__dot--low{background:var(--mm-coral)} .mm-tir__dot--target{background:var(--mm-green)} .mm-tir__dot--high{background:var(--mm-amber)} .mm-tir__key b{color:#fff;font-variant-numeric:tabular-nums;font-weight:700} /* ---------- Curva (mini-gráfico, SVG injetado) ---------- */ .mm-curve svg{display:block;width:100%;height:auto} .mm-curve__band{fill:rgba(52,211,153,.07)} .mm-curve__line{fill:none;stroke:var(--mm-cyan);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .mm-curve__peak{fill:var(--mm-amber)} .mm-curve__cap{font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.82rem;color:var(--mm-grey)} .mm-curve__cap b{color:#fff;font-variant-numeric:tabular-nums} /* ---------- Mini-laudo (linhas de exame + nota manuscrita do coach) ---------- */ .mm-lab-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--mm-line);font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.98rem;color:var(--mm-grey)} .mm-lab-row:last-of-type{border-bottom:0} .mm-lab-row b{color:#fff;font-variant-numeric:tabular-nums;font-weight:700} .mm-note{margin:.9rem 0 0;padding-left:.95rem;border-left:2px solid #4C8FFF;color:#cfd2d6;font-style:italic;font-family:'Satoshi Variable','Satoshi',sans-serif;line-height:1.55;font-size:.96rem} .mm-note span{color:#fff;font-style:normal;font-weight:700} /* ---------- Stat-tiles de prova ---------- */ .mm-stats{display:flex;gap:1rem;flex-wrap:wrap} .mm-stat{flex:1 1 0;min-width:9rem;background:linear-gradient(180deg,var(--mm-ink-1),var(--mm-ink-0));border:1px solid var(--mm-line);border-radius:1.4rem;padding:1.5rem 1.4rem;position:relative;overflow:hidden} .mm-stat::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--mm-irid);opacity:.6} .mm-stat__num{font-family:'Wixmadefordisplay',sans-serif;font-weight:700;font-size:2.1rem;line-height:1;color:#fff;font-variant-numeric:tabular-nums} .mm-stat__lbl{font-family:'Satoshi Variable','Satoshi',sans-serif;color:var(--mm-grey);font-size:.9rem;margin-top:.5rem;line-height:1.4} /* ---------- Grid de molduras ---------- */ .mm-frames-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem} /* !important: vence o style inline grid-template-columns:repeat(2,...) que algumas seções (ex.: impressão digital dos modos) usam pro desktop, garantindo 1 card por linha (full-width, empilhado) no mobile/tablet. */ @media(max-width:991px){.mm-frames-3{grid-template-columns:1fr !important}} /* ---------- Barras de ÊNFASE rotuladas (mm-bars) — "o que o modo prioriza" ---------- Estrutura injetada por JS a partir de
. */ .mm-bars{display:flex;flex-direction:column;gap:.85rem} .mm-bar{display:flex;flex-direction:column;gap:.34rem} .mm-bar__row{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem} .mm-bar__lbl{font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.88rem;color:#cfd2d6;letter-spacing:.01em} .mm-bar__val{font-family:'Wixmadefordisplay',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:.82rem;color:var(--mm-grey)} .mm-bar__track{height:8px;border-radius:9999px;background:var(--mm-ink-2);overflow:hidden} .mm-bar__fill{height:100%;width:0;border-radius:9999px;transition:width 1.1s var(--mm-ease)} /* ---------- Radar / impressão digital do modo (mm-radar) — SVG injetado por JS ---------- */ .mm-radar{display:block;width:100%;max-width:18rem;margin:0 auto} .mm-radar svg{display:block;width:100%;height:auto;overflow:visible} .mm-radar__grid{fill:none;stroke:rgba(255,255,255,.07)} .mm-radar__axis{stroke:rgba(255,255,255,.09)} .mm-radar__base{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.22);stroke-width:1.4} .mm-radar__poly{stroke-width:2.2;stroke-linejoin:round} .mm-radar__g{opacity:1;transition:opacity .95s var(--mm-ease)} .mm-radar__label{font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:8.6px;fill:var(--mm-grey);letter-spacing:.02em} .mm-radar__legend{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-top:.8rem;font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.8rem;color:var(--mm-grey)} .mm-radar__key{display:inline-flex;align-items:center;gap:.42rem} .mm-radar__sw{width:10px;height:10px;border-radius:3px;flex:none} @media (prefers-reduced-motion: reduce){ .mm-bar__fill{transition:none !important} .mm-radar__g{transition:none !important} } /* ---------- Faixa de TAXONOMIA (categorias dos modos) ---------- */ .mm-cats{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center} .mm-cat{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:9999px;background:var(--mm-ink-1);border:1px solid var(--mm-line);font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.86rem;color:#cfd2d6} .mm-cat__dot{width:8px;height:8px;border-radius:9999px;flex:none} .mm-cat__n{color:var(--mm-grey);font-variant-numeric:tabular-nums} /* ---------- Card de MODO (marketplace estilo PowerPlugs) ---------- */ .mm-mode{position:relative;display:flex;flex-direction:column;gap:.55rem;background:linear-gradient(180deg,var(--mm-ink-1),var(--mm-ink-0));border:1px solid var(--mm-line);border-radius:1.4rem;padding:1.2rem 1.25rem;overflow:hidden;isolation:isolate;height:100%} .mm-mode::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--mm-mode-accent,#22D3EE);opacity:.9} .mm-mode::after{content:"";position:absolute;top:-40%;right:-30%;width:60%;height:120%;background:radial-gradient(ellipse 60% 50% at 70% 40%,var(--mm-mode-accent,#22D3EE),transparent 65%);opacity:.10;pointer-events:none;z-index:-1} .mm-mode__top{display:flex;align-items:center;gap:.6rem} .mm-mode__emoji{width:2rem;height:2rem;border-radius:.7rem;display:flex;align-items:center;justify-content:center;font-size:1.05rem;background:color-mix(in oklab,var(--mm-mode-accent,#22D3EE) 16%,#0e0f13);border:1px solid color-mix(in oklab,var(--mm-mode-accent,#22D3EE) 40%,transparent);flex:none} .mm-mode__name{font-family:'Satoshi Variable','Satoshi',sans-serif;font-weight:700;font-size:1rem;color:#fff;letter-spacing:-.01em;line-height:1.15} .mm-mode__tag{font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.85rem;color:var(--mm-grey);line-height:1.45;margin:0} .mm-mode__chips{display:flex;flex-wrap:wrap;gap:.36rem;margin-top:.1rem} .mm-mode__chip{font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.72rem;color:#cfd2d6;background:var(--mm-ink-2);border:1px solid var(--mm-line);border-radius:9999px;padding:.18rem .55rem;line-height:1.3} .mm-mode__meta{margin-top:auto;padding-top:.7rem;display:flex;align-items:center;gap:.45rem;font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.78rem;color:var(--mm-grey);border-top:1px solid var(--mm-line)} .mm-mode__meta b{color:#fff;font-variant-numeric:tabular-nums;font-weight:700} .mm-modes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem} @media(max-width:991px){.mm-modes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.mm-modes-grid{grid-template-columns:1fr}} .mm-cat-group{margin-top:1.6rem} .mm-cat-group__head{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem} .mm-cat-group__dot{width:9px;height:9px;border-radius:9999px;flex:none} .mm-cat-group__name{font-family:'Satoshi Variable','Satoshi',sans-serif;font-weight:700;font-size:.95rem;color:#fff;letter-spacing:.01em} .mm-cat-group__n{font-family:'Satoshi Variable','Satoshi',sans-serif;font-size:.8rem;color:var(--mm-grey);font-variant-numeric:tabular-nums} /* ---------- Reveal premium suave (progressive enhancement) ---------- */ /* sem JS → visível. Com JS (html.mm-js) → começa oculto e revela ao entrar. */ html.mm-js .mm-fade{opacity:0;transform:translateY(20px);filter:blur(6px)} html.mm-js .mm-fade.is-in{ opacity:1;transform:none;filter:none; transition:opacity .72s var(--mm-ease),transform .72s var(--mm-ease),filter .72s var(--mm-ease); } /* ---------- Fogo ANIMADO: acento RARO de "calor" (Mais popular / escassez) ---------- Uso parcimonioso (1× por contexto). NÃO usar como marcador de bullet repetido. */ .mm-fire{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.18em;flex:none} /* ---------- Guardrail: emoji de bullet (.fire) -> marcador limpo (cyan) ---------- ESCOPO: SÓ os bullets de CONTEÚDO da página (.sobre-bullet). NUNCA o bloco compartilhado .cta-sc nem o footer (são padrão-home → 🔥 fica como na home). A home tambem nao carrega este CSS, fica intocada. */ .fire:not(.cta-sc *):not(footer *){font-size:0 !important;position:relative;display:inline-flex;align-items:center;width:1.05em;flex:none} .fire:not(.cta-sc *):not(footer *)::before{content:"\203A";font-size:1.02rem;line-height:1;color:#22D3EE;font-weight:800} /* ---------- Fogo ANIMADO nos 🔥 do card COMPARTILHADO (cta-sc/footer) — pedido Mateus ---------- Substitui o emoji estático pelo webp animado, MESMO tamanho. Vale também na home (que recebe um