/* ========================================================================== NR Gestão, home.css Estilos exclusivos da Home (reconstrução premium/editorial). Não redefine cor nem fonte: consome tokens.css e os componentes de site.css. Carregado só em index.html, depois de tokens.css e site.css. ========================================================================== */ .home-container{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)} /* ---- Reveal on scroll (progressive enhancement) ---- Por padrão as seções ficam visíveis (sem depender de JS). Só ficam ocultas antes de aparecer quando home.js confirma suporte a IntersectionObserver e marca ; assim, sem JS ou com erro de script, o conteúdo nunca fica invisível. */ .reveal{transition:opacity .7s ease,transform .7s ease} html.reveal-ready .reveal{opacity:0;transform:translateY(22px)} html.reveal-ready .reveal.is-visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html.reveal-ready .reveal{opacity:1;transform:none;transition:none} } /* ========================================================================== Header transparente sobre o Hero (só na Home) ========================================================================== */ body.home .site-header{ position:fixed;top:0;left:0;right:0; background:transparent;border-bottom-color:transparent; transition:background .35s ease,border-color .35s ease,box-shadow .35s ease; } body.home .site-header .site-logo__word{color:#fff;transition:color .35s ease} body.home .site-header .site-logo__word strong{color:var(--accent-strong);transition:color .35s ease} body.home .site-header .site-nav__list a{color:rgba(255,255,255,.92);transition:color .35s ease} body.home .site-header .site-nav__list a[aria-current="page"]{color:#fff;border-bottom-color:var(--accent-strong)} body.home .site-header .site-nav__toggle{color:#fff;border-color:rgba(255,255,255,.4)} body.home .site-header .btn--nav-cta{padding:9px 16px;font-size:.86rem} body.home .site-header.is-scrolled{ background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 8px 30px rgba(6,24,45,.08); } body.home .site-header.is-scrolled .site-logo__word{color:var(--text)} body.home .site-header.is-scrolled .site-logo__word strong{color:var(--brand-ink)} body.home .site-header.is-scrolled .site-nav__list a{color:var(--text)} body.home .site-header.is-scrolled .site-nav__list a[aria-current="page"]{color:var(--brand-ink);border-bottom-color:var(--accent)} body.home .site-header.is-scrolled .site-nav__toggle{color:var(--text);border-color:var(--line)} @media (max-width:860px){ /* menu mobile aberto precisa de fundo sólido mesmo com header transparente */ body.home .site-header .site-nav__list.is-open{background:var(--surface)} body.home .site-header .site-nav__list.is-open a{color:var(--text)} body.home .site-header .site-nav__list.is-open a[aria-current="page"]{color:var(--brand-ink)} } .site-nav__cta-item{margin-left:6px} @media (max-width:860px){.site-nav__cta-item{margin-left:0;padding-top:8px}} /* ========================================================================== 01 — HERO ========================================================================== */ .home-hero{ position:relative; padding-block:132px 88px; min-height:88vh; display:flex;align-items:center; background:linear-gradient(160deg, var(--nr-navy-deep), var(--nr-navy) 72%); color:var(--on-brand); overflow:hidden; } .home-hero__bg{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 30%;z-index:0; } .home-hero__overlay{ position:absolute;inset:0;z-index:1; background:linear-gradient( 160deg, color-mix(in srgb, var(--nr-navy-deep) 93%, transparent), color-mix(in srgb, var(--nr-navy) 85%, transparent) 70% ); } .home-hero::before{ content:"";position:absolute;inset:0;z-index:2; background:radial-gradient(60% 55% at 82% 18%, rgba(23,168,138,.16), transparent 70%); pointer-events:none; } .home-hero__grid{ position:relative;z-index:3; display:grid;gap:56px;align-items:center; grid-template-columns:1fr 1fr; max-width:1240px; } .home-hero .eyebrow{color:var(--accent-strong);margin-bottom:18px;display:block} .home-hero h1{color:#fff;font-size:clamp(2rem, 3.6vw + 1rem, 3.1rem);margin-bottom:20px} .home-hero__lead{max-width:52ch;color:var(--on-brand)} .home-hero__lead strong{color:#fff} .home-hero__sub{max-width:50ch;color:var(--on-brand);opacity:.85} .home-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px} .home-hero__ghost{color:#fff;border-color:rgba(255,255,255,.35)} .home-hero__ghost:hover{border-color:rgba(255,255,255,.6)} .home-hero__chips{ list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px; margin:30px 0 0;padding:20px 0 0;border-top:1px solid rgba(234,242,248,.15); font-size:.9rem;color:var(--on-brand); } .home-hero__chips li{display:flex;align-items:center;gap:7px} .home-hero__chips span[aria-hidden]{color:var(--accent-strong);font-weight:700} .home-hero__media{position:relative} .home-hero__img{ width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 38%; border-radius:24px;box-shadow:0 30px 70px -20px rgba(4,14,26,.55); } .home-hero__card{ position:absolute;left:-8%;bottom:-14%;width:230px; background:var(--surface);color:var(--text); border-radius:16px;padding:16px 18px; box-shadow:0 24px 50px -16px rgba(6,24,45,.35); } .home-hero__card-tag{ margin:0 0 10px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; font-weight:700;color:var(--brand-ink); } .home-hero__card-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.86rem} .home-hero__card-steps li{display:flex;align-items:center;gap:8px;color:var(--text-dim)} .home-hero__card-steps li::before{ content:"";width:8px;height:8px;border-radius:50%;flex:none; background:var(--line); } .home-hero__card-steps li.is-done{color:var(--text)} .home-hero__card-steps li.is-done::before{background:var(--accent)} .home-hero__card-steps li.is-active{color:var(--text);font-weight:600} .home-hero__card-steps li.is-active::before{background:var(--accent-strong);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-strong) 25%, transparent)} @media (max-width:900px){ .home-hero{padding-block:104px 56px;min-height:0} .home-hero__grid{grid-template-columns:1fr;gap:36px} .home-hero__media{order:2} .home-hero__copy{order:1} .home-hero__card{position:static;width:auto;margin-top:16px} } /* ========================================================================== 02 — AUTORIDADE ========================================================================== */ .home-authority h2{max-width:20ch;margin-bottom:22px} .home-authority__lead{max-width:64ch} .home-authority__text{max-width:70ch;color:var(--text-dim)} .home-authority__steps{ list-style:none;margin:44px 0 0;padding:0; display:flex;align-items:flex-start;justify-content:space-between;gap:12px; position:relative; } .home-authority__steps::before{ content:"";position:absolute;top:22px;left:6%;right:6%;height:1px; background:var(--line);z-index:0; } .home-authority__steps li{ position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:10px; text-align:center; } .home-authority__num{ font-family:var(--font-display);font-weight:800;font-size:1.8rem; color:var(--brand-ink);background:var(--bg); } .home-authority__label{font-size:.88rem;color:var(--text-dim);font-weight:600} @media (max-width:700px){ .home-authority__steps{flex-direction:column;align-items:flex-start;gap:22px} .home-authority__steps::before{display:none} .home-authority__steps li{flex-direction:row;align-items:center;text-align:left;gap:14px} } /* ========================================================================== 03 — DESAFIOS (composição assimétrica) ========================================================================== */ .home-challenges h2{max-width:22ch;margin-bottom:40px} .home-challenges__grid{ display:grid;gap:20px; grid-template-columns:1.4fr 1fr 1fr; } .home-challenge{ position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:32px 28px;box-shadow:var(--shadow); display:flex;flex-direction:column;gap:14px; } .home-challenge--lg{padding:40px 34px} .home-challenge__num{ font-family:var(--font-display);font-weight:800;font-size:2.2rem; color:var(--accent-text);line-height:1; } .home-challenge h3{font-size:1.15rem} .home-challenge p{color:var(--text-dim);margin:0;max-width:34ch} .home-challenge__arrow{ position:absolute;right:24px;bottom:22px;color:var(--brand-ink); font-size:1.1rem;transition:transform .25s ease; } .home-challenge:hover .home-challenge__arrow{transform:translateX(4px)} @media (max-width:900px){ .home-challenges__grid{grid-template-columns:1fr} } /* ========================================================================== 04 — TIMELINE (Como funciona) ========================================================================== */ .home-timeline__lead{max-width:60ch} .home-timeline__list{ list-style:none;margin:44px 0 0;padding:0;counter-reset:tl; display:grid;grid-template-columns:repeat(4,1fr);gap:0; position:relative; } .home-timeline__list::before{ content:"";position:absolute;top:22px;left:0;right:0;height:1px;background:var(--line); } .home-timeline__step{ position:relative;padding:0 22px 0 0; } .home-timeline__marker{ display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%; background:var(--surface);border:2px solid var(--accent);color:var(--brand-ink); font-family:var(--font-display);font-weight:800;font-size:.95rem; margin-bottom:18px;position:relative;z-index:1; } .home-timeline__step h3{margin-bottom:8px;font-size:1.05rem} .home-timeline__step p{color:var(--text-dim);max-width:26ch} @media (max-width:860px){ .home-timeline__list{grid-template-columns:1fr;gap:28px} .home-timeline__list::before{left:22px;top:0;bottom:0;right:auto;width:1px;height:auto} .home-timeline__step{padding-left:64px} .home-timeline__marker{position:absolute;left:0;top:0;margin-bottom:0} } /* ========================================================================== 05 — SERVIÇOS (lista editorial assimétrica) ========================================================================== */ .home-services__lead{max-width:60ch} .home-services__list{ list-style:none;margin:40px 0 0;padding:0; display:grid;gap:0;border-top:1px solid var(--line); } .home-service{border-bottom:1px solid var(--line)} .home-service > a,.home-service--soon{ display:grid;grid-template-columns:280px 1fr 24px;align-items:center;gap:28px; padding:26px 4px;color:var(--text); } .home-service > a{transition:background .2s ease} .home-service > a:hover{background:var(--surface-2);text-decoration:none} .home-service__title{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--text)} .home-service__desc{color:var(--text-dim);font-size:.96rem} .home-service__arrow{color:var(--brand-ink);font-size:1.15rem;justify-self:end;transition:transform .2s ease} .home-service > a:hover .home-service__arrow{transform:translateX(4px)} .home-service--soon{opacity:.65} .home-service__soon{ justify-self:end;font-size:.78rem;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--text-dim); } @media (max-width:760px){ .home-service > a,.home-service--soon{grid-template-columns:1fr;gap:8px;padding:20px 4px} .home-service__arrow,.home-service__soon{justify-self:start} } /* ========================================================================== 06 — GESTÃO CONTÍNUA (duas colunas, imagem protagonista) ========================================================================== */ .home-continuous__grid{display:grid;gap:56px;align-items:center;grid-template-columns:1fr 1fr} .home-continuous h2{margin-bottom:16px} .home-continuous__sequence{ list-style:none;margin:26px 0 0;padding:0; display:flex;flex-wrap:wrap;align-items:center;gap:10px; font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--brand-ink); } .home-continuous__sequence li:not(:last-child)::after{content:"→";margin-left:10px;color:var(--text-dim);font-weight:400} .home-continuous__media img{ width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow); } @media (max-width:900px){ .home-continuous__grid{grid-template-columns:1fr;gap:28px} .home-continuous__media{order:-1} } /* ========================================================================== 07 — RISCOS PSICOSSOCIAIS (imagem à esquerda) ========================================================================== */ .home-psychosocial{background:var(--surface-2)} .home-psychosocial__grid{display:grid;gap:56px;align-items:center;grid-template-columns:1fr 1fr} .home-psychosocial__media img{ width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow); } .home-psychosocial__topics{list-style:none;margin:22px 0;padding:0;display:grid;gap:12px} .home-psychosocial__topics li{padding-left:22px;position:relative;max-width:52ch;color:var(--text-dim)} .home-psychosocial__topics li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--accent)} .home-psychosocial__topics strong{color:var(--text)} @media (max-width:900px){ .home-psychosocial__grid{grid-template-columns:1fr;gap:28px} } /* ========================================================================== 08 — SETORES (grid 2x2, foto protagonista) ========================================================================== */ .home-sectors__lead{max-width:66ch} .home-sectors__grid{ list-style:none;margin:40px 0 0;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:18px; } .home-sector{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative} .home-sector a{display:block;position:relative;aspect-ratio:16/9;overflow:hidden} .home-sector img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s ease; } .home-sector a:hover img{transform:scale(1.04)} .home-sector a::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 40%,rgba(10,30,54,.78)); } .home-sector__label{ position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px 20px; display:flex;align-items:center;justify-content:space-between; color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.05rem; } @media (max-width:700px){ .home-sectors__grid{grid-template-columns:1fr} } /* ========================================================================== 09 — POR QUE NR GESTÃO ========================================================================== */ .home-why{background:var(--surface-2)} .home-why h2{max-width:20ch;margin-bottom:18px} .home-why__lead{max-width:64ch} .home-why__pillars{ display:grid;gap:32px;margin-top:44px; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line);padding-top:36px; } .home-why__num{ display:block;font-family:var(--font-display);font-weight:800; font-size:1.6rem;color:var(--accent-text);margin-bottom:10px; } .home-why__pillar h3{margin-bottom:10px} .home-why__pillar p{color:var(--text-dim);max-width:34ch} @media (max-width:820px){ .home-why__pillars{grid-template-columns:1fr;gap:26px} } /* ========================================================================== 10 — TRANSPARÊNCIA / PROVA SOCIAL (honesta, sem depoimento inventado) ========================================================================== */ .home-proof__lead{max-width:70ch;color:var(--text-dim)} .home-proof__tags{ list-style:none;margin:28px 0 0;padding:24px 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line); display:flex;flex-wrap:wrap;gap:10px; } .home-proof__note{margin-top:20px;font-size:.9rem;color:var(--text-dim)} /* ========================================================================== 11 — FAQ (duas colunas) ========================================================================== */ .home-faq__grid{display:grid;gap:56px;grid-template-columns:.85fr 1.15fr;align-items:start} .home-faq__intro h2{margin:14px 0 16px;max-width:16ch} .home-faq__intro p{color:var(--text-dim);max-width:44ch} .home-faq__intro .btn{margin-top:10px} .home-faq__intro .link-strong{margin-top:16px} .home-faq__accordion{margin-top:0} @media (max-width:900px){ .home-faq__grid{grid-template-columns:1fr;gap:28px} } /* ========================================================================== 12 — CTA final (composição própria, não repete o Hero) ========================================================================== */ .home-cta{background:linear-gradient(160deg, var(--nr-navy-deep), var(--nr-navy) 65%)} .home-cta .eyebrow{margin-bottom:14px;display:block}