/* ============================================================ MONTEIRO FORMATURAS — BRAND TOKENS & BASE COMPONENTS v2.0 · Padrão único PRETO & DOURADO (estética Medicina Experience) Uso: Fontes (carregue no ): Playfair Display + Inter (Google Fonts). Logo: mantém a versão oficial colorida (identidade da marca). ============================================================ */ :root{ /* ---- DOURADO (assinatura premium) ---- */ --gold:#C8A86B; --gold-l:#D8BC82; --gold-d:#A88840; --gold-glow:rgba(200,168,107,.18); --gold-soft:rgba(200,168,107,.08); /* ---- PRETO / GRAFITES (canvas) ---- */ --bg:#050505; --surface:#0E0E0E; --surface-2:#161616; --graphite:#1E1E1E; --line:rgba(240,237,232,.10); --line-2:rgba(240,237,232,.055); /* ---- TEXTO (branco quente) ---- */ --text:#F0EDE8; --muted:rgba(240,237,232,.66); --muted-2:rgba(240,237,232,.40); /* ---- Acento ativo ---- */ --accent:var(--gold); --accent-contrast:#1A1300; /* ---- Estado ---- */ --ok:#7BB89A; --warn:var(--gold); --danger:#C75C4A; --info:var(--gold-l); /* ---- Tipografia ---- */ --font-display:"Playfair Display",Georgia,serif; /* títulos serifados */ --font-body:"Inter",system-ui,-apple-system,sans-serif; --font-cond:"Inter",system-ui,sans-serif; /* labels em caixa-alta tracking */ /* ---- Forma / espaço / movimento ---- */ --radius-sm:12px; --radius:20px; --radius-lg:26px; --radius-pill:100px; --space:16px; --shadow:0 30px 90px rgba(0,0,0,.6); --shadow-glow:0 0 40px var(--gold-glow); --ease:cubic-bezier(.22,1,.36,1); --transition:.35s var(--ease); } /* Curso-experiences podem trocar só o acento (dourado fica de fio condutor) */ .theme-experience{ --accent:var(--gold); --accent-contrast:#1A1300; } /* ============================================================ BASE */ *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } ::selection{background:var(--gold); color:#1a1300} a{color:var(--gold-l); text-decoration:none} h1,h2,h3{font-family:var(--font-display); line-height:1.12; letter-spacing:-.01em; margin:0 0 .4em} h1{font-weight:900; font-size:clamp(2.4rem,6vw,5rem)} h2{font-weight:700; font-size:clamp(1.8rem,3.6vw,3rem)} h3{font-weight:700; font-size:1.2rem} h1 em,h2 em{font-style:italic;background:linear-gradient(135deg,var(--gold),var(--gold-l));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} ::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--gold-d);border-radius:6px} /* ---- Utilitários ---- */ .u-muted{color:var(--muted)} .u-gold{color:var(--gold)} .gold-grad{background:linear-gradient(135deg,var(--gold),var(--gold-l));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .container{max-width:1160px;margin:0 auto;padding:0 28px} .eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} .eyebrow::before{content:"";width:22px;height:1px;background:var(--gold)} .hairline{height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),var(--gold),var(--gold-soft),transparent)} .ornament{color:var(--gold);font-size:.7rem;letter-spacing:.4em}/* ✦ */ /* ============================================================ COMPONENTES */ /* Botões */ .btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;padding:.9rem 2rem;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:var(--transition);font-family:var(--font-body)} .btn:hover{transform:translateY(-2px)} .btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:var(--accent-contrast)} .btn-primary:hover{box-shadow:0 14px 40px var(--gold-glow)} .btn-ghost{background:transparent;border-color:rgba(200,168,107,.4);color:var(--gold)} .btn-ghost:hover{background:var(--gold-soft);border-color:var(--gold)} /* Card */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:var(--transition);position:relative;overflow:hidden} .card::after{content:"";position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .3s} .card:hover{border-color:rgba(200,168,107,.28);transform:translateY(-3px)}.card:hover::after{opacity:1} .card--glass{background:rgba(255,255,255,.04);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.08)} .card--premium{background:linear-gradient(160deg,#14100a,#181818);border-color:rgba(200,168,107,.22);box-shadow:0 0 60px rgba(200,168,107,.06)} /* Tags / status */ .tag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.24rem .8rem;border-radius:var(--radius-pill);border:1px solid var(--line);color:var(--muted)} .tag--gold{color:var(--gold);border-color:rgba(200,168,107,.28);background:var(--gold-soft)} .tag--ok{color:var(--ok);border-color:rgba(123,184,154,.35)} /* KPI / número */ .kpi__v{font-family:var(--font-display);font-weight:900;font-size:2.6rem;line-height:1;background:linear-gradient(135deg,var(--gold),var(--gold-l));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .kpi__l{font-size:.76rem;color:var(--muted);margin-top:.4rem;letter-spacing:.03em} /* Ícone de linha dourado */ .ico{width:1.7rem;height:1.7rem;color:var(--gold);display:inline-flex} .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .ico-badge{width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold-soft);border:1px solid rgba(200,168,107,.25);color:var(--gold)} /* Inputs */ .input,.textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(200,168,107,.22);border-radius:12px;padding:.9rem 1.1rem;color:var(--text);font-family:var(--font-body);font-size:.92rem;transition:var(--transition)} .input:focus,.textarea:focus{outline:none;border-color:rgba(200,168,107,.6);box-shadow:0 0 0 3px var(--gold-soft)} .label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;opacity:.9} /* Navbar */ .navbar{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(5,5,5,0);backdrop-filter:blur(20px);transition:var(--transition)} .navbar.scrolled{background:rgba(5,5,5,.92);border-bottom:1px solid rgba(200,168,107,.08)} /* Divisor / superfície */ .divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:24px 0;opacity:.4} .surface{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}