/* styles.css — v10 production */ :root{ --accent-orange: #ff7a00; --bg: #0b1f37; --ink: #0f172a; --muted: #64748b; --card:#ffffff; --surface:#f1f5f9; --brand: #0ea5e9; --brand-2:#1e3a8a; --ring: rgba(14,165,233,.35); --topbar-h: 72px; } /* Dark theme */ :root[data-theme="dark"]{ --bg: #0b1220; --ink: #e5e7eb; --muted: #94a3b8; --card:#0f172a; --surface:#0b1425; --brand:#22d3ee; --brand-2:#1d4ed8; --ring: rgba(125,211,252,.35); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6} :root[data-theme="dark"] body{background:#0b1220} .container{max-width:1100px;margin:0 auto;padding:0 1.25rem} .section{padding:4rem 0} .section--alt{background:var(--surface)} .section--cta{background:linear-gradient(180deg,#f8fafc, #eef6ff)} :root[data-theme="dark"] .section--cta{background:linear-gradient(180deg,#0b1425,#0b1220)} .topbar{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e5e7eb;height:var(--topbar-h);transition:all .25s ease} .topbar.shrink{--topbar-h:58px;box-shadow:0 10px 24px rgba(2,6,23,.06)} :root[data-theme="dark"] .topbar{background:#0f172a;border-bottom-color:#0b1425;box-shadow:none} .topbar__content{display:flex;align-items:center;justify-content:space-between;height:100%} .brand img{height:44px;width:auto;display:block} .footer .brand img{height:36px;width:auto} .nav__toggle{display:none;background:none;border:none;padding:.5rem;border-radius:.75rem;color:var(--ink)} .nav__toggle:focus{outline:3px solid var(--ring)} .menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center} .menu a{display:block;text-decoration:none;color:var(--ink);font-weight:600;padding:.5rem .75rem;border-radius:10px} .menu a:hover{background:#f1f5f9} :root[data-theme="dark"] .menu a:hover{background:#0b1425} .theme-toggle{border:1px solid #e5e7eb;background:transparent;border-radius:10px;padding:.45rem .6rem;font-size:.95rem;cursor:pointer} :root[data-theme="dark"] .theme-toggle{border-color:#243045} .btn{display:inline-block;border:none;border-radius:14px;padding:.875rem 1.1rem;font-weight:700;text-decoration:none;cursor:pointer} .btn--primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 8px 24px rgba(14,165,233,.25)} .btn--ghost{background:#fff;border:1px solid #e5e7eb;color:var(--ink)} .hamb .line{stroke:var(--ink);stroke-width:2;stroke-linecap:round;transition:transform .3s ease, opacity .2s ease} .nav.open .hamb .line1{transform:translateY(6px) rotate(45deg)} .nav.open .hamb .line2{opacity:0} .nav.open .hamb .line3{transform:translateY(-6px) rotate(-45deg)} .hero{background:linear-gradient(180deg,#0b1f37,#0f2b4a);color:#fff;padding:5rem 0} :root[data-theme="dark"] .hero{background:linear-gradient(180deg,#0b1425,#0b1f37)} .hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center} .hero__copy h1{font-size:clamp(1.9rem, 4.5vw, 3rem);line-height:1.15;margin:0 0 1rem} .grad{background:linear-gradient(90deg,#93c5fd,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent} .lead{font-size:1.1rem;color:#dbeafe;max-width:55ch} .cta{margin-top:1rem;display:flex;gap:.75rem;flex-wrap:wrap} .trust{display:flex;gap:1rem;list-style:none;margin:1rem 0 0;padding:0;color:#cbd5e1;font-size:.95rem} .hero__art .truck{width:100%;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem} .card{background:var(--card);border:1px solid #e5e7eb;border-radius:18px;padding:1rem;box-shadow:0 6px 20px rgba(2,6,23,0.04)} :root[data-theme="dark"] .card{border-color:#1f2937;box-shadow:none} .card h3{margin-top:0} .mission{border-left:4px solid var(--brand);} .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .tile{background:var(--card);border:1px dashed #cbd5e1;border-radius:16px;padding:1rem} :root[data-theme="dark"] .tile{border-color:#334155} .tile span{display:block;font-weight:800;margin-bottom:.25rem;color:var(--brand-2)} .tile small{display:block;color:var(--muted);line-height:1.5} .stat{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem} .stat > div{background:var(--surface);border:1px solid #e5e7eb;border-radius:14px;padding:.75rem;text-align:center} :root[data-theme="dark"] .stat > div{background:#0b1425;border-color:#1f2937} .stat strong{display:block;font-size:1.25rem} .slogan{font-weight:800;color:var(--brand-2);font-size:1.2rem;margin-top:.5rem} .checklist{padding-left:1.2rem} .checklist li{margin:.35rem 0} .services{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem} .service{background:var(--card);border:1px solid #e5e7eb;border-radius:18px;padding:1rem} :root[data-theme="dark"] .service{border-color:#1f2937} .service h4{margin:.25rem 0} .badges{display:flex;gap:.5rem;flex-wrap:wrap} .badge{background:#e0f2fe;color:#075985;border:1px solid #bae6fd;padding:.4rem .6rem;border-radius:999px;font-weight:700;font-size:.9rem} .section--cta .contact{list-style:none;padding:0;margin:0 0 1rem 0} .section--cta .contact li{margin:.35rem 0} .form{background:var(--card);border:1px solid #e2e8f0;border-radius:18px;padding:1.2rem;box-shadow:0 10px 24px rgba(2,6,23,.05)} :root[data-theme="dark"] .form{border-color:#1f2937;box-shadow:none} .form__row{display:flex;flex-direction:column;margin-bottom:.75rem} .form__row label{font-weight:600;margin-bottom:.35rem} .form__row input, .form__row textarea, .form__row select{ padding:.9rem;border-radius:12px;border:1px solid #cbd5e1;background:#f8fafc;font:inherit;color:#0f172a; } :root[data-theme="dark"] .form__row input, :root[data-theme="dark"] .form__row textarea, :root[data-theme="dark"] .form__row select{ background:#0b1425;color:#e5e7eb;border-color:#334155; } .form__row input:focus, .form__row textarea:focus, .form__row select:focus{outline:3px solid var(--ring);border-color:var(--brand)} .form__notice{color:var(--muted);font-size:.9rem;margin:.5rem 0 0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .footer{background:#0b1f37;color:#cbd5e1;padding:2.5rem 0} :root[data-theme="dark"] .footer{background:#0b1425} .footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;align-items:start} .footer__links{list-style:none;padding:0;margin:0} .footer__links a{color:#cbd5e1;text-decoration:none} .footer__links a:hover{text-decoration:underline} .footer__copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;margin-top:1rem} /* Nav underline */ .linkfx{position:relative} .linkfx::after{content:""; position:absolute; left:10%; right:10%; bottom:4px; height:2px; background:linear-gradient(90deg,var(--brand-2),var(--brand)); transform:scaleX(0); transform-origin:right; transition:transform .25s ease; border-radius:999px; } .linkfx:hover::after{transform:scaleX(1); transform-origin:left} /* ----- Mobile & tablet (<= 900px) ----- */ @media (max-width: 900px){ :root{ --accent-orange: #ff7a00; --topbar-h:64px } .nav__toggle{display:inline-grid} .menu{display:none;position:fixed;inset:0;z-index:1200;flex-direction:column;gap:.25rem; background:#fff;padding:calc(var(--topbar-h) + 8px) 1rem 2rem 1rem;border:0;border-radius:0} :root[data-theme="dark"] .menu{background:#0f172a} .menu.show{display:flex} .menu a{font-size:1.06rem} body.noscroll{overflow:hidden} .hero{padding:3rem 0 2.5rem} .hero__grid{grid-template-columns:1fr} .hero__copy h1{font-size:2rem} .lead{font-size:1rem} .cta{display:grid;grid-template-columns:1fr;gap:.6rem} .trust{flex-wrap:wrap;gap:.6rem} .grid-2{grid-template-columns:1fr} .cards{grid-template-columns:1fr} .services{grid-template-columns:1fr} .tiles{grid-template-columns:1fr} .footer__grid{grid-template-columns:1fr} .form .btn{width:100%} } /* reduce motion */ @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} } /* === PATCH v10.12 (hero with transparent truck image) === */ .hero__art .truck-photo{ width:100%; height:auto; max-width:640px; display:block; margin-inline:auto; filter: drop-shadow(0 18px 28px rgba(0,0,0,.28)); border-radius: 0; /* sem borda arredondada pra não cortar a transparência */ } /* === PATCH v10.13 (labels sempre acima + ajustes de grid) === */ #contato .form .form__row{ display:flex !important; flex-direction:column !important; gap:.35rem; } #contato .form .form__row label{ display:block; margin:0 0 .35rem 0; width:auto; } #contato .form .form__row.grid-2{ display:grid !important; grid-template-columns: 1fr 1fr !important; gap: .85rem !important; } #contato .form .form__row.grid-2 > div{ display:flex; flex-direction:column; } #contato .form input, #contato .form select, #contato .form textarea{ width:100%; box-sizing:border-box; } /* Modal de formulário */ .modal{ position:fixed; inset:0; display:none; z-index:1000; } .modal.open{ display:block; } .modal__backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.6); backdrop-filter: blur(2px); } .modal__dialog{ position:relative; max-width:720px; margin:6vh auto; background:var(--panel,#0b1425); color:inherit; border-radius:20px; box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 20px 20px 10px; } :root:not([data-theme="dark"]) .modal__dialog{ background:#fff; } .modal__close{ position:absolute; top:10px; right:10px; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; color:inherit; opacity:.7; } .modal__body{ padding:12px 6px 16px; } .js-modal-ready #contato .form{ display:none; } /* === PATCH v10.14 === */ /* SOBRE: três cards alinhados + missão destacada */ #sobre .stat{ display:grid; grid-template-columns:repeat(3, minmax(160px,1fr)); gap:1rem; } #sobre .stat > div{ background:var(--panel, #0b1425); border:1px solid rgba(30,58,138,.12); border-radius:18px; padding:14px 16px; text-align:center; box-shadow: 0 6px 18px rgba(2,6,23,.08); } :root:not([data-theme="dark"]) #sobre .stat > div{ background:#f8fafc; } #sobre .stat strong{ display:block; font-size:1.25rem; color:var(--brand-2); } #sobre .stat span{ display:block; color:var(--muted,#334); } #sobre .slogan{ margin-top:1rem; font-weight:700; color:var(--brand-1,#0b3b7a); } #sobre .mission{ border:1px solid rgba(30,58,138,.15); border-radius:18px; padding:18px; background:linear-gradient(180deg, rgba(59,130,246,.06), transparent 45%); } #sobre .mission h3{ margin-top:0; color:var(--brand-1,#0b3b7a); } /* CONTATO: esconder formulário inline (apenas modal) e estilizar CTA */ #contato .form{ display:none !important; } #contato .cta-modal{ margin-top:1rem; display:inline-flex; gap:.75rem; align-items:center; } #contato .cta-modal .btn{ padding:.85rem 1.1rem; border-radius:14px; } /* HERO carousel */ .hero__carousel{ position:relative; max-width:720px; margin-inline:auto; } .hero__carousel .viewport{ position:relative; overflow:hidden; border-radius:16px; } .hero__carousel .slide{ position:absolute; inset:0; opacity:0; transform:scale(.98); transition: opacity .5s ease, transform .6s ease; } .hero__carousel .slide.is-active{ opacity:1; transform:scale(1); position:absolute; } .hero__carousel img{ width:100%; height:auto; display:block; } .hero__carousel .ctrl{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(2,6,23,.45); color:#fff; border:0; width:38px; height:38px; border-radius:50%; cursor:pointer; } .hero__carousel .prev{ left:8px; } .hero__carousel .next{ right:8px; } .hero__carousel .dots{ display:flex; gap:8px; justify-content:center; margin-top:10px; } .hero__carousel .dot{ width:8px; height:8px; border-radius:50%; background:#94a3b8; cursor:pointer; } .hero__carousel .dot.active{ background:#0ea5e9; } /* === PATCH v10.15 (Sobre organizado + missão full-width) === */ #sobre .container.grid-2{ display:grid; grid-template-columns: minmax(320px,1.05fr) minmax(280px,.95fr); gap: 2rem; align-items:start; } #sobre .stat{ display:grid; grid-template-columns: repeat(3, minmax(140px,1fr)); gap: 1rem; } #sobre .stat > div{ background:var(--panel,#0b1425); border:1px solid rgba(30,58,138,.10); border-radius:18px; padding: 14px 16px; text-align:center; box-shadow: 0 8px 22px rgba(2,6,23,.08); } :root:not([data-theme="dark"]) #sobre .stat > div{ background:#f8fafc; } #sobre .stat strong{ display:block; font-size:1.25rem; color:var(--brand-2); } #sobre .stat span{ display:block; color:#475569; } /* missão ocupa a largura toda, abaixo do grid */ #sobre .mission{ max-width: 980px; margin: 1.25rem auto 0 auto; border-radius:18px; border:1px solid rgba(30,58,138,.12); background: linear-gradient(180deg, rgba(59,130,246,.06), transparent 45%); padding: 18px; box-shadow: 0 10px 28px rgba(2,6,23,.06); } #sobre .mission h3{ margin-top:0; color:var(--brand-1,#0b3b7a); } #sobre .slogan{ margin-top:1rem; font-weight:700; color:var(--brand-1,#0b3b7a); } @media (max-width: 980px){ #sobre .container.grid-2{ grid-template-columns: 1fr; } #sobre .stat{ grid-template-columns: repeat(2, 1fr); } #sobre .mission{ margin-left: 0; margin-right: 0; } } @media (max-width: 620px){ #sobre .stat{ grid-template-columns: 1fr; } } /* === PATCH v10.16 (Sobre e CTAs de formulário) === */ /* Grid limpo no SOBRE */ #sobre .container.grid-2{ display:grid; grid-template-columns: minmax(360px,1.05fr) minmax(320px,.95fr); gap:2.2rem; align-items:start; } #sobre p{ max-width: 66ch; } #sobre .stat{ display:grid; grid-template-columns: repeat(3, minmax(140px,1fr)); gap:1rem; } #sobre .stat > div{ background:var(--panel,#0b1425); border:1px solid rgba(30,58,138,.10); border-radius:16px; padding:14px 16px; text-align:center; box-shadow:0 8px 22px rgba(2,6,23,.08); } :root:not([data-theme="dark"]) #sobre .stat > div{ background:#f8fafc; } #sobre .stat strong{ display:block; font-size:1.2rem; color:var(--brand-2); } #sobre .stat span{ display:block; color:#475569; font-size:.95rem; } #sobre .slogan{ margin-top:1rem; font-weight:700; color:var(--brand-1,#0b3b7a); } /* Missão em faixa full-width dentro de uma .container própria */ #sobre > .container + .container .mission{ max-width: 100%; } #sobre .mission{ border:1px solid rgba(30,58,138,.12); border-radius:18px; padding:18px; background:linear-gradient(180deg, rgba(59,130,246,.06), transparent 45%); box-shadow:0 10px 28px rgba(2,6,23,.06); } #sobre .mission h3{ margin-top:0; color:var(--brand-1,#0b3b7a); } @media (max-width: 980px){ #sobre .container.grid-2{ grid-template-columns: 1fr; } #sobre .stat{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px){ #sobre .stat{ grid-template-columns: 1fr; } } /* Floating CTA */ .floating-quote{ position: fixed; right: 18px; bottom: 18px; z-index: 1100; background: #ff7a00; color: #fff; border:0; border-radius: 999px; padding: .8rem 1.1rem; font-weight:700; box-shadow: 0 12px 26px rgba(2,6,23,.25); cursor:pointer; } @media (max-width: 480px){ .floating-quote{ padding:.7rem 1rem; } } /* === PATCH v10.17 (Sobre repaginado) === */ .section--about{ position:relative; } .about__hdr{ max-width: 70ch; margin-bottom: 1rem; } .eyebrow{ display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(14,165,233,.12); color:#0369a1; font-weight:700; } .about__hdr .lede{ font-size:1.05rem; color:#334155; margin-top:.6rem; } .about__grid{ display:grid; grid-template-columns: minmax(360px,1.1fr) minmax(300px,.9fr); gap:2.2rem; align-items:start; } .about__intro p{ margin:0 0 .8rem 0; } .ticks{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; } .ticks li{ display:flex; gap:.5rem; align-items:flex-start; } .ticks li::before{ content:""; width:18px; height:18px; border-radius:50%; margin-top:.2rem; border:2px solid #0ea5e9; box-shadow: inset 0 0 0 3px rgba(14,165,233,.15); } .about__stats{ display:grid; grid-template-columns: repeat(3, minmax(140px,1fr)); gap:1rem; } .card{ background:var(--panel,#0b1425); border:1px solid rgba(30,58,138,.12); border-radius:16px; padding:14px 14px; box-shadow:0 8px 22px rgba(2,6,23,.08); } :root:not([data-theme="dark"]) .card{ background:#ffffff; } .stat{ text-align:center; } .stat .ico{ width:44px; height:44px; color:#0ea5e9; display:grid; place-items:center; margin:0 auto .35rem auto; background:rgba(14,165,233,.08); border-radius:50%; } .stat .ico svg{ width:24px; height:24px; } .stat strong{ font-size:1.25rem; color:var(--brand-2,#0b3b7a); display:block; } .stat span{ color:#64748b; display:block; } .about__quote{ margin:1rem 0 0 0; font-weight:800; color:var(--brand-1,#0b3b7a); font-size:1.25rem; } .about__mission{ margin-top:1.1rem; padding:18px 18px 16px; position:relative; } .about__mission .card__bar{ position:absolute; inset:0 auto auto 0; height:6px; width:160px; background:#ff7a00; border-top-left-radius:16px; border-top-right-radius:16px; } .about__mission h3{ margin:.35rem 0 .4rem 0; } .about__mission p{ margin:0; color:#334155; } @media (max-width: 1080px){ .about__grid{ grid-template-columns: 1fr; } .about__stats{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px){ .about__stats{ grid-template-columns: 1fr; } } /* === PATCH v10.18 (Sobre refatorado com classes exclusivas) === */ .section--about2{ position:relative; } .a2-hdr{ max-width: none; width: 100%; } .a2-eyebrow{ display:inline-block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; padding:.18rem .55rem; border-radius:999px; background:rgba(14,165,233,.12); color:#0369a1; font-weight:700; } .a2-lede{ font-size:1.06rem; color:#334155; margin-top:.6rem; max-width:none; } .a2-grid{ display:grid; grid-template-columns: minmax(380px,1.15fr) minmax(320px,.85fr); gap:2.2rem; align-items:start; } .a2-left p{ margin:.2rem 0 1rem 0; max-width:66ch; } .a2-list{ list-style:none; padding:0; margin:0 0 1rem 0; display:grid; gap:.55rem; } .a2-list li{ display:flex; gap:.55rem; align-items:flex-start; } .a2-list li::before{ content:"✓"; font-weight:900; line-height:1; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; color:#0ea5e9; box-shadow: inset 0 0 0 2px rgba(14,165,233,.45); margin-top:.15rem; } .a2-cta{ margin-top:.4rem; } .a2-stats{ display:grid; grid-template-columns: repeat(3, minmax(140px,1fr)); gap:1rem; } .a2-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; padding:16px; border-radius:16px; border:1px solid rgba(30,58,138,.12); background:var(--panel,#0b1425); box-shadow:0 8px 22px rgba(2,6,23,.08); min-height:120px; } :root:not([data-theme="dark"]) .a2-card{ background:#fff; } .a2-ico{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#0ea5e9; background:rgba(14,165,233,.12); } .a2-ico svg{ width:24px; height:24px; } .a2-title{ font-weight:800; color:var(--brand-2,#0b3b7a); } .a2-sub{ color:#64748b; font-size:.95rem; text-align:center; } .a2-quote{ margin:1.1rem 0 0 0; font-weight:800; color:var(--brand-1,#0b3b7a); font-size:1.25rem; } .a2-mission{ margin-top:1rem; position:relative; border:1px solid rgba(30,58,138,.12); border-radius:18px; padding:18px; background:linear-gradient(180deg, rgba(59,130,246,.06), transparent 45%); box-shadow:0 10px 28px rgba(2,6,23,.06); } .a2-bar{ position:absolute; left:0; top:0; height:6px; width:160px; background:#ff7a00; border-top-left-radius:18px; border-top-right-radius:18px; } @media (max-width: 1100px){ .a2-grid{ grid-template-columns: 1fr; } .a2-stats{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px){ .a2-stats{ grid-template-columns: 1fr; } } /* tag-eyebrow pill */ .tag-eyebrow{display:inline-block;padding:.18rem .65rem;border-radius:999px;background:rgba(14,165,233,.14);color:#0b5ea8; font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;line-height:1;vertical-align:middle} .section .tag-eyebrow{margin-bottom:.5rem} /* dialog modal styles */ .dlg-quote{width:min(720px,90vw);border:0;border-radius:20px;padding:16px 16px 10px;box-shadow:0 24px 80px rgba(2,6,23,.35)} :root:not([data-theme="dark"]) .dlg-quote{background:#fff;color:inherit} .dlg-quote::backdrop{background:rgba(2,6,23,.6);backdrop-filter:blur(2px)} .dlg-close{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;opacity:.75} body.js-modal-ready #contato .form{display:none} /* tag-eyebrow pill (reforçado) */ .tag-eyebrow{display:inline-flex;gap:.4rem;align-items:center;padding:.20rem .70rem;border-radius:999px;background:rgba(14,165,233,.16); color:#0b5ea8;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;line-height:1} :root:not([data-theme="dark"]) .tag-eyebrow{background:#e6f3fb;color:#0b5ea8} .tag-eyebrow svg.i{width:16px;height:16px;display:inline-block} .tag-eyebrow .t{line-height:1} .section .tag-eyebrow{margin-bottom:.55rem} /* dialog modal styles v2 */ .dlg-quote{width:min(760px,92vw);border:0;border-radius:20px;padding:18px 18px 12px;box-shadow:0 28px 90px rgba(2,6,23,.38)} :root:not([data-theme="dark"]) .dlg-quote{background:#fff;color:inherit} .dlg-quote::backdrop{background:rgba(2,6,23,.6);backdrop-filter:blur(2px)} .dlg-close{position:absolute;top:8px;right:12px;border:0;background:transparent;font-size:30px;line-height:1;cursor:pointer;opacity:.75} .dialog-open #contato .form{display:none !important} /* === Section Labels v1 === */ .section-label{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; font-size:.85rem; font-weight:700; letter-spacing:.6px; color:#0b1f37; background:linear-gradient(90deg,#e0f2fe 0%, #f0f9ff 100%); border:1px solid #bae6fd; box-shadow:0 1px 2px rgba(2, 132, 199, .08); } .section-label svg{ color:#0284c7; flex:0 0 auto; } .dark .section-label{ color:#e2e8f0; background:linear-gradient(90deg,#0b2940,#0f2f49); border-color:#1f4c6b; } /* ===== Sticky strapline (above header) ===== */ :root{ --accent-orange: #ff7a00; --strapline-h: 28px; } .strapline{ position: sticky; top: 0; z-index: 101; height: var(--strapline-h); display: flex; align-items: center; padding: 0 16px; background: rgba(8,13,24,.92); color: var(--ink); font-weight: 700; font-size: .95rem; border-bottom: 1px solid rgba(255,255,255,.06); backdrop-filter: saturate(140%) blur(6px); } .strapline::before{ content: "— "; opacity:.8; margin-right:6px; } /* Offset header so it sticks just below the strapline */ .strapline + .topbar{ top: var(--strapline-h); } /* --- Dark-only base (keeps menu intact) --- */ :root{ --accent-orange: #ff7a00; --bg:#0b1220; --ink:#e6edf7; --muted:#9fb0c7; --card:#0f172a; --surface:#0b1425; --brand:#0ea5e9; --brand-2:#8b5cf6; --ring:rgba(14,165,233,.35); } body{ background: radial-gradient(1000px 420px at 90% -10%, rgba(139,92,246,.18), transparent), radial-gradient(700px 360px at -20% 12%, rgba(14,165,233,.18), transparent), linear-gradient(180deg, #0b1220, #0b1629 70%, #0b1220 100%); color: var(--ink); } /* removed old tweak */ } .topbar.shrink .brand img{ height:48px; } @media (max-width: 900px){ .topbar .brand img{ height:44px; } } } /* === Header logo size (v3) — bigger but crisp === */ .topbar .brand img{ height:52px; width:auto; image-rendering:auto; -webkit-transform: translateZ(0); transform: translateZ(0); filter:none; } .topbar.shrink .brand img{ height:48px; } @media (max-width: 900px){ .topbar .brand img{ height:44px; } } /* === Brand color alignment (logo blue & orange) === */ :root{ --accent-orange: #ff7a00; --brand-blue:#0d3f6f; /* ajuste para o azul do logo */ --brand-orange:#f36c3d; /* laranja do logo */ --brand-orange-2:#ff8a4c; } /* manter o primeiro botão (azul) como está; trocar o segundo para laranja */ .btn--whats{ background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-2)); color:#fff; border-color: transparent; box-shadow: 0 10px 30px rgba(243,108,61,.25); } .btn--whats:hover{ transform: translateY(-2px); } /* Se houver ícone do Whats, garante contraste */ .btn--whats svg{ fill:#fff; color:#fff } /* ==== CTA pill with right cap & icon ==== */ .btn-pill{ position:relative; padding-right:72px; /* room for cap */ border:2px solid transparent; border-radius:999px; background: linear-gradient(#0b1425,#0b1425) padding-box, linear-gradient(135deg, #4db6ff, #6a5cff) border-box; /* default outline */ box-shadow:0 12px 30px rgba(0,0,0,.25); } .btn-pill .btn-text{ position:relative; z-index:1 } .btn-pill .btn-cap{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, #5b8dff, #8a54ff); box-shadow:0 10px 20px rgba(104,85,255,.35), inset 0 0 0 1px rgba(255,255,255,.15); } .btn-pill .ico{ display:block } /* Blue CTA */ .btn--primary.btn-pill{ background: linear-gradient(#0b1425,#0b1425) padding-box, linear-gradient(135deg, var(--brand-blue, #0f4c81), #6aa6ff) border-box; } .btn--primary.btn-pill .btn-cap{ background:linear-gradient(135deg, #00d0ff, #7a5bff); } /* Orange CTA (Whats) */ .btn--whats.btn-pill{ background: linear-gradient(#0b1425,#0b1425) padding-box, linear-gradient(135deg, var(--brand-orange,#f36c3d), var(--brand-orange-2,#ff8a4c)) border-box; } .btn--whats.btn-pill .btn-cap{ background:linear-gradient(135deg, var(--brand-orange,#f36c3d), var(--brand-orange-2,#ff8a4c)); } /* Hover lift */ .btn-pill:hover{ transform:translateY(-2px) } /* Sobre: lead text in white */ #sobre .a2-lede{ font-size:1.06rem; color:#334155; margin-top:.6rem; max-width:none; } /* === Section chip (replaces '+ SOBRE') === */ .section-chip{ display:inline-flex; align-items:center; gap:.55rem; border-radius:999px; padding:.45rem .85rem; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06); font-weight:800; letter-spacing:.02em; color:#e8f1ff; } .section-chip .chip-dot{ width:.55rem; height:.55rem; border-radius:999px; background:linear-gradient(135deg, var(--brand-blue,#0f4c81), #6aa6ff); box-shadow:0 0 0 3px rgba(80,145,255,.25); } .section-chip .chip-text{ text-transform:uppercase; font-size:.9rem; opacity:.95 } /* === Chip with left cap & plus === */ .section-chip{ display:inline-flex; align-items:center; gap:.6rem; padding:.35rem .9rem .35rem .45rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06); color:#e8f1ff; font-weight:800; letter-spacing:.02em; margin-bottom:10px; } .section-chip .chip-cap{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:999px; background:rgba(6,16,32,.9); color:#5db1ff; box-shadow:inset 0 0 0 1px rgba(93,177,255,.35); } .section-chip .chip-ico{ display:block } .section-chip .chip-plus{ color:#46a7ff; font-weight:900 } .section-chip .chip-text{ text-transform:uppercase; opacity:.95 } /* Chips alignment inside container */ section .container > .section-chip{ margin-left: 0; margin-bottom: 12px; } /* === Chip size/placement fix (inline pill) === */ section .container > .section-chip{ display:inline-flex !important; align-items:center; gap:.6rem; position:relative; padding:.35rem .9rem .35rem .45rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06); color:#e8f1ff; font-weight:800; letter-spacing:.02em; margin:0 0 12px 0; width:auto !important; height:auto !important; max-width:100%; flex:0 0 auto !important; white-space:nowrap; overflow:visible; } .section-chip .chip-cap{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:999px; background:rgba(6,16,32,.9); color:#5db1ff; box-shadow:inset 0 0 0 1px rgba(93,177,255,.35); flex:0 0 auto; } .section-chip .chip-ico{ display:block } .section-chip .chip-plus{ color:#46a7ff; font-weight:900; flex:0 0 auto } .section-chip .chip-text{ text-transform:uppercase; opacity:.95; flex:0 0 auto } /* === FINAL FIX: chips pequenos + sem oval (força total) === */ #atuacao .grid-2 > div:first-child, #parcerias .grid-2 > div:first-child, #contato .grid-2 > div:first-child{ background:none !important; background-image:none !important; border:0 !important; outline:0 !important; box-shadow:none !important; filter:none !important; mask-image:none !important; -webkit-mask-image:none !important; clip-path:none !important; border-radius:0 !important; } #atuacao .grid-2 > div:first-child::before, #atuacao .grid-2 > div:first-child::after, #parcerias .grid-2 > div:first-child::before, #parcerias .grid-2 > div:first-child::after, #contato .grid-2 > div:first-child::before, #contato .grid-2 > div:first-child::after{ content:none !important; display:none !important; } #atuacao .deco, #atuacao [class*="deco--"], #parcerias .deco, #parcerias [class*="deco--"], #contato .deco, #contato [class*="deco--"]{ display:none !important; } #atuacao .section-chip, #parcerias .section-chip, #contato .section-chip{ display:inline-flex !important; align-items:center; gap:.55rem; padding:.35rem .9rem .35rem .45rem; border-radius:999px !important; background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06) !important; width:auto !important; height:auto !important; white-space:nowrap; margin:0 0 12px 0; } #atuacao .section-chip .chip-cap, #parcerias .section-chip .chip-cap, #contato .section-chip .chip-cap{ display:grid; place-items:center; width:26px; height:26px; border-radius:999px; background:rgba(6,16,32,.9); color:#5db1ff; box-shadow:inset 0 0 0 1px rgba(93,177,255,.35); } #atuacao .section-chip .chip-plus, #parcerias .section-chip .chip-plus, #contato .section-chip .chip-plus{ color:#46a7ff; font-weight:900 } #atuacao .grid-2 > div:first-child > .section-chip, #parcerias .grid-2 > div:first-child > .section-chip, #contato .grid-2 > div:first-child > .section-chip{ margin-bottom:12px; } /* === CTA buttons palette (respeita cores do logo) === */ :root{ --accent-orange: #ff7a00; --marol-blue:#0f4c81; --marol-blue2:#2b7dd6; --marol-orange:#f36a32; --marol-orange2:#ff8a4d; } .btn-cta{ position:relative; display:inline-flex; align-items:center; gap:.8rem; padding:.9rem 1.3rem; border-radius:999px; font-weight:800; border:0; } .btn-cta .cta-cap{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; } .btn-cta .cta-text{ white-space:nowrap; } .btn-cta--primary{ background:linear-gradient(90deg, var(--marol-blue2), var(--marol-blue)); color:#fff; } .btn-cta--primary .cta-cap{ background:linear-gradient(135deg, var(--marol-blue), var(--marol-blue2)); } .btn-cta--accent{ background:linear-gradient(90deg, var(--marol-orange), var(--marol-orange2)); color:#10161f; } .btn-cta--accent .cta-cap{ background:linear-gradient(135deg, var(--marol-orange2), var(--marol-orange)); color:#10161f; } /* ==== MODAL FLOUTANTE CONTATO ==== */ .modal{position:fixed; inset:0; display:none; z-index:9999;} .modal.is-open{display:block;} .modal__overlay{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index:0;} .modal__content{ position:relative; width: min(980px, calc(100vw - 32px)); margin: 40px auto; background:#0b1220; border-radius:16px; box-shadow: 0 10px 40px rgba(0,0,0,.45); overflow:hidden; border:1px solid #1e293b; z-index:1; } .modal__titlebar{ background:#ff7a00; color:#fff; padding:16px 20px; border-top-left-radius:16px; border-top-right-radius:16px; font-size:22px; font-weight:800; display:flex; align-items:center; justify-content:space-between; } .modal__close{ appearance:none; border:0; background:#ff7a00; color:#fff; width:40px; height:40px; border-radius:10px; cursor:pointer; position:absolute; top:10px; right:10px; z-index:2; } .modal__close:hover{background:#e56a00;} .modal__body{ padding:20px; } html.modal-open, body.modal-open{overflow:hidden; height:100%;} /* ==== FORMULÁRIO MODERNO ==== */ .formulario {max-width: 700px; margin: auto; padding: 8px 0 0; color: #fff;} .linha {display: flex; gap: 15px; margin-bottom: 15px;} .campo {flex: 1; display: flex; flex-direction: column;} .campo label {margin-bottom: 5px; font-size: 14px; color: #ccc;} .campo input,.campo select,.campo textarea{ padding: 12px; border: 1px solid #2c2f3a; border-radius: 8px; background: #111827; color: #fff; font-size: 15px; } .campo textarea{ min-height: 120px; resize: none; } .acao{ margin-top: 20px; } /* === Botão 'Enviar' estilo pill com borda gradient e ícone === */ .acao .btn-pill-send{ display:flex; align-items:center; gap:16px; justify-content:flex-start; width:100%; padding:16px 20px 16px 24px; border-radius:999px; font-size:18px; font-weight:800; letter-spacing:.3px; color:#fff; border:2px solid transparent; background: linear-gradient(#0f172a,#0f172a) padding-box, linear-gradient(90deg,#4f46e5,#22d3ee) border-box; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.35); cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .acao .btn-pill-send:hover{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 14px 34px rgba(0,0,0,.45); } .acao .btn-pill-send:active{ transform: translateY(0); } .acao .btn-pill-send:disabled{ opacity:.6; cursor:not-allowed; } .acao .btn-pill-send .btn-label{ flex:1; } .acao .btn-pill-send .btn-circle{ margin-left:auto; width:42px; height:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: radial-gradient(100% 100% at 30% 20%, #60a5fa 0%, #8b5cf6 100%); box-shadow: 0 6px 22px rgba(99,102,241,.45), inset 0 0 0 1px rgba(255,255,255,.08); flex-shrink:0; } .acao .btn-pill-send svg{ width:20px; height:20px; fill:#fff; } @media (max-width:640px){ .linha{ flex-direction: column; } .acao .btn-pill-send{ font-size:16px; padding:14px 18px; } .acao .btn-pill-send .btn-circle{ width:38px; height:38px; } } /* === Ajuste proporcional do botão 'Enviar' (pill) === */ .acao{ display:flex; justify-content:center; } .acao .btn-pill-send{ width: clamp(260px, 60%, 560px); } @media (max-width: 640px){ .acao .btn-pill-send{ width: 100%; } } /* === Ajustes de proporção e layout (mais compacto) === */ /* Centraliza o conteúdo do modal e limita a largura útil do formulário */ .modal__body{ display:flex; justify-content:center; } .formulario{ max-width: 640px; } /* antes 700px */ /* Campos mais consistentes e compactos */ .linha{ gap: 14px; } .campo input, .campo select{ height: 46px; } .campo textarea{ min-height: 120px; } /* Botão 'Enviar' mais estreito e proporcional */ .acao{ display:flex; justify-content:center; margin-top: 16px; } .acao .btn-pill-send{ width: clamp(240px, 45%, 420px); /* ficou menor */ padding: 14px 18px 14px 22px; font-size: 17px; } .acao .btn-pill-send .btn-circle{ width: 36px; height: 36px; } /* === Expandir largura útil do formulário (menos margens laterais) === */ .modal__body{ padding: 16px 20px 24px; } /* leve ajuste de padding interno */ .formulario{ max-width: 820px; width: calc(100% - 24px); } /* era 640px */ .linha{ gap: 16px; } /* respiro bom entre colunas */ /* === Ajuste fino: largura menor para formulário e botão === */ .formulario{ max-width: 760px; } /* reduzir um pouco a largura total */ .acao{ display:flex; justify-content:center; } .acao .btn-pill-send{ width: clamp(220px, 40%, 360px); /* botão mais curto */ padding: 13px 18px 13px 20px; font-size: 16.5px; } .acao .btn-pill-send .btn-circle{ width: 34px; height: 34px; } /* === Parcerias: cápsulas iguais com imagem === */ .parcerias-caps{ display:grid; grid-template-columns: repeat(3, 200px); /* ~50% do tamanho anterior */ gap:18px; align-items:end; justify-content:center; width:100%; } .parcerias-caps .cap{ width:100%; max-width:200px; aspect-ratio: 3 / 5; border-radius: 48px; position: relative; overflow: hidden; background: #e6f3ff; border: 1px solid #cfe8ff; box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.08); isolation: isolate; } .parcerias-caps .cap img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; border-radius: inherit; filter: saturate(1.05); } /* sutil overlay para legibilidade do label */ .parcerias-caps .cap::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.08) 40%, rgba(0,0,0,0) 70%); pointer-events:none; } .parcerias-caps .cap-label{ position:absolute; top:10px; left:50%; transform:translateX(-50%); color:#fff; font-weight:800; font-size:1rem; letter-spacing:.2px; text-shadow: 0 2px 8px rgba(0,0,0,.6); z-index:2; } @media (max-width: 900px){ .parcerias-caps{ display:grid; grid-template-columns: repeat(3, 200px); /* ~50% do tamanho anterior */ gap:18px; align-items:end; justify-content:center; width:100%; } .parcerias-caps .cap{ width:100%; max-width:200px; aspect-ratio: 3 / 5; border-radius: 48px; position: relative; overflow: hidden; background: #e6f3ff; border: 1px solid #cfe8ff; box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.08); isolation: isolate; } } @media (max-width: 600px){ .parcerias-caps{ display:grid; grid-template-columns: repeat(3, 200px); /* ~50% do tamanho anterior */ gap:18px; align-items:end; justify-content:center; width:100%; } .parcerias-caps .cap{ width:100%; max-width:200px; aspect-ratio: 3 / 5; border-radius: 48px; position: relative; overflow: hidden; background: #e6f3ff; border: 1px solid #cfe8ff; box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.08); isolation: isolate; } } /* Make the capsules row span full width of the section grid (if parent uses grid) */ #parcerias .parcerias-caps{ display:grid; grid-template-columns: repeat(3, 200px); /* ~50% do tamanho anterior */ gap:18px; align-items:end; justify-content:center; width:100%; } @media (max-width: 980px){ .parcerias-caps{ display:grid; grid-template-columns: repeat(3, 200px); /* ~50% do tamanho anterior */ gap:18px; align-items:end; justify-content:center; width:100%; } } @media (max-width: 620px){ .parcerias-caps{ display:grid; grid-template-columns: repeat(3, 200px); /* ~50% do tamanho anterior */ gap:18px; align-items:end; justify-content:center; width:100%; } } /* PARCERIAS SIZING BREAKPOINTS */ @media (min-width: 1400px){ .parcerias-caps{ grid-template-columns: repeat(3, 220px); } .parcerias-caps .cap{ max-width:220px; border-radius:52px; } } @media (max-width: 980px){ .parcerias-caps{ grid-template-columns: repeat(2, 200px); } } @media (max-width: 620px){ .parcerias-caps{ grid-template-columns: 1fr; } .parcerias-caps .cap{ max-width: 86vw; } } /* === Override: deixar o 1º parágrafo (a2-lede) em branco === */ #sobre .a2-lede, .section--about2 .a2-lede{ color: #ffffff !important; } /* === Override: Missão em branco === */ .a2-mission h3, .a2-mission p{ color: #ffffff !important; } /* === Override: remover limite de largura no parágrafo da Missão === */ .a2-mission p{ max-width: none !important; } /* === ICONS FOR TILES: Confiabilidade / Qualidade / Agilidade === */ .tile .tile-icon{ width: 28px; height: 28px; display: block; margin-bottom: 8px; flex-shrink: 0; } .tile.tile--confiabilidade .tile-icon path{ fill: #3B82F6; } /* blue */ .tile.tile--qualidade .tile-icon path, .tile.tile--qualidade .tile-icon circle{ fill: #10B981; } /* green */ .tile.tile--agilidade .tile-icon path{ fill: #F59E0B; } /* amber/orange */ /* === ICONS for Diferenciais cards === */ .cards .card .card-icon{ width:28px; height:28px; display:block; margin-bottom:10px; } .cards .card .card-icon path{ fill: currentColor; } .cards .card .card-icon-wrap{ display:block; } .cards .card .card-icon-wrap.card--rastreabilidade .card-icon path{ fill:#8B5CF6; } /* purple */ .cards .card .card-icon-wrap.card--checklist .card-icon path{ fill:#22C55E; } /* green */ .cards .card .card-icon-wrap.card--atendimento .card-icon path{ fill:#F97316; } /* orange */ /* === ICONS for Produtos & Serviços === */ .services .service .service-icon{ width:28px; height:28px; display:block; margin-bottom:10px; } .services .service .service-icon path, .services .service .service-icon circle{ fill: currentColor; } .services .service .service-icon-wrap{ display:block; } .services .service .service-icon-wrap.service--recebimento .service-icon path, .services .service .service-icon-wrap.service--recebimento .service-icon circle{ fill:#38BDF8; } /* sky */ .services .service .service-icon-wrap.service--conferencia .service-icon path, .services .service .service-icon-wrap.service--conferencia .service-icon circle{ fill:#34D399; } /* green */ .services .service .service-icon-wrap.service--checklist .service-icon path, .services .service .service-icon-wrap.service--checklist .service-icon circle{ fill:#FBBF24; } /* amber */ .services .service .service-icon-wrap.service--higienizacao .service-icon path, .services .service .service-icon-wrap.service--higienizacao .service-icon circle{ fill:#A78BFA; } /* purple */ /* === Contact Section Icons === */ ul.contact{ list-style:none; padding:0; margin:0; } ul.contact .contact-item{ display:flex; align-items:center; margin-bottom:8px; } ul.contact .contact-icon{ width:20px; height:20px; margin-right:8px; flex-shrink:0; } .contact--tel .contact-icon path{ fill:#3B82F6; } /* blue */ .contact--whats .contact-icon path{ fill:#22C55E; } /* green */ .contact--email .contact-icon path{ fill:#F59E0B; } /* amber */ .contact--endereco .contact-icon path{ fill:#8B5CF6; } /* purple */ /* === Contact section layout (organized grid) === */ ul.contact{ list-style: none; padding: 0; margin: 16px 0 0 0; display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 16px; } ul.contact li{ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px 16px; } ul.contact .label{ display:block; font-weight: 700; margin-bottom: 4px; } ul.contact .value{ display:block; opacity: .9; font-weight: 500; word-break: break-word; } @media (max-width: 720px){ ul.contact{ grid-template-columns: 1fr; } } /* === Contact Info simplified === */ .contact-info p{ margin: 8px 0; font-size: 1rem; line-height: 1.4; } .contact-info strong{ color: #fff; margin-right: 6px; } /* === Footer centralizado === */ footer{ text-align: center; } /* === Footer logo maior === */ footer .logo img{ max-height: 60px; /* mesmo tamanho aproximado do topo */ } /* === Footer logo igual ao topo === */ footer .logo img{ max-height: inherit; height: auto; } footer .logo{ display: inline-block; } /* === Footer logo maior específico === */ footer .logo img{ max-height: 90px; /* aumento visível do logo no rodapé */ height: auto; width: auto; } /* === Footer logo forçado maior === */ footer .logo img{ height: 120px !important; width: auto !important; max-height: none !important; } /* === Footer logo centralizado abaixo do copyright === */ .footer-logo{ margin-top: 12px; text-align: center; } .footer-logo img{ height: 80px; width: auto; } /* === Botão Hamburguer/X === */ /* === Botão Hamburguer/X — minimal, sem caixa preta === */ .fab-toggle{ position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; background: transparent; /* remove caixa escura */ border: none; box-shadow: none; border-radius: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 8px; cursor: pointer; z-index: 9999; } .fab-toggle .bar{ display: block; width: 26px; height: 3px; background: #fff; /* barras claras sobre topo escuro */ margin: 4px 0; border-radius: 3px; transition: transform .25s ease, opacity .2s ease; transform-origin: center; } /* estado X */ .fab-toggle.active .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); } .fab-toggle.active .bar:nth-child(2){ opacity: 0; } .fab-toggle.active .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* também aplica quando menu aberto via classe no body (sincronizado no JS) */ .mobile-menu-open .fab-toggle .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); } .mobile-menu-open .fab-toggle .bar:nth-child(2){ opacity: 0; } .mobile-menu-open .fab-toggle .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* Sincroniza ícone X quando menu móvel aberto via classe no body */ .mobile-menu-open .fab-toggle{ /* estado aberto */ } .mobile-menu-open .fab-toggle .bar:nth-child(1){transform: rotate(45deg) translate(5px,5px)} .mobile-menu-open .fab-toggle .bar:nth-child(2){opacity:0} .mobile-menu-open .fab-toggle .bar:nth-child(3){transform: rotate(-45deg) translate(5px,-5px)} /* === FAB estilo pill circular no canto inferior direito (como na imagem) === */ .fab-toggle{ position: fixed; bottom: 18px; right: 18px; width: 56px; height: 56px; background: rgba(17, 25, 40, 0.6); border: 1px solid rgba(255,255,255,.15); border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; z-index: 10000; box-shadow: 0 10px 30px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .fab-toggle .bar{ width: 24px; height: 2.5px; background: #ffffff; margin: 4px 0; border-radius: 2px; transition: transform .25s ease, opacity .2s ease, background-color .2s ease; } .fab-toggle:focus-visible{ outline: 3px solid rgba(59,130,246,.6); outline-offset: 2px; } /* transformar em X quando aberto */ .fab-toggle.active .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); } .fab-toggle.active .bar:nth-child(2){ opacity: 0; } .fab-toggle.active .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } /* sincroniza com classe global (JS já aplica mobile-menu-open) */ .mobile-menu-open .fab-toggle .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); } .mobile-menu-open .fab-toggle .bar:nth-child(2){ opacity: 0; } .mobile-menu-open .fab-toggle .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } /* === FIX DEFINITIVO BOTÃO MENU (mobile) ===================================== - Usa APENAS o botão existente #navToggle do header - Estilo FAB circular no canto inferior direito - 3 barras viram X quando .nav.open (já há regras para .hamb .line1..3) - Garante ocultar qualquer .fab-toggle legado ============================================================================= */ /* Esconde qualquer botão legado injetado por scripts antigos */ @media (max-width: 991.98px){ .fab-toggle{ display: none !important; } } /* Botão nativo do header vira FAB no mobile */ @media (max-width: 991.98px){ .topbar .nav__toggle{ position: fixed; bottom: 18px; right: 18px; width: 56px; height: 56px; background: rgba(17,25,40,.6); border: 1px solid rgba(255,255,255,.15); border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 10000; box-shadow: 0 10px 30px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .topbar .nav__toggle .hamb{ width: 28px; height: 28px; } .topbar .nav__toggle .hamb .line{ stroke: #fff; stroke-width: 2.5; stroke-linecap: round; transition: transform .25s ease, opacity .2s ease; } } /* Mantém header limpo no desktop */ @media (min-width: 992px){ .topbar .nav__toggle{ position: static; width: auto; height: auto; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; } } /* === PATCH FORÇADO: FAB no #navToggle e remover boton legado ================= */ @media (max-width: 991.98px){ /* oculta qualquer botão legado criado por scripts antigos */ .fab-toggle, .fab-overlay{ display: none !important; } /* força o botão nativo a virar FAB inferior direito */ header.topbar .nav__toggle#navToggle{ position: fixed !important; bottom: 18px !important; right: 18px !important; width: 56px !important; height: 56px !important; background: rgba(17,25,40,.6) !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 9999px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; z-index: 2147483000 !important; box-shadow: 0 10px 30px rgba(0,0,0,.28) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } header.topbar .nav__toggle#navToggle .hamb{ width: 28px !important; height: 28px !important; } header.topbar .nav__toggle#navToggle .hamb .line{ stroke: #fff !important; stroke-width: 2.6 !important; stroke-linecap: round !important; transition: transform .25s ease, opacity .2s ease !important; } } /* mantém desktop intacto */ @media (min-width: 992px){ header.topbar .nav__toggle#navToggle{ position: static !important; width: auto !important; height: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } } @media (max-width: 1200px){ .mrl-close{ display:none !important; } } /* FORCE HIDE obsolete close/overlay */ .mrl-close,.mrl-overlay{display:none !important;} /* === Refinamento do ícone do FAB (hambúrguer -> X) ======================= */ @media (max-width: 991.98px){ .topbar .nav__toggle .hamb{ display:block; width:28px; height:28px; } .topbar .nav__toggle .hamb .line{ stroke:#ffffff; stroke-width:3; stroke-linecap:round; transition: transform .25s ease, opacity .2s ease; } /* estado aberto usa a classe .open já aplicada na