/* ========================================================= NORTIO Consultoria - estilos Fontes carregadas via no de cada página. ========================================================= */ :root{ /* Cores (ver CLAUDE.md) */ --navy:#212121; /* fundo escuro principal */ --navy-light:#2B2B2B; --navy-dark:#171717; --copper:#E4936B; --copper-light:#F2A07E; --copper-hover:#D97F53; --stone:#E6E1DB; --ivory:#FAF7F2; --grey:#5B5F66; /* texto secundário sobre claro */ --grey-dark:#3A3D42; --grey-light:#8A8E95; --line:rgba(255,255,255,0.12); --line-dark:rgba(33,33,33,0.12); --ivory-80:rgba(250,247,242,0.8); --ivory-65:rgba(250,247,242,0.65); /* Escala tipográfica - usar SEMPRE estes tamanhos */ --fs-xs:12px; /* eyebrows, rótulos */ --fs-sm:14px; /* notas, rodapé */ --fs-base:16px; /* texto corrido */ --fs-lead:18px; /* introduções */ --fs-quote:22px; /* citações (Cormorant) */ --fs-h3:24px; /* títulos de cartões */ --fs-h2:clamp(30px, 3.6vw, 42px); /* títulos de secção */ --fs-h1:clamp(38px, 5vw, 58px); /* título principal */ --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --header-h:84px; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth; scroll-padding-top:var(--header-h);} body{ font-family:var(--sans); font-size:var(--fs-base); background:var(--ivory); color:var(--navy); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.12; letter-spacing:-0.01em; } h1{font-size:var(--fs-h1);} h2{font-size:var(--fs-h2);} h3{font-size:var(--fs-h3);} h4{font-family:var(--sans); font-size:var(--fs-base); font-weight:600; line-height:1.4;} a{color:inherit; text-decoration:none;} img, svg{max-width:100%;} ul{list-style:none;} :focus-visible{outline:2px solid var(--copper); outline-offset:3px; border-radius:2px;} .wrap{max-width:1240px; margin:0 auto; padding:0 56px;} @media (max-width:900px){ .wrap{padding:0 24px;} } .eyebrow{ display:block; font-family:var(--sans); font-size:var(--fs-xs); font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--copper); margin-bottom:16px; } .lead{font-size:var(--fs-lead); color:var(--grey); line-height:1.65;} .muted{color:var(--grey);} .quote{ font-family:var(--serif); font-size:var(--fs-quote); line-height:1.45; } /* ---------- Logótipo (NORTI + bússola no O) ---------- */ .logo{ display:inline-flex; flex-direction:column; line-height:1; color:var(--ivory); } .logo-word{ display:flex; align-items:baseline; font-family:var(--serif); font-size:26px; font-weight:500; letter-spacing:0.2em; } .logo-o{ width:0.7em; height:0.7em; flex-shrink:0; overflow:visible; } .logo-sub{ display:flex; align-items:center; gap:8px; margin-top:7px; font-family:var(--sans); font-size:8.5px; font-weight:500; letter-spacing:0.36em; text-transform:uppercase; } .logo-sub span{margin-right:-0.36em;} .logo-sub::before, .logo-sub::after{ content:""; flex:1; height:1px; background:var(--copper); } /* ---------- Header / Nav ---------- */ header.site{ position:sticky; top:0; z-index:50; background:var(--navy); border-bottom:1px solid var(--line); } .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:32px; height:var(--header-h); } nav.main-nav{ display:flex; gap:36px; font-size:15px; color:var(--ivory-80); } nav.main-nav a{ position:relative; display:flex; align-items:center; height:var(--header-h); transition:color .2s ease; } nav.main-nav a:hover, nav.main-nav a.active{color:var(--ivory);} nav.main-nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--copper); } .nav-toggle{display:none;} .mobile-panel{display:none;} @media (max-width:980px){ nav.main-nav, header.site .nav-cta{display:none;} .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; padding:8px; } .nav-toggle span{width:24px; height:2px; background:var(--ivory); transition:transform .2s ease, opacity .2s ease;} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-panel{ flex-direction:column; background:var(--navy); border-top:1px solid var(--line); } .mobile-panel.open{display:flex;} .mobile-panel a{ padding:18px 24px; border-bottom:1px solid var(--line); color:var(--ivory-80); font-size:var(--fs-base); } .mobile-panel a.active{color:var(--copper);} } /* ---------- Botões ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-size:15px; font-weight:500; line-height:1.2; padding:13px 24px; border-radius:6px; border:1px solid transparent; cursor:pointer; transition:background .2s ease, color .2s ease; white-space:nowrap; } .btn svg{width:15px; height:15px; transition:transform .2s ease;} .btn:hover svg{transform:translateX(3px);} .btn-solid{background:var(--copper); color:var(--navy); border-color:var(--copper);} .btn-solid:hover{background:var(--copper-hover); border-color:var(--copper-hover);} .btn-outline{border-color:var(--copper); color:var(--ivory); background:transparent;} .btn-outline:hover{background:rgba(228,147,107,0.1);} .btn-sm{font-size:14px; padding:10px 18px;} .btn[disabled]{opacity:.6; cursor:default;} /* Link de texto com seta */ .link-more{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--copper); } .link-more svg{width:14px; height:14px; transition:transform .2s ease;} .link-more:hover svg{transform:translateX(3px);} .on-light .link-more{color:var(--navy); border-bottom:1px solid var(--copper); padding-bottom:2px;} /* ---------- Hero (homepage) ---------- */ .hero{ background:var(--navy); color:var(--ivory); padding:88px 0 0; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; padding-bottom:80px; } .hero h1{margin-bottom:24px;} .hero h1 .accent{color:var(--copper); font-style:italic;} .hero .lead{color:var(--ivory-65); max-width:520px; margin-bottom:36px;} .hero-ctas{display:flex; align-items:center; gap:28px; flex-wrap:wrap;} .compass-hero{display:block; width:100%; max-width:380px; margin-left:auto; color:var(--copper);} .compass-hero .needle{transform-origin:200px 200px; animation:settle 2.4s cubic-bezier(.2,.8,.2,1) both;} @keyframes settle{ 0%{transform:rotate(-70deg);} 55%{transform:rotate(12deg);} 80%{transform:rotate(-4deg);} 100%{transform:rotate(0);} } @media (max-width:980px){ .hero{padding-top:56px;} .hero-grid{grid-template-columns:1fr; padding-bottom:56px;} .compass-hero{max-width:180px; margin:0; order:-1;} } /* ---------- Pilares ---------- */ .pillars{border-top:1px solid var(--line); padding:56px 0 64px;} .pillars-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:48px;} .pillar .icon{width:28px; height:28px; color:var(--copper); margin-bottom:18px;} .pillar h3{margin-bottom:10px;} .pillar p{color:var(--ivory-65); font-size:15px; margin-bottom:16px;} @media (max-width:900px){ .pillars-grid{grid-template-columns:1fr; gap:36px;} } /* ---------- Secções ---------- */ .section{padding:112px 0;} .section.tight{padding:88px 0;} .section.dark{background:var(--navy); color:var(--ivory);} .section.stone{background:var(--stone);} .section-head{max-width:640px; margin-bottom:56px;} .section-head .lead{margin-top:18px;} .dark .lead{color:var(--ivory-65);} .divider-rule{height:1px; background:var(--line-dark); border:none;} .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;} .grid-2.center-y{align-items:center;} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;} @media (max-width:980px){ .grid-2{grid-template-columns:1fr; gap:40px;} .grid-3{grid-template-columns:1fr;} } /* Espaçamento vertical consistente dentro de um bloco de texto */ .stack > * + *{margin-top:16px;} .stack > .eyebrow + *{margin-top:0;} .stack > h1 + *, .stack > h2 + *{margin-top:20px;} .stack > .link-more, .stack > .btn{margin-top:28px;} /* ---------- Cartões ---------- */ .card{ background:var(--ivory); border:1px solid var(--line-dark); border-radius:10px; padding:36px 32px; } .card h3{margin-bottom:12px;} .card p{color:var(--grey);} .card.dark{background:var(--navy); color:var(--ivory); border:none;} .card.dark p{color:var(--ivory-80);} .card.accent-left{border-left:3px solid var(--copper); border-radius:0 10px 10px 0;} .card.accent-top{border-top:3px solid var(--copper);} .card + .card:not(.grid-3 > .card){margin-top:20px;} .card p.quote{color:var(--navy);} .card.dark p.quote{color:var(--ivory);} .card .cite{margin-top:14px; font-size:var(--fs-sm); color:var(--grey-light);} /* Princípios */ .principle .eyebrow{margin-bottom:8px;} .principle h3{font-size:28px;} /* Lista "O que inclui" */ .check-list{display:flex; flex-direction:column; gap:14px;} .check-list li{display:flex; gap:12px; color:var(--grey-dark);} .check-list li::before{content:"→"; color:var(--copper); flex-shrink:0;} .card-label{font-size:var(--fs-xs); font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--copper); margin-bottom:20px;} .service-icon{width:32px; height:32px; color:var(--copper); margin-bottom:20px;} /* ---------- Bloco "Porquê NORTIO" ---------- */ .brand-block{ display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:start; } .brand-block .compass-mark{width:120px; height:120px; color:var(--navy);} @media (max-width:700px){ .brand-block{grid-template-columns:1fr; gap:28px;} .brand-block .compass-mark{width:80px; height:80px;} } /* Frase "Estratégia. Direção. Resultados." */ .brand-tagline{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; font-size:var(--fs-xs); font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--copper); margin-bottom:24px; } .brand-tagline span + span::before{ content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--ivory-65); vertical-align:middle; margin-right:22px; position:relative; top:-1px; } /* ---------- Método ---------- */ .method{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .method .step{padding:40px 32px; border-right:1px solid var(--line);} .method .step:first-child{padding-left:0;} .method .step:last-child{border-right:none;} .method .num{ display:block; font-family:var(--serif); font-style:italic; font-size:34px; line-height:1; color:var(--copper); margin-bottom:16px; } .method h4{font-size:18px; color:var(--ivory); margin-bottom:8px;} .method p{font-size:15px; color:var(--ivory-65);} @media (max-width:900px){ .method{grid-template-columns:1fr;} .method .step{padding:28px 0; border-right:none; border-bottom:1px solid var(--line);} .method .step:last-child{border-bottom:none;} } /* ---------- Page hero (subpáginas) ---------- */ .page-hero{background:var(--navy); color:var(--ivory); padding:104px 0;} .page-hero h1{max-width:760px;} .page-hero .lead{color:var(--ivory-65); max-width:600px; margin-top:20px;} /* ---------- Fundador ---------- */ .avatar{ display:flex; align-items:center; justify-content:center; width:80px; height:80px; border-radius:50%; background:var(--navy); color:var(--ivory); font-family:var(--serif); font-size:28px; margin-bottom:24px; } .role{color:var(--copper); font-weight:600; font-size:15px;} /* ---------- Faixa CTA ---------- */ .cta-band{background:var(--navy); color:var(--ivory); padding:64px 0;} .cta-band-row{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;} .cta-band-row p{font-family:var(--serif); font-size:26px; line-height:1.3; max-width:600px;} /* ---------- Rodapé ---------- */ footer.site{ background:var(--navy-dark); color:var(--ivory-65); padding:64px 0 32px; font-size:var(--fs-sm); } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:48px; } .footer-brand .logo{margin-bottom:22px;} .footer-brand .quote{font-size:18px; font-style:italic; max-width:320px;} .footer-col h5{ font-size:var(--fs-xs); font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ivory); margin-bottom:18px; } .footer-col a, .footer-col p{display:block; margin-bottom:10px; transition:color .2s ease;} .footer-col a:hover{color:var(--copper);} .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px; border-top:1px solid var(--line); padding-top:28px; font-size:13px; } .footer-bottom nav{display:flex; gap:20px; flex-wrap:wrap;} .footer-bottom a:hover{color:var(--copper);} .footer-bottom .tagline{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--copper);} @media (max-width:900px){ .footer-top{grid-template-columns:1fr; gap:36px;} } /* ---------- Formulário ---------- */ .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;} .form-grid .full{grid-column:1/-1;} @media (max-width:600px){ .form-grid{grid-template-columns:1fr;} } label{ display:block; font-size:var(--fs-xs); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; color:var(--grey); } input, textarea, select{ width:100%; padding:14px 16px; border:1px solid rgba(33,33,33,0.2); border-radius:6px; font-family:var(--sans); font-size:var(--fs-base); background:#fff; color:var(--navy); transition:border-color .2s ease; } input:focus, textarea:focus, select:focus{outline:none; border-color:var(--copper); box-shadow:0 0 0 3px rgba(228,147,107,0.2);} textarea{resize:vertical; min-height:140px;} label.consent{display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-sm); color:var(--grey); text-transform:none; letter-spacing:0; font-weight:400; margin:0;} .consent input{width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--copper);} .consent a{text-decoration:underline; text-underline-offset:2px;} .form-submit{width:100%; margin-top:24px;} .form-status{margin-top:14px; font-size:var(--fs-sm);} .form-status.ok{color:#2F7D4F;} .form-status.error{color:#B3412E;} .hidden-field{position:absolute; left:-9999px;} /* ---------- Contactos ---------- */ .contact-info{display:flex; flex-direction:column; gap:24px;} .contact-info .item{display:flex; gap:16px; align-items:flex-start;} .contact-info .icon{width:20px; height:20px; color:var(--copper); margin-top:2px; flex-shrink:0;} .contact-info h4{margin-bottom:2px;} .contact-info p, .contact-info a{color:var(--grey);} .contact-info a:hover{color:var(--navy);} /* ---------- Texto legal ---------- */ .prose{max-width:720px;} .prose h2{font-size:28px; margin:48px 0 14px;} .prose h2:first-child{margin-top:0;} .prose p, .prose li{color:var(--grey-dark);} .prose p + p{margin-top:14px;} .prose ul{list-style:disc; padding-left:22px; margin-top:12px;} .prose li + li{margin-top:6px;} .prose a{color:var(--navy); text-decoration:underline; text-decoration-color:var(--copper); text-underline-offset:3px;} /* ---------- Animação de entrada (só com JS ativo) ---------- */ .js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;} .js .reveal.visible{opacity:1; transform:none;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .js .reveal{opacity:1; transform:none; transition:none;} .compass-hero .needle{animation:none;} } @media (max-width:600px){ .section{padding:80px 0;} .section.tight{padding:64px 0;} .page-hero{padding:72px 0;} .card{padding:28px 24px;} .cta-band-row p{font-size:22px;} } .card h3 + .contact-info{margin-top:24px;} /* ---------- Seletor de idioma ---------- */ .nav-actions{display:flex; align-items:center; gap:24px;} .lang-switch{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; letter-spacing:0.08em; color:var(--ivory-65); } .lang-switch a{padding:6px 2px; transition:color .2s ease;} .lang-switch a[href]:hover{color:var(--ivory);} .lang-switch a.active{color:var(--copper);} .lang-switch span{opacity:.4;} @media (max-width:980px){ .nav-actions{gap:14px;} } /* Títulos com linhas equilibradas (evita palavras soltas) */ h1, h2{text-wrap:balance;} @media (max-width:600px){ .brand-tagline{gap:8px 12px; letter-spacing:0.16em;} .brand-tagline span + span::before{margin-right:12px;} } .nowrap{white-space:nowrap;} /* Título do topo: uma frase por linha */ .hero h1 .line{display:block;} @media (min-width:1100px){ .hero-grid{grid-template-columns:1.35fr 0.65fr;} .hero h1 .line{white-space:nowrap;} .compass-hero{max-width:340px;} }