/* ===================================================================== NUCAA — Design System Light / Dark / High-Contrast themes via [data-theme] on . Font-size scaling via [data-fontsize] on . System font stack on purpose: zero webfont requests = faster LCP. ===================================================================== */ /* ---------- 1. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; margin: 0; } img, picture, svg { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } table { border-collapse: collapse; width: 100%; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- 2. Design tokens ---------- */ :root{ --font-base: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --space-1: .25rem; --space-2: .5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 6rem; --container: 1180px; --shadow-sm: 0 1px 3px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 8px 24px rgba(15,23,42,.12); --shadow-lg: 0 20px 48px rgba(15,23,42,.16); --transition: 180ms ease; } /* Light theme (default) */ :root, :root[data-theme="light"]{ --color-bg: #ffffff; --color-bg-alt: #f3f7fb; --color-surface: #ffffff; --color-text: #16212c; --color-text-muted: #4b5768; --color-heading: #0b1a2b; --color-primary: #0b4f8a; --color-primary-dark: #073a63; --color-primary-contrast: #ffffff; --color-accent: #c1650a; --color-accent-dark: #9a4f08; --color-accent-contrast: #ffffff; --color-border: #dbe3ec; --color-focus: #c1650a; --color-link: #0b4f8a; --color-success-bg: #e7f6ec; --color-success-text: #1c6b34; --color-danger-text: #b3261e; color-scheme: light; } /* Dark theme */ :root[data-theme="dark"]{ --color-bg: #101820; --color-bg-alt: #17212c; --color-surface: #1b2732; --color-text: #eef3f8; --color-text-muted: #b7c3d1; --color-heading: #ffffff; --color-primary: #7cb6f2; --color-primary-dark: #a9d1fb; --color-primary-contrast: #08202f; --color-accent: #ffb25c; --color-accent-dark: #ffcf9b; --color-accent-contrast: #2a1600; --color-border: #2c3947; --color-focus: #ffb25c; --color-link: #8ec2f8; --color-success-bg: #123420; --color-success-text: #7fe3a2; --color-danger-text: #ff9c94; color-scheme: dark; } /* High-contrast theme (WCAG AAA-oriented, black/yellow) */ :root[data-theme="high-contrast"]{ --color-bg: #000000; --color-bg-alt: #000000; --color-surface: #000000; --color-text: #ffffff; --color-text-muted: #ffffff; --color-heading: #ffff00; --color-primary: #ffff00; --color-primary-dark: #ffff00; --color-primary-contrast: #000000; --color-accent: #00ffff; --color-accent-dark: #00ffff; --color-accent-contrast: #000000; --color-border: #ffffff; --color-focus: #00ffff; --color-link: #ffff00; --color-success-bg: #000000; --color-success-text: #00ff66; --color-danger-text: #ff6666; color-scheme: dark; } :root[data-theme="high-contrast"] img{ filter: contrast(1.1); } /* Font-size scaling (applied to , controlled by the a11y toolbar) */ :root[data-fontsize="sm"]{ font-size: 93.75%; } :root[data-fontsize="md"]{ font-size: 100%; } :root[data-fontsize="lg"]{ font-size: 112.5%; } :root[data-fontsize="xl"]{ font-size: 125%; } /* ---------- 3. Base ---------- */ html { scroll-behavior: smooth; } body{ font-family: var(--font-base); background: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; transition: background var(--transition), color var(--transition); } main{ flex: 1 0 auto; } h1, h2, h3, h4 { color: var(--color-heading); line-height: 1.2; font-weight: 800; } h1{ font-size: clamp(2rem, 1.5rem + 2vw, 3rem); } h2{ font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); margin-bottom: var(--space-3); } h3{ font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem); margin-bottom: var(--space-2); } h4{ font-size: 1.05rem; margin-bottom: var(--space-2); } p{ margin-bottom: var(--space-3); color: var(--color-text); max-width: 68ch; } p.lead{ font-size: 1.15rem; color: var(--color-text-muted); } a{ text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--transition); } a:hover{ color: var(--color-accent); } main a:not(.btn):not(.card):not(.nav-link){ color: var(--color-link); text-decoration: underline; text-decoration-color: currentColor; } /* Visible focus ring everywhere — required for keyboard navigation */ :focus{ outline: none; } :focus-visible{ outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); } /* Skip link */ .skip-link{ position: absolute; left: var(--space-3); top: -100px; background: var(--color-accent); color: var(--color-accent-contrast); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 700; z-index: 1000; transition: top var(--transition); } .skip-link:focus{ top: var(--space-3); } /* Screen-reader only */ .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; } .container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); } .section{ padding-block: var(--space-6); } .section-alt{ background: var(--color-bg-alt); } .section-head{ max-width: 60ch; margin-bottom: var(--space-5); } .section-head p{ color: var(--color-text-muted); } /* ---------- 4. Buttons ---------- */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.75rem; border-radius: 999px; font-weight: 700; border: 2px solid transparent; min-height: 44px; text-decoration: none; transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } .btn:hover{ transform: translateY(-2px); } .btn-primary{ background: var(--color-accent); color: var(--color-accent-contrast); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--color-accent) 70%, transparent); } .btn-primary:hover{ background: var(--color-accent-dark); color: var(--color-accent-contrast); } .btn-outline{ background: transparent; border-color: currentColor; color: var(--color-primary); } :root[data-theme="high-contrast"] .btn-outline{ color: var(--color-text); } :root[data-theme="high-contrast"] .btn-primary{ box-shadow: none; } .btn-outline:hover{ background: var(--color-primary); color: var(--color-primary-contrast); } .btn-block{ width: 100%; } .btn-sm{ padding: .5rem 1.1rem; min-height: 36px; font-size: .9rem; } /* ---------- 5. Header / Nav ---------- */ .site-header{ position: sticky; top: 0; z-index: 500; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .header-bar{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: .9rem; } .brand{ display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.1rem; } .brand img{ height: 63px; width: auto; } .main-nav{ display: flex; align-items: center; } .nav-list{ display: flex; align-items: center; gap: var(--space-4); } .nav-list > li{ position: relative; } .has-submenu{ display: flex; align-items: center; } .nav-link{ display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .25rem; font-weight: 600; border-bottom: 2px solid transparent; } .nav-link:hover, .nav-link[aria-current="page"]{ border-bottom-color: var(--color-accent); color: var(--color-text); } .submenu-trigger{ background: transparent; border: 0; text-align: start; } .submenu-arrow{ flex: none; color: var(--color-text-muted); transition: transform var(--transition), color var(--transition); } .submenu-trigger[aria-expanded="true"] .submenu-arrow{ transform: rotate(180deg); } .has-submenu:hover .submenu-arrow, .has-submenu:focus-within .submenu-arrow, .submenu-trigger[aria-expanded="true"] .submenu-arrow{ color: var(--color-text); } .submenu{ display: none; position: absolute; top: 100%; left: 0; min-width: 300px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: .5rem; z-index: 600; } .has-submenu:hover > .submenu, .has-submenu:focus-within > .submenu{ display: block; } .submenu li a{ display: block; padding: .65rem .75rem; border-radius: var(--radius-sm); font-weight: 500; } .submenu li a:hover, .submenu li a:focus-visible{ background: var(--color-bg-alt); color: var(--color-text); } .nav-toggle{ display: none; background: transparent; border: 2px solid var(--color-border); border-radius: var(--radius-sm); padding: .5rem .65rem; } .nav-toggle .icon-close{ display: none; } .nav-toggle[aria-expanded="true"] .icon-open{ display: none; } .nav-toggle[aria-expanded="true"] .icon-close{ display: block; } /* ---------- 6. Accessibility toolbar ---------- */ .a11y-bar{ background: var(--color-primary-dark); color: var(--color-primary-contrast); font-size: .85rem; } :root[data-theme="high-contrast"] .a11y-bar{ background: #000; border-bottom: 1px solid #fff; } .a11y-bar .container{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block: .4rem; } .a11y-group{ display: flex; align-items: center; gap: .35rem; margin-inline-end: auto; } .a11y-bar button{ background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); color: inherit; border-radius: var(--radius-sm); padding: .3rem .6rem; min-height: 32px; font-weight: 700; font-size: .85rem; } :root[data-theme="high-contrast"] .a11y-bar button{ background: #000; border-color: #fff; } .a11y-bar button:hover{ background: rgba(255,255,255,.24); } .a11y-bar button[aria-pressed="true"]{ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); } .a11y-label{ font-weight: 700; margin-inline-end: .25rem; } .a11y-theme-group{ display: flex; gap: .35rem; } /* ---------- 7. Hero ---------- */ .hero{ position: relative; padding-block: var(--space-7) var(--space-6); background: linear-gradient(180deg, var(--color-bg-alt), var(--color-bg)); overflow: hidden; isolation: isolate; } .hero::before{ content: ""; position: absolute; z-index: -1; top: -18%; right: -10%; width: 46rem; height: 46rem; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 60%), radial-gradient(circle at 65% 65%, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 60%); border-radius: 50%; filter: blur(10px); } :root[data-theme="high-contrast"] .hero::before{ display: none; } .hero-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-6); align-items: center; } .hero h1{ margin-bottom: var(--space-3); } .hero p.lead{ margin-bottom: var(--space-4); } .hero-actions{ display: flex; flex-wrap: wrap; gap: var(--space-3); } .hero-media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; } .hero-media::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); background: linear-gradient(200deg, transparent 60%, color-mix(in srgb, var(--color-primary-dark) 55%, transparent)); pointer-events: none; } .hero-media img{ width: 100%; height: 100%; object-fit: cover; } /* Vertical video embed (ex: YouTube Shorts) */ .hero-grid--video{ align-items: center; } .video-embed{ position: relative; width: min(100%, 420px); aspect-ratio: 1 / 1; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; } .video-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-embed__play{ position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .video-embed__play img{ width: 100%; height: 100%; object-fit: cover; display: block; } .video-embed__play::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)); transition: background var(--transition); } .video-embed__play:hover::before{ background: rgba(0,0,0,.55); } .video-embed__icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-contrast); box-shadow: var(--shadow-md); transition: transform var(--transition), background var(--transition); } .video-embed__play:hover .video-embed__icon{ transform: translate(-50%, -50%) scale(1.08); background: var(--color-accent-dark); } .video-embed__icon svg{ margin-left: 3px; } .page-hero{ position: relative; padding-block: var(--space-6); background: var(--color-bg-alt); overflow: hidden; isolation: isolate; } .page-hero::before{ content: ""; position: absolute; z-index: -1; top: -60%; right: -8%; width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 65%); } :root[data-theme="high-contrast"] .page-hero::before{ display: none; } .page-hero-grid{ display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-6); align-items: center; } .page-hero-media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; } .page-hero-media img{ width: 100%; height: 100%; object-fit: cover; } .page-hero-media::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); background: linear-gradient(200deg, transparent 60%, color-mix(in srgb, var(--color-primary-dark) 45%, transparent)); pointer-events: none; } .page-hero .eyebrow{ display: inline-flex; align-items: center; gap: .5rem; color: var(--color-accent); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; margin-bottom: .5rem; } .page-hero .eyebrow::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* Breadcrumbs */ .breadcrumbs{ font-size: .85rem; color: var(--color-text-muted); margin-bottom: var(--space-4); } .breadcrumbs ol{ display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; list-style: none; padding: 0; margin: 0; } .breadcrumbs li{ display: flex; align-items: center; gap: .45rem; } .breadcrumbs li:not(:last-child)::after{ content: "/"; opacity: .4; } .breadcrumbs a{ text-decoration: underline; text-decoration-color: transparent; } .breadcrumbs a:hover{ text-decoration-color: currentColor; } .breadcrumbs li[aria-current="page"]{ color: var(--color-text); font-weight: 700; } /* ---------- 8. Cards / grids ---------- */ .grid{ display: grid; gap: var(--space-4); } .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-2{ grid-template-columns: repeat(2, 1fr); } .card{ position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); height: 100%; } .card::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .card:hover::before{ transform: scaleX(1); } .card-media{ aspect-ratio: 16/10; overflow: hidden; background: var(--color-bg-alt); } .card-media img{ width: 100%; height: 100%; object-fit: cover; } .card-body{ padding: var(--space-4); display: flex; flex-direction: column; gap: .6rem; flex: 1; } .card-body p{ color: var(--color-text-muted); flex: 1; } .card-link{ font-weight: 700; color: var(--color-primary); } :root[data-theme="high-contrast"] .card-link{ color: var(--color-heading); } .icon-list{ display: grid; gap: 2rem; } .icon-list li{ display: flex; gap: .9rem; align-items: flex-start; } .icon-list .icon{ flex: none; width: 28px; height: 28px; margin-top: .1rem; color: var(--color-accent); } .icon-list h3{ margin-bottom: .15rem; } .icon-list p{ margin-bottom: 0; color: var(--color-text-muted); } .icon-list + .hero-actions{ margin-top: 2rem; } .hero-actions + .icon-list{ margin-top: 2rem; } /* Client logos */ .client-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); align-items: center; } .client-grid .client{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; align-items: center; justify-content: center; aspect-ratio: 3/2; } .client-grid img{ max-height: 48px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: var(--transition); } .client-grid .client:hover img{ filter: none; opacity: 1; } :root[data-theme="high-contrast"] .client-grid img{ filter: none; opacity: 1; background: #fff; padding: 4px; } /* Blog featured image */ .featured-image{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: var(--space-5); aspect-ratio: 16 / 9; } .featured-image img{ width: 100%; height: 100%; object-fit: cover; } /* Photo gallery */ .gallery{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .gallery figure{ border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .gallery img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; } .gallery figcaption{ padding: .5rem .75rem; font-size: .85rem; background: var(--color-surface); color: var(--color-text-muted); } /* Coverage (cidades atendidas / imóveis aceitos) */ .coverage-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-block: var(--space-3) var(--space-5); } .coverage-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .coverage-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .coverage-icon, .icon-badge{ display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg-alt)); color: var(--color-accent); margin-bottom: var(--space-3); } :root[data-theme="high-contrast"] .coverage-icon, :root[data-theme="high-contrast"] .icon-badge{ background: #000; border: 1px solid var(--color-accent); } /* Highlight pills row (e.g. under a hero lead paragraph) */ .highlight-row{ display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); } .highlight-row li{ display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); font-weight: 700; font-size: .92rem; box-shadow: var(--shadow-sm); } .highlight-row li svg{ flex: none; color: var(--color-accent); } .coverage-card h3{ margin-bottom: .5rem; } .coverage-card p{ color: var(--color-text-muted); margin-bottom: 0; } .coverage-tags h3{ margin-bottom: var(--space-3); } .tag-list{ display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0; } .tag-list li{ padding: .5rem 1.1rem; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); font-weight: 600; font-size: .88rem; color: var(--color-text); transition: border-color var(--transition), color var(--transition); } .tag-list li:hover{ border-color: var(--color-accent); color: var(--color-accent); } :root[data-theme="high-contrast"] .tag-list li:hover{ color: var(--color-text); } /* Profile card (e.g. sócio-administrador) */ .profile-card{ display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); } .profile-card img{ width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-sm); border: 3px solid var(--color-bg-alt); } .profile-card .profile-role{ display: block; color: var(--color-accent); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; } .profile-card h3{ margin-bottom: .35rem; } .profile-card p{ margin-bottom: 0; color: var(--color-text-muted); } @media (max-width: 480px){ .profile-card{ grid-template-columns: 1fr; text-align: center; justify-items: center; } } /* ---------- 8b. Project case-study layout ---------- */ .project-layout{ display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-6); align-items: start; } .project-facts{ position: sticky; top: calc(64px + var(--space-4)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); } .project-facts h2{ font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: var(--space-4); } .project-facts dl{ display: grid; gap: var(--space-3); margin: 0; } .project-facts > dl > div{ border-top: 1px solid var(--color-border); padding-top: var(--space-3); } .project-facts > dl > div:first-child{ border-top: 0; padding-top: 0; } .project-facts dt{ font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-weight: 700; margin-bottom: .2rem; } .project-facts dd{ margin: 0; font-weight: 700; color: var(--color-heading); } .pull-quote{ border-left: 4px solid var(--color-accent); padding-left: var(--space-4); margin-block: var(--space-5); font-size: 1.2rem; line-height: 1.5; font-style: italic; font-weight: 600; color: var(--color-heading); max-width: 60ch; } .gallery-phase{ margin-top: var(--space-5); } .gallery-phase > h3{ display: flex; align-items: center; gap: .6rem; margin-bottom: var(--space-3); } .gallery-phase > h3 .badge{ font-size: .72rem; } /* CTA banner */ .cta-banner{ background: var(--color-primary); color: var(--color-primary-contrast); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .cta-banner h2, .cta-banner p{ color: inherit; margin: 0; } :root[data-theme="high-contrast"] .cta-banner{ border: 2px solid #fff; } /* ---------- 9. Forms ---------- */ .form-field{ margin-bottom: var(--space-3); } .form-field label{ display: block; font-weight: 700; margin-bottom: .35rem; } .form-field .hint{ font-size: .82rem; color: var(--color-text-muted); font-weight: 400; } .form-field input, .form-field textarea{ width: 100%; padding: .75rem .9rem; min-height: 46px; border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); } .form-field textarea{ min-height: 140px; resize: vertical; } .form-field input:focus, .form-field textarea:focus{ border-color: var(--color-accent); } .form-field.has-error input, .form-field.has-error textarea{ border-color: var(--color-danger-text); } .form-error{ color: var(--color-danger-text); font-size: .85rem; margin-top: .3rem; font-weight: 700; } .form-status{ border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-3); font-weight: 700; } .form-status[data-state="success"]{ background: var(--color-success-bg); color: var(--color-success-text); } .form-status[data-state="error"]{ background: transparent; border: 2px solid var(--color-danger-text); color: var(--color-danger-text); } .form-status[hidden]{ display: none; } /* ---------- 10. Footer ---------- */ .site-footer{ position: relative; background: linear-gradient(180deg, var(--color-heading), #060d16); color: #a9bbd0; margin-top: var(--space-7); } .site-footer::before{ content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--color-accent), var(--color-primary), var(--color-accent)); } :root[data-theme="dark"] .site-footer{ background: linear-gradient(180deg, #0b141d, #05090e); } :root[data-theme="high-contrast"] .site-footer{ background: #000; border-top: 2px solid #fff; color: #fff; } :root[data-theme="high-contrast"] .site-footer::before{ display: none; } .site-footer a{ color: #a9bbd0; } .site-footer p{ color: inherit; } :root[data-theme="high-contrast"] .site-footer a{ color: #ffff00; } .footer-grid{ display: grid; grid-template-columns: 1.3fr .9fr .9fr .9fr; gap: var(--space-5); padding-block: var(--space-7) var(--space-5); } .footer-grid > div > h2{ color: #fff; font-size: 1.35rem; margin-bottom: var(--space-2); } .footer-grid > div > p{ color: #7c8ea3; max-width: 34ch; } .footer-grid nav h2{ color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--space-3); } .footer-grid ul{ display: grid; gap: .7rem; } .footer-grid nav a{ text-decoration: none; display: inline-block; transition: color var(--transition), transform var(--transition); } .footer-grid nav a:hover{ color: #fff; transform: translateX(3px); } .footer-contact-list li a{ display: inline-flex; align-items: center; gap: .7rem; } .footer-contact-list svg{ flex: none; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--color-accent); transition: background var(--transition), border-color var(--transition), transform var(--transition); } .footer-contact-list a:hover svg{ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-2px); } :root[data-theme="high-contrast"] .footer-contact-list svg{ background: #000; border-color: #fff; color: #ffff00; } .footer-social{ display: flex; gap: .6rem; margin-top: var(--space-4); } .footer-social a{ display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: background var(--transition), border-color var(--transition), transform var(--transition), color var(--transition); } .footer-social a:hover{ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-3px); } :root[data-theme="high-contrast"] .footer-social a{ background: #000; border-color: #fff; } .footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--space-4); font-size: .85rem; background: rgba(0,0,0,.18); } .footer-bottom .container{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .35rem; text-align: center; } .footer-bottom p{ color: #a9bbd0; } .footer-bottom a{ font-weight: 700; color: #c7d4e3; } .footer-bottom a:hover{ color: var(--color-accent); } :root[data-theme="high-contrast"] .footer-bottom a{ color: #ffff00; } :root[data-theme="high-contrast"] .footer-bottom p{ color: #fff; } /* ---------- 11. WhatsApp float ---------- */ .whatsapp-float{ position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 700; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #06210f; box-shadow: var(--shadow-lg); border: 2px solid rgba(0,0,0,.05); animation: whatsapp-pulse 2.6s ease-in-out infinite; } .whatsapp-float:hover{ transform: scale(1.08); color: #06210f; animation-play-state: paused; } .whatsapp-float svg{ width: 30px; height: 30px; } :root[data-theme="high-contrast"] .whatsapp-float{ background: #00ffff; border: 2px solid #fff; animation: none; } @keyframes whatsapp-pulse{ 0%, 100%{ box-shadow: var(--shadow-lg), 0 0 0 0 rgba(37,211,102,.5); } 50%{ box-shadow: var(--shadow-lg), 0 0 0 10px rgba(37,211,102,0); } } /* ---------- 11b. Cookie banner ---------- */ .cookie-banner{ position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 750; max-width: 360px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .cookie-banner[hidden]{ display: none; } .cookie-banner p{ margin: 0; font-size: .85rem; color: var(--color-text-muted); } .cookie-banner a{ text-decoration: underline; } :root[data-theme="high-contrast"] .cookie-banner{ border: 2px solid #fff; } @media (max-width: 480px){ .cookie-banner{ left: var(--space-3); right: var(--space-3); max-width: none; bottom: calc(54px + var(--space-3) + var(--space-2)); } } /* ---------- 12. Glossary index ---------- */ .alpha-jump{ display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--space-5); } .alpha-jump a{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--color-bg-alt); border: 1px solid var(--color-border); font-weight: 800; text-decoration: none; } .alpha-jump a:hover{ background: var(--color-primary); color: var(--color-primary-contrast); } .glossary-letter{ margin-bottom: var(--space-5); scroll-margin-top: 6rem; } .glossary-letter h2{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-contrast); margin-bottom: var(--space-3); } .glossary-terms{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem .75rem; } .glossary-terms a{ text-decoration: none; font-weight: 600; } .glossary-terms a:hover{ text-decoration: underline; } /* ---------- 13. Utility ---------- */ .text-center{ text-align: center; } .mt-0{ margin-top: 0; } .mt-4{ margin-top: var(--space-4); } .stack{ display: grid; gap: var(--space-3); } .badge{ display: inline-block; padding: .25rem .65rem; border-radius: 999px; background: var(--color-bg-alt); border: 1px solid var(--color-border); font-size: .78rem; font-weight: 700; color: var(--color-text-muted); } /* ---------- 14. Responsive ---------- */ @media (max-width: 960px){ .hero-grid{ grid-template-columns: 1fr; } .contact-info-col{ order: -1; margin-bottom: var(--space-5); } .grid-3{ grid-template-columns: repeat(2, 1fr); } .footer-grid{ grid-template-columns: 1fr 1fr; } .client-grid{ grid-template-columns: repeat(4, 1fr); } .coverage-grid{ grid-template-columns: 1fr; } .project-layout{ grid-template-columns: 1fr; } .project-facts{ position: static; } .page-hero-grid{ grid-template-columns: 1fr; } .page-hero-media{ order: -1; aspect-ratio: 16/9; } } @media (max-width: 760px){ .main-nav{ position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); height: 100vh; background: var(--color-surface); transform: translateX(100%); transition: transform var(--transition); padding: var(--space-5) var(--space-4); overflow-y: auto; box-shadow: var(--shadow-lg); } .main-nav.is-open{ transform: translateX(0); } .nav-list{ flex-direction: column; align-items: stretch; gap: 0; } .nav-list > li{ border-bottom: 1px solid var(--color-border); } .has-submenu{ flex-direction: column; align-items: stretch; } .submenu-trigger{ justify-content: space-between; width: 100%; min-height: 44px; } .submenu{ display: none; position: static; box-shadow: none; border: 0; width: 100%; padding-left: var(--space-3); } .has-submenu[data-open="true"] > .submenu{ display: block; } .nav-toggle{ display: inline-flex; } .a11y-group{ margin-inline-end: 0; } .grid-3, .grid-2{ grid-template-columns: 1fr; } .client-grid{ grid-template-columns: repeat(3, 1fr); } .gallery{ grid-template-columns: repeat(2, 1fr); } .glossary-terms{ grid-template-columns: 1fr 1fr; } .footer-grid{ grid-template-columns: 1fr; padding-block: var(--space-5) var(--space-3); } .footer-bottom .container{ flex-direction: column; } .cta-banner{ flex-direction: column; align-items: flex-start; } } @media (max-width: 480px){ .client-grid{ grid-template-columns: repeat(2, 1fr); } .gallery{ grid-template-columns: 1fr 1fr; } .glossary-terms{ grid-template-columns: 1fr; } .whatsapp-float{ width: 54px; height: 54px; right: var(--space-3); bottom: var(--space-3); } .brand img{ height: 46px; } } /* Print */ @media print{ .site-header, .whatsapp-float, .a11y-bar, .skip-link{ display: none; } }