/* ========================================================================= ConneCT — Design System (redesign 2026 · direção "Tech") - Carregado DEPOIS de structs.css e main.css (ver include/head.php). - Convive com Bootstrap 5: usamos a grade/JS do Bootstrap + componentes .c-*. - Componentes novos usam o prefixo .c- (evita colisão com Bootstrap/main.css). - Paleta e fontes vêm do manual da marca (já em structs.css). ========================================================================= */ :root{ /* Marca */ --c-ink:#042940; /* petróleo, texto principal sobre claro */ --c-ink-black:#00080D; --c-blue:#0F5C8C; /* accent PRINCIPAL (botões, ícones, ativos) */ --c-cyan:#54ACBF; /* acento de energia (glows, faixas escuras, destaques) */ --c-soft:#BBE8F2; --c-ice:#F8F8F8; --c-white:#ffffff; /* Texto derivado sobre claro */ --c-ink-70:#3a5566; --c-ink-45:#5c7382; --c-line:#e2e8ea; /* Tints */ --c-cyan-12:rgba(84,172,191,.12); --c-cyan-20:rgba(84,172,191,.22); --c-cyan-glow:rgba(84,172,191,.32); --c-blue-12:rgba(15,92,140,.10); --c-blue-20:rgba(15,92,140,.22); /* Gradiente das faixas escuras */ --c-dark-grad:linear-gradient(160deg,#063450 0%,#042940 42%,#00080D 100%); /* Forma / sombra / motion */ --c-r:10px; --c-r-sm:7px; --c-maxw:1180px; --c-ease:cubic-bezier(.22,.61,.36,1); --c-shadow-sm:0 1px 2px rgba(4,41,64,.06),0 4px 14px rgba(4,41,64,.05); --c-shadow-md:0 10px 30px rgba(4,41,64,.10); --c-shadow-cyan:0 14px 34px -12px rgba(84,172,191,.55); --c-nav-h:72px; --c-font-display:"Josefin Sans",sans-serif; --c-font-body:"Poppins",sans-serif; } /* ---------- Base / leitura ---------- */ body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.c-site{ background:var(--c-ice); } /* páginas redesenhadas recebem .c-site no */ /* Corta o vazamento horizontal dos glows decorativos SEM matar o sticky: structs.css usa overflow-x:hidden em html/body (e !important via .aos-init), o que transforma o body em scroll-container e impede a navbar de fixar. `clip` corta o overflow sem criar scroll-container, então o sticky volta. */ html, html.aos-init{ overflow-x:clip !important; } body.c-site, body.c-site.aos-animate{ overflow-x:clip !important; overflow-y:visible !important; } html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--c-nav-h) + 12px); } ::selection{ background:var(--c-cyan); color:#06222e; } /* Container utilitário (porta as seções do protótipo sem depender da grade) */ .c-wrap{ width:100%; max-width:var(--c-maxw); margin-inline:auto; padding-inline:24px; } /* ---------- Tipografia auxiliar ---------- */ .c-eyebrow{ font-family:var(--c-font-body); font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--c-blue); } .c-kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--c-font-body); font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--c-blue); margin-bottom:16px; } .c-kicker::before{ content:""; width:26px; height:2px; background:var(--c-blue); border-radius:2px; } .c-h2{ font-family:var(--c-font-display); font-weight:700; line-height:1.08; letter-spacing:-.01em; color:var(--c-ink); font-size:clamp(2rem,4.2vw,3rem); } .c-lede{ font-size:1.15rem; color:var(--c-ink-70); max-width:62ch; line-height:1.7; } .c-hl{ color:var(--c-cyan); } /* ---------- Seções + faixas escuras + cortes diagonais ---------- */ .c-section{ padding-block:clamp(64px,8vw,108px); position:relative; } .c-section--tight{ padding-block:clamp(48px,6vw,76px); } .c-section--white{ background:var(--c-white); } .c-dark{ background:var(--c-dark-grad); color:#dfeef2; position:relative; overflow:hidden; } .c-dark .c-h2,.c-dark h2,.c-dark h3{ color:#fff; } .c-dark .c-lede{ color:#a9c6d2; } .c-dark .c-eyebrow,.c-dark .c-kicker{ color:var(--c-cyan); } .c-dark .c-kicker::before{ background:var(--c-cyan); } /* Cortes diagonais (cara tech). Aplicar nas faixas escuras. */ .c-cut{ clip-path:polygon(0 2.4vw,100% 0,100% calc(100% - 2.4vw),0 100%); } .c-cut--bottom{ clip-path:polygon(0 0,100% 0,100% calc(100% - 2.4vw),0 100%); } .c-cut--top{ clip-path:polygon(0 2.4vw,100% 0,100% 100%,0 100%); } /* Glow radial reutilizável para faixas escuras */ .c-glow{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(8px); background:radial-gradient(circle,rgba(84,172,191,.30) 0%,rgba(84,172,191,.07) 42%,transparent 68%); width:680px; height:680px; will-change:transform,opacity; z-index:0; } /* ---------- Botões ---------- */ .c-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 22px; border-radius:var(--c-r); border:1.5px solid transparent; font-family:var(--c-font-body); font-weight:600; font-size:.96rem; line-height:1; white-space:nowrap; cursor:pointer; transition:transform .2s var(--c-ease),box-shadow .2s var(--c-ease),background .2s var(--c-ease),color .2s var(--c-ease),border-color .2s var(--c-ease); } .c-btn--sm{ padding:9px 16px; font-size:.88rem; } .c-btn--primary{ background:var(--c-blue); color:#fff; } .c-btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--c-shadow-cyan); background:#0c4f79; color:#fff; } .c-btn--outline{ background:transparent; color:var(--c-ink); border-color:var(--c-line); } .c-btn--outline:hover{ border-color:var(--c-cyan); background:var(--c-cyan-12); color:var(--c-ink); transform:translateY(-2px); } .c-btn--ghost{ background:transparent; color:#eaf6f9; border-color:rgba(187,232,242,.34); } .c-btn--ghost:hover{ border-color:var(--c-cyan); background:rgba(84,172,191,.14); color:#fff; transform:translateY(-2px); } /* Override do Bootstrap: botões existentes do site ganham o visual novo */ .btn-primary{ --bs-btn-bg:var(--c-blue); --bs-btn-border-color:var(--c-blue); --bs-btn-hover-bg:#0c4f79; --bs-btn-hover-border-color:#0c4f79; --bs-btn-active-bg:#0c4f79; --bs-btn-active-border-color:#0c4f79; --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-border-radius:var(--c-r); font-weight:600; } .btn-outline-primary{ --bs-btn-color:var(--c-blue); --bs-btn-border-color:var(--c-blue); --bs-btn-hover-bg:var(--c-blue); --bs-btn-hover-border-color:var(--c-blue); --bs-btn-hover-color:#fff; --bs-btn-active-bg:var(--c-blue); --bs-btn-border-radius:var(--c-r); font-weight:600; } /* Link com seta */ .c-arrow{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--c-blue); transition:gap .2s var(--c-ease),color .2s var(--c-ease); } .c-arrow:hover{ gap:.7rem; color:var(--c-blue); } .c-dark .c-arrow{ color:var(--c-cyan); } /* ========================================================================= NAVBAR (clara, sticky, blur) — usa o collapse/dropdown do Bootstrap ========================================================================= */ .c-navbar{ position:sticky; top:0; z-index:1030; min-height:var(--c-nav-h); background:rgba(248,248,248,.86); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--c-line); padding:.5rem 0; } .c-navbar .c-navbar__inner{ display:flex; align-items:center; gap:18px; } .c-navbar__brand{ padding:0; flex-shrink:0; } .c-navbar__brand img{ height:30px; width:auto; display:block; transition:transform .2s var(--c-ease); } .c-navbar__brand:hover img{ transform:scale(1.03); } .c-navbar .navbar-nav{ align-items:center; gap:2px; } .c-navbar .nav-link{ font-family:var(--c-font-body); font-size:.92rem; font-weight:500; color:var(--c-ink-70); padding:9px 12px !important; border-radius:var(--c-r-sm); transition:color .18s var(--c-ease),background .18s var(--c-ease); } .c-navbar .nav-link:hover,.c-navbar .nav-link:focus{ color:var(--c-ink); background:var(--c-cyan-12); } .c-navbar .nav-link.active,.c-navbar .nav-item.active > .nav-link{ color:var(--c-blue); font-weight:600; } .c-navbar .dropdown-menu{ border:1px solid var(--c-line); border-radius:var(--c-r); box-shadow:var(--c-shadow-md); padding:7px; margin-top:8px; background:#fff; } .c-navbar .dropdown-item{ border-radius:var(--c-r-sm); padding:9px 12px; font-size:.9rem; color:var(--c-ink-70); font-weight:500; } .c-navbar .dropdown-item:hover,.c-navbar .dropdown-item:focus{ background:var(--c-cyan-12); color:var(--c-ink); } .c-navbar__cta{ display:flex; align-items:center; gap:10px; margin-left:auto; padding-left:14px; } .c-navbar__toggle{ border:1px solid var(--c-line); border-radius:var(--c-r-sm); padding:6px 10px; color:var(--c-ink); } .c-navbar__toggle:focus{ box-shadow:none; } @media (max-width:991.98px){ .c-navbar__cta{ margin-left:0; padding-left:0; margin-top:12px; } .c-navbar__cta .c-btn{ flex:1; } .c-navbar .navbar-nav{ align-items:stretch; gap:2px; margin-top:10px; } } /* Sub-nav de seção (sticky, scroll-spy) — usado no /sobre */ .c-subnav{ position:sticky; top:var(--c-nav-h); z-index:1020; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--c-line); } .c-subnav__inner{ display:flex; align-items:center; gap:4px; height:52px; overflow-x:auto; scrollbar-width:none; } .c-subnav__inner::-webkit-scrollbar{ display:none; } .c-subnav a{ position:relative; white-space:nowrap; padding:8px 14px; border-radius:var(--c-r-sm); font-size:.86rem; font-weight:500; color:var(--c-ink-45); transition:color .18s var(--c-ease),background .18s var(--c-ease); } .c-subnav a:hover{ color:var(--c-ink); } .c-subnav a.is-active{ color:var(--c-blue); background:var(--c-blue-12); } .c-subnav a.is-active::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--c-blue); border-radius:2px; } /* ========================================================================= HERO escuro ========================================================================= */ .c-hero{ position:relative; display:flex; align-items:center; min-height:82dvh; background:var(--c-dark-grad); color:#eaf6f9; overflow:hidden; } .c-hero--tall{ min-height:92dvh; } .c-hero__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.55; } .c-hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(105deg,rgba(4,41,64,.96) 30%,rgba(4,41,64,.62) 62%,rgba(6,52,80,.28)); } .c-hero .c-glow{ z-index:2; top:-220px; right:-160px; animation:cGlowFloat 16s var(--c-ease) infinite alternate; } .c-hero__inner{ position:relative; z-index:4; width:100%; padding-block:96px; } .c-hero__eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--c-font-body); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-cyan); font-weight:700; padding:7px 14px; border:1px solid rgba(84,172,191,.35); border-radius:100px; background:rgba(84,172,191,.08); margin-bottom:26px; } .c-hero__eyebrow .c-dot{ width:7px; height:7px; border-radius:50%; background:var(--c-cyan); box-shadow:0 0 10px var(--c-cyan); } .c-hero h1,.c-hero__title{ font-family:var(--c-font-display); font-weight:700; color:#fff; font-size:clamp(2.6rem,6.5vw,4.8rem); line-height:1.04; letter-spacing:-.02em; max-width:16ch; margin-bottom:20px; } .c-hero__sub{ font-size:clamp(1.05rem,2vw,1.25rem); color:#bcd8e2; max-width:48ch; line-height:1.6; margin-bottom:32px; } .c-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px; } .c-factbar{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px 18px; font-size:.85rem; color:#9fc1cd; padding-top:22px; border-top:1px solid rgba(187,232,242,.16); } .c-factbar .c-sep{ color:var(--c-cyan); font-weight:700; } .c-factbar i{ color:var(--c-cyan); margin-right:6px; } @keyframes cGlowFloat{ from{ transform:translate3d(0,0,0) scale(1); opacity:.85; } to{ transform:translate3d(-46px,38px,0) scale(1.12); opacity:1; } } /* ========================================================================= FAIXA DE STATS (números grandes em Josefin, count-up) ========================================================================= */ .c-stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; z-index:2; } .c-stat{ padding:26px 24px; border-left:2px solid rgba(84,172,191,.4); } .c-stat__num{ font-family:var(--c-font-display); font-weight:700; font-size:clamp(3rem,6.5vw,4.8rem); line-height:1; color:#fff; letter-spacing:-.01em; } .c-stat__num .c-suffix{ color:var(--c-cyan); font-size:.42em; vertical-align:super; margin-left:4px; font-weight:600; } .c-stat__label{ margin-top:12px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-cyan); font-weight:600; } .c-stat__desc{ margin-top:6px; font-size:.95rem; color:#a9c6d2; max-width:30ch; } /* ========================================================================= TIMELINE (linha que preenche, passo ativo) ========================================================================= */ .c-timeline{ position:relative; } .c-timeline__rail{ position:absolute; left:31px; top:14px; bottom:14px; width:2px; background:var(--c-line); border-radius:2px; } .c-timeline__fill{ position:absolute; left:31px; top:14px; width:2px; height:0; border-radius:2px; background:linear-gradient(180deg,var(--c-blue),var(--c-cyan)); box-shadow:0 0 12px rgba(84,172,191,.5); transition:height .5s var(--c-ease); will-change:height; } .c-step{ position:relative; display:grid; grid-template-columns:64px 1fr; gap:22px; padding-block:18px; align-items:start; opacity:.55; transition:opacity .45s var(--c-ease); } .c-step.is-active{ opacity:1; } .c-step__marker{ position:relative; z-index:2; width:64px; height:64px; flex:none; display:grid; place-items:center; border-radius:50%; background:#fff; border:2px solid var(--c-line); color:var(--c-ink-45); font-size:1.3rem; transition:border-color .4s var(--c-ease),color .4s var(--c-ease),box-shadow .4s var(--c-ease),transform .4s var(--c-ease); } .c-step.is-active .c-step__marker{ border-color:var(--c-blue); color:var(--c-blue); box-shadow:0 0 0 6px var(--c-blue-12),0 10px 24px -10px var(--c-cyan-glow); transform:scale(1.04); } .c-step__no{ font-family:var(--c-font-body); font-weight:700; font-size:.78rem; letter-spacing:.1em; color:var(--c-ink-45); transition:color .4s var(--c-ease); text-transform:uppercase; } .c-step.is-active .c-step__no{ color:var(--c-blue); } .c-step__title{ font-family:var(--c-font-display); font-size:1.22rem; font-weight:700; margin:2px 0 6px; color:var(--c-ink); } .c-step__body p{ font-size:1rem; color:var(--c-ink-70); max-width:56ch; margin:0; } /* ========================================================================= CARDS / CHIPS / FEATURES ========================================================================= */ .c-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .c-cards--3{ grid-template-columns:repeat(3,1fr); } .c-card{ position:relative; background:#fff; border:1px solid var(--c-line); border-radius:var(--c-r); padding:30px 26px 26px; overflow:hidden; transition:transform .26s var(--c-ease),box-shadow .26s var(--c-ease),border-color .26s var(--c-ease); height:100%; } .c-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--c-blue),var(--c-cyan)); } .c-card:hover{ transform:translateY(-5px); box-shadow:var(--c-shadow-md); border-color:var(--c-cyan-20); } .c-card__no{ position:absolute; top:16px; right:22px; font-family:var(--c-font-display); font-weight:700; font-size:2rem; color:var(--c-soft); } .c-card__ico{ width:50px; height:50px; display:grid; place-items:center; border-radius:var(--c-r-sm); border:1.5px solid var(--c-blue); color:var(--c-blue); background:var(--c-blue-12); font-size:1.35rem; margin-bottom:18px; } .c-card h3{ font-family:var(--c-font-display); font-size:1.16rem; font-weight:700; margin-bottom:8px; color:var(--c-ink); } .c-card p{ font-size:.96rem; color:var(--c-ink-70); margin:0; } /* Card com mídia (capa em cima) — usado nas listagens de cursos/workshops/visitas */ .c-card--media{ display:flex; flex-direction:column; padding:0; } .c-card__media{ position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--c-soft); } .c-card__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--c-ease); } .c-card--media:hover .c-card__img{ transform:scale(1.04); } .c-card__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:24px 24px 22px; } .c-card__body h3{ font-family:var(--c-font-display); font-size:1.16rem; font-weight:700; margin-bottom:8px; color:var(--c-ink); } .c-card__body > p{ font-size:.96rem; color:var(--c-ink-70); margin:0 0 16px; } .c-card__meta{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:9px; } .c-card__meta li{ display:flex; align-items:flex-start; gap:9px; font-size:.9rem; color:var(--c-ink-70); } .c-card__meta i{ color:var(--c-blue); font-size:1rem; margin-top:1px; flex:none; } .c-card__link{ margin-top:auto; } .c-chips{ display:flex; flex-wrap:wrap; gap:12px; } .c-chip{ display:inline-flex; align-items:center; gap:10px; font-size:.9rem; color:var(--c-ink); font-weight:500; padding:11px 16px; border-radius:100px; border:1.5px solid var(--c-blue-20); background:#fff; transition:border-color .2s var(--c-ease),background .2s var(--c-ease),transform .2s var(--c-ease); } .c-chip i{ color:var(--c-blue); font-size:1.05rem; } .c-chip:hover{ border-color:var(--c-blue); background:var(--c-blue-12); transform:translateY(-2px); } /* Lista numerada (ex.: "Por que existe") */ .c-numlist{ display:grid; gap:20px; } .c-numlist__row{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding-bottom:20px; border-bottom:1px solid var(--c-line); } .c-numlist__row:last-child{ border-bottom:none; padding-bottom:0; } .c-numlist__num{ font-family:var(--c-font-display); font-weight:700; font-size:.95rem; color:var(--c-blue); width:42px; height:42px; display:grid; place-items:center; flex:none; border:1.5px solid var(--c-blue); border-radius:var(--c-r-sm); background:var(--c-blue-12); } .c-numlist__row h3{ font-family:var(--c-font-display); font-size:1.06rem; font-weight:700; margin:0 0 4px; color:var(--c-ink); } .c-numlist__row p{ font-size:1rem; color:var(--c-ink-70); margin:0; max-width:54ch; } /* ========================================================================= HUB / GOVERNANÇA / TRAJETÓRIA / PARTNERS / QUOTE ========================================================================= */ .c-hub__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(36px,5vw,64px); align-items:center; position:relative; z-index:2; } .c-hub__feat{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:16px 4px; border-bottom:1px solid rgba(187,232,242,.14); } .c-hub__feat:last-of-type{ border-bottom:none; } .c-hub__feat i{ width:46px; height:46px; display:grid; place-items:center; flex:none; border-radius:var(--c-r-sm); border:1.5px solid rgba(84,172,191,.5); color:var(--c-cyan); font-size:1.25rem; background:rgba(84,172,191,.1); } .c-hub__feat span{ font-size:1.04rem; color:#dfeef2; font-weight:500; } .c-hub__loc{ display:inline-flex; align-items:flex-start; gap:10px; font-size:.92rem; color:#a9c6d2; line-height:1.6; padding-top:18px; border-top:1px solid rgba(187,232,242,.16); max-width:44ch; } .c-hub__loc i{ color:var(--c-cyan); margin-top:2px; } .c-hub__map{ background:#fff; border-radius:var(--c-r); padding:10px; box-shadow:0 24px 60px -20px rgba(0,8,13,.6); border:1px solid rgba(187,232,242,.2); } .c-hub__map iframe{ display:block; border-radius:var(--c-r-sm); width:100%; } .c-hub__banner{ position:relative; border-radius:var(--c-r); overflow:hidden; margin-bottom:42px; border:1px solid rgba(187,232,242,.2); box-shadow:0 24px 60px -24px rgba(0,8,13,.6); } .c-hub__banner img{ width:100%; height:clamp(200px,30vw,320px); object-fit:cover; display:block; } .c-hub__banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,41,64,.12),rgba(4,41,64,.58)); } .c-hub__banner figcaption{ position:absolute; left:16px; bottom:13px; z-index:2; font-size:.78rem; color:#dfeef2; display:flex; align-items:center; gap:8px; } .c-hub__banner figcaption i{ color:var(--c-cyan); } /* Galeria de fotos reais do Hub CT-12 — reaproveita a linguagem do .c-hub__banner (2-up) */ .c-hub__gallery-title{ font-family:var(--c-font-display); font-weight:700; color:#fff; font-size:clamp(1.45rem,2.6vw,1.95rem); letter-spacing:-.01em; margin:clamp(36px,4.8vw,56px) 0 clamp(16px,2vw,22px); position:relative; z-index:2; } .c-hub__gallery{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px); margin-top:0; position:relative; z-index:2; } .c-hub__gallery .c-hub__banner{ display:block; margin-bottom:0; } .c-hub__gallery .c-hub__banner img{ height:clamp(210px,26vw,300px); transition:transform .8s var(--c-ease); } .c-hub__gallery .c-hub__banner:hover img{ transform:scale(1.06); } .c-hub__gallery .c-hub__banner::after, .c-hub__gallery figcaption{ pointer-events:none; } .c-hub__gallery a{ display:block; cursor:zoom-in; } .c-hub__gallery a:focus-visible{ outline:2px solid var(--c-cyan); outline-offset:4px; border-radius:var(--c-r); } @media (max-width:768px){ .c-hub__gallery{ grid-template-columns:1fr; gap:16px; } } /* Video de apresentacao (vertical) - moldura flutuante + glow, controles customizados */ .c-vid{ position:relative; max-width:420px; margin-inline:auto; } .c-vid__glow{ position:absolute; inset:-16% -14%; z-index:0; background:radial-gradient(55% 50% at 62% 42%, var(--c-cyan-glow), transparent 72%); pointer-events:none; } .c-vid__frame{ position:relative; z-index:1; aspect-ratio:608/1072; border-radius:calc(var(--c-r) + 6px); overflow:hidden; border:1px solid var(--c-cyan-20); box-shadow:0 30px 70px -28px rgba(0,8,13,.65); background:var(--c-ink); } .c-vid__media{ width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; } .c-vid__sound{ position:absolute; z-index:3; right:12px; bottom:12px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(4,41,64,.55); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:grid; place-items:center; font-size:1.1rem; cursor:pointer; transition:transform .2s var(--c-ease), background .2s var(--c-ease); } .c-vid__sound:hover,.c-vid.is-sound .c-vid__sound{ background:var(--c-blue); transform:scale(1.06); } .c-vid__play{ position:absolute; z-index:3; inset:0; margin:auto; width:76px; height:76px; border-radius:50%; border:none; background:rgba(255,255,255,.95); color:var(--c-blue); display:none; place-items:center; font-size:2rem; cursor:pointer; box-shadow:0 12px 30px rgba(0,8,13,.4); transition:transform .2s var(--c-ease); } .c-vid__play:hover{ transform:scale(1.08); } .c-vid.is-paused .c-vid__play{ display:grid; } .c-vid.is-paused .c-vid__sound{ display:none; } .c-vid__sound:focus-visible,.c-vid__play:focus-visible{ outline:2px solid var(--c-cyan); outline-offset:3px; } .c-gov__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .c-gov__ico{ width:54px; height:54px; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--c-blue); color:var(--c-blue); background:var(--c-blue-12); font-size:1.4rem; margin-bottom:18px; } .c-gov__tag{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-blue); font-weight:700; } .c-traj__track{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative; } .c-traj__track::before{ content:""; position:absolute; top:18px; left:6%; right:6%; height:2px; border-radius:2px; opacity:.5; background:linear-gradient(90deg,var(--c-blue),var(--c-cyan)); } .c-traj__dot{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none; position:relative; z-index:2; background:var(--c-ice); border:2px solid var(--c-blue); color:var(--c-blue); font-family:var(--c-font-body); font-weight:700; font-size:.72rem; box-shadow:0 0 0 5px var(--c-blue-12); } .c-traj__y{ font-family:var(--c-font-display); font-weight:700; font-size:1.8rem; color:var(--c-ink); } .c-traj__col h3{ font-family:var(--c-font-display); font-size:1.1rem; font-weight:700; margin:0 0 8px; color:var(--c-blue); } .c-traj__col p{ font-size:.95rem; color:var(--c-ink-70); margin:0; } .c-partners{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 40px; padding-top:32px; border-top:1px solid var(--c-line); } .c-partners__label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-ink-45); font-weight:700; } .c-partners__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:28px 40px; } .c-partners__logos img{ height:42px; width:auto; display:block; opacity:.78; transition:opacity .2s var(--c-ease),transform .2s var(--c-ease); } .c-partners__logos img:hover{ opacity:1; transform:translateY(-2px); } .c-quote{ background:#fff; border:1px solid var(--c-line); border-radius:var(--c-r); padding:30px 28px; height:100%; } .c-quote__mark{ font-family:var(--c-font-display); font-weight:700; color:var(--c-cyan); font-size:2.4rem; line-height:.6; } .c-quote p{ color:var(--c-ink-70); font-size:1.02rem; margin:.6rem 0 1.2rem; } .c-quote__who{ display:flex; align-items:center; gap:12px; } .c-quote__who b{ font-family:var(--c-font-display); color:var(--c-ink); } .c-quote__who span{ display:block; font-size:.85rem; color:var(--c-ink-45); } /* ========================================================================= CTA final ========================================================================= */ .c-cta{ text-align:center; position:relative; } .c-cta__inner{ position:relative; z-index:2; max-width:720px; margin-inline:auto; } .c-cta h2,.c-cta .c-h2{ color:#fff; margin-bottom:14px; } .c-cta p{ color:#a9c6d2; margin:0 auto 30px; font-size:1.1rem; } .c-cta__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } /* ========================================================================= FOOTER (escuro) ========================================================================= */ .c-footer{ background:var(--c-ink-black); color:#88a6b3; padding-block:54px 38px; border-top:1px solid rgba(84,172,191,.14); } .c-footer__logo{ height:32px; width:auto; display:block; margin-bottom:14px; } .c-footer__desc{ color:#9fb8c4; max-width:42ch; font-size:.95rem; } .c-footer__title{ font-family:var(--c-font-display); color:#fff; font-size:1rem; font-weight:700; margin-bottom:14px; } .c-footer__menu{ list-style:none; padding:0; margin:0; display:grid; gap:8px; } .c-footer__menu a{ color:#9fb8c4; font-size:.92rem; transition:color .18s var(--c-ease); } .c-footer__menu a:hover{ color:#fff; } .c-footer__loc{ display:flex; align-items:flex-start; gap:8px; color:#9fb8c4; font-size:.9rem; margin-top:16px; } .c-footer__loc i{ color:var(--c-cyan); margin-top:3px; } .c-footer__social{ display:flex; gap:10px; margin-top:16px; } .c-footer__social a{ width:40px; height:40px; display:grid; place-items:center; border-radius:var(--c-r-sm); border:1px solid rgba(187,232,242,.18); color:#cfe6ee; transition:all .2s var(--c-ease); } .c-footer__social a:hover{ border-color:var(--c-cyan); color:#fff; background:rgba(84,172,191,.12); transform:translateY(-2px); } .c-footer__divider{ border:0; border-top:1px solid rgba(84,172,191,.14); margin:34px 0 20px; } .c-footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; } .c-footer__copy{ font-size:.82rem; color:#6f8e9b; margin:0; } .c-footer .dev__link{ display:inline-flex; align-items:center; gap:8px; color:#6f8e9b; font-size:.82rem; } .c-footer .dev__link:hover{ color:#fff; } .c-footer .dev__arco{ display:inline-flex; align-items:center; gap:6px; font-weight:600; } .c-footer .dev__logo-svg{ width:20px; height:auto; display:block; } /* ========================================================================= REVEAL + barra de progresso (motion que ajuda a ler) ========================================================================= */ .c-reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--c-ease),transform .6s var(--c-ease); } .c-reveal.is-in{ opacity:1; transform:none; } [data-c-stagger]{ transition-delay:var(--c-d,0ms); } .c-progress{ position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--c-blue),var(--c-cyan)); z-index:2000; will-change:transform; } /* ========================================================================= COEXISTÊNCIA com main.css — em páginas redesenhadas (body.c-site), o design novo precisa vencer estilos antigos que casam por id (#hub-ct-12, #trilha-aplicada, #governanca, etc.), que têm especificidade maior que as classes .c-*. ========================================================================= */ body.c-site .c-dark{ background:var(--c-dark-grad) !important; color:#dfeef2; } body.c-site .c-dark .c-h2, body.c-site .c-dark h2, body.c-site .c-dark h3{ color:#fff !important; } body.c-site .c-dark .c-lede{ color:#a9c6d2 !important; } /* Cards claros dentro de faixas escuras: títulos voltam à cor de tinta (sem isso o h3 herdaria o branco acima e sumiria no fundo branco do card). */ body.c-site .c-dark .c-card h3{ color:var(--c-ink) !important; } body.c-site .c-section--white{ background:var(--c-white) !important; } body.c-site .c-section{ overflow:visible; } /* Páginas de formulário (contato, cadastro, recuperar-senha, privacidade): neutraliza a casca antiga (padding/gradiente/blobs/hover) das #wrappers legados, mantendo intactos os estilos de componente (inputs, tipo-card, senha, termo). */ body.c-site #cadastro, body.c-site #recuperar-senha, body.c-site #privacidade, body.c-site #contato{ padding:0; background:transparent; overflow:visible; } body.c-site #cadastro::before, body.c-site #cadastro::after, body.c-site #recuperar-senha::before, body.c-site #recuperar-senha::after{ display:none; content:none; } body.c-site #privacidade .privacidade__content-section{ padding:0; background:transparent; } body.c-site #privacidade .privacidade__hero{ background:transparent; padding:0; color:inherit; } /* Cartões de formulário: superfície limpa, sem o salto de hover antigo */ body.c-site .cadastro__form-card, body.c-site .recuperacao__form-card{ box-shadow:var(--c-shadow-md); border-radius:var(--c-r); transition:none; } body.c-site .cadastro__form-card:hover, body.c-site .recuperacao__form-card:hover{ transform:none; box-shadow:var(--c-shadow-md); } /* ========================================================================= RESPONSIVO ========================================================================= */ @media (max-width:992px){ .c-stats__grid{ grid-template-columns:1fr; gap:8px; } .c-stat{ border-left:2px solid rgba(84,172,191,.4); } .c-cards,.c-cards--3,.c-gov__grid{ grid-template-columns:1fr; } .c-hub__grid{ grid-template-columns:1fr; } .c-traj__track{ grid-template-columns:1fr; gap:0; } .c-traj__track::before{ left:18px; right:auto; top:6%; bottom:6%; width:2px; height:auto; } .c-traj__col{ position:relative; padding-left:54px; padding-bottom:30px; } .c-traj__col:last-child{ padding-bottom:0; } .c-traj__col .c-traj__dot{ position:absolute; left:0; top:0; } } @media (max-width:600px){ body{ font-size:16px; } .c-cut,.c-cut--top,.c-cut--bottom,.c-hero{ clip-path:none; } .c-hero__cta{ flex-direction:column; align-items:stretch; } .c-hero__cta .c-btn{ width:100%; } .c-cta__btns{ flex-direction:column; } .c-cta__btns .c-btn{ width:100%; } .c-step{ grid-template-columns:52px 1fr; gap:16px; } .c-timeline__rail,.c-timeline__fill{ left:25px; } .c-step__marker{ width:52px; height:52px; font-size:1.1rem; } .c-partners__logos img{ height:34px; } } /* ========================================================================= REFINAMENTO 2026.2 — profundidade + animação (sem foto, on-brand "dark tech") ========================================================================= */ /* Grade "blueprint" base + rede de conexões animada (canvas .c-hero__net, criada em connect.js). Ambas atrás do glow (z2) e do conteúdo (z4). */ .c-hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background-image: linear-gradient(rgba(84,172,191,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(84,172,191,.05) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(125% 105% at 80% 40%,#000 0%,transparent 60%); mask-image:radial-gradient(125% 105% at 80% 40%,#000 0%,transparent 60%); transform:translate3d(calc(var(--px,0)*-16px),calc(var(--py,0)*-14px),0); transition:transform .3s ease-out; will-change:transform; } .c-hero__net{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.85; } /* Entrada cinematográfica do hero: cada bloco sobe com leve desfoque, em sequência. */ @keyframes cHeroIn{ from{ opacity:0; transform:translateY(26px); filter:blur(7px); } to{ opacity:1; transform:none; filter:blur(0); } } .c-hero__inner > *{ animation:cHeroIn .9s var(--c-ease) both; } .c-hero__inner > :nth-child(1){ animation-delay:.06s; } .c-hero__inner > :nth-child(2){ animation-delay:.18s; } .c-hero__inner > :nth-child(3){ animation-delay:.32s; } .c-hero__inner > :nth-child(4){ animation-delay:.46s; } .c-hero__inner > :nth-child(5){ animation-delay:.60s; } /* Spotlight: brilho ciano segue o cursor sobre os cards (premium, discreto). */ .c-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(84,172,191,.16),transparent 62%); opacity:0; transition:opacity .35s var(--c-ease); } .c-card:hover::after{ opacity:1; } .c-card > *{ position:relative; z-index:1; } /* Sweep de luz ao passar o mouse nos botões do design novo. */ .c-btn{ position:relative; overflow:hidden; } .c-btn::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent); transform:skewX(-18deg); transition:left .55s var(--c-ease); pointer-events:none; } .c-btn:hover::after{ left:170%; } /* ========================================================================= REDUÇÃO DE MOVIMENTO ========================================================================= */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .c-reveal{ opacity:1 !important; transform:none !important; } .c-glow{ animation:none !important; } .c-step{ opacity:1 !important; } .c-timeline__fill{ display:none; } .c-progress{ display:none; } .c-hero__inner > *{ animation:none !important; } .c-hero::before{ transform:none !important; } .c-btn::after{ display:none; } }