/* ======= Reset mínimo ======= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img { max-width: 100%; display: block; } /* ➜ Agora as cores principais vêm do no index.html. Estas abaixo são APENAS defaults/fallbacks. */ :root{ --bg: #FAFAFA; --text: #0F0F10; --muted: #52525B; --brand: #1A1A1A; --accent: #EFE92B; /* amarelo */ --white: #FFFFFF; --shadow: 0 6px 24px #0000001F; /* rgba(0,0,0,.12) -> #0000001F */ --radius: 16px; } body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; line-height: 1.6; color: var(--text); background: var(--bg); } /* ======= Helpers ======= */ .container{ width: min(1120px, 92vw); margin: 0 auto; } .text-center{ text-align: center; } .nowrap{ white-space: nowrap; } .gap-lg{ gap: 48px; } /* ======= Header / Nav ======= */ .site-header{ position: sticky; top: 0; z-index: 50; background: #FFFFFFE6; /* rgba(255,255,255,.9) */ backdrop-filter: blur(8px); border-bottom: 1px solid #EEEEEE; } .nav-wrap{ display: flex; align-items: center; justify-content: space-between; padding: 14px 0; } .brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .brand-logo{ width: 345px; height: auto; object-fit: contain; } .brand-text{ font-weight: 700; letter-spacing: .2px; } .nav{ display: flex; align-items: center; gap: 20px; } .nav a{ color: inherit; text-decoration: none; font-weight: 600; } .nav a:hover{ text-decoration: underline; text-underline-offset: 4px; } /* Buttons */ .btn{ display: inline-block; padding: 12px 18px; border-radius: 999px; background: var(--brand); color: var(--white); text-decoration: none; border: 1px solid var(--brand); box-shadow: var(--shadow); font-weight: 700; } .btn:hover{ filter: brightness(1.05); } .btn-sm{ padding: 9px 14px; font-size: .95rem; } .btn-outline{ background: transparent; color: var(--brand); border-color: var(--brand); box-shadow: none; } /* ======= Hero ======= */ .hero{ position: relative; min-height: 82vh; display: grid; place-items: center; } .hero-bg{ position: absolute; inset: 0; background-image: var(--hero); background-size: cover; background-position: center; filter: brightness(.85); } .hero::after{ z-index: 0; content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000008C, #00000059 40%, #00000040 60%, #00000026); pointer-events: none; } .hero-inner{ position: relative; z-index: 1; color: #FFFFFF; padding: 96px 0; } .hero-title{ color:#FFFFFF; font-size: clamp(32px, 5vw, 56px); line-height: 1.08; margin: 0 0 14px 0; text-shadow: 0 4px 24px #00000073; /* rgba(0,0,0,.45) */ } .hero-subtitle{ color:#FFFFFF; max-width: 720px; font-size: clamp(16px, 2.3vw, 20px); margin-bottom: 22px; } .hero-actions{ display: flex; gap: 12px; flex-wrap: wrap; } /* ======= Sections ======= */ .section{ padding: 72px 0; background: #FFFFFF; } .section-accent{ background: var(--accent); } .section-head{ display: grid; gap: 14px; margin-bottom: 28px; } .grid-2{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; } .media img{ border-radius: var(--radius); box-shadow: var(--shadow); } h2{ font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 0 0 10px; } h3{ margin: 0 0 8px; } /* Stats */ .stats{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; } .stat{ background: #F6F6F6; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .stat-number{ font-weight: 800; font-size: 22px; display: block; } .stat-label{ color: var(--muted); font-size: 14px; } /* Cards de Serviços */ .cards{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; } .card{ background: #FFFFFF; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: grid; } .card img{ aspect-ratio: 16/10; object-fit: cover; } .card-body{ padding: 16px; } /* Projetos */ .projects-list{ display: grid; gap: 18px; } .project{ background: #F7F7F7; padding: 18px; border-radius: var(--radius); box-shadow: var(--shadow); } .checks{ list-style: none; padding: 0; margin: 14px 0 0; } .checks li{ padding-left: 28px; position: relative; } .checks li::before{ content: "#"; position: absolute; left: 0; color: var(--brand); font-weight: 700; } /* Localizações */ .locations{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; } .location{ display: grid; background: #FFFFFF; grid-template-columns: .85fr 1.15fr; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .location-media img{ height: 100%; width: 100%; object-fit: cover; } .location-body{ padding: 18px; display: grid; align-content: center; gap: 6px; } /* Contato */ .contact-form{ display: grid; gap: 14px; background: #FFFFFF; padding: 18px; border-radius: var(--radius); box-shadow: var(--shadow); } .form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } input, textarea{ width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #E5E7EB; outline: none; } input:focus, textarea:focus{ border-color: #111827; } .contact-aside{ display: grid; } .contact-card{ background: #111111; color: #FFFFFF; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } /* Footer */ .site-footer{ background: #0F0F10; color: #CFCFCF; } .foot-wrap{ display: flex; align-items: center; justify-content: space-between; padding: 22px 0; } .to-top{ color: #CFCFCF; text-decoration: none; font-weight: 700; } /* ======= Responsividade ======= */ @media (max-width: 1024px){ .grid-2{ grid-template-columns: 1fr; } .locations{ grid-template-columns: 1fr; } .location{ grid-template-columns: 1fr; } .cards{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .nav{ display: none; } /* simples: esconde o menu em telas pequenas */ .stats{ grid-template-columns: 1fr; } .cards{ grid-template-columns: 1fr; } .form-grid{ grid-template-columns: 1fr; } } /* === Hero button overrides for readability === */ .hero .btn{ background:#FFFFFF; color:#0F0F10; border-color:#FFFFFF; box-shadow: 0 6px 24px #00000026; } .hero .btn:hover{ filter: brightness(0.96); } .hero .btn.btn-outline{ background: transparent; color:#FFFFFF; border-color:#FFFFFF; box-shadow: none; } .hero .btn.btn-outline:hover{ background:#FFFFFF26; /* subtle white tint */ } /* === Make the secondary (Contacte-nos) button solid on hero === */ .hero .btn.btn-outline{ background: var(--brand) !important; color: var(--white) !important; border-color: var(--brand) !important; box-shadow: var(--shadow) !important; } .hero .btn.btn-outline:hover{ filter: brightness(1.08) !important; background: var(--brand) !important; }