/* ========================================================================== TECH LOOK — Section PARCEIROS Estética: blueprint técnico / esquemático de circuito ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap'); :root{ --void: #060b12; --panel: #0c141d; --panel-2: #101c28; --line: rgba(120,168,214,0.12); --line-strong: rgba(120,168,214,0.26); --border: rgba(140,182,222,0.16); --cyan: #0575EC; --cyan-dim: #0575EC; --amber: #ffb238; --text-hi: #eef4fa; --text-lo: #8298ad; --text-faint: #566578; --font-display: 'Rubik', sans-serif; --font-body: 'Manrope', sans-serif; --font-mono: 'JetBrains Mono', monospace; } *{ box-sizing: border-box; } .partners{ position: relative; background: var(--void); color: var(--text-hi); font-family: 'Rubik', Times, serif; padding: 96px 24px 88px; overflow: hidden; } /* -------------------------------------------------------------- backdrop */ .blueprint-grid{ position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 40%, transparent 90%); pointer-events: none; } .vignette{ position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(53,230,255,0.06), transparent 60%); pointer-events: none; } .titleblock{ position: relative; max-width: 1180px; margin: 0 auto 40px; font-family: 'Rubik', Times, serif; font-size: 11px; letter-spacing: 0.08em; color: var(--text-faint); display: flex; gap: 10px; border-bottom: 1px solid var(--border); padding-bottom: 14px; } .titleblock .dot{ color: var(--cyan-dim); } .partners__inner{ position: relative; max-width: 1180px; margin: 0 auto; } /* -------------------------------------------------------------- reveal */ /* Por defeito o conteúdo está sempre visível — a animação de entrada só é aplicada se o JavaScript confirmar suporte e ligar a classe .js-reveal ao . Assim, se o script.js não carregar por algum motivo (caminho errado, bloqueio, etc.) a section nunca fica escondida. */ .js-reveal [data-reveal]{ opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .js-reveal [data-reveal].is-visible{ opacity: 1; transform: translateY(0); } /* -------------------------------------------------------------- header */ .eyebrow{ font-family: 'Rubik', Times, serif; font-size: 12px; letter-spacing: 0.18em; color: var(--cyan); margin: 0 0 18px; } .eyebrow__bracket{ color: var(--cyan-dim); } .headline{ font-family: 'Rubik', Times, serif; font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.2rem); letter-spacing: -0.01em; margin: 0 0 32px; color: var(--text-hi); } .lede{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1100px; } .lede p{ margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-lo); } .lede strong{ color: var(--text-hi); font-weight: 600; } .lede .hl{ color: var(--cyan); font-weight: 600; } /* -------------------------------------------------------------- schematic */ .schematic{ position: relative; margin: 80px 0 72px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel), var(--panel-2)); border-radius: 6px; padding: 46px 24px 30px; } .fig-label{ position: absolute; top: -11px; left: 24px; background: var(--void); padding: 0 10px; font-family: 'Rubik', Times, serif; font-size: 11px; letter-spacing: 0.1em; color: var(--text-faint); } #circuit-svg{ width: 100%; height: auto; display: block; } .trace{ fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); } .is-visible .trace{ stroke-dashoffset: 0; } #trace-bottom{ transition-delay: .15s; } .via{ fill: var(--void); stroke: var(--cyan-dim); stroke-width: 1.4; } .pulse{ fill: var(--cyan); filter: drop-shadow(0 0 5px var(--cyan)); opacity: 0; animation: pulse-fade 3.2s ease-in-out infinite; animation-delay: 1.4s; } .pulse--b{ animation-delay: 2.1s; animation-duration: 3.6s; } @keyframes pulse-fade{ 0%, 100%{ opacity: 0; } 8%, 85%{ opacity: 1; } } .node rect{ fill: var(--panel-2); stroke: var(--border); stroke-width: 1; } .node--core rect{ stroke: var(--cyan-dim); } .node--partner rect{ stroke: var(--border); } .node__title{ font-family: 'Rubik', Times, serif; font-size: 13px; font-weight: 600; fill: var(--text-hi); text-anchor: middle; } .node__sub{ font-family: 'Rubik', Times, serif; font-size: 9.5px; letter-spacing: 0.08em; fill: var(--text-faint); text-anchor: middle; } /* -------------------------------------------------------------- cards */ .partner-grid{ display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; margin-bottom: 22px; } .partner-card{ position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 34px; transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease; } .partner-card:hover{ border-color: var(--cyan-dim); transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(53,230,255,0.25); } .partner-card__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .partner-card__id{ display: flex; align-items: center; gap: 16px; } .partner-card__mark{ position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--panel-2); } .partner-card__mark img{ width: 100%; height: 100%; object-fit: contain; padding: 6px; } /* Enquanto o logótipo real não é colocado (imagem em falta) mostra as iniciais */ .partner-card__mark.is-empty img{ display: none; } .partner-card__mark.is-empty::after{ content: attr(data-fallback); font-family: 'Rubik', Times, serif; font-weight: 600; font-size: 14px; color: var(--cyan); } /* ---------------------------------------------------------- viewport (imagens) */ .viewport{ position: relative; margin-top: 26px; aspect-ratio: 16 / 9; border: 1px dashed var(--line-strong); border-radius: 4px; background: var(--panel-2); overflow: hidden; } .viewport--sm{ aspect-ratio: 4 / 3; } .viewport img{ width: 100%; height: 100%; object-fit: cover; display: block; } .viewport__label{ position: absolute; left: 12px; bottom: 10px; z-index: 2; font-family: 'Rubik', Times, serif; font-size: 10px; letter-spacing: 0.08em; color: var(--text-faint); background: rgba(6,11,18,0.7); padding: 3px 8px; border-radius: 2px; } /* Corner brackets — estilo mira/viewfinder técnico */ .viewport__corner{ position: absolute; width: 16px; height: 16px; border: 1.4px solid var(--cyan-dim); opacity: 0.7; z-index: 2; } .viewport__corner--tl{ top: 8px; left: 8px; border-right: none; border-bottom: none; } .viewport__corner--tr{ top: 8px; right: 8px; border-left: none; border-bottom: none; } .viewport__corner--bl{ bottom: 8px; left: 8px; border-right: none; border-top: none; } .viewport__corner--br{ bottom: 8px; right: 8px; border-left: none; border-top: none; } /* Estado sem imagem: mostra apenas a grelha técnica + instrução, sem quebrado */ .viewport.is-empty img{ display: none; } .viewport.is-empty{ display: grid; place-items: center; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 18px 18px; } .viewport.is-empty::before{ content: "Espaço reservado para imagem"; font-family: 'Rubik', Times, serif; font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint); } .partner-card h3{ margin: 0 0 4px; font-family: 'Rubik', Times, serif; color: #ffffff; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.01em; } .partner-card__tag{ margin: 0; font-family: 'Rubik', Times, serif; font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-faint); } .partner-card__desc{ font-size: 14.5px; line-height: 1.75; color: var(--text-lo); margin: 0 0 24px; } .feature-list{ list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px dashed var(--border); display: grid; gap: 12px; } .feature-list li{ font-size: 13.5px; color: var(--text-hi); display: flex; align-items: baseline; gap: 10px; } .feature-list__icon{ color: var(--cyan); font-size: 11px; } /* stamp / selo de certificação */ .stamp{ flex: none; width: 78px; height: 78px; opacity: 0.9; } .stamp svg{ width: 100%; height: 100%; } .stamp__ring{ fill: none; stroke: var(--amber); stroke-width: 1.2; stroke-dasharray: 3 3; } .stamp__ring--in{ stroke-dasharray: none; stroke-width: 0.8; opacity: 0.6; } .stamp__text{ font-family: 'Rubik', Times, serif; font-size: 7.4px; letter-spacing: 0.12em; fill: var(--amber); } .stamp__center{ font-family: var(--font-display); font-size: 15px; font-weight: 700; fill: var(--amber); text-anchor: middle; } .stamp__year{ font-family: 'Rubik', Times, serif; font-size: 8px; fill: var(--amber); text-anchor: middle; opacity: 0.75; } /* -------------------------------------------------------------- license panel */ .license-panel{ display: flex; align-items: center; justify-content: space-between; gap: 28px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 30px 34px; flex-wrap: wrap; } .license-panel__eyebrow{ font-family: 'Rubik', Times, serif; font-size: 11px; letter-spacing: 0.12em; color: var(--cyan); margin: 0 0 8px; } .license-panel__text p:last-child{ margin: 0; max-width: 640px; font-size: 13.5px; line-height: 1.7; color: var(--text-lo); } .cta{ flex: none; display: inline-flex; align-items: center; gap: 10px; background: var(--cyan); color: var(--void); font-family: 'Rubik', Times, serif; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-decoration: none; padding: 14px 22px; border-radius: 4px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(53,230,255,0.5); } .cta__arrow{ transition: transform .25s ease; } .cta:hover .cta__arrow{ transform: translateX(3px); } /* -------------------------------------------------------------- responsive */ @media (max-width: 900px){ .lede{ grid-template-columns: 1fr; } .partner-grid{ grid-template-columns: 1fr; } .license-panel{ flex-direction: column; align-items: flex-start; } } @media (max-width: 560px){ .partners{ padding: 72px 16px 64px; } .titleblock{ flex-wrap: wrap; } .partner-card{ padding: 26px; } } @media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity: 1; transform: none; transition: none; } .trace{ stroke-dashoffset: 0; transition: none; } .pulse{ animation: none; opacity: 0; } .partner-card{ transition: none; } }