/*! * Mulopwe Energy — website stylesheet * Single-page corporate site. Mobile-first-safe, desktop-first authored. * No external JS/CSS dependencies except Google Fonts (see index.html ). */ /* ========================================================================== 1. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } :root{ /* brand colours */ --navy-950:#081b35; --navy-900:#0c2549; --navy-800:#123564; --navy-700:#1a4278; --navy-600:#2a5590; --green-800:#1a622c; --green-700:#217a37; --green-600:#2f9e44; --green-500:#43b755; --green-400:#7ed08c; --cyan-400:#3fc6ff; --amber-400:#ffb648; --white:#ffffff; --offwhite:#f6f8fb; --gray-100:#eef1f6; --gray-200:#e2e7ef; --gray-300:#cdd6e3; --gray-500:#66748c; --gray-600:#4d5b74; --gray-700:#33415a; --ink:#0d1826; /* radii / shadow / motion */ --radius-sm:8px; --radius-md:10px; --radius-lg:16px; --shadow-card:0 1px 2px rgba(13,24,38,.06), 0 8px 24px rgba(13,24,38,.07); --shadow-lift:0 4px 10px rgba(13,24,38,.08), 0 20px 40px rgba(13,24,38,.1); --ease:cubic-bezier(.4,0,.2,1); /* fluid type scale */ --fs-h1: clamp(1.9rem, 1.35rem + 2.4vw, 3.35rem); --fs-h2: clamp(1.55rem, 1.32rem + 1vw, 2.25rem); --fs-h3: clamp(1.02rem, 0.96rem + 0.25vw, 1.18rem); --fs-lede: clamp(0.98rem, 0.93rem + 0.2vw, 1.06rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-xs: 0.78rem; /* fluid section rhythm */ --section-pad: clamp(2.75rem, 2.1rem + 2.8vw, 5.5rem); --wrap-pad: clamp(1.3rem, 0.7rem + 2vw, 2.5rem); } body{ margin:0; font-family:"Public Sans","Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.5; color:var(--ink); background:var(--offwhite); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{ font-family:"Sora","Segoe UI",Arial,sans-serif; margin:0; letter-spacing:-0.01em; font-weight:700; } p{ margin:0; } ul, ol{ margin:0; padding:0; list-style:none; } a{ color:var(--navy-700); text-decoration:none; } a:hover{ color:var(--green-600); } img,svg{ display:block; max-width:100%; } button{ font-family:inherit; } /* accessible focus ring */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2.5px solid var(--cyan-400); outline-offset:2px; border-radius:4px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:1rem; top:-3rem; z-index:200; background:var(--navy-800); color:#fff; padding:.7rem 1.1rem; border-radius:8px; font-family:"Sora",sans-serif; font-weight:600; font-size:.9rem; transition:top .18s var(--ease); } .skip-link:focus{ top:1rem; color:#fff; } /* ========================================================================== 2. LAYOUT PRIMITIVES ========================================================================== */ .wrap{ max-width:1180px; margin:0 auto; padding:0 var(--wrap-pad); } .section{ padding:var(--section-pad) 0; } .section--white{ background:var(--white); } .section--offwhite{ background:var(--offwhite); } .section--bordered{ border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); } .section--border-top{ border-top:1px solid var(--gray-200); } .section--dark{ background:linear-gradient(160deg,#0a2148 0%,#123564 100%); position:relative; overflow:hidden; } .eyebrow{ display:flex; align-items:center; gap:10px; font-family:"Sora",sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; } .eyebrow__label{ color:var(--navy-700); } .eyebrow--on-dark .eyebrow__label{ color:#c7dcf4; } .eyebrow__rule{ width:28px; height:2px; background:var(--green-500); display:inline-block; flex-shrink:0; } .eyebrow--on-dark .eyebrow__rule{ background:var(--green-400); } .section-title{ font-size:var(--fs-h2); line-height:1.22; color:var(--navy-800); margin-top:1rem; max-width:42rem; } .section-title--on-dark{ color:var(--white); } .section-title .accent{ color:var(--green-600); } .section-title--on-dark .accent{ color:var(--green-400); } .section-lead{ font-size:var(--fs-lede); line-height:1.7; color:var(--gray-600); max-width:38rem; margin-top:1rem; } .section-lead--on-dark{ color:#c7d5e8; } .btn{ display:inline-flex; align-items:center; gap:8px; font-family:"Sora",sans-serif; font-weight:600; font-size:.94rem; padding:.8rem 1.5rem; border-radius:8px; cursor:pointer; white-space:nowrap; border:none; transition:transform .15s var(--ease), background-color .15s var(--ease), opacity .15s var(--ease); } .btn:hover{ transform:translateY(-1px); } .btn-primary{ background:var(--green-700); color:var(--white); } .btn-primary:hover{ background:var(--green-800); color:var(--white); } .btn-ghost{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.55); } .btn-ghost:hover{ background:rgba(255,255,255,.1); color:var(--white); } .btn-navy{ background:var(--navy-800); color:var(--white); } .btn-navy:hover{ background:var(--navy-700); color:var(--white); } .pill{ display:inline-flex; align-items:center; font-family:"Sora",sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.03em; padding:.44rem .9rem; border-radius:100px; } .pill--on-dark{ background:rgba(255,255,255,.08); color:#eaf1fb; border:1px solid rgba(255,255,255,.2); } .card{ background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); transition:transform .18s var(--ease), box-shadow .18s var(--ease); } .card:hover{ transform:translateY(-3px); box-shadow:0 4px 10px rgba(13,24,38,.08), 0 16px 36px rgba(13,24,38,.12); } .icon-badge{ width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .icon-badge--sm{ width:44px; height:44px; border-radius:10px; } .icon-badge--navy{ background:rgba(18,53,100,.08); } .icon-badge--green{ background:rgba(47,158,68,.1); } .icon-badge--cyan{ background:rgba(63,198,255,.12); } .icon-badge--amber{ background:rgba(255,182,72,.14); } .audience-card .icon-badge{ margin-bottom:.85rem; } /* spacing utilities (avoid inline style="" so CSP style-src can stay 'self'-only; used sparingly, only where a one-off gap is genuinely one-off rather than a component default) */ .mt-md{ margin-top:1.5rem; } .mt-lg{ margin-top:2.5rem; } .mt-xl{ margin-top:2.75rem; } .callout{ display:flex; align-items:flex-start; gap:16px; padding:1.35rem 1.6rem; border-radius:var(--radius-md); } .callout--tint{ background:var(--gray-100); border-left:3px solid var(--green-500); } .callout--card{ background:var(--white); border:1px solid var(--gray-200); } .callout--dark{ background:var(--navy-800); color:#dbe6f4; } .callout p{ font-size:.94rem; line-height:1.6; color:var(--gray-700); } .callout--dark p{ color:#dbe6f4; } .callout strong{ color:var(--navy-800); } .callout--dark strong{ color:var(--green-400); } .callout svg{ flex-shrink:0; margin-top:2px; } /* ========================================================================== 3. HEADER / NAV ========================================================================== */ .site-header{ position:sticky; top:0; z-index:100; background:var(--white); border-bottom:1px solid var(--gray-200); } /* Note: intentionally no backdrop-filter here. `backdrop-filter` (and `transform`/`filter`/`contain`) establishes a containing block for any `position: fixed` descendant — which would trap the mobile nav panel below (a fixed child of this header) to the header's own box instead of the viewport. Keep this header free of those properties, or move #navPanel out of the header in the markup, if a frosted-glass effect is wanted later. */ .nav{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:1rem; } .nav__brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .nav__brand-mark{ flex-shrink:0; } .nav__brand-word{ display:flex; flex-direction:column; line-height:1.06; } /* Logo placeholder — a real logo file (SVG/PNG) is expected to replace this before launch; it is intentionally drawn as an obvious "insert asset here" marker (dashed border, generic image glyph) rather than a finished mark, so it can't be mistaken for real brand artwork. Swap the for an / of the real logo and this rule becomes unused. */ .logo-placeholder{ display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1.5px dashed var(--gray-300); border-radius:8px; color:var(--gray-500); } .logo-placeholder svg{ width:55%; height:55%; } .nav__brand-mark.logo-placeholder{ width:38px; height:38px; } .footer__brand-mark.logo-placeholder{ width:30px; height:30px; border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.55); } .nav__brand-word span{ font-family:"Sora",sans-serif; font-weight:700; font-size:1.14rem; } .nav__brand-word span:first-child{ color:var(--navy-800); } .nav__brand-word span:last-child{ color:var(--green-700); margin-top:-2px; } .nav__links{ display:flex; align-items:center; gap:1.3rem; list-style:none; margin:0; padding:0; } .nav__links a{ font-size:.85rem; font-weight:600; color:var(--gray-700); } .nav__actions{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; } .nav__lang{ display:flex; align-items:center; gap:2px; font-family:"Sora",sans-serif; font-weight:700; font-size:.78rem; border:1px solid var(--gray-300); border-radius:100px; padding:3px; } .nav__lang a{ padding:.32rem .62rem; border-radius:100px; color:var(--gray-600); } .nav__lang a[aria-current="page"]{ background:var(--navy-800); color:#fff; } .nav__cta{ font-size:.86rem; padding:.66rem 1.15rem; } .nav__toggle{ display:none; align-items:center; justify-content:center; width:42px; height:42px; border-radius:8px; border:1px solid var(--gray-300); background:transparent; flex-shrink:0; cursor:pointer; } .nav__toggle-bars{ position:relative; width:18px; height:12px; } .nav__toggle-bars span{ position:absolute; left:0; width:100%; height:2px; background:var(--navy-800); border-radius:2px; transition:transform .2s var(--ease), opacity .2s var(--ease), top .2s var(--ease); } .nav__toggle-bars span:nth-child(1){ top:0; } .nav__toggle-bars span:nth-child(2){ top:5px; } .nav__toggle-bars span:nth-child(3){ top:10px; } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1){ top:5px; transform:rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2){ opacity:0; } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3){ top:5px; transform:rotate(-45deg); } .nav__panel{ display:contents; } /* ========================================================================== 4. HERO ========================================================================== */ .hero{ position:relative; overflow:hidden; background:linear-gradient(115deg,#081b35 0%,#0c2a52 38%,#123564 62%,#1a4278 100%); } /* Full-bleed hero photo (extracted from the company profile cover slide). The scrim gradient keeps the left half solid navy so the headline always sits on an opaque ground; the photo emerges on the right. Below 1100px the photo covers the whole hero under a uniform dark scrim instead. */ .hero__photo{ position:absolute; top:0; right:0; width:60%; height:100%; object-fit:cover; object-position:center 28%; } .hero__scrim{ position:absolute; inset:0; background:linear-gradient(97deg,#0a2148 0%,#0a2148 45%,rgba(10,33,72,.72) 58%,rgba(10,33,72,.1) 78%,rgba(9,27,58,.3) 100%); } /* padding-top/bottom as longhands on purpose: the `padding: X 0 Y` shorthand would zero the horizontal padding inherited from .wrap and pin the text to the screen edges on mobile. Top padding is deliberately small so the headline starts right under the header on desktop; the larger bottom padding is what gives the hero its height. */ .hero__content{ position:relative; padding-top:clamp(2.75rem,2.3rem + 1.6vw,4rem); padding-bottom:clamp(4.5rem,3.4rem + 4.4vw,9.5rem); } .hero__inner{ max-width:41rem; } @media (max-width: 1100px){ .hero__photo{ width:100%; object-position:center top; } .hero__scrim{ background:linear-gradient(180deg,rgba(8,21,45,.88) 0%,rgba(8,21,45,.8) 55%,rgba(9,24,50,.93) 100%); } } .hero__badge{ margin-bottom:1.6rem; } .hero__title{ font-size:var(--fs-h1); line-height:1.14; color:var(--white); } .hero__title .accent{ color:var(--green-400); } .hero__lede{ margin-top:1.4rem; font-size:var(--fs-lede); line-height:1.65; color:#c7d5e8; max-width:34rem; } .hero__pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.9rem; } .hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem; } /* ========================================================================== 5. GRIDS (generic, reused across sections) ========================================================================== */ .grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; } .grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; } .feature-card{ padding:1.75rem; display:flex; flex-direction:column; gap:1rem; } .feature-card h3{ font-size:1.19rem; color:var(--navy-800); } .feature-card p{ font-size:.9rem; line-height:1.6; color:var(--gray-600); } /* Feature card with a photo banner (photos extracted from the company profile's Executive Summary slide — each photo carries the slide's own white circular icon in its top-left corner, so the body needs no icon). */ .feature-card--media{ padding:0; overflow:hidden; } .feature-card__media{ height:170px; overflow:hidden; } .feature-card__media img{ width:100%; height:100%; object-fit:cover; display:block; } .feature-card__body{ padding:1.4rem 1.75rem 1.75rem; display:flex; flex-direction:column; gap:.65rem; } /* ========================================================================== 6. STRATEGIC FOCUS ========================================================================== */ .strategic{ display:grid; grid-template-columns:2fr 1fr; gap:2.25rem; margin-top:2.75rem; align-items:start; } .strategic__text{ font-size:.97rem; line-height:1.7; color:var(--gray-600); max-width:35rem; } .audience-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; margin-top:2rem; } .audience-card{ border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:1.35rem; } .audience-card h3{ font-size:.92rem; font-weight:700; color:var(--navy-800); } .audience-card p{ font-size:.85rem; line-height:1.55; color:var(--gray-600); margin-top:.5rem; } .exclude-panel{ background:var(--navy-800); border-radius:var(--radius-lg); padding:1.6rem; } .exclude-panel__head{ display:flex; align-items:center; gap:10px; margin-bottom:1rem; } .exclude-panel__head h3{ font-size:.88rem; font-weight:700; color:var(--white); letter-spacing:.02em; } .exclude-list li{ display:flex; gap:12px; padding:.8rem 0; border-top:1px solid rgba(255,255,255,.12); } .exclude-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.12); } .exclude-list svg{ flex-shrink:0; margin-top:2px; } .exclude-list span{ font-size:.85rem; line-height:1.5; color:#cfe0f2; } /* ========================================================================== 7. BUSINESS PLATFORM / PIPELINE ========================================================================== */ .platform-note{ font-size:.97rem; line-height:1.7; color:var(--gray-600); max-width:38rem; margin-top:1rem; } .platform-cards{ margin-top:2.5rem; } .platform-card{ border-radius:var(--radius-md); padding:1.35rem; background:var(--white); border:1.5px solid var(--navy-700); } .platform-card--solar{ border-color:var(--green-500); } .platform-card--trading{ border-color:var(--navy-600); } .platform-card h3{ font-size:.95rem; font-weight:700; color:var(--navy-800); } .platform-card p{ font-size:.83rem; line-height:1.55; color:var(--gray-600); margin-top:.5rem; } .pipeline-arrow{ display:flex; justify-content:center; margin:1.25rem 0; } .pipeline{ display:flex; width:100%; overflow-x:auto; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .pipeline__step{ clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%,10% 50%); padding:1.1rem 1.6rem 1.1rem 1.85rem; min-width:150px; flex-shrink:0; } .pipeline__step:not(:first-child){ margin-left:-16px; } .pipeline__step:last-child{ clip-path:polygon(6% 0,100% 0,100% 100%,6% 100%,0 50%); } .pipeline__step-label{ font-family:"Sora",sans-serif; font-weight:700; font-size:.83rem; color:#fff; margin-top:.55rem; } /* navy -> green progression, one shade per pipeline stage */ .pipeline__step--1{ background:#0c2549; } .pipeline__step--2{ background:#123948; } .pipeline__step--3{ background:#184d47; } .pipeline__step--4{ background:#1e6247; } .pipeline__step--5{ background:#237646; } .pipeline__step--6{ background:#1f7840; } .pipeline__step--7{ background:var(--green-700); } .platform-callout{ margin-top:2rem; } /* ========================================================================== 8. MOZAMBIQUE OPPORTUNITY ========================================================================== */ .mz{ position:relative; } .mz__wrap{ position:relative; } .mz__bg{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; } .mz__grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2.75rem; margin-top:2.75rem; align-items:start; } .mz__list{ display:flex; flex-direction:column; gap:1rem; } .mz__item{ display:flex; gap:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md); padding:1.25rem; } .mz__num{ font-family:"Sora",sans-serif; font-weight:800; font-size:1.55rem; flex-shrink:0; } .mz__num--1{ color:var(--cyan-400); } .mz__num--2{ color:var(--green-400); } .mz__num--3{ color:#8ab0da; } .mz__item h3{ font-size:.92rem; font-weight:700; color:var(--white); } .mz__item p{ font-size:.83rem; line-height:1.55; color:#c7d5e8; margin-top:.4rem; } .mz__disclaimer{ font-size:.76rem; line-height:1.5; color:#8ea6c4; margin-top:.4rem; display:flex; gap:8px; align-items:flex-start; } .mz__disclaimer svg{ flex-shrink:0; margin-top:2px; } /* Map extracted from the company profile (Mozambique Opportunity slide) — it carries its own labels and badges (cities, Rovuma Basin, SAPP), so no HTML overlays are layered on top of it. The card background is light so the map's white ground reads as intentional inside the dark section. */ .mz__map-wrap{ background:#f4f7fb; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg); padding:1rem; box-shadow:0 18px 44px rgba(4,12,26,.4); } .mz__map-wrap img{ width:100%; height:auto; border-radius:var(--radius-md); display:block; } /* ========================================================================== 9. BUSINESS LINES COMPARISON ========================================================================== */ .compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; margin-top:2.75rem; } .compare-card{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); } .compare-card__banner{ height:170px; position:relative; overflow:hidden; } .compare-card__banner--gas{ background:linear-gradient(120deg,#081b35,#123564 55%,#1a4278); } .compare-card__banner--solar{ background:linear-gradient(120deg,#123014,#1e6247 55%,#2f9e44); } /* Photos extracted from the company profile (Business Lines slide); the scrim keeps the white banner label legible over the photo. */ .compare-card__banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .compare-card__banner-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,18,35,0) 35%,rgba(8,18,35,.72) 100%); } .compare-card__banner-tag{ position:absolute; left:1.5rem; bottom:1rem; display:flex; align-items:center; gap:10px; } .compare-card__banner-icon{ width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; } .compare-card__banner h3{ font-size:1.19rem; font-weight:700; color:var(--white); } .compare-card__body{ padding:1.65rem; } .check-list li{ display:flex; gap:12px; } .check-list li + li{ margin-top:1rem; } .check-list svg{ flex-shrink:0; margin-top:2px; } .check-list span{ font-size:.88rem; line-height:1.55; color:var(--gray-700); } .compare-note{ display:flex; align-items:center; gap:14px; margin-top:1.75rem; padding:1.1rem 1.5rem; background:var(--gray-100); border-radius:var(--radius-md); } .compare-note svg{ flex-shrink:0; } .compare-note p{ font-size:.88rem; line-height:1.55; color:var(--gray-700); } /* ========================================================================== 10. POWER TRADING & REGIONAL MARKET ========================================================================== */ .trading-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; } .trading-card{ padding:1.75rem; border-top:3px solid var(--navy-700); } .trading-card--guardrail{ border-top-color:var(--green-500); } .trading-card__head{ display:flex; align-items:center; gap:12px; margin-bottom:1.1rem; } .trading-card__head h3{ font-size:1.03rem; font-weight:700; color:var(--navy-800); } .trading-card p{ font-size:.88rem; line-height:1.6; color:var(--gray-600); } .trading-card strong{ color:var(--navy-800); } .trading-banner{ display:flex; align-items:center; gap:18px; margin-top:1.5rem; padding:1.4rem 1.75rem; background:var(--navy-800); border-radius:var(--radius-md); } .trading-banner svg{ flex-shrink:0; } .trading-banner p{ font-size:.88rem; line-height:1.6; color:#dbe6f4; } .trading-banner strong{ color:var(--green-400); } /* ========================================================================== 11. PARTNERSHIP MODEL ========================================================================== */ .partner-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:2.5rem; margin-top:2.5rem; align-items:start; } .partner-heading{ font-size:.8rem; font-weight:700; letter-spacing:.06em; color:var(--gray-500); text-transform:uppercase; margin-bottom:1.1rem; } .pathway-list{ display:flex; flex-direction:column; gap:1.15rem; } .pathway-item{ display:flex; gap:16px; } .pathway-item__icon{ width:40px; height:40px; border-radius:100px; border:1.5px solid var(--navy-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .pathway-item h3{ font-size:.9rem; font-weight:700; color:var(--navy-800); } .pathway-item p{ font-size:.85rem; line-height:1.55; color:var(--gray-600); margin-top:.4rem; } .stakeholder-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; } .stakeholder-item{ display:flex; gap:12px; padding:1rem; background:var(--gray-100); border-radius:10px; } .stakeholder-item h3{ font-size:.85rem; font-weight:700; color:var(--navy-800); } .stakeholder-item p{ font-size:.75rem; color:var(--gray-600); margin-top:2px; } .stakeholder-item svg{ flex-shrink:0; } .partner-note{ display:flex; align-items:center; gap:18px; margin-top:2rem; padding:1.25rem 1.6rem; border:1px solid var(--gray-200); border-radius:var(--radius-md); flex-wrap:wrap; } .partner-note svg{ flex-shrink:0; } .partner-note p{ font-size:.88rem; line-height:1.6; color:var(--gray-700); } /* ========================================================================== 12. RISK MANAGEMENT ========================================================================== */ .risk-table{ margin-top:2.5rem; display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); } .risk-row{ display:flex; align-items:center; gap:1rem; padding:1.25rem 1.75rem; } .risk-row--1{ background:#0c2549; } .risk-row--2{ background:#123564; } .risk-row--3{ background:#1a4278; } .risk-row--4{ background:#2a5590; } .risk-row__icon{ width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .risk-row__title{ flex-shrink:0; width:180px; } .risk-row__title span{ font-size:.95rem; font-weight:700; color:var(--white); } .risk-row p{ font-size:.85rem; line-height:1.5; color:#c7d5e8; flex:1; margin:0; } .risk-row svg.check{ flex-shrink:0; } .progress-bar{ display:flex; align-items:center; gap:1rem; margin-top:1.75rem; } .progress-bar__end{ font-size:.75rem; font-weight:700; letter-spacing:.05em; color:var(--gray-600); text-transform:uppercase; flex-shrink:0; } .progress-bar__end--go{ color:var(--green-700); } .progress-bar__track{ flex:1; height:2px; background:repeating-linear-gradient(to right,var(--gray-300) 0,var(--gray-300) 6px,transparent 6px,transparent 12px); position:relative; } .progress-bar__mid{ position:absolute; left:50%; top:-9px; transform:translateX(-50%); font-size:.68rem; font-weight:700; letter-spacing:.05em; color:var(--green-700); text-transform:uppercase; background:var(--offwhite); padding:0 10px; white-space:nowrap; } /* ========================================================================== 13. GOVERNANCE & ESG ========================================================================== */ .gov-grid{ display:grid; grid-template-columns:.85fr 1.6fr; gap:2.25rem; margin-top:2.75rem; align-items:start; } .gov-panel{ border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:1.6rem; } .gov-list li{ display:flex; gap:14px; padding:1rem 0; border-top:1px solid var(--gray-200); } .gov-list li:last-child{ border-bottom:1px solid var(--gray-200); } .gov-list svg{ flex-shrink:0; } .gov-list p{ font-size:.85rem; line-height:1.55; color:var(--gray-700); } .gov-list strong{ color:var(--navy-800); } .esg-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.15rem; } .esg-card{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); background:var(--white); } .esg-card__banner{ height:118px; background:linear-gradient(135deg,#123564,#2a5590); position:relative; } .esg-card__banner svg.deco{ position:absolute; inset:0; width:100%; height:100%; } /* Photos extracted from the company profile's Governance & ESG slide. */ .esg-card__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .esg-card__icon{ position:absolute; bottom:-18px; left:1.25rem; width:36px; height:36px; border-radius:9px; background:var(--white); box-shadow:var(--shadow-card); display:flex; align-items:center; justify-content:center; } .esg-card__body{ padding:1.6rem 1.1rem 1.1rem; } .esg-card h3{ font-size:.92rem; font-weight:700; color:var(--navy-800); } .esg-card p{ font-size:.81rem; line-height:1.55; color:var(--gray-600); margin-top:.5rem; } /* ========================================================================== 14. EXECUTION ROADMAP ========================================================================== */ .roadmap-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:3.25rem; margin-top:2.75rem; } .roadmap-grid .roadmap{ margin-top:0; } .roadmap{ display:flex; flex-direction:column; } .roadmap__step{ display:flex; gap:1.35rem; } .roadmap__rail{ display:flex; flex-direction:column; align-items:center; flex-shrink:0; } .roadmap__marker{ width:38px; height:38px; border-radius:100px; color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Sora",sans-serif; font-weight:700; font-size:.92rem; flex-shrink:0; } .roadmap__marker--1{ background:#123564; } .roadmap__marker--2{ background:#1a4278; } .roadmap__marker--3{ background:#2a5590; } .roadmap__marker--4{ background:#1e6247; } .roadmap__marker--5{ background:#237646; } .roadmap__marker--6{ background:#2f9e44; } .roadmap__line{ width:1.5px; flex:1; background:var(--gray-300); margin-top:.25rem; min-height:1.25rem; } .roadmap__content{ padding-bottom:1.85rem; } .roadmap__content h3{ font-size:.98rem; font-weight:700; color:var(--navy-800); } .roadmap__content p{ font-size:.85rem; line-height:1.55; color:var(--gray-600); margin-top:.4rem; max-width:34rem; } /* ========================================================================== 15. FOOTER / CONTACT ========================================================================== */ .site-footer{ background:linear-gradient(150deg,#081b35,#0c2549 60%,#123564); position:relative; overflow:hidden; } /* Sunset transmission-line photo (from the profile's Execution Priorities slide) behind a heavy navy overlay, so all footer text keeps its contrast while the photo adds warmth to the closing section. */ .site-footer__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; } .site-footer__overlay{ position:absolute; inset:0; background:linear-gradient(150deg,rgba(8,27,53,.95) 0%,rgba(10,30,58,.92) 50%,rgba(12,37,73,.88) 100%); } .footer__top{ position:relative; padding-top:clamp(3.2rem,2.6rem + 2vw,5rem); } .footer__eyebrow{ margin-bottom:1rem; } .footer__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:3.5rem; align-items:start; padding-bottom:3.25rem; border-bottom:1px solid rgba(255,255,255,.12); } .footer__title{ font-size:clamp(1.5rem,1.3rem + 0.8vw,2rem); line-height:1.28; color:var(--white); max-width:30rem; } .footer__contacts{ display:flex; flex-direction:column; gap:1.1rem; margin-top:1.75rem; } .footer__contact-item{ display:flex; gap:14px; align-items:flex-start; } .footer__contact-item svg{ flex-shrink:0; margin-top:1px; } .footer__contact-item .lbl{ font-size:.8rem; font-weight:700; color:var(--white); } .footer__contact-item .val{ font-size:.88rem; color:#c7d5e8; margin-top:3px; } .footer__contact-link{ color:#c7d5e8 !important; } .footer__contact-link:hover{ color:var(--green-400) !important; } .footer__cta{ margin-top:1.9rem; } .footer__pills{ display:flex; flex-direction:column; gap:.75rem; } .footer__pill{ display:flex; align-items:center; gap:12px; padding:1rem 1.1rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px; } .footer__pill svg{ flex-shrink:0; } .footer__pill span{ font-size:.88rem; font-weight:600; color:#eaf1fb; } .footer__mid{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:1.75rem 0; flex-wrap:wrap; gap:1rem; } .footer__brand{ display:flex; align-items:center; gap:10px; } .footer__brand span{ font-family:"Sora",sans-serif; font-weight:700; font-size:.94rem; color:var(--white); } .footer__nav{ display:flex; gap:1.35rem; flex-wrap:wrap; } .footer__nav a{ font-size:.81rem; color:#a8bcd6; } .footer__legal{ position:relative; padding:1.4rem 0; border-top:1px solid rgba(255,255,255,.12); } .footer__meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; } .footer__meta span{ font-size:.75rem; color:#6b81a0; } /* ========================================================================== 16. RESPONSIVE ========================================================================== */ /* ---- Nav collapses to hamburger ---- Breakpoint is wider than the content grids' (1180px, matching .wrap's max-width) because the nav has six links plus a language switcher and CTA on one line — the Portuguese labels in particular need more room than a narrower "tablet" breakpoint would leave them, and a cramped wrapped nav row is worse than handing over to the mobile menu a bit earlier. */ @media (max-width: 1180px){ .nav__links, .nav__cta, .nav__lang{ display:none; } .nav__toggle{ display:inline-flex; } /* Closed panel must not stay in the header's flex flow — .nav__panel is `display:contents` by default, so its (invisible, hidden-children) wrapper elements