/* ========================================================================== EESIER EXPORTS — eesier.com.br/china (PT) e zh.eesier.com/brazil (ZH) Operação de trade China <-> Brasil, em pré-lançamento. Page prefix: ex-. Usa apenas tokens e classes do design system compartilhado. ORDEM DAS SEÇÕES / ALTERNÂNCIA DE FUNDO: hero (transparente) -> problem (branco) -> steps (#dbeafe) -> services (branco) -> incumbents (ink) -> prelaunch (#dbeafe) -> faq (branco) -> cta (ink) -> footer (ink) ========================================================================== */ /* ============================ HERO ============================ */ /* NOTE ON THE `hero` CLASS IN THE MARKUP: components.css carries `main > section:not(.hero):not(.section-has-bottom-wave) { padding-bottom: calc(75px + 80px) }` at specificity 0,2,2 — which silently beat every padding-bottom set here (0,1,0) and made the mobile hero impossible to size. `.hero` is that rule's INTENDED exemption for hero sections, so the section carries it. `.hero` itself only sets 5 properties and has zero descendant rules; the only one not already overridden below is `align-items: center`, neutralised here. */ .ex-hero { display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: 100vh; text-align: left; background-image: linear-gradient(to right, rgba(246, 247, 252, 0.96) 0%, rgba(246, 247, 252, 0.75) 30%, rgba(246, 247, 252, 0.2) 55%, rgba(246, 247, 252, 0) 75%), url("/_content/Eesier.Web.Site.Shared/img/eesier-exports-hero.png"); background-repeat: no-repeat, no-repeat; background-size: cover, cover; background-position: center, center right; } /* ZH (zh.eesier.com/brazil) USES A DIFFERENT HERO PHOTO. The two pages are mirror images of each other and the photo has to mirror too: the PT page sells CHINA to a Brazilian buyer (Chinese factory photo), the ZH page sells BRAZIL to a Chinese factory — so it shows the Brazilian commercial side, a distribution warehouse with Brazilian buyers. Scoped off the the Chinese view already sets, so no extra markup hook is needed. Specificity here is 0,2,1 vs 0,1,0 for the base rule — see the mobile block below, which MUST re-null this or it would beat `background-image: none` and put the photo back behind the mobile copy. */ html[lang="zh-Hans"] .ex-hero { background-image: linear-gradient(to right, rgba(246, 247, 252, 0.96) 0%, rgba(246, 247, 252, 0.75) 30%, rgba(246, 247, 252, 0.2) 55%, rgba(246, 247, 252, 0) 75%), url("/_content/Eesier.Web.Site.Shared/img/eesier-exports-hero-brazil.png"); } .ex-hero .ex-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; } .ex-hero .ex-hero__inner .ex-hero__logo { height: 25px; width: auto; } .ex-hero .ex-hero__inner .ex-hero__headline { color: var(--color-ink); font-weight: 700; font-size: 32px; line-height: 1.15; margin: 0; max-width: 800px; } .ex-hero .ex-hero__inner .ex-hero__subheadline { color: var(--color-muted); font-size: 18px; line-height: 1.6; margin: 0; max-width: 650px; } .ex-hero .ex-hero__inner .ex-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 25px; } .ex-hero .ex-hero__inner .ex-hero__note { margin: 0; color: var(--color-muted); max-width: 500px; } /* ============================ EYEBROW (compartilhado) ============================ */ .page-eesier-exports .ex-eyebrow { display: inline-block; margin-bottom: 10px; color: var(--color-accent); font-weight: 600; letter-spacing: 0.5px; } .page-eesier-exports .ex-eyebrow--light { color: var(--color-secondary); } /* ============================ PROBLEMA ============================ */ .ex-problem { background: var(--color-surface); position: relative; z-index: 1; } .ex-problem::before { content: ""; position: absolute; top: -79px; left: 0; width: 100%; height: 80px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,70 1440,60 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 100% 100%; pointer-events: none; z-index: 2; } .ex-problem .content-inner .ex-problem__grid { display: grid; grid-template-columns: 1fr; gap: 25px; } .ex-problem .content-inner .ex-problem__grid .ex-problem__card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 25px; border-radius: 12px; background: var(--color-background); border: 1px solid var(--color-border); } .ex-problem .content-inner .ex-problem__grid .ex-problem__card .ex-problem__icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: #dbeafe; color: var(--color-primary); font-size: 25px; } .ex-problem .content-inner .ex-problem__grid .ex-problem__card .ex-problem__name { margin: 0; color: var(--color-ink); font-size: 18px; font-weight: 600; } .ex-problem .content-inner .ex-problem__grid .ex-problem__card .ex-problem__desc { margin: 0; color: var(--color-muted); line-height: 1.6; } .ex-problem .content-inner .ex-problem__closing { margin: 50px auto 0 auto; max-width: 800px; text-align: center; color: var(--color-ink); font-size: 18px; line-height: 1.6; } /* ============================ COMO FUNCIONA ============================ */ .ex-steps { background: #dbeafe; position: relative; z-index: 1; } .ex-steps::before { content: ""; position: absolute; top: -79px; left: 0; width: 100%; height: 80px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,70 1440,60 L1440,80 L0,80 Z' fill='%23dbeafe'/%3E%3C/svg%3E"); background-size: 100% 100%; pointer-events: none; z-index: 2; } .ex-steps .content-inner .ex-steps__list { display: grid; grid-template-columns: 1fr; gap: 25px; margin: 0; padding: 0; list-style: none; } .ex-steps .content-inner .ex-steps__list .ex-step { display: flex; align-items: flex-start; gap: 25px; padding: 25px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); } .ex-steps .content-inner .ex-steps__list .ex-step .ex-step__number { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--color-primary); color: #ffffff; font-weight: 700; } .ex-steps .content-inner .ex-steps__list .ex-step .ex-step__body { display: flex; flex-direction: column; gap: 10px; } .ex-steps .content-inner .ex-steps__list .ex-step .ex-step__body .ex-step__title { margin: 0; color: var(--color-ink); font-size: 18px; font-weight: 600; } .ex-steps .content-inner .ex-steps__list .ex-step .ex-step__body .ex-step__desc { margin: 0; color: var(--color-muted); line-height: 1.6; } .ex-steps .content-inner .ex-steps__list .ex-step .ex-step__body .ex-step__owner { align-self: flex-start; padding: 6px 25px; border-radius: 50px; background: #dbeafe; color: var(--color-primary); font-weight: 600; } /* ============================ O QUE FAZEMOS ============================ */ .ex-services { background: var(--color-surface); position: relative; z-index: 1; } .ex-services::before { content: ""; position: absolute; top: -79px; left: 0; width: 100%; height: 80px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,70 1440,60 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 100% 100%; pointer-events: none; z-index: 2; } .ex-services .content-inner .ex-services__grid { display: grid; grid-template-columns: 1fr; gap: 25px; } .ex-services .content-inner .ex-services__grid .ex-service { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 25px; border-radius: 12px; background: var(--color-background); border: 1px solid var(--color-border); } .ex-services .content-inner .ex-services__grid .ex-service .ex-service__icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: #dbeafe; color: var(--color-primary); font-size: 25px; } .ex-services .content-inner .ex-services__grid .ex-service .ex-service__title { margin: 0; color: var(--color-ink); font-size: 18px; font-weight: 600; } .ex-services .content-inner .ex-services__grid .ex-service .ex-service__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .ex-services .content-inner .ex-services__grid .ex-service .ex-service__list .ex-service__item { position: relative; padding-left: 25px; color: var(--color-muted); line-height: 1.6; } .ex-services .content-inner .ex-services__grid .ex-service .ex-service__list .ex-service__item::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); } /* ============================ INCUMBENTES (DARK) ============================ */ .ex-incumbents { background: var(--color-ink); position: relative; z-index: 1; } .ex-incumbents::before { content: ""; position: absolute; top: -79px; left: 0; width: 100%; height: 80px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,70 1440,60 L1440,80 L0,80 Z' fill='%230f172a'/%3E%3C/svg%3E"); background-size: 100% 100%; pointer-events: none; z-index: 2; } .ex-incumbents .content-inner .section-header .section-subtitle { color: rgba(255, 255, 255, 0.7); } .ex-incumbents .content-inner .ex-incumbents__table { display: grid; grid-template-columns: 1fr; gap: 25px; } .ex-incumbents .content-inner .ex-incumbents__table .ex-incumbent { display: flex; flex-direction: column; gap: 10px; padding: 25px; border-radius: 12px; background: #1e293b; border: 1px solid rgba(28, 145, 228, 0.15); } .ex-incumbents .content-inner .ex-incumbents__table .ex-incumbent .ex-incumbent__player { margin: 0; color: #ffffff; font-size: 18px; font-weight: 600; } .ex-incumbents .content-inner .ex-incumbents__table .ex-incumbent .ex-incumbent__does { margin: 0; color: var(--color-secondary); line-height: 1.6; } .ex-incumbents .content-inner .ex-incumbents__table .ex-incumbent .ex-incumbent__stops { margin: 0; color: rgba(255, 255, 255, 0.7); line-height: 1.6; } .ex-incumbents .content-inner .ex-incumbents__closing { margin: 50px auto 0 auto; max-width: 800px; text-align: center; color: rgba(255, 255, 255, 0.9); font-size: 18px; line-height: 1.6; } .ex-incumbents .content-inner .ex-incumbents__closing strong { color: #ffffff; } /* ============================ PRÉ-LANÇAMENTO ============================ */ .ex-prelaunch { background: #dbeafe; position: relative; z-index: 1; } .ex-prelaunch::before { content: ""; position: absolute; top: -79px; left: 0; width: 100%; height: 80px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,70 1440,60 L1440,80 L0,80 Z' fill='%23dbeafe'/%3E%3C/svg%3E"); background-size: 100% 100%; pointer-events: none; z-index: 2; } .ex-prelaunch .content-inner { max-width: 900px; } .ex-prelaunch .content-inner .ex-prelaunch__body p { margin: 0 0 25px 0; color: var(--color-muted); font-size: 18px; line-height: 1.7; } .ex-prelaunch .content-inner .ex-prelaunch__body p strong { color: var(--color-ink); } .ex-prelaunch .content-inner .ex-prelaunch__columns { display: grid; grid-template-columns: 1fr; gap: 25px; margin-top: 25px; } .ex-prelaunch .content-inner .ex-prelaunch__columns .ex-prelaunch__col { padding: 25px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); } .ex-prelaunch .content-inner .ex-prelaunch__columns .ex-prelaunch__col .ex-prelaunch__col-title { margin: 0 0 10px 0; color: var(--color-ink); font-size: 18px; font-weight: 600; } .ex-prelaunch .content-inner .ex-prelaunch__columns .ex-prelaunch__col .ex-prelaunch__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .ex-prelaunch .content-inner .ex-prelaunch__columns .ex-prelaunch__col .ex-prelaunch__list .ex-prelaunch__item { position: relative; padding-left: 25px; color: var(--color-muted); line-height: 1.6; } .ex-prelaunch .content-inner .ex-prelaunch__columns .ex-prelaunch__col--true .ex-prelaunch__list .ex-prelaunch__item::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); } .ex-prelaunch .content-inner .ex-prelaunch__columns .ex-prelaunch__col--notyet .ex-prelaunch__list .ex-prelaunch__item::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); } /* ============================ FAQ ============================ */ .ex-faq { background: var(--color-surface); position: relative; z-index: 1; } .ex-faq::before { content: ""; position: absolute; top: -79px; left: 0; width: 100%; height: 80px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,70 1440,60 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 100% 100%; pointer-events: none; z-index: 2; } .ex-faq .content-inner { max-width: 900px; } .ex-faq .content-inner .ex-faq__list { display: flex; flex-direction: column; gap: 10px; } .ex-faq .content-inner .ex-faq__list .ex-faq__item { padding: 25px; border-radius: 12px; background: var(--color-background); border: 1px solid var(--color-border); } .ex-faq .content-inner .ex-faq__list .ex-faq__item .ex-faq__question { color: var(--color-ink); font-size: 18px; font-weight: 600; cursor: pointer; } .ex-faq .content-inner .ex-faq__list .ex-faq__item .ex-faq__answer { margin: 10px 0 0 0; color: var(--color-muted); line-height: 1.7; } /* ============================ CTA (DARK) ============================ */ .ex-cta { background: var(--color-ink); position: relative; z-index: 1; } .ex-cta::before { content: ""; position: absolute; top: -79px; left: 0; width: 100%; height: 80px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,70 1440,60 L1440,80 L0,80 Z' fill='%230f172a'/%3E%3C/svg%3E"); background-size: 100% 100%; pointer-events: none; z-index: 2; } .ex-cta .content-inner { max-width: 800px; } .ex-cta .content-inner .section-header .section-subtitle { color: rgba(255, 255, 255, 0.7); } .ex-cta .content-inner .ex-cta__actions { display: flex; justify-content: center; margin-bottom: 50px; } .ex-cta .content-inner .ex-cta__form { display: flex; flex-direction: column; gap: 25px; padding: 25px; border-radius: 12px; background: #1e293b; border: 1px solid rgba(28, 145, 228, 0.15); } .ex-cta .content-inner .ex-cta__form .ex-cta__form-title { margin: 0; color: #ffffff; font-size: 18px; font-weight: 600; } .ex-cta .content-inner .ex-cta__form .ex-cta__fields { display: grid; grid-template-columns: 1fr; gap: 10px; } .ex-cta .content-inner .ex-cta__form .ex-cta__fields .ex-cta__input { width: 100%; padding: 10px 25px; border-radius: 12px; background: var(--color-ink); border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; font-family: inherit; font-size: 16px; } .ex-cta .content-inner .ex-cta__form .ex-cta__fields .ex-cta__input::placeholder { color: rgba(255, 255, 255, 0.4); } .ex-cta .content-inner .ex-cta__form .ex-cta__fields .ex-cta__input:focus { outline: none; border-color: var(--color-secondary); } .ex-cta .content-inner .ex-cta__form .ex-cta__fields .ex-cta__input--area { resize: vertical; } .ex-cta .content-inner .ex-cta__form .ex-cta__note { margin: 0; color: rgba(255, 255, 255, 0.4); } .ex-cta .content-inner .ex-cta__form .ex-cta__error { margin: 0; color: var(--color-accent); font-weight: 600; } /* ============================ FOOTER ============================ */ .ex-footer { padding: 50px 0; background: var(--color-ink); } .ex-footer .ex-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .ex-footer .ex-footer__inner .ex-footer__logo { height: 25px; width: auto; filter: brightness(0) invert(1); } .ex-footer .ex-footer__inner .ex-footer__text { margin: 0; color: rgba(255, 255, 255, 0.7); } .ex-footer .ex-footer__inner .ex-footer__link { color: var(--color-secondary); text-decoration: none; } .ex-footer .ex-footer__inner .ex-footer__link:hover { text-decoration: underline; } /* ============================ RESPONSIVE ============================ */ /* MOBILE HERO — THE COPY BLOCK IS TALL (HEADLINE + SUBHEADLINE + TWO CTAs + NOTE). THE PREVIOUS APPROACH BLED THE PHOTO BEHIND ALL OF IT WITH A WASH THAT FADED OUT AT 72%, WHICH LEFT MOST OF THE TEXT SITTING ON A BUSY FACTORY PHOTO AND UNREADABLE — AND background-origin: content-box PLUS padding-top LEFT A BLANK WHITE BAND ABOVE THE LOGO (THE BACKGROUND STARTED *AFTER* THE PADDING). NOW: the logo and all copy sit on the clean page background, and the photo is a band anchored to the BOTTOM. Its top edge is masked to transparent so it dissolves into the background instead of showing a hard horizontal cut. padding-bottom reserves the band's height so text can never overlap the people. */ @media (max-width: 767px) { .ex-hero { position: relative; justify-content: flex-start; min-height: auto; padding-top: 50px; padding-bottom: 440px; background-image: none; } /* THE NOTE IS THE LAST AND FAINTEST LINE, SITTING CLOSEST TO THE PHOTO — GIVE IT INK CONTRAST SO IT STAYS READABLE EVEN OVER THE MASK'S FAINT TOP EDGE. */ .ex-hero .ex-hero__inner .ex-hero__note { color: var(--color-ink); } .ex-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 340px; background-image: url("/_content/Eesier.Web.Site.Shared/img/eesier-exports-hero-mobile.png"); background-repeat: no-repeat; background-size: cover; background-position: center 35%; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 22%, rgba(0, 0, 0, 0.65) 42%, rgb(0, 0, 0) 60%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 22%, rgba(0, 0, 0, 0.65) 42%, rgb(0, 0, 0) 60%); pointer-events: none; z-index: 0; } .ex-hero .ex-hero__inner { position: relative; z-index: 1; } /* ZH MOBILE — TWO THINGS MATTER HERE. (1) The desktop ZH rule above is specificity 0,2,1 and would BEAT the plain `.ex-hero { background-image: none }` (0,1,0) in this block, putting the photo back behind the Chinese copy. It has to be re-nulled at equal-or-higher specificity, which is what the first rule does. (2) The band then gets the Brazilian PORTRAIT crop, framed on the faces. */ html[lang="zh-Hans"] .ex-hero { background-image: none; } /* Anchor to the TOP of the portrait: the subjects sit high in this frame, so the mask's fade must land on the empty warehouse space ABOVE their heads rather than across their faces. (The PT photo places its subjects lower, hence its 35%.) */ html[lang="zh-Hans"] .ex-hero::after { background-image: url("/_content/Eesier.Web.Site.Shared/img/eesier-exports-hero-brazil-mobile.png"); background-position: center top; } .ex-steps .content-inner .ex-steps__list .ex-step { flex-direction: column; gap: 10px; } } @media (min-width: 768px) { .ex-hero .ex-hero__inner .ex-hero__headline { font-size: 44px; } .ex-problem .content-inner .ex-problem__grid { grid-template-columns: repeat(2, 1fr); } .ex-services .content-inner .ex-services__grid { grid-template-columns: repeat(2, 1fr); } .ex-incumbents .content-inner .ex-incumbents__table { grid-template-columns: repeat(2, 1fr); } .ex-prelaunch .content-inner .ex-prelaunch__columns { grid-template-columns: repeat(2, 1fr); } .ex-cta .content-inner .ex-cta__form .ex-cta__fields { grid-template-columns: repeat(2, 1fr); } .ex-cta .content-inner .ex-cta__form .ex-cta__fields .ex-cta__input--area { grid-column: span 2; } } @media (min-width: 1024px) { .ex-hero .ex-hero__inner .ex-hero__headline { font-size: 52px; } .ex-problem .content-inner .ex-problem__grid { grid-template-columns: repeat(4, 1fr); } .ex-services .content-inner .ex-services__grid { grid-template-columns: repeat(3, 1fr); } .ex-incumbents .content-inner .ex-incumbents__table { grid-template-columns: repeat(4, 1fr); } .ex-steps .content-inner .ex-steps__list { grid-template-columns: repeat(2, 1fr); } }