/* ===== Databanx — unidades de negócio (BanxStudio / BanxHost) ===== */ /* cada página define --u1 e --u2 no */ /* ---------- hero das unidades ---------- */ .unit-hero { position: relative; min-height: 60vh; min-height: 60svh; display: flex; align-items: center; overflow: hidden; background: var(--bg-deep); border-bottom: 1px solid var(--line-soft); } /* padding-bottom folga o overlap de 80px dos cards (.over-photo) para que os selos do hero não fiquem escondidos atrás deles em telas mais baixas */ .unit-hero .hero-content { padding-top: 124px; padding-bottom: 112px; gap: 24px; max-width: 920px; } .unit-hero .hero-content h1 { font-size: clamp(30px, 1.72vw, 44px); line-height: 1.12; } .unit-hero .container { width: 100%; } .unit-hero .u-glow { display: none; } .unit-hero .x-mark { position: absolute; right: -160px; top: 50%; transform: translateY(-50%); width: min(54vw, 820px); opacity: 0.04; pointer-events: none; } .unit-hero .hairline-top { position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--u1) 55%, transparent), color-mix(in oklab, var(--u2) 55%, transparent), transparent); } /* wordmark com gradiente das duas cores */ .wm-grad { background: linear-gradient(100deg, var(--u1), var(--u2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .unit-hero .wordmark { font-size: clamp(24px, 1.33vw, 34px); } .unit-hero .wordmark small { color: var(--faint); } .unit-hero .logo-img { height: clamp(28px, 1.48vw, 38px); width: auto; object-fit: contain; align-self: flex-start; } .unit-hero .sub + .sub { margin-top: -6px; } .studio-mantra { font-size: clamp(14px, 0.586vw, 15px); font-weight: 700; letter-spacing: 0.01em; color: var(--u1); max-width: 620px; text-wrap: pretty; } .host-chips { font-size: clamp(14px, 0.586vw, 15px); font-weight: 700; letter-spacing: 0.04em; color: var(--faint); margin-top: -10px; } /* ---------- cards de serviço (BanxStudio) ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .svc-card { display: flex; flex-direction: column; gap: 13px; padding: 26px; border-radius: 16px; border: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom)); transition: border-color 0.2s ease, transform 0.2s ease; } .svc-card:hover { border-color: color-mix(in oklab, var(--pc, var(--text)) 32%, var(--line)); transform: translateY(-3px); } .svc-card .f-icon { display: inline-flex; align-items: center; justify-content: flex-start; margin-bottom: 2px; color: var(--u1, var(--pc, var(--text))); transition: color 0.2s ease, transform 0.2s ease; } .svc-card:hover .f-icon { color: var(--u1, var(--pc, var(--text))); transform: translateY(-1px); } .svc-card .f-icon i[class*="fi-rr-"] { font-size: clamp(20px, 1.016vw, 26px); } .svc-card h3 { font-size: clamp(14px, 0.586vw, 15px); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; } .svc-card p { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); line-height: 1.55; } /* ---------- portfólio (BanxStudio) ---------- */ .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pf-item { display: flex; flex-direction: column; gap: 12px; } .pf-item.wide { grid-column: span 2; } .pf-item image-slot { width: 100%; height: 300px; display: block; } .pf-cap { display: flex; align-items: center; justify-content: space-between; font-size: clamp(14px, 0.586vw, 15px); font-weight: 600; color: var(--faint); } .pf-cap em { font-style: normal; font-size: clamp(14px, 0.586vw, 15px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--u1); } /* timeline de 5 etapas */ .timeline.t5 { grid-template-columns: repeat(5, 1fr); } /* ---------- recursos / infra (BanxHost) ---------- */ .unit-section-accent .f-icon { color: color-mix(in oklab, var(--u2) 88%, var(--mix-fg)); } /* ---------- planos (BanxHost) ---------- */ .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .plan-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 18px; border: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom)); transition: border-color 0.2s ease, transform 0.2s ease; } .plan-card:hover { transform: translateY(-3px); border-color: var(--line); } .plan-card.featured { border-color: color-mix(in oklab, var(--u2) 38%, var(--line)); background: linear-gradient(180deg, color-mix(in oklab, var(--u2) 5%, transparent), var(--grad-bottom)); } .plan-card.featured::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--u1) 75%, transparent), color-mix(in oklab, var(--u2) 75%, transparent), transparent); } .plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: clamp(14px, 0.586vw, 15px); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #131316; background: color-mix(in oklab, var(--u2) 80%, white); border-radius: 99px; padding: 5px 14px; white-space: nowrap; } .plan-card h3 { font-size: clamp(17px, 0.859vw, 22px); letter-spacing: -0.01em; } .plan-card .plan-tag { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); min-height: 44px; } .plan-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; flex: 1; } .plan-card li { display: flex; align-items: center; gap: 11px; font-size: clamp(14px, 0.586vw, 15px); font-weight: 600; color: var(--muted); } .plan-card li svg { flex: none; color: color-mix(in oklab, var(--u2) 75%, var(--mix-fg)); } .plan-card .btn { width: 100%; } .plan-note { text-align: center; font-size: clamp(14px, 0.586vw, 15px); color: var(--faint); margin-top: 28px; } /* ---------- cards do ecossistema (Home / Produtos) ---------- */ .unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .unit-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 18px; border: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom)); overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease; } .unit-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--u1) 30%, var(--line)); } .unit-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--u1) 80%, transparent), color-mix(in oklab, var(--u2) 80%, transparent), transparent); } .unit-card::after { content: ""; position: absolute; top: -90px; left: 0; right: 0; height: 200px; background: radial-gradient(ellipse 60% 100% at 18% center, color-mix(in oklab, var(--u1) calc(var(--glow) * 18%), transparent), transparent 72%), radial-gradient(ellipse 60% 100% at 82% center, color-mix(in oklab, var(--u2) calc(var(--glow) * 18%), transparent), transparent 72%); pointer-events: none; } .unit-media { position: relative; margin: -26px -26px 6px; height: 172px; overflow: hidden; } .unit-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95); } .unit-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,23,0) 32%, rgba(20,20,23,0.55) 78%, rgba(20,20,23,0.9) 100%), linear-gradient(110deg, color-mix(in oklab, var(--u1) 30%, transparent), color-mix(in oklab, var(--u2) 30%, transparent) 80%); pointer-events: none; } .unit-card .wordmark { font-size: clamp(20px, 1.016vw, 26px); } .unit-card .logo-img { height: clamp(18px, 0.94vw, 24px); width: auto; object-fit: contain; } .unit-card .unit-tag { font-size: clamp(14px, 0.586vw, 15px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-soft); border-radius: 99px; padding: 5px 12px; align-self: flex-start; } .unit-card p { color: var(--muted); font-size: clamp(14px, 0.586vw, 15px); flex: 1; text-wrap: pretty; } .unit-card .product-chips > span { background: var(--glass-faint); } .unit-card .product-link { color: color-mix(in oklab, var(--u1) 65%, var(--mix-fg)); } .unit-card:hover .product-link svg { transform: translateX(3px); } .unit-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* CTA das unidades: hairline na cor da marca */ .cta-panel.unit::after { content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 1px; background: linear-gradient(90deg, transparent, var(--u1), var(--u2), transparent); } /* ---------- responsive ---------- */ @media (max-width: 1024px) { .svc-grid { grid-template-columns: 1fr 1fr; } .pf-grid { grid-template-columns: 1fr 1fr; } .pf-item.wide { grid-column: span 2; } .plan-grid { grid-template-columns: 1fr; } .unit-grid { grid-template-columns: 1fr; } .timeline.t5 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .svc-grid { grid-template-columns: 1fr; } .pf-grid { grid-template-columns: 1fr; } .pf-item.wide { grid-column: span 1; } .pf-item image-slot { height: 240px; } .unit-hero .wordmark { font-size: 28px; } .unit-hero .hero-content { padding-top: 120px; padding-bottom: 108px; } .unit-media { margin: -26px -26px 4px; height: 150px; } .studio-mantra { font-size: 15px; } }