/* ========================================================================== IA PARA EMPRESAS — BRANCH THEME (eesier IA / "Viver de IA" competitor) -------------------------------------------------------------------------- A premium "all-light" identity that is visibly distinct from the eesier PRODUCT pages while staying within the brand: shades of white, hairline borders, an elegant serif display face, and eesier blue used ONLY as a thin accent. The white logo lives in the (already dark) footer. Applied by adding `class="ia-brand"` to on every branch page, so everything below is scoped under `body.ia-brand` and product pages are never touched. This is the single source of truth for the branch look — tweak the aesthetic here and all branch pages follow. ========================================================================== */ /* THIN BLUE ACCENT AT THE VERY TOP + softer hairlines + off-white surface. Overriding --color-background (NOT --color-ink, which is the text color) shifts every var(--color-background) surface to a calmer off-white. */ body.ia-brand { border-top: 3px solid var(--color-primary); --color-background: #fafafa; --color-border: #ececef; /* kill the product blue/orange radial mesh — the branch is shades of white */ background: #fafafa; } /* ------------------------------------------------------------------------- MINIMAL HEADER — the branch header is just the eesier logo, rendered as a dark monochrome mark on the all-light surface (the product nav items are dropped server-side for branch pages). Product pages are untouched. ------------------------------------------------------------------------- */ body.ia-brand .header .logo img { filter: brightness(0) opacity(0.82); } /* ------------------------------------------------------------------------- PREMIUM DISPLAY FACE — elegant serif for headlines only (body keeps the brand sans). This is the strongest "this is the IA branch" signal. ------------------------------------------------------------------------- */ body.ia-brand .cp-hero__headline, body.ia-brand .cp-section__heading, body.ia-brand .cp-comparison__title, body.ia-brand .cp-howto__title, body.ia-brand .cp-faq__title, body.ia-brand .cp-related__title, body.ia-brand .cp-cta__title, body.ia-brand .section-title, body.ia-brand .ia-hero__headline, body.ia-brand .ia-agents__title, body.ia-brand .ia-catalog__title, body.ia-brand .ia-campaign__title, body.ia-brand .ia-finalcta__title { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 600; letter-spacing: -0.01em; } /* ------------------------------------------------------------------------- CONTENT PAGES (cp-*) — the only non-white bits flattened to shades of white. The dark closing CTA (.cp-cta) is kept as a deliberate dark accent. ------------------------------------------------------------------------- */ body.ia-brand .cp-comparison { background: #fafafa; } /* the content CTA button is orange (.btn-accent) by default — make it the blue accent */ body.ia-brand .cp-cta .cp-cta__inner .btn.btn-accent.cp-cta__button { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } body.ia-brand .cp-cta .cp-cta__inner .btn.btn-accent.cp-cta__button:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); } body.ia-brand .cp-hero__badge { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary); } /* ========================================================================== ENTERPRISE HUB (/enterprise, .ia-* sections) — flatten the dark/colored sections to shades of white with ink text. Blue/cyan are demoted to thin accents; the .gradient-text emphasis spans stay as the one blue accent. ========================================================================== */ /* DROP the colored wave dividers — minimal look, just whitespace between sections */ body.ia-brand .ia-waves::before, body.ia-brand .ia-pillars::before, body.ia-brand .ia-learn::before, body.ia-brand .ia-catalog::before, body.ia-brand .ia-sprint::before, body.ia-brand .ia-agents::before, body.ia-brand .ia-cases::before, body.ia-brand .ia-ladder::before, body.ia-brand .ia-campaign::before, body.ia-brand .ia-faq::before, body.ia-brand .ia-experts::before, body.ia-brand .ia-diagnostico::before, body.ia-brand .ia-finalcta::before { display: none; } /* SECTION BACKGROUNDS — white / off-white only */ body.ia-brand .ia-waves, body.ia-brand .ia-agents, body.ia-brand .ia-campaign, body.ia-brand .ia-pillars, body.ia-brand .ia-catalog, body.ia-brand .ia-cases, body.ia-brand .ia-faq { background: var(--color-surface); } body.ia-brand .ia-learn, body.ia-brand .ia-ladder, body.ia-brand .ia-finalcta { background: #fafafa; } /* DARK SECTION HEADERS → ink text (they were white-on-dark) */ body.ia-brand .section-header--dark .section-title { color: var(--color-ink); } body.ia-brand .section-header--dark .section-subtitle { color: var(--color-muted); } /* WAVES — was ink/white. Cards → light, text → ink, blue as accent */ body.ia-brand .ia-waves .ia-waves__track .ia-waves__card, body.ia-brand .ia-waves .ia-waves__track .ia-waves__card.ia-waves__card--own { background: var(--color-surface); border: 1px solid var(--color-border); } body.ia-brand .ia-waves .ia-waves__track .ia-waves__card .ia-waves__num, body.ia-brand .ia-waves .ia-waves__track .ia-waves__card.ia-waves__card--own .ia-waves__num { color: #e2e8f0; } body.ia-brand .ia-waves .ia-waves__track .ia-waves__card .ia-waves__tagline { color: var(--color-primary); } body.ia-brand .ia-waves .ia-waves__track .ia-waves__card .ia-waves__name { color: var(--color-ink); } body.ia-brand .ia-waves .ia-waves__track .ia-waves__card .ia-waves__desc { color: var(--color-muted); } body.ia-brand .ia-waves .ia-waves__track .ia-waves__card .ia-waves__own, body.ia-brand .ia-waves .ia-waves__track .ia-waves__card.ia-waves__card--own .ia-waves__own { background: var(--color-primary-50); color: var(--color-primary); } body.ia-brand .ia-waves .content-inner .ia-waves__closing { color: var(--color-ink); } /* AGENTS — was ink/white. Section + card → light, text → ink */ body.ia-brand .ia-agents .content-inner .ia-agents__layout .ia-agents__head .ia-agents__title { color: var(--color-ink); } body.ia-brand .ia-agents .content-inner .ia-agents__layout .ia-agents__head .ia-agents__subtitle { color: var(--color-muted); } body.ia-brand .ia-agents .content-inner .ia-agents__layout .ia-agents__head .ia-agents__fullstack li { color: var(--color-ink); } body.ia-brand .ia-agents .content-inner .ia-agents__layout .ia-agents__card { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 25px 50px rgba(15, 23, 42, 0.06); } body.ia-brand .ia-agents .content-inner .ia-agents__layout .ia-agents__card .ia-agents__card-eyebrow { color: var(--color-primary); } body.ia-brand .ia-agents .content-inner .ia-agents__layout .ia-agents__card .ia-agents__capabilities li { color: var(--color-muted); } body.ia-brand .ia-agents .content-inner .ia-agents__layout .ia-agents__card .ia-agents__capabilities li .ia-check { color: var(--color-primary); } body.ia-brand .ia-agents .ia-price.ia-price--dark .ia-price__value { color: var(--color-ink); } body.ia-brand .ia-agents .ia-price.ia-price--dark .ia-price__note { color: var(--color-muted); } /* the agents card CTA was .btn-white (for a dark card) — make it an ink button */ body.ia-brand .ia-agents .content-inner .ia-agents__layout .ia-agents__card .btn.btn-white { background: var(--color-ink); color: #ffffff; border-color: var(--color-ink); } /* CAMPAIGN — was ink/white. → light, ink text, blue accent close */ body.ia-brand .ia-campaign .content-inner .ia-campaign__title { color: var(--color-ink); } body.ia-brand .ia-campaign .content-inner .ia-campaign__lines li { color: var(--color-ink); } body.ia-brand .ia-campaign .content-inner .ia-campaign__closing { color: var(--color-primary); } /* ------------------------------------------------------------------------- ACCENT COHERENCE — demote residual orange/cyan to the single blue accent, and restore hairline edges where cards used white borders on the old bg. ------------------------------------------------------------------------- */ body.ia-brand .ia-eyebrow.ia-eyebrow--accent { color: var(--color-primary); } body.ia-brand .ia-agents .content-inner .ia-agents__layout .ia-agents__head .ia-agents__fullstack li::before { background: var(--color-primary); } body.ia-brand .ia-ladder .content-inner .ia-ladder__grid .ia-ladder__tier .ia-ladder__badge { background: var(--color-primary); } body.ia-brand .ia-learn .content-inner .ia-learn__grid .ia-learn__block { border-color: var(--color-border); } body.ia-brand .ia-ladder .content-inner .ia-ladder__grid .ia-ladder__tier { border-color: var(--color-border); } body.ia-brand .ia-ladder .content-inner .ia-ladder__grid .ia-ladder__tier.ia-ladder__tier--hl { border-color: var(--color-primary); } /* ------------------------------------------------------------------------- LEFT-ALIGN EVERY SECTION (per brief) — flips the shared centered headers and the centered content blocks to left-aligned, hub + content pages. ------------------------------------------------------------------------- */ body.ia-brand .section-header { text-align: left; align-items: flex-start; } body.ia-brand .ia-campaign .content-inner, body.ia-brand .ia-finalcta .content-inner { align-items: flex-start; text-align: left; } body.ia-brand .ia-sprint .content-inner .ia-sprint__promise, body.ia-brand .ia-cases .content-inner .ia-cases__lead, body.ia-brand .ia-cases .content-inner .ia-cases__anatomy-title, body.ia-brand .ia-cases .content-inner .ia-cases__note { margin-left: 0; margin-right: 0; text-align: left; } body.ia-brand .ia-waves .content-inner .ia-waves__closing { text-align: left; } body.ia-brand .ia-ladder .content-inner .ia-ladder__grid, body.ia-brand .ia-experts .content-inner .ia-experts__grid { justify-content: flex-start; } body.ia-brand .ia-diagnostico .content-inner .ia-diag__panel { margin-left: 0; } body.ia-brand .ia-faq .content-inner .ia-faq__list { margin-left: 0; } body.ia-brand .cp-hero { align-items: flex-start; text-align: left; } body.ia-brand .cp-comparison .cp-comparison__title, body.ia-brand .cp-comparison .cp-comparison__subtitle, body.ia-brand .cp-faq .cp-faq__title, body.ia-brand .cp-howto .cp-howto__title, body.ia-brand .cp-howto .cp-howto__description { text-align: left; } body.ia-brand .cp-cta .cp-cta__inner { align-items: flex-start; text-align: left; }