/* ====== Lidera Lab 16 — Protagonismo Profissional ====== Override de identidade: a classe .theme-16 no troca os tokens definidos em styles.css. Todo o layout continua vindo de lá — aqui só entram a paleta (roxo/rosa/azul da arte do Lab 16) e os ajustes de formato que o conteúdo novo exige (título longo, pôster 16:9). */ .theme-16 { --navy-900: #1d1145; --navy-800: #2a1a66; --navy-700: #392488; --blue-600: #4338ca; --blue-500: #6366f1; --sage-500: #a78bfa; --sage-400: #c4b5fd; --orange-500: #d926a9; --orange-600: #b81c8f; --cream-100: #f0e7fb; --cream-50: #f8f4fe; --paper: #fbf9ff; --ink: #1d1145; --ink-60: rgba(29, 17, 69, 0.62); --ink-40: rgba(29, 17, 69, 0.4); --ink-15: rgba(29, 17, 69, 0.15); --ink-08: rgba(29, 17, 69, 0.08); /* tipo de destaque do Lab 16: Sora (geométrica, mais próxima da arte). Já vem no link do Google Fonts das duas páginas — sem custo extra. */ --font-display: "Sora", "Manrope", system-ui, sans-serif; } /* "Protagonismo Profissional" é longo — o clamp do GPTW (4 letras) estoura. E, como na arte, o hero do Lab 16 é claro sobre o gradiente roxo: o ink escuro do Lab 15 tinha contraste fraco aqui. */ .theme-16 .hero h1.gptw { font-size: clamp(46px, 7vw, 92px); font-weight: 800; /* peso máximo da Sora; o 900 fechava demais as letras */ line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 22px; color: #ffffff; text-shadow: 0 2px 24px rgba(29, 17, 69, 0.35); } .theme-16 .hero .subtitle { color: #ffffff; opacity: 0.96; } .theme-16 .hero .lede { color: rgba(255, 255, 255, 0.85); } .theme-16 .hero .eyebrow { color: rgba(255, 255, 255, 0.92); } .theme-16 .hero .eyebrow::after { background: rgba(255, 255, 255, 0.75); } .theme-16 .hero .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.6); } .theme-16 .hero .btn-ghost:hover { background: #ffffff; color: var(--navy-900); } /* a arte do Lab 16 é horizontal (16:9), não 4:5 — e por ser mais baixa que a 4:5 do Lab 15, ganha mais coluna e um leve scale para ter presença */ .theme-16 .hero .grid { grid-template-columns: 0.82fr 1.18fr; gap: 56px; } .theme-16 .hero-poster { aspect-ratio: 16 / 9; transform: rotate(-1.2deg) scale(1.05); } /* na arte do Lab 16 a Érika ocupa o canto inferior direito — o carimbo de data desce para baixo do card em vez de cobrir a foto dela */ .theme-16 .date-stamp { bottom: -78px; right: 24px; transform: rotate(-2deg); } @media (max-width: 980px) { .theme-16 .hero .grid { grid-template-columns: 1fr; } .theme-16 .hero-poster { transform: none; } .theme-16 .date-stamp { bottom: -64px; right: 16px; transform: none; } } /* rótulos claros por cima do gradiente roxo continuam legíveis */ .theme-16 .hero-poster .float-badge { color: #ffffff; } /* -------- Programação (seção nova, só existe no Lab 16) -------- */ .theme-16 .agenda-list { max-width: 760px; margin-top: 44px; } .theme-16 .agenda-item { display: flex; gap: 28px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid var(--ink-08); } .theme-16 .agenda-item:first-child { border-top: 1px solid var(--ink-08); } .theme-16 .agenda-time { flex: none; width: 78px; font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: -0.02em; color: var(--orange-500); } .theme-16 .agenda-what { display: flex; flex-direction: column; gap: 3px; } .theme-16 .agenda-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--navy-900); letter-spacing: -0.01em; } .theme-16 .agenda-who { font-size: 14px; color: var(--ink-60); } /* -------- Contagem regressiva (hero) -------- */ .theme-16 .countdown { display: flex; gap: 12px; margin-top: 30px; } .theme-16 .cd-cell { min-width: 76px; padding: 12px 10px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px); text-align: center; } .theme-16 .cd-n { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: #ffffff; font-variant-numeric: tabular-nums; } .theme-16 .cd-label { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } /* -------- Lotes (dentro de Quando & onde, fundo navy) -------- */ .theme-16 .lotes { margin-top: 56px; } .theme-16 .lotes-h { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--cream-50); margin-bottom: 18px; } .theme-16 .lotes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; max-width: 860px; } .theme-16 .lote-card { border-radius: 16px; padding: 18px 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); } .theme-16 .lote-card.esgotado { opacity: 0.55; } .theme-16 .lote-nome { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-500); margin-bottom: 8px; } .theme-16 .lote-preco { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: #ffffff; line-height: 1; } .theme-16 .lote-ate { margin-top: 7px; font-size: 13px; color: rgba(255, 255, 255, 0.65); } .theme-16 .lotes-obs { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, 0.55); max-width: 640px; } @media (max-width: 900px) { .theme-16 .hero h1.gptw { font-size: clamp(40px, 10vw, 72px); } .theme-16 .agenda-item { gap: 16px; } .theme-16 .countdown { flex-wrap: wrap; } .theme-16 .cd-cell { flex: 1; min-width: 64px; } }