/* ========================================================= CLEANADVANCE — BRAND LAYER CleanAdvance green identity (logo + the site's earlier CSS): green #2E8B57 primary brand green green-dark #1F6B41 deep green green-fresh #B9E351 fresh accent, used on dark surfaces ink #0D1F1A deep charcoal-green for dark sections Fully green identity: the primary CTA is brand green with white text. No yellow anywhere in the system. Loaded last: this file governs palette, type scale and components. ========================================================= */ :root{ /* ---- CleanAdvance greens (logo + previous site CSS, not invented) ---- */ --ca-green-deep: #036E36; /* logo leaf green */ --ca-green: #2E8B57; /* previous --forest: primary brand green */ --ca-green-dark: #1F6B41; /* previous --forest-dark */ --ca-green-fresh: #B9E351; /* previous --lime: fresh accent on dark */ --ca-teal: #00C2A8; /* previous --emerald, used sparingly */ --ca-yellow: #F5C53C; /* logo yellow — very small accent only */ --ca-fresh: #54A343; /* Fresh Green — every icon on the site */ --ca-kelly: #4CBB17; /* Kelly Green — section labels on dark */ --ca-kelly-ink: #3C9612; /* same hue, deepened for light surfaces */ /* ---- neutrals ---- */ --ca-ink: #0D1F1A; /* previous --navy: deep charcoal-green */ --ca-ink-2: #143026; /* previous --navy-soft */ --ca-bone: #F7F5F1; /* warm off-white */ --ca-white: #FFFFFF; --ca-grey: #66756D; /* secondary text */ --ca-body: #16231D; /* body text */ --ca-line: rgba(22,35,29,.13); --ca-line-dk: rgba(255,255,255,.15); /* ---- remap the existing system tokens ---- */ --navy: var(--ca-ink); --navy-soft: var(--ca-ink-2); --forest: var(--ca-green); --forest-dark: var(--ca-green-dark); --emerald: var(--ca-teal); --gold: var(--ca-green); --lime: var(--ca-green-fresh); --lime-deep: var(--ca-green); --bg: var(--ca-white); --bg-alt: var(--ca-bone); --text: var(--ca-body); --text-soft: var(--ca-grey); --text-inverse: #F3F1EA; --text-inverse-soft: rgba(255,255,255,.72); --border: var(--ca-line); --border-inverse: var(--ca-line-dk); --grad-brand: linear-gradient(120deg, var(--ca-green-dark) 0%, var(--ca-green) 100%); --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --sp-section: 118px; --sp-gap: 28px; } [data-theme="dark"]{ --bg: var(--ca-ink); --bg-alt: var(--ca-ink-2); --text: #EEF1F3; --text-soft: rgba(255,255,255,.66); --border: var(--ca-line-dk); } /* ========================================================= TYPOGRAPHY — editorial scale ========================================================= */ body{ font-family:'Inter',-apple-system,sans-serif; color:var(--text); font-size:16px; line-height:1.7; } h1,h2,h3,h4,.hm-h2,.brand-name{ font-family:'Sora','Inter',-apple-system,sans-serif; font-weight:800; letter-spacing:-.035em; text-wrap:balance; } /* Hero H1 — large and dominant, identical on every page */ .hm-hero h1, .hm-pagehero h1{ font-size: clamp(2.1rem, 3.9vw, 3.35rem); line-height:1.04; letter-spacing:-.035em; font-weight:800; color:#fff; margin:0 0 26px; max-width:820px; /* never let a headline span the full viewport */ } /* the signature: one highlighted phrase in CleanAdvance green */ .hm-hero h1 em, .hm-pagehero h1 em, .ca-hl{ font-style:normal; color:var(--ca-green); } /* Section H2 — editorial, tight, two-line by design */ .hm-h2, .hm-section h2:not(.cta-banner h2){ font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height:1.14; letter-spacing:-.03em; font-weight:800; max-width:780px; } .hm-head.center .hm-h2{ margin-left:auto; margin-right:auto; } .hm-dark .hm-h2, .hm-dark h2{ color:#fff; } h3{ font-size:1.1rem; line-height:1.3; letter-spacing:-.02em; } h4{ font-size:1.02rem; line-height:1.35; letter-spacing:-.02em; } .hm-lede, .hm-hero-sub{ font-size:1.05rem; line-height:1.72; color:var(--text-soft); max-width:56ch; font-weight:400; } .hm-hero-sub{ color:rgba(255,255,255,.82); } /* ========================================================= EYEBROW / SECTION MARKER — green rule + letterspaced label ========================================================= */ .hm-kicker, .hm-hero-kicker, .hm-pagehero-kicker, .eyebrow{ display:inline-flex; align-items:center; gap:14px; /* same letterforms as the big titles */ font-family:'Sora','Inter',-apple-system,sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--ca-body); background:none; border:none; padding:0; margin:0 0 22px; } /* the rule is the yellow accent — the only yellow on the site */ .hm-kicker::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before, .eyebrow::before{ content:""; width:34px; height:2px; background:var(--ca-yellow); border-radius:0; flex-shrink:0; } /* on dark surfaces the label itself carries the yellow */ .hm-dark .hm-kicker, .hm-hero-kicker, .hm-pagehero-kicker, .section-dark .eyebrow, .ab-network .hm-kicker{ color:var(--ca-yellow); } .hm-dark .hm-kicker::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before{ background:var(--ca-yellow); } /* ========================================================= SPACING RHYTHM ========================================================= */ .hm-section{ padding: var(--sp-section) 0; } .hm-head{ margin-bottom:64px; } .hm-head .hm-lede{ margin-top:22px; } @media (max-width:900px){ :root{ --sp-section:84px; } .hm-head{ margin-bottom:44px; } } /* ========================================================= BUTTONS — one system, green primary with white text ========================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 30px; border-radius:2px; font-family:'Inter',sans-serif; font-size:.875rem; font-weight:700; letter-spacing:.02em; text-decoration:none; border:1px solid transparent; transition: background .28s cubic-bezier(.4,0,.2,1), color .28s, border-color .28s, transform .28s; } .btn-sm{ height:42px; padding:0 20px; font-size:.8rem; } .btn-primary, .btn-gold{ background:var(--ca-green); color:#fff; border-color:var(--ca-green); } .btn-primary:hover, .btn-gold:hover{ background:var(--ca-green-dark); border-color:var(--ca-green-dark); transform:translateY(-2px); } .btn-outline{ background:transparent; color:var(--ca-body); border-color:var(--ca-line); } .btn-outline:hover{ border-color:var(--ca-ink); background:transparent; transform:translateY(-2px); } .hm-hero .btn-outline, .hm-pagehero .btn-outline, .hm-dark .btn-outline{ color:#fff; border-color:rgba(255,255,255,.42); } .hm-hero .btn-outline:hover, .hm-pagehero .btn-outline:hover, .hm-dark .btn-outline:hover{ border-color:var(--ca-green); color:var(--ca-green); } /* ========================================================= HERO ========================================================= */ .hm-hero, .hm-pagehero{ background:var(--ca-ink); } .hm-hero-bg::after, .hm-pagehero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(7,26,38,.94) 0%, rgba(7,26,38,.80) 46%, rgba(7,26,38,.44) 100%), linear-gradient(180deg, rgba(7,26,38,.55) 0%, transparent 40%, rgba(7,26,38,.72) 100%); } .hm-hero-tag, .hm-pagehero .breadcrumb{ font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); } .hm-hero-actions, .hm-pagehero-actions{ gap:16px; } /* thin green rule under the hero copy */ .hm-hero-tag{ position:relative; padding-top:24px; } .hm-hero-tag::before{ content:""; position:absolute; top:0; left:0; width:56px; height:2px; background:var(--ca-green-fresh); } /* ========================================================= CARDS / PANELS — thin border, minimal radius, green accent ========================================================= */ .ex-cell, .ab-guide-card, .td-material, .pr-index a, .hm-svc-card, .cn-service, .hm-net2-stat{ border-radius:0; } .ex-grid, .ab-guide-grid, .td-materials, .pr-index, .hm-net2-stats, .ab-mv{ border-radius:var(--radius-lg); overflow:hidden; } .ex-cell::before, .ab-guide-card::before, .td-material::before, .ab-mv-block::before{ background:var(--ca-green) !important; height:2px; } .ex-cell-num, .ab-guide-num, .td-material-num, .pr-index span, .ab-step-num, .cn-step-num, .cn-service-num, .hm-svc-card-num{ color:var(--ca-green-dark) !important; opacity:1 !important; font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:.14em; } .cn-step-num{ border-color:var(--ca-green) !important; background:var(--bg) !important; border-radius:50%; } .ab-step-num{ border:0 !important; background:none !important; border-radius:0; } .ex-path-num{ color:var(--ca-green) !important; border-color:rgba(46,139,87,.5) !important; } .hm-svc-card{ border:1px solid var(--border); box-shadow:none; } .hm-svc-card:hover{ box-shadow:none; transform:translateY(-4px); border-color:var(--ca-green); } .hm-svc-card-num{ background:var(--ca-green) !important; color:var(--ca-ink) !important; } .hm-svc-arrow{ color:var(--ca-green-dark) !important; } /* dark-section dividers / flow lines pick up the accent */ .ex-path-line, .cn-chain-line, .ab-position-line, .hm-net2-arc, .hm-split-mid::before, .hm-split-mid::after{ background-image:repeating-linear-gradient(90deg, var(--ca-green) 0 6px, transparent 6px 16px) !important; } .cn-chain-dot{ background:var(--ca-green) !important; box-shadow:0 0 0 6px rgba(46,139,87,.14) !important; } .hm-net2-dot{ background:var(--ca-green) !important; } .hm-net2-dot--hub{ background:var(--ca-green) !important; box-shadow:0 0 0 4px rgba(46,139,87,.2) !important; } .hm-net2-stat b{ color:var(--ca-green-dark) !important; } /* pills */ .pill{ border-radius:2px; border:1px solid var(--border); background:transparent; font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.06em; padding:9px 14px; transition:border-color .25s, color .25s; } .pill:hover{ border-color:var(--ca-green); } /* ========================================================= DARK SECTIONS / CTA ========================================================= */ .hm-dark, .section-dark{ background:var(--ca-ink); color:var(--text-inverse); } .hm-alt{ background:var(--bg-alt); } .section-pattern-bg{ background:var(--ca-ink) !important; } .section-pattern-bg::before, .section-pattern-bg::after{ display:none; } /* the closing CTA is an oval — one shape, every page */ .cta-banner{ /* a living green rather than near-black ink */ background: linear-gradient(118deg, #123D2B 0%, #17543A 42%, #23724C 100%) !important; border-radius: 260px; padding: 88px 118px; position:relative; overflow:hidden; transition: box-shadow .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1); } /* a soft green light inside the curve instead of the old top rule */ .cta-banner::before{ content:""; position:absolute; z-index:0; pointer-events:none; left:52%; top:-70%; width:62%; height:240%; background: radial-gradient(closest-side, rgba(185,227,81,.20), rgba(46,139,87,.10) 55%, transparent 76%); } .cta-banner::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; border:1px solid rgba(185,227,81,.24); } .cta-banner > *{ position:relative; z-index:1; } .cta-banner:hover{ box-shadow: 0 34px 70px -38px rgba(6,18,14,.72); } @media (max-width:1100px){ .cta-banner{ border-radius:150px; padding:74px 76px; } } @media (max-width:820px){ .cta-banner{ border-radius:64px; padding:58px 40px; } } @media (max-width:520px){ .cta-banner{ border-radius:36px; padding:46px 26px; } } @media (prefers-reduced-motion: reduce){ .cta-banner{ transition:none; } } .cta-banner h2{ color:#fff; } .cta-banner p, .hm-final-line{ color:rgba(255,255,255,.75) !important; } .cta-banner .btn[style]{ background:var(--ca-green) !important; color:var(--ca-ink) !important; } .hm-final-banner .hm-kicker{ color:#fff; } .hm-final-banner .hm-final-points{ color:rgba(255,255,255,.9); } /* ========================================================= MICRO-INTERACTIONS — restrained ========================================================= */ .ex-cell, .ab-guide-card, .td-material, .pr-index a{ transition: background .3s ease, transform .3s ease; } .ex-cell:hover, .ab-guide-card:hover, .td-material:hover, .pr-index a:hover{ background:var(--ca-bone); } [data-theme="dark"] .ex-cell:hover, [data-theme="dark"] .ab-guide-card:hover{ background:var(--ca-ink-2); } a, .btn{ -webkit-tap-highlight-color:transparent; } /* nav */ .nav-links a.active{ color:var(--ca-body); font-weight:700; } .nav-links a.active::after{ background:var(--ca-green); } .brand-tag{ color:var(--ca-green-dark); letter-spacing:.08em; } /* footer */ .footer{ background:var(--ca-ink); } .footer-positioning{ color:var(--ca-green) !important; letter-spacing:.2em; } .footer h4{ font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#fff; } .footer a:hover{ color:var(--ca-green); } /* util bar */ .util-bar{ background:var(--ca-ink); } .util-bar a{ color:var(--ca-green); } /* ========================================================= CORRECTIONS ========================================================= */ /* the "challenge" tags were red — bring them into the palette as neutral technical chips with a yellow marker */ .hm-tag{ background:transparent !important; border:1px solid var(--ca-line) !important; color:var(--ca-body) !important; border-radius:2px !important; font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:10px 16px; } [data-theme="dark"] .hm-tag{ border-color:var(--ca-line-dk) !important; color:rgba(255,255,255,.82) !important; } .hm-tag .dot{ background:var(--ca-green) !important; width:5px; height:5px; } /* centred section headlines need more measure than left-aligned ones */ .hm-head.center .hm-h2, .hm-head[style*="center"] .hm-h2, .text-center .hm-h2{ max-width:26ch; } .hm-section .hm-h2{ max-width:24ch; } .hm-resolve{ font-weight:600; color:var(--ca-body); } /* hero footline */ .hm-hero-footline{ color:rgba(255,255,255,.5); } .hm-hero-footline b{ color:var(--ca-green); } /* brief panel on hero */ .hm-brief{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); backdrop-filter:blur(6px); } .hm-brief-list svg{ color:var(--ca-green); } /* ============================================================ SECTION LABELS — Technical Focus / Sourcing Profile / Commercial Execution and their siblings. One size, one weight, one Kelly Green across every page. ============================================================ */ .hm-brief-top, .hm-diff-panel-head h4, .ex-diff-label{ font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase; letter-spacing:.15em; font-size:.86rem; /* was .68–.76rem */ line-height:1.3; } /* on dark surfaces: the Kelly Green as specified */ .hm-brief-top, .hm-diff-panel-head h4{ color:var(--ca-kelly) !important; } /* on light surfaces: same hue, deepened so it stays legible */ .ex-diff-label{ color:var(--ca-kelly-ink) !important; } [data-theme="dark"] .ex-diff-label{ color:var(--ca-kelly) !important; } .hm-brief-top{ letter-spacing:.2em; } /* section rhythm: alternate bone / white / ink deliberately */ .hm-section + .hm-section:not(.hm-alt):not(.hm-dark){ background:var(--bg); } /* material index now carries four categories */ .pr-index{ grid-template-columns:repeat(4,1fr); } @media (max-width:1100px){ .pr-index{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .pr-index{ grid-template-columns:1fr; } } /* nav link colour must not win over the primary button */ .nav-links a.btn-primary, .nav-links a.btn-primary:hover{ color:#fff !important; } .nav-links a.btn-primary{ padding:0 22px !important; height:42px; display:inline-flex; align-items:center; } /* dark theme: keep light-surface components on real dark surfaces */ [data-theme="dark"] .hm-section:not(.hm-dark){ background:var(--bg); } [data-theme="dark"] .hm-section.hm-alt{ background:var(--bg-alt); } [data-theme="dark"] .pill{ color:var(--text); border-color:var(--ca-line-dk); } [data-theme="dark"] .pill-warn{ background:rgba(248,113,113,.14); color:#fca5a5; border-left-color:#f87171; } [data-theme="dark"] .cn-why-label, [data-theme="dark"] .ab-mv-label{ color:var(--ca-green); } [data-theme="dark"] .ex-cell-num, [data-theme="dark"] .ab-guide-num, [data-theme="dark"] .td-material-num, [data-theme="dark"] .pr-index span, [data-theme="dark"] .hm-net2-stat b, [data-theme="dark"] .hm-svc-arrow{ color:var(--ca-green) !important; } [data-theme="dark"] .ab-step-num, [data-theme="dark"] .cn-step-num{ color:var(--ca-green) !important; } /* eyebrow must follow the theme, not a fixed dark ink */ .hm-kicker, .eyebrow{ color:var(--text); } .hm-dark .hm-kicker, .hm-dark .eyebrow, .section-dark .eyebrow, .ab-network .hm-kicker, .hm-hero-kicker, .hm-pagehero-kicker{ color:#fff; } /* language badge still carried the old teal tint */ .lang-btn, .lang-switch .lang-btn{ background:transparent; border:1px solid var(--border); color:var(--text); } .lang-btn #lang-current, .lang-btn span{ color:var(--text); } .lang-menu{ background:var(--bg); border:1px solid var(--border); } .lang-option{ color:var(--text); } .lang-option:hover{ background:var(--bg-alt); } /* clear the last teal remnants from the pre-logo palette */ [data-theme="dark"] .eyebrow{ color:var(--text) !important; background:transparent !important; border-color:transparent !important; } [data-theme="dark"] .lang-option.active, .lang-option.active{ color:var(--ca-green-dark) !important; background:transparent !important; } [data-theme="dark"] .lang-option.active{ color:var(--ca-green) !important; } .map-hq-dot{ background:var(--ca-green) !important; box-shadow:0 0 0 2px rgba(46,139,87,.4) !important; } .leaflet-tooltip.map-label-hq{ background:rgba(7,26,38,.95) !important; } /* ========================================================= GREEN RESTORATION — final overrides yellow survives ONLY on the primary "Start a Conversation" button ========================================================= */ /* hero highlight + dark-surface accents use the fresh green */ .hm-hero h1 em, .hm-pagehero h1 em, .hm-dark .ca-hl, .ab-network .ca-hl{ color:var(--ca-green-fresh); } /* light-surface highlight uses the brand green */ .ca-hl{ color:var(--ca-green); } .hm-dark .hm-kicker::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before, .hm-final-banner .hm-kicker::before{ background:var(--ca-green-fresh); } /* the LETTERING takes the fresh green used for "Connected across key markets.", not the fill — the button itself stays a light outline */ .cta-banner .btn[style]{ background:transparent !important; color:var(--ca-green-fresh) !important; border-color:rgba(185,227,81,.55) !important; } .cta-banner .btn[style]:hover{ background:var(--ca-green-fresh) !important; color:var(--ca-ink) !important; border-color:var(--ca-green-fresh) !important; } .nav-links a.active{ color:var(--ca-green-dark); } .nav-links a.active::after{ background:var(--ca-green); } .brand-tag{ color:var(--ca-green-dark); } .footer-positioning{ color:var(--ca-green-fresh) !important; } .footer a:hover{ color:var(--ca-green-fresh); } .util-bar a{ color:var(--ca-green-fresh); } [data-theme="dark"] .lang-option.active{ color:var(--ca-green-fresh) !important; } .map-hq-dot{ background:var(--ca-green) !important; box-shadow:0 0 0 2px rgba(46,139,87,.4) !important; } /* dark-section numerals / flow lines */ .ex-path-num{ color:var(--ca-green-fresh) !important; border-color:rgba(185,227,81,.45) !important; } .ex-path-line, .cn-chain-line, .ab-position-line, .hm-net2-arc, .hm-split-mid::before, .hm-split-mid::after{ background-image:repeating-linear-gradient(90deg, var(--ca-green-fresh) 0 6px, transparent 6px 16px) !important; } .cn-chain-dot{ background:var(--ca-green-fresh) !important; box-shadow:0 0 0 6px rgba(185,227,81,.14) !important; } .hm-net2-dot--hub{ background:var(--ca-green) !important; box-shadow:0 0 0 4px rgba(46,139,87,.2) !important; } [data-theme="dark"] .ex-cell-num, [data-theme="dark"] .ab-guide-num, [data-theme="dark"] .td-material-num, [data-theme="dark"] .pr-index span, [data-theme="dark"] .hm-net2-stat b, [data-theme="dark"] .hm-svc-arrow, [data-theme="dark"] .cn-why-label, [data-theme="dark"] .ab-mv-label, [data-theme="dark"] .ab-step-num, [data-theme="dark"] .cn-step-num{ color:var(--ca-green-fresh) !important; } [data-theme="dark"] .ab-step-num, [data-theme="dark"] .cn-step-num{ border-color:var(--ca-green-fresh) !important; } /* Expansion globe: return lanes animate the opposite way to show two-way trade */ .ex-globe-arc--rev, .ex-globe-arc--revb{ animation: exArcBack 4s linear infinite; } .ex-globe-arc--revb{ animation-duration:4.8s; } @keyframes exArcBack{ to{ stroke-dashoffset:52; } } /* the inline white-button style used inside CTA banners is superseded by the green primary above; keep hover legible in dark theme too */ [data-theme="dark"] .cta-banner .btn[style]{ background:var(--ca-green) !important; color:#fff !important; } [data-theme="dark"] .cta-banner .btn[style]:hover{ background:var(--ca-green-fresh) !important; color:var(--ca-ink) !important; } /* ========================================================= SECTION MARKERS — final authority "THE CHALLENGE", "CATEGORY 01", "THE CLEANADVANCE DIFFERENCE", "WHO WE ARE" and every other rule-and-label eyebrow. Display letterforms (Sora) + logo yellow as a very small accent. ========================================================= */ .hm-kicker, .hm-hero-kicker, .hm-pagehero-kicker, .eyebrow{ font-family:'Sora','Inter',-apple-system,sans-serif !important; font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } /* the rule: logo yellow everywhere, light and dark */ .hm-kicker::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before, .eyebrow::before, .hm-dark .hm-kicker::before, .hm-final-banner .hm-kicker::before, [data-theme="dark"] .hm-kicker::before, [data-theme="dark"] .eyebrow::before{ background:var(--ca-yellow) !important; } /* the label: yellow on dark surfaces, ink on light (yellow text on white is ~1.9:1 and unreadable, so the accent stays in the rule) */ .hm-dark .hm-kicker, .hm-dark .eyebrow, .section-dark .eyebrow, .ab-network .hm-kicker, .hm-hero-kicker, .hm-pagehero-kicker, .hm-final-banner .hm-kicker{ color:var(--ca-yellow) !important; } .hm-kicker, .eyebrow{ color:var(--text); } [data-theme="dark"] .eyebrow{ color:var(--text) !important; } /* ========================================================= ICONS — one colour system, Fresh Green #54A343 Applies to every line icon on every page. Icons that sit white on a filled chip or over a photo keep their white. ========================================================= */ .hm-diff-stat .ic, .hm-diff--light .hm-diff-stat .ic, [data-theme="dark"] .hm-diff--light .hm-diff-stat .ic, .hm-diff-hex, .hm-diff-hex--tech, .hm-diff-hex--comm, .hm-diff--light .hm-diff-hex--tech, .hm-diff--light .hm-diff-hex--comm, [data-theme="dark"] .hm-diff--light .hm-diff-hex--tech, [data-theme="dark"] .hm-diff--light .hm-diff-hex--comm, .hm-diff-panel li svg, .hm-diff-panel--tech li svg, .hm-diff-panel--comm li svg, .hm-diff--light .hm-diff-panel--tech li svg, .hm-diff--light .hm-diff-panel--comm li svg, [data-theme="dark"] .hm-diff--light .hm-diff-panel--tech li svg, [data-theme="dark"] .hm-diff--light .hm-diff-panel--comm li svg, .hm-brief-list svg, .industry-card .ic, [data-theme="dark"] .industry-card .ic, .contact-info-item .ic, .pcat-card .ic, [data-theme="dark"] .pcat-card .ic, .mv-card .ic, .accordion-item summary .ic, .hm-svc-arrow, .ex-diff-item svg, .cn-why svg, .td-cat-body svg, .cn-schema, .cn-schema svg, .cn-service-go, .cn-service-go svg{ color: var(--ca-fresh) !important; } /* keep the icon chips' own tint in step with the new green */ .hm-diff-hex--tech, .hm-diff-hex--comm, .hm-diff--light .hm-diff-hex--tech, .hm-diff--light .hm-diff-hex--comm{ background: rgba(84,163,67,.15) !important; } /* icons that are deliberately white keep their white */ .value-card.photo-bg .ic, .wwd-item .ic, .trust-card .ic, .hm-svc-card-num, .btn svg{ color:#fff !important; } /* Home globe: the white halo behind the routes and around the markers becomes ink on dark surfaces so the shapes stay readable */ [data-theme="dark"] .hm-net2-halo{ stroke: var(--ca-ink) !important; opacity:.9; } [data-theme="dark"] .hm-net2-ring{ stroke: var(--ca-ink) !important; } [data-theme="dark"] .hm-net2-land{ fill-opacity:.34; } /* the six-cell index is a ghost numeral, not a solid label — this must beat the generic numeral rule earlier in this file */ .ex-cell-num{ color: var(--ca-green) !important; opacity:.10 !important; font-family:'Sora','Inter',sans-serif !important; letter-spacing:-.05em !important; } .ex-cell:hover .ex-cell-num{ opacity:.19 !important; } [data-theme="dark"] .ex-cell-num{ color: var(--ca-green-fresh) !important; opacity:.15 !important; } [data-theme="dark"] .ex-cell:hover .ex-cell-num{ opacity:.26 !important; } /* ========================================================= CATEGORY INDEX (Trading) — jump links as cards ========================================================= */ .pr-index{ gap:14px !important; background:none !important; border:0 !important; border-radius:0 !important; overflow:visible !important; } .pr-index a{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px; padding:24px 22px 26px !important; background: var(--bg) !important; border:1px solid var(--border) !important; border-radius:8px !important; transition: transform .45s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .45s cubic-bezier(.2,.7,.3,1); } .pr-index a::before{ content:""; position:absolute; top:0; left:0; width:0; height:3px; background: var(--ca-green); transition: width .5s cubic-bezier(.2,.7,.3,1); } /* an arrow that slides in on hover */ .pr-index a::after{ content:"→"; position:absolute; right:20px; bottom:22px; font-size:1rem; color: var(--ca-green); opacity:0; transform: translateX(-8px); transition: opacity .4s ease, transform .45s cubic-bezier(.2,.7,.3,1); } .pr-index a:hover{ transform: translateY(-4px); border-color: rgba(46,139,87,.42) !important; box-shadow: 0 16px 34px -20px rgba(13,31,26,.32); background: var(--bg) !important; } .pr-index a:hover::before{ width:100%; } .pr-index a:hover::after{ opacity:1; transform: translateX(0); } .pr-index b{ font-size:.98rem; padding-right:26px; } @media (prefers-reduced-motion: reduce){ .pr-index a, .pr-index a::before, .pr-index a::after{ transition:none; } .pr-index a:hover{ transform:none; } } /* deeper ghost numeral to sit on the darker card surface */ .ex-cell-num{ opacity:.14 !important; } .ex-cell:hover .ex-cell-num{ opacity:.24 !important; } /* buttons inside the oval take the same rounded language */ .cta-banner .btn{ border-radius:999px; padding:0 34px; } /* ========================================================= SHAPE LANGUAGE — sitewide Every button is a pill; every panel, card, image and field carries the same soft corner as the About page cards. ========================================================= */ :root{ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; } [data-theme="dark"]{ --radius-sm:8px; --radius-md:10px; --radius-lg:12px; } /* ---- buttons: oval everywhere, including the nav CTA ---- */ .btn, .btn-sm, .nav-links a.btn-primary, .lang-btn, button.btn{ border-radius:999px !important; } .btn{ padding:0 32px; } .btn-sm{ padding:0 22px; } .nav-links a.btn-primary{ padding:0 24px !important; } /* ---- chips ---- */ .pill, .service-pills .pill{ border-radius:999px !important; } .pill-warn{ border-radius:10px; } /* ---- panels, cards, media and fields ---- */ .hm-svc-card, .hm-svc-card-photo, .hm-prod-card2, .hm-brief, .hm-diff-panel, .hm-diff-panel-inner, .hm-net2-stat, .value-card, .industry-card, .pcat-card, .trust-card, .mv-card, .wwd-item, .accordion-item, .cn-service, .cn-practice2-media, .td-cat-media, .td-material, .ex-cell, .pr-index a, .ab-mv-block, .ab-open-media, .contact-info-item, .contact-card, .map-wrap, .lang-menu, .hm-final-points span, .footer-newsletter input, form input, form textarea, form select, .form-group input, .form-group textarea, .form-group select{ border-radius: var(--radius-lg); } /* the icon chips stay circular */ .hm-svc-card-num, .ab-step-num, .cn-step-num, .ex-path-num, .cn-approach-badge, .hm-diff-hex, .contact-fab, .to-top, .theme-toggle{ border-radius:50% !important; } /* photos that sit at the top of a card only round their top corners */ .hm-svc-card-photo{ border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* ========================================================= TRADING / EXPANSION — premium visual treatment 1. "What we provide": clean white cards on a photographic band 2. "How it works": the process over a port photograph and a discreet dotted world ========================================================= */ /* ---------- 1 · the grid sits on a soft photographic band ---------- */ .ex-grid-wrap{ position:relative; } /* the whole section is a photograph: the cards float on it */ .hm-section.has-photo{ position:relative; isolation:isolate; overflow:hidden; } .ex-grid-photo{ position:absolute; inset:0; z-index:-1; display:block; pointer-events:none; overflow:hidden; } .ex-grid-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block; transform: scale(1.06) translateY(var(--ex-par, 0px)); transition: transform 1.6s cubic-bezier(.2,.8,.3,1); will-change: transform; } /* a warm scrim: the photo reads clearly at the top and settles behind the cards */ .ex-grid-photo::after{ content:""; position:absolute; inset:0; background: /* clean ground under the heading, on the left */ radial-gradient(78% 62% at 6% 20%, rgba(247,245,241,.90) 0%, rgba(247,245,241,.55) 46%, transparent 74%), linear-gradient(180deg, rgba(247,245,241,.18) 0%, rgba(247,245,241,.52) 34%, rgba(247,245,241,.86) 62%, var(--ca-bone) 96%); } [data-theme="dark"] .ex-grid-photo::after{ background: radial-gradient(78% 62% at 6% 20%, rgba(13,31,26,.92) 0%, rgba(13,31,26,.6) 46%, transparent 74%), linear-gradient(180deg, rgba(13,31,26,.42) 0%, rgba(13,31,26,.72) 34%, rgba(13,31,26,.9) 62%, var(--ca-ink) 96%); } /* the heading sits on the strongest part of the photo, so give it weight */ .has-photo .hm-head{ position:relative; } .has-photo .hm-kicker{ text-shadow: 0 1px 14px rgba(247,245,241,.9); } .has-photo .hm-h2{ text-shadow: 0 1px 16px rgba(247,245,241,.85); } [data-theme="dark"] .has-photo .hm-kicker, [data-theme="dark"] .has-photo .hm-h2{ text-shadow: 0 1px 16px rgba(13,31,26,.9); } /* ---------- the cards: white, calm, with an icon chip ---------- */ .ex-grid{ gap:22px !important; } .ex-cell{ background:#fff !important; border:1px solid rgba(22,35,29,.09) !important; border-radius:16px !important; padding:34px 34px 32px !important; box-shadow: 0 2px 3px rgba(13,31,26,.03), 0 14px 30px -22px rgba(13,31,26,.20); display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:20px; row-gap:14px; align-items:start; } .ex-cell::after{ display:none; } /* drop the old corner glow */ .ex-cell::before{ height:0 !important; } /* and the old top rule */ /* round pale-green icon chip */ .ex-cell-ic{ grid-column:1; grid-row:1; width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: rgba(84,163,67,.12); color: var(--ca-fresh); transition: background .45s var(--ease), transform .5s cubic-bezier(.2,.8,.3,1); } .ex-cell-ic svg{ width:25px; height:25px; } .ex-cell:hover .ex-cell-ic{ background: rgba(84,163,67,.2); transform: translateY(-2px); } /* the numeral moves to the top right, with its own short rule */ .ex-cell-num{ position:absolute !important; top:32px; right:32px; z-index:1 !important; font-family:'Sora','Inter',sans-serif !important; font-size:1.72rem !important; font-weight:700 !important; letter-spacing:-.03em !important; line-height:1 !important; color: rgba(84,163,67,.55) !important; opacity:1 !important; transform:none !important; transition: color .4s var(--ease); padding-bottom:9px; } .ex-cell-num::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background: var(--ca-fresh); border-radius:2px; transform:scaleX(.62); transform-origin:left; transition: transform .5s cubic-bezier(.2,.8,.3,1); } .ex-cell:hover .ex-cell-num{ color: var(--ca-fresh) !important; } .ex-cell:hover .ex-cell-num::after{ transform:scaleX(1); } .ex-cell h3{ grid-column:2; grid-row:1; align-self:center; font-size:1.12rem !important; line-height:1.28; margin:0 !important; padding-right:56px; color: var(--ca-body); } .ex-cell p{ grid-column:1 / -1; grid-row:2; font-size:.94rem !important; line-height:1.68; color: var(--ca-grey) !important; margin:0 !important; } .ex-cell:hover{ transform: translateY(-6px); border-color: rgba(84,163,67,.34) !important; box-shadow: 0 3px 4px rgba(13,31,26,.04), 0 26px 46px -26px rgba(13,31,26,.28); } [data-theme="dark"] .ex-cell{ background: var(--ca-ink-2) !important; border-color: rgba(255,255,255,.09) !important; } [data-theme="dark"] .ex-cell h3{ color:#fff; } /* ---------- 2 · the process over a port photograph ---------- */ .ex-path--visual{ position:relative; overflow:hidden; } .ex-path-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; display:block; } .ex-path-bg-photo{ position:absolute; top:-8%; right:-2%; width:52%; height:62%; object-fit:cover; opacity:.19; filter:saturate(.5) contrast(.92); -webkit-mask-image: radial-gradient(105% 120% at 92% 2%, #000 20%, rgba(0,0,0,.4) 52%, transparent 78%); mask-image: radial-gradient(105% 120% at 92% 2%, #000 20%, rgba(0,0,0,.4) 52%, transparent 78%); } .ex-path-bg-dots{ position:absolute; top:8%; left:-4%; width:78%; opacity:.07; filter:none; -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 66%, transparent 96%); mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 66%, transparent 96%); } .ex-path--visual > .container{ position:relative; z-index:1; } /* ---------- the steps: ringed icon, arrow, stem, numeral ---------- */ .ex-path--visual .ex-path-line{ display:none; } .ex-path--visual .ex-path-step{ padding-right:26px; } .ex-path--visual .ex-path-ic{ position:relative; z-index:2; width:74px; height:74px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color: var(--ca-green-fresh); border:1.5px solid rgba(185,227,81,.55); background: radial-gradient(circle at 50% 50%, rgba(185,227,81,.10), rgba(185,227,81,0) 72%); box-shadow: 0 0 0 6px rgba(185,227,81,.05), 0 0 22px -6px rgba(185,227,81,.35); transition: border-color .45s var(--ease), box-shadow .5s var(--ease), transform .5s cubic-bezier(.2,.8,.3,1); } .ex-path--visual .ex-path-ic svg{ width:29px; height:29px; } .ex-path--visual .ex-path-step:hover .ex-path-ic{ transform: translateY(-3px); border-color: var(--ca-green-fresh); box-shadow: 0 0 0 9px rgba(185,227,81,.08), 0 0 30px -6px rgba(185,227,81,.5); } /* arrow running to the next node */ .ex-path--visual .ex-path-step:not(:last-child)::after{ content:""; position:absolute; top:36px; left:84px; right:-30px; height:1.5px; background: linear-gradient(90deg, rgba(185,227,81,.75), rgba(185,227,81,.45)); border:0; transform:scaleX(0); transform-origin:left; opacity:1; border-radius:0; transition: transform .7s cubic-bezier(.25,.8,.3,1); } .ex-path-flow.aos-animate .ex-path-step:not(:last-child)::after{ transform:scaleX(1); } .ex-path--visual .ex-path-step:not(:last-child) .ex-path-ic::after{ content:""; position:absolute; top:50%; right:-999px; width:0; height:0; } /* the arrow head */ .ex-path--visual .ex-path-step:not(:last-child) > .ex-path-ic + .ex-path-num::before{ content:""; position:absolute; top:-75px; right:-34px; width:8px; height:8px; border-right:1.5px solid var(--ca-green-fresh); border-top:1.5px solid var(--ca-green-fresh); transform:rotate(45deg); opacity:0; transition:opacity .4s ease .55s; } .ex-path-flow.aos-animate .ex-path-step:not(:last-child) > .ex-path-ic + .ex-path-num::before{ opacity:.9; } /* the stem + numeral under the ring */ .ex-path--visual .ex-path-num{ position:relative; display:block; width:auto; height:auto; margin:34px 0 12px; border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important; font-family:'JetBrains Mono',monospace; font-size:1.02rem; font-weight:700; letter-spacing:.06em; color: var(--ca-green-fresh); padding-bottom:9px; text-align:left; } .ex-path--visual .ex-path-num::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background: var(--ca-green-fresh); border-radius:2px; } /* the little dot-and-stem that drops from the ring to the numeral */ .ex-path--visual .ex-path-step > .ex-path-ic::before{ content:""; position:absolute; left:50%; top:calc(100% + 2px); width:1.5px; height:16px; margin-left:-.75px; background: linear-gradient(180deg, rgba(185,227,81,.85), rgba(185,227,81,.25)); } .ex-path--visual .ex-path-step h4{ font-size:1.14rem; margin:0 0 10px; } .ex-path--visual .ex-path-step p{ max-width:23ch; } @media (max-width:900px){ /* on a tall stacked column the photo stays at the top rather than stretching */ .ex-grid-photo{ inset:0 0 auto 0; height:560px; } .ex-grid-photo img{ object-position:58% 38%; } .ex-grid-photo::after{ background: radial-gradient(90% 46% at 4% 14%, rgba(247,245,241,.9) 0%, rgba(247,245,241,.5) 48%, transparent 76%), linear-gradient(180deg, rgba(247,245,241,.16) 0%, rgba(247,245,241,.6) 42%, var(--ca-bone) 96%); } [data-theme="dark"] .ex-grid-photo::after{ background: radial-gradient(90% 46% at 4% 14%, rgba(13,31,26,.92) 0%, rgba(13,31,26,.6) 48%, transparent 76%), linear-gradient(180deg, rgba(13,31,26,.4) 0%, rgba(13,31,26,.78) 42%, var(--ca-ink) 96%); } .ex-path--visual .ex-path-step:not(:last-child)::after{ display:none !important; } .ex-path--visual .ex-path-step > .ex-path-ic::before{ display:none; } .ex-path--visual .ex-path-num{ margin:18px 0 10px; } .ex-path-bg-photo{ width:100%; height:46%; opacity:.22; } .ex-path-bg-dots{ width:120%; opacity:.05; } } @media (prefers-reduced-motion: reduce){ .ex-cell, .ex-cell-ic, .ex-cell-num, .ex-cell-num::after, .ex-path--visual .ex-path-ic, .ex-path--visual .ex-path-step::after{ transition:none !important; } .ex-path--visual .ex-path-step:not(:last-child)::after{ transform:scaleX(1); } } /* ========================================================= HOME · INTERNATIONAL NETWORK — refined Region rows and the figures band both carry the icon-chip language. The globe and its animation are untouched. ========================================================= */ /* the eyebrow sits above its own short rule rather than beside a dash */ .hm-net2 .hm-net2-copy .hm-kicker{ display:block; margin-bottom:26px; color: var(--ca-green-dark); } .hm-net2 .hm-net2-copy .hm-kicker::before{ display:block; width:56px; height:3px; margin-top:12px; background: var(--ca-fresh); border-radius:2px; } /* ---------- region rows ---------- */ .hm-net2-list li{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:20px; padding:16px 0; } .hm-net2-ic{ width:46px; height:46px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background: rgba(84,163,67,.11); color: var(--ca-green-dark); transition: background .45s var(--ease), transform .5s cubic-bezier(.2,.8,.3,1); } .hm-net2-ic svg{ width:21px; height:21px; } .hm-net2-list li:hover .hm-net2-ic{ background: rgba(84,163,67,.2); transform: translateY(-2px); } .hm-net2-name{ font-size:1.02rem; font-weight:700; letter-spacing:-.015em; } .hm-net2-role{ position:relative; padding-left:26px; font-family:'JetBrains Mono',monospace; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--ca-green-dark); white-space:nowrap; } .hm-net2-role::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:22px; background: var(--border); } [data-theme="dark"] .hm-net2-ic{ background: rgba(185,227,81,.12); color: var(--ca-green-fresh); } [data-theme="dark"] .hm-net2-role{ color: var(--ca-green-fresh); } /* ---------- the figures: one panel, three cells ---------- */ .hm-net2-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:0 !important; background: var(--bg) !important; border:1px solid var(--border) !important; border-radius:16px !important; overflow:hidden; margin-top:56px; } .hm-net2-stat{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:22px; text-align:left !important; padding:34px 32px !important; background:none !important; border-radius:0 !important; transition: background .4s var(--ease); } .hm-net2-stat + .hm-net2-stat{ border-left:1px solid var(--border); } .hm-net2-stat:hover{ background: rgba(84,163,67,.035) !important; } .hm-net2-stat .hm-net2-ic{ width:62px; height:62px; } .hm-net2-stat .hm-net2-ic svg{ width:27px; height:27px; } .hm-net2-stat:hover .hm-net2-ic{ background: rgba(84,163,67,.2); transform: translateY(-2px); } .hm-net2-stat-body{ display:flex; flex-direction:column; } .hm-net2-stat b{ font-family:'Sora','Inter',sans-serif; font-size:2.5rem; font-weight:700; line-height:1; letter-spacing:-.04em; margin-bottom:8px; } .hm-net2-stat-t{ font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color: var(--text); margin-bottom:8px; } .hm-net2-stat-d{ font-size:.92rem; line-height:1.6; color: var(--text-soft); max-width:28ch; } @media (max-width:1000px){ .hm-net2-stats{ grid-template-columns:1fr; } .hm-net2-stat + .hm-net2-stat{ border-left:0; border-top:1px solid var(--border); } } @media (max-width:560px){ .hm-net2-list li{ grid-template-columns:auto 1fr; gap:14px; } .hm-net2-role{ grid-column:2; padding-left:0; margin-top:2px; } .hm-net2-role::before{ display:none; } .hm-net2-stat{ padding:28px 24px !important; gap:18px; } } @media (prefers-reduced-motion: reduce){ .hm-net2-ic, .hm-net2-stat{ transition:none !important; } .hm-net2-list li:hover .hm-net2-ic, .hm-net2-stat:hover .hm-net2-ic{ transform:none; } } /* the network eyebrow rule is green here, not the sitewide yellow */ .hm-net2 .hm-net2-copy .hm-kicker::before{ background: var(--ca-fresh) !important; } /* the stat description is sentence copy, not a mono label */ .hm-net2-stat .hm-net2-stat-d{ font-family:'Inter',-apple-system,sans-serif !important; font-size:.92rem !important; font-weight:400 !important; letter-spacing:normal !important; text-transform:none !important; color: var(--text-soft) !important; line-height:1.6; } /* ---- the figures stand on their own, no panel or dividers ---- */ .hm-net2-stats--open{ background: none !important; border:0 !important; border-radius:0 !important; overflow:visible; gap:0 44px !important; margin-top:64px; } .hm-net2-stats--open .hm-net2-stat{ padding:0 !important; } .hm-net2-stats--open .hm-net2-stat + .hm-net2-stat{ border-left:0 !important; } .hm-net2-stats--open .hm-net2-stat:hover{ background:none !important; } @media (max-width:1000px){ .hm-net2-stats--open{ gap:34px 0 !important; } .hm-net2-stats--open .hm-net2-stat + .hm-net2-stat{ border-top:0 !important; } } /* ---- the figures take the deep brand green ---- */ .hm-net2-stat b{ color:#2A664C !important; } [data-theme="dark"] .hm-net2-stat b{ color: var(--ca-green-fresh) !important; } /* ---- the planet: rings drift, the marker orbits slowly ---- */ .hm-net2-orbits{ transform-origin:200px 200px; animation: hmOrbitDrift 46s linear infinite; } @keyframes hmOrbitDrift{ to{ transform: rotate(360deg); } } .hm-net2-orbit-dot{ transform-origin:200px 200px; animation: hmOrbitRun 22s linear infinite; } @keyframes hmOrbitRun{ from{ transform: rotate(0deg) translateX(184px) rotate(0deg); } to { transform: rotate(360deg) translateX(184px) rotate(-360deg); } } @media (prefers-reduced-motion: reduce){ .hm-net2-orbits, .hm-net2-orbit-dot{ animation:none; } .hm-net2-orbit-dot{ opacity:0; } } } /* ========================================================= PROCESS SEQUENCE — animation only The .cn-steps component keeps its existing design; this adds the left-to-right progression it had before, and gives Trading and Expansion the same component so the site reads uniformly. ========================================================= */ /* the shared dotted rail stays as the dormant track */ .cn-steps::before{ z-index:0; } /* each step carries the run that reaches the next one */ .cn-step::after{ content:""; position:absolute; z-index:0; top:21px; left:56px; right:-46px; height:1px; background-image: repeating-linear-gradient(90deg, var(--ca-fresh) 0 7px, transparent 7px 15px); transform: scaleX(0); transform-origin:left center; transition: transform .43s cubic-bezier(.35,.75,.3,1); } .cn-step:last-child::after{ display:none; } .cn-steps.is-on .cn-step.is-run::after{ transform: scaleX(1); } /* the circle lights as the run reaches it */ .cn-step-num{ border-color: var(--ca-line); color: var(--ca-grey); transition: border-color .4s cubic-bezier(.2,.8,.3,1), color .4s ease, box-shadow .45s cubic-bezier(.2,.8,.3,1); } .cn-steps.is-on .cn-step.is-on .cn-step-num{ border-color: var(--forest); color: var(--forest-dark); box-shadow: 0 0 0 5px rgba(84,163,67,.09); } /* the copy settles in with its step */ .cn-step h4, .cn-step p{ opacity:0; transform: translateY(7px); transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.3,1); } .cn-steps.is-on .cn-step.is-on h4, .cn-steps.is-on .cn-step.is-on p{ opacity:1; transform:none; } .cn-steps.is-on .cn-step.is-on p{ transition-delay:.08s; } /* dark sections (Trading, Expansion) use the fresh accent */ .hm-dark .cn-steps::before{ background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 7px, transparent 7px 15px); } .hm-dark .cn-step::after{ background-image: repeating-linear-gradient(90deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px); } .hm-dark .cn-step-num{ background:transparent; border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.5); } .hm-dark .cn-steps.is-on .cn-step.is-on .cn-step-num{ border-color: var(--ca-green-fresh); color: var(--ca-green-fresh); box-shadow: 0 0 0 5px rgba(185,227,81,.08), 0 0 18px -6px rgba(185,227,81,.45); } .hm-dark .cn-step h4{ color:#fff; } .hm-dark .cn-step p{ color: var(--text-inverse-soft); } /* five- and three-step sequences use the same rail. Desktop only — below 1100px they follow the component's own 2-up / 1-up responsive stack. */ @media (min-width:1101px){ .cn-steps:has(.cn-step:nth-child(5)){ grid-template-columns: repeat(5,1fr); } .cn-steps:has(.cn-step:nth-child(5))::before{ left:calc(10% + 26px); right:calc(10% + 26px); } .cn-steps:has(.cn-step:nth-child(3)):not(:has(.cn-step:nth-child(4))){ grid-template-columns: repeat(3,1fr); } .cn-steps:has(.cn-step:nth-child(3)):not(:has(.cn-step:nth-child(4)))::before{ left:calc(16.6% + 26px); right:calc(16.6% + 26px); } } /* 2-up: no single row to run along, so the steps light without a connector */ @media (max-width:1100px){ .cn-step::after{ display:none; } } /* stacked: the run travels downward instead */ @media (max-width:720px){ .cn-step{ padding-left:0; } .cn-step::after{ display:block; top:52px; left:21px; right:auto; bottom:-32px; width:1px; height:auto; background-image: repeating-linear-gradient(180deg, var(--ca-fresh) 0 7px, transparent 7px 15px); transform: scaleY(0); transform-origin:top center; } .hm-dark .cn-step::after{ background-image: repeating-linear-gradient(180deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px); } .cn-steps.is-on .cn-step.is-run::after{ transform: scaleY(1); } .cn-step:last-child::after{ display:none; } } @media (prefers-reduced-motion: reduce){ .cn-step::after, .cn-step-num, .cn-step h4, .cn-step p{ transition:none !important; } .cn-step h4, .cn-step p, .cn-step-num{ opacity:1 !important; transform:none !important; } .cn-step::after{ transform: scaleX(1); } .cn-step-num{ border-color: var(--ca-green) !important; color: var(--ca-green-dark) !important; } } /* stacked: the connector is a short dash run in the gutter between steps, so it never crosses the copy */ @media (max-width:720px){ .cn-step::after{ top:auto; bottom:-28px; height:28px; } /* scroll-linked: the reader drives the rail, so it tracks rather than replays — a shorter transition keeps it glued to the scroll */ .ca-timeline-scroll .cn-step::after{ transition-duration:.42s; } .ca-timeline-scroll .cn-step h4, .ca-timeline-scroll .cn-step p{ transition-duration:.4s; } } /* --------------------------------------------------------------- Step numbers rise into place rather than simply appearing --------------------------------------------------------------- */ .cn-step-num{ opacity:.55; transform: translateY(8px); transition: border-color .45s cubic-bezier(.22,.68,.24,1), color .45s ease, box-shadow .5s cubic-bezier(.22,.68,.24,1), opacity .5s ease, transform .55s cubic-bezier(.22,.68,.24,1); } .cn-steps.is-on .cn-step.is-on .cn-step-num{ opacity:1; transform:none; } /* --------------------------------------------------------------- Hover focus (desktop, fine pointer only). Hovering a step brings it forward; the others stay perfectly legible, they simply stop competing for attention. --------------------------------------------------------------- */ @media (hover:hover) and (pointer:fine) and (min-width:1101px){ .cn-step{ transition: opacity .4s ease, transform .45s cubic-bezier(.22,.68,.24,1); } .cn-steps:hover .cn-step{ opacity:.62; } .cn-steps:hover .cn-step:hover{ opacity:1; transform: translateY(-3px); } .cn-steps:hover .cn-step:hover .cn-step-num{ border-color: var(--ca-green-dark) !important; color: var(--ca-green-dark) !important; box-shadow: 0 0 0 6px rgba(46,139,87,.10); } .cn-steps:hover .cn-step:hover h4{ color: var(--ca-ink); } .cn-steps:hover .cn-step:hover p{ color: var(--text); } /* the run leaving the hovered step brightens with it */ .cn-steps:hover .cn-step:hover::after{ background-image: repeating-linear-gradient(90deg, var(--ca-green) 0 7px, transparent 7px 15px); } .hm-dark .cn-steps:hover .cn-step:hover .cn-step-num{ border-color: var(--ca-green-fresh) !important; color: var(--ca-green-fresh) !important; box-shadow: 0 0 0 6px rgba(185,227,81,.12), 0 0 22px -6px rgba(185,227,81,.55); } .hm-dark .cn-steps:hover .cn-step:hover p{ color: rgba(255,255,255,.92); } .hm-dark .cn-steps:hover .cn-step:hover::after{ background-image: repeating-linear-gradient(90deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px); } } /* --------------------------------------------------------------- Step circle states — authoritative. Earlier blocks in this file set colour and background with !important, which flattened the dormant/lit difference; these restore it without touching the circle's shape or size. --------------------------------------------------------------- */ .cn-step-num{ border-color: var(--ca-line) !important; color: var(--ca-grey) !important; } .cn-steps.is-on .cn-step.is-on .cn-step-num{ border-color: var(--ca-green) !important; color: var(--ca-green-dark) !important; } .hm-dark .cn-step-num{ background: transparent !important; border-color: rgba(255,255,255,.22) !important; color: rgba(255,255,255,.5) !important; } .hm-dark .cn-steps.is-on .cn-step.is-on .cn-step-num{ border-color: var(--ca-green-fresh) !important; color: var(--ca-green-fresh) !important; } [data-theme="dark"] .cn-step-num{ background: transparent !important; border-color: rgba(255,255,255,.22) !important; color: rgba(255,255,255,.5) !important; } [data-theme="dark"] .cn-steps.is-on .cn-step.is-on .cn-step-num{ border-color: var(--ca-green-fresh) !important; color: var(--ca-green-fresh) !important; } /* ========================================================= MOTION SYSTEM — v53 A single interaction vocabulary shared by every card, every section head and every photographic panel, so the whole site responds the same way to the same gestures. Principles held throughout: · movement is short (4–6px) and slow (.4–.55s) · green marks state change, never decoration · nothing moves that the reader is trying to read ========================================================= */ :root{ --ca-ease: cubic-bezier(.22,.68,.24,1); --ca-lift: -5px; --ca-dur: .45s; } /* --------------------------------------------------------- 1. NUMBERED CARDS — the shared hover Default is calm and light. Hover lifts the card, firms the border into green, brings the numeral up to full strength and floats the icon chip. Everything reverses on the same curve, so leaving feels as considered as arriving. --------------------------------------------------------- */ .ex-cell, .value-card, .ex-diff-item, .cn-approach-step, .hm-flow-step, .contact-info-item, .ab-guide-card, .td-material{ transition: transform var(--ca-dur) var(--ca-ease), border-color var(--ca-dur) ease, box-shadow .5s var(--ca-ease), background .4s ease !important; } .ex-cell:hover, .value-card:hover, .ex-diff-item:hover, .cn-approach-step:hover, .hm-flow-step:hover, .contact-info-item:hover, .ab-guide-card:hover, .td-material:hover{ transform: translateY(var(--ca-lift)); } .ex-cell:hover{ border-color: rgba(46,139,87,.42) !important; box-shadow: 0 2px 3px rgba(13,31,26,.04), 0 26px 48px -26px rgba(13,31,26,.30), 0 0 0 1px rgba(46,139,87,.10) !important; background:#fff !important; } /* the numeral steps forward in full brand green */ .ex-cell:hover .ex-cell-num{ color: var(--ca-green) !important; } /* and its short rule extends */ .ex-cell-num::after{ transition: width .5s var(--ca-ease), background .4s ease !important; } .ex-cell:hover .ex-cell-num::after{ background: var(--ca-green) !important; } /* the icon chip lifts a touch further than the card */ .ex-cell:hover .ex-cell-ic{ background: rgba(46,139,87,.16); color: var(--ca-green); transform: translateY(-3px); } /* a quiet directional mark appears at the foot of the card */ .ex-cell::after{ display:block !important; content:""; position:absolute; left:34px; bottom:20px; width:18px; height:1px; background: var(--ca-green); opacity:0; transform: translateX(-8px); transition: opacity .4s ease, transform .5s var(--ca-ease); } .ex-cell:hover::after{ opacity:.85; transform:none; } .ex-cell{ position:relative; padding-bottom:40px !important; } [data-theme="dark"] .ex-cell:hover{ background: var(--ca-ink-2) !important; border-color: rgba(185,227,81,.30) !important; } [data-theme="dark"] .ex-cell:hover .ex-cell-num{ color: var(--ca-green-fresh) !important; } [data-theme="dark"] .ex-cell::after{ background: var(--ca-green-fresh); } [data-theme="dark"] .ex-cell:hover .ex-cell-ic{ background: rgba(185,227,81,.14); color: var(--ca-green-fresh); } /* value / guide / material cards take the same green edge */ .value-card:hover, .ab-guide-card:hover, .td-material:hover, .ex-diff-item:hover, .contact-info-item:hover{ border-color: rgba(46,139,87,.38) !important; } [data-theme="dark"] .value-card:hover, [data-theme="dark"] .ab-guide-card:hover, [data-theme="dark"] .td-material:hover{ border-color: rgba(185,227,81,.28) !important; } /* --------------------------------------------------------- 2. ICON MICRO-MOTION Icons acknowledge the hover; they do not perform. A single short rise, no rotation, no bounce, no loop. --------------------------------------------------------- */ .ex-cell-ic svg, .value-card .ic svg, .hm-net2-ic svg, .cn-approach-step svg, .hm-flow-step svg{ transition: transform .5s var(--ca-ease); } .ex-cell:hover .ex-cell-ic svg, .value-card:hover .ic svg, .cn-approach-step:hover svg, .hm-flow-step:hover svg{ transform: translateY(-1.5px) scale(1.04); } /* --------------------------------------------------------- 3. SECTION HEADS — the cascade Label, then headline, then lede. Each beat is small; the sequence is what registers, not any single move. --------------------------------------------------------- */ .hm-head [data-aos] { transition-duration: .8s; } .hm-head .hm-kicker{ transition-delay: 0ms; } .hm-head .hm-h2{ transition-delay: 90ms; } .hm-head .hm-lede{ transition-delay: 170ms; } /* the kicker's rule draws rather than appears */ .hm-kicker::before, .hm-kicker::after{ transition: transform .7s var(--ca-ease) .18s, opacity .5s ease .18s; } .hm-kicker:not(.aos-animate)::before, .hm-kicker:not(.aos-animate)::after{ transform: scaleX(0); transform-origin:left center; } /* --------------------------------------------------------- 4. HEADLINE LINE REVEAL Lines are split on their existing
only — the wording is never re-flowed. Each line rises out of its own mask. --------------------------------------------------------- */ /* the mask needs room below the baseline or descenders (g, y, q) get shaved off once the line has settled */ .ca-line{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; } .ca-line-i{ display:block; transform: translateY(105%); opacity:0; transition: transform .95s var(--ca-ease), opacity .7s ease; } [data-reveal="lines"].is-in .ca-line-i{ transform:none; opacity:1; } /* --------------------------------------------------------- 5. IMAGE REVEAL & PARALLAX A slow settle from 1.03 to 1.00 as the panel arrives, and a few pixels of drift while it is on screen. Cinematic rather than kinetic. --------------------------------------------------------- */ .ca-img-reveal{ overflow:hidden; } .ca-img-reveal img, .ca-img-reveal > picture > img{ transform: scale(1.035); transition: transform 1.5s cubic-bezier(.16,.7,.2,1), opacity 1s ease; opacity:.85; } .ca-img-reveal.is-in img, .ca-img-reveal.is-in > picture > img{ transform: scale(1); opacity:1; } [data-parallax]{ --px: 0px; } [data-parallax] > img, img[data-parallax]{ transform: translate3d(0, var(--px), 0) scale(1.06); will-change: transform; } /* photographic panels answer the pointer, gently */ @media (hover:hover) and (pointer:fine){ .td-cat-media img, .hm-prod-card2 img, .hm-svc-card-photo img{ transition: transform 1.1s cubic-bezier(.16,.7,.2,1) !important; } .td-cat:hover .td-cat-media img, .hm-prod-card2:hover img, .hm-svc-card:hover .hm-svc-card-photo img{ transform: scale(1.045) !important; } } /* --------------------------------------------------------- 6. REDUCED MOTION — the static, complete page --------------------------------------------------------- */ .ca-no-motion *, .ca-no-motion *::before, .ca-no-motion *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce){ [data-aos]{ opacity:1 !important; transform:none !important; } .ca-line-i{ transform:none !important; opacity:1 !important; } .ca-img-reveal img{ transform:none !important; opacity:1 !important; } [data-parallax] > img, img[data-parallax]{ transform:none !important; } .ex-cell::after{ display:none !important; } } /* ========================================================= HOME · "From specification to delivery" The same process behaviour as the .cn-steps rows, so the journey reads identically wherever it appears on the site. The component's own look — dark card, lime rings — is kept. ========================================================= */ .hm-flow::before{ z-index:0; } /* the run each step sends to the next */ .hm-flow-step::after{ content:""; position:absolute; z-index:0; top:23px; left:calc(22px + 58px); right:-14px; height:1px; background-image: repeating-linear-gradient(90deg, var(--ca-green-fresh) 0 8px, transparent 8px 16px); transform: scaleX(0); transform-origin:left center; transition: transform .43s cubic-bezier(.35,.75,.3,1); } .hm-flow-step:last-child::after{ display:none; } .hm-flow.is-on .hm-flow-step.is-run::after{ transform: scaleX(1); } /* dormant ring → lit ring */ .hm-flow-num{ border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.5); opacity:.6; transform: translateY(8px); transition: border-color .45s var(--ca-ease), color .45s ease, box-shadow .5s var(--ca-ease), opacity .5s ease, transform .55s var(--ca-ease); } .hm-flow.is-on .hm-flow-step.is-on .hm-flow-num{ border-color: var(--lime); color: var(--lime); opacity:1; transform:none; box-shadow: 0 0 0 5px rgba(185,227,81,.08), 0 0 18px -6px rgba(185,227,81,.45); } /* the copy settles with its step */ .hm-flow-step h4, .hm-flow-step p{ opacity:0; transform: translateY(7px); transition: opacity .45s ease, transform .5s var(--ca-ease); } .hm-flow.is-on .hm-flow-step.is-on h4, .hm-flow.is-on .hm-flow-step.is-on p{ opacity:1; transform:none; } .hm-flow.is-on .hm-flow-step.is-on p{ transition-delay:.08s; } /* hover focus, matching the .cn-steps behaviour */ @media (hover:hover) and (pointer:fine) and (min-width:1101px){ .hm-flow-step{ transition: opacity .4s ease, transform .45s var(--ca-ease); } .hm-flow:hover .hm-flow-step{ opacity:.62; } .hm-flow:hover .hm-flow-step:hover{ opacity:1; transform: translateY(-3px); } .hm-flow:hover .hm-flow-step:hover .hm-flow-num{ box-shadow: 0 0 0 6px rgba(185,227,81,.12), 0 0 22px -6px rgba(185,227,81,.55); } .hm-flow:hover .hm-flow-step:hover p{ color: rgba(255,255,255,.92); } } /* 2-up: no single row to run along */ @media (max-width:1100px){ .hm-flow-step::after{ display:none; } } /* stacked: a short vertical run in the gutter */ @media (max-width:720px){ .hm-flow-step::after{ display:block; top:auto; bottom:-20px; left:calc(22px + 22px); right:auto; width:1px; height:20px; background-image: repeating-linear-gradient(180deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px); transform: scaleY(0); transform-origin:top center; } .hm-flow.is-on .hm-flow-step.is-run::after{ transform: scaleY(1); } .hm-flow-step:last-child::after{ display:none; } } @media (prefers-reduced-motion: reduce){ .hm-flow-step::after, .hm-flow-num, .hm-flow-step h4, .hm-flow-step p{ transition:none !important; } .hm-flow-step h4, .hm-flow-step p, .hm-flow-num{ opacity:1 !important; transform:none !important; } .hm-flow-num{ border-color: var(--lime) !important; color: var(--lime) !important; } .hm-flow-step::after{ transform: scaleX(1); } } /* ========================================================= HOME · the CleanAdvance badge between the two columns Its two connector stubs were the last place still running a perpetual scrolling dash. They now use the same green and the same draw-on-arrival as every other connector. This one sits on a light background, so it takes the light green — the lime is reserved for the dark sections. (The badge's own rings are left alone — they mark the brand as the meeting point, they are not a process connector.) ========================================================= */ .hm-split-mid::before, .hm-split-mid::after{ animation: none !important; opacity: 1 !important; background-size: auto !important; background-image: repeating-linear-gradient(90deg, var(--ca-green) 0 7px, transparent 7px 15px) !important; transform: scaleX(0); transition: transform .43s cubic-bezier(.35,.75,.3,1) .15s; } .hm-dark .hm-split-mid::before, .hm-dark .hm-split-mid::after, [data-theme="dark"] .hm-split-mid::before, [data-theme="dark"] .hm-split-mid::after{ background-image: repeating-linear-gradient(90deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px) !important; } .hm-split-mid::before{ transform-origin:right center; } .hm-split-mid::after{ transform-origin:left center; } .hm-split-mid.is-in::before, .hm-split-mid.is-in::after{ transform: scaleX(1); } @media (prefers-reduced-motion: reduce){ .hm-split-mid::before, .hm-split-mid::after{ transform: scaleX(1) !important; transition:none !important; } } /* ========================================================= PROCESS COLOUR — one green per context, site-wide Light sections : --ca-green #2E8B57 (brand green) Dark sections : --ca-green-fresh #B9E351 (fresh accent) Nothing else. Previously the light runs used the icon green (#54A343) while their markers used #2E8B57, so a single sequence carried two greens. ========================================================= */ .cn-step::after{ background-image: repeating-linear-gradient(90deg, var(--ca-green) 0 7px, transparent 7px 15px); } @media (max-width:720px){ .cn-step::after{ background-image: repeating-linear-gradient(180deg, var(--ca-green) 0 7px, transparent 7px 15px); } .hm-dark .cn-step::after{ background-image: repeating-linear-gradient(180deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px); } } .hm-dark .cn-step::after{ background-image: repeating-linear-gradient(90deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px); } .cn-steps.is-on .cn-step.is-on .cn-step-num{ border-color: var(--ca-green) !important; color: var(--ca-green) !important; box-shadow: 0 0 0 5px rgba(46,139,87,.10); } /* ========================================================= CONSULTING · Process → Quality → Performance → Value and EXPANSION · Manufacturer → … → Customer Both sit on the shared process system: dormant markers, a dashed green run that draws in order, labels settling with their node. The looping life is added by LIVING CONNECTORS. ========================================================= */ .cn-chain{ position:relative; } .cn-chain-dot{ background: rgba(255,255,255,.22) !important; box-shadow: none !important; opacity:.6; transform: translateY(6px); transition: background .45s ease, box-shadow .5s var(--ca-ease), opacity .5s ease, transform .55s var(--ca-ease); } .cn-chain.is-on .cn-chain-node.is-on .cn-chain-dot{ background: var(--ca-green-fresh) !important; box-shadow: 0 0 0 5px rgba(185,227,81,.10), 0 0 18px -6px rgba(185,227,81,.45) !important; opacity:1; transform:none; } /* the closing node takes the same green as the rest — no white */ .cn-chain-node--end .cn-chain-dot{ background: rgba(255,255,255,.22) !important; } .cn-chain.is-on .cn-chain-node--end.is-on .cn-chain-dot{ background: var(--ca-green-fresh) !important; } .cn-chain-line{ opacity:1 !important; animation: none; background-image: repeating-linear-gradient(90deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px) !important; background-size: auto; transform: scaleX(0); transform-origin:left center; transition: transform .43s cubic-bezier(.35,.75,.3,1); } .cn-chain.is-on .cn-chain-node.is-run + .cn-chain-line{ transform: scaleX(1); } .cn-chain-label{ opacity:0; transform: translateY(7px); transition: opacity .45s ease, transform .5s var(--ca-ease); } .cn-chain.is-on .cn-chain-node.is-on .cn-chain-label{ opacity:1; transform:none; } @media (hover:hover) and (pointer:fine) and (min-width:1101px){ .cn-chain-node{ transition: opacity .4s ease, transform .45s var(--ca-ease); } .cn-chain:hover .cn-chain-node{ opacity:.62; } .cn-chain:hover .cn-chain-node:hover{ opacity:1; transform: translateY(-3px); } } @media (max-width:720px){ .cn-chain-line{ background-image: repeating-linear-gradient(180deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px) !important; transform: scaleY(0); transform-origin:top center; } .cn-chain.is-on .cn-chain-node.is-run + .cn-chain-line{ transform: scaleY(1); } } /* ---- Expansion bridge, same system, stacked ---- */ .ex-bridge-dot{ background: rgba(255,255,255,.22) !important; box-shadow:none !important; opacity:.6; transform: translateY(5px); transition: background .45s ease, box-shadow .5s var(--ca-ease), opacity .5s ease, transform .55s var(--ca-ease); } .ex-bridge-chain.is-on li.is-on .ex-bridge-dot{ background: var(--ca-green-fresh) !important; box-shadow: 0 0 0 5px rgba(185,227,81,.10) !important; opacity:1; transform:none; } .ex-bridge-chain li:not(:last-child)::after{ background-image: repeating-linear-gradient(180deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px) !important; background-size: auto; transform: scaleY(0); transform-origin:top center; transition: transform .43s cubic-bezier(.35,.75,.3,1); } .ex-bridge-chain.is-on li.is-run::after{ transform: scaleY(1); } .ex-bridge-chain li > span:last-child{ opacity:0; transform: translateY(6px); transition: opacity .45s ease, transform .5s var(--ca-ease); } .ex-bridge-chain.is-on li.is-on > span:last-child{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .cn-chain-dot, .cn-chain-line, .cn-chain-label, .ex-bridge-dot, .ex-bridge-chain li::after, .ex-bridge-chain li > span{ transition:none !important; } .cn-chain-dot, .cn-chain-label, .ex-bridge-dot, .ex-bridge-chain li > span:last-child{ opacity:1 !important; transform:none !important; } .cn-chain-dot, .ex-bridge-dot{ background: var(--ca-green-fresh) !important; } .cn-chain-line, .ex-bridge-chain li::after{ transform:none !important; } } /* ========================================================= LIVING CONNECTORS — the CleanAdvance process signature --------------------------------------------------------- Every process on the site behaves the same way, in two acts: ACT 1 — arrival. The steps light one after another and the green run draws between them, left to right. ACT 2 — life. Once drawn, the connector keeps moving: the dashes travel along the route, a soft glint sweeps the whole chain, and the lit markers breathe. Act 2 is what makes the process read as something that is running rather than something that has stopped. It is applied to every sequence — the numbered rows, the Home journey, the Process → Value chain and the Expansion bridge — so they all share one behaviour and one green. ========================================================= */ /* ---------- the travelling dashes ---------- */ @keyframes caRunFlow{ from{ background-position: 0 0; } to { background-position: -200% 0; } } @keyframes caRunFlowV{ from{ background-position: 0 0; } to { background-position: 0 -200%; } } .cn-steps.is-live .cn-step.is-run::after, .hm-flow.is-live .hm-flow-step.is-run::after, .cn-chain.is-live .cn-chain-node.is-run + .cn-chain-line{ background-size: 200% 100%; animation: caRunFlow 3.2s linear infinite; } .ex-bridge-chain.is-live li.is-run::after{ background-size: 100% 200%; animation: caRunFlowV 3.2s linear infinite; } /* ---------- the glint that sweeps the whole chain ---------- */ @keyframes caGlint{ 0% { background-position: -18% 0; opacity:0; } 14% { opacity:1; } 62% { opacity:1; } 100% { background-position: 118% 0; opacity:0; } } .cn-steps::after, .hm-flow::after, .cn-chain::after{ content:""; position:absolute; pointer-events:none; z-index:0; left:0; right:0; height:1px; opacity:0; background-size:16% 100%; background-repeat:no-repeat; background-image: linear-gradient(90deg, transparent, rgba(46,139,87,.85), transparent); } .cn-steps::after{ top:21px; } .hm-flow::after{ top:23px; } .cn-chain::after{ top:6px; } .hm-dark .cn-steps::after, .hm-flow::after, .cn-chain::after{ background-image: linear-gradient(90deg, transparent, rgba(185,227,81,.85), transparent); } .cn-steps.is-live::after, .hm-flow.is-live::after, .cn-chain.is-live::after{ animation: caGlint 4.2s cubic-bezier(.5,0,.5,1) .6s infinite; } /* ---------- the markers breathe once they are lit ---------- */ @keyframes caBreathLight{ 0%,100%{ box-shadow: 0 0 0 5px rgba(46,139,87,.10); } 50% { box-shadow: 0 0 0 8px rgba(46,139,87,.06); } } @keyframes caBreathDark{ 0%,100%{ box-shadow: 0 0 0 5px rgba(185,227,81,.10), 0 0 18px -6px rgba(185,227,81,.45); } 50% { box-shadow: 0 0 0 8px rgba(185,227,81,.07), 0 0 26px -6px rgba(185,227,81,.70); } } .cn-steps.is-live .cn-step.is-on .cn-step-num{ animation: caBreathLight 4.6s ease-in-out infinite; } .hm-dark .cn-steps.is-live .cn-step.is-on .cn-step-num, .hm-flow.is-live .hm-flow-step.is-on .hm-flow-num, .cn-chain.is-live .cn-chain-node.is-on .cn-chain-dot, .ex-bridge-chain.is-live li.is-on .ex-bridge-dot{ animation: caBreathDark 4.6s ease-in-out infinite; } /* each marker breathes slightly out of step with its neighbour, so the chain never pulses as one block */ .cn-step:nth-child(2) .cn-step-num, .hm-flow-step:nth-child(2) .hm-flow-num, .cn-chain-node:nth-child(3) .cn-chain-dot, .ex-bridge-chain li:nth-child(2) .ex-bridge-dot{ animation-delay:.4s !important; } .cn-step:nth-child(3) .cn-step-num, .hm-flow-step:nth-child(3) .hm-flow-num, .cn-chain-node:nth-child(5) .cn-chain-dot, .ex-bridge-chain li:nth-child(3) .ex-bridge-dot{ animation-delay:.8s !important; } .cn-step:nth-child(4) .cn-step-num, .hm-flow-step:nth-child(4) .hm-flow-num, .cn-chain-node:nth-child(7) .cn-chain-dot, .ex-bridge-chain li:nth-child(4) .ex-bridge-dot{ animation-delay:1.2s !important; } .cn-step:nth-child(5) .cn-step-num{ animation-delay:1.6s !important; } /* the Home badge stubs keep flowing too */ .hm-split-mid.is-in::before, .hm-split-mid.is-in::after{ background-size:200% 100% !important; animation: caRunFlow 3.2s linear infinite !important; } /* ---------- nothing loops under reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .cn-steps::after, .hm-flow::after, .cn-chain::after{ display:none !important; } .cn-step::after, .hm-flow-step::after, .cn-chain-line, .ex-bridge-chain li::after, .cn-step-num, .hm-flow-num, .cn-chain-dot, .ex-bridge-dot, .hm-split-mid::before, .hm-split-mid::after{ animation: none !important; } } /* ========================================================= ABOUT · Core Values — the five value marks The glyphs are Fresh Green #54A343. Because these cards sit on photography, each glyph gets the same circular chip the rest of the site uses for icons — that keeps the green reading as green instead of fighting the image behind it. ========================================================= */ .value-card.photo-bg .ic{ width:52px !important; height:52px !important; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#fff; color: var(--ca-fresh) !important; opacity:1 !important; margin-bottom:16px !important; box-shadow: 0 6px 18px -8px rgba(13,31,26,.45); transition: transform .5s var(--ca-ease), background .4s ease; } .value-card.photo-bg .ic svg{ width:25px; height:25px; stroke: currentColor; stroke-width:1.7; } .value-card.photo-bg:hover .ic{ transform: translateY(-3px); } /* ========================================================= PROCESS NUMBERS · Fresh Green The 01–05 numerals and their rings take Fresh Green #54A343 on the light sections, matching the icon system. ========================================================= */ .cn-steps.is-on .cn-step.is-on .cn-step-num{ border-color: var(--ca-fresh) !important; color: var(--ca-fresh) !important; box-shadow: 0 0 0 5px rgba(84,163,67,.10); } .cn-step::after{ background-image: repeating-linear-gradient(90deg, var(--ca-fresh) 0 7px, transparent 7px 15px); } @media (max-width:720px){ .cn-step::after{ background-image: repeating-linear-gradient(180deg, var(--ca-fresh) 0 7px, transparent 7px 15px); } .hm-dark .cn-step::after{ background-image: repeating-linear-gradient(180deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px); } } .hm-dark .cn-step::after{ background-image: repeating-linear-gradient(90deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px); } .cn-steps::after{ background-image: linear-gradient(90deg, transparent, rgba(84,163,67,.85), transparent); } .hm-dark .cn-steps::after{ background-image: linear-gradient(90deg, transparent, rgba(185,227,81,.85), transparent); } @keyframes caBreathLight{ 0%,100%{ box-shadow: 0 0 0 5px rgba(84,163,67,.10); } 50% { box-shadow: 0 0 0 8px rgba(84,163,67,.06); } } @media (hover:hover) and (pointer:fine) and (min-width:1101px){ .cn-steps:hover .cn-step:hover .cn-step-num{ border-color: var(--ca-fresh) !important; color: var(--ca-fresh) !important; box-shadow: 0 0 0 6px rgba(84,163,67,.14); } .cn-steps:hover .cn-step:hover::after{ background-image: repeating-linear-gradient(90deg, var(--ca-fresh) 0 7px, transparent 7px 15px); } } /* ========================================================= ABOUT · Mission & Vision Each one now carries its own title — "Our Mission", "Our Vision" — set above its photograph, exactly the way "Our Core Values" sits above the value cards. The title is no longer inside the image. ========================================================= */ .ab-mv-item{ display:block; } .ab-mv-head{ display:flex; align-items:center; gap:14px; margin: 0 0 18px; } .ab-mv-ic{ width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; background: rgba(84,163,67,.12); color: var(--ca-fresh); transition: background .4s ease, transform .5s var(--ca-ease); } .ab-mv-ic svg{ width:23px; height:23px; } .ab-mv-item:hover .ab-mv-ic{ background: rgba(84,163,67,.2); transform: translateY(-2px); } /* the same type as "Our Core Values", one step down in scale */ .ab-mv-title{ font-family:'Sora','Inter',sans-serif; font-size:1.6rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; color: var(--ca-ink); margin:0; } [data-theme="dark"] .ab-mv-title{ color:#fff; } /* the statement leads inside the card now that the label has left it */ .ab-mv-block h3{ font-size:1.42rem; margin:0 0 12px; } @media (max-width:900px){ .ab-mv-title{ font-size:1.36rem; } .ab-mv-head{ margin-bottom:14px; } } /* ========================================================= ABOUT · opening — brought in line with the other pages Every other page opens with a full-bleed photograph and the copy set over it. About was the only one using a split layout: a flat dark panel on the left, the photo boxed into the right half, and a shorter hero. It now uses the same geometry, scrim and rhythm as Consulting, Trading, Expansion, Formulation and Contact. The copy, the wording and its animated opening are untouched. ========================================================= */ .ab-open{ position:relative; overflow:hidden; min-height: 96vh; display:flex; flex-direction:column; justify-content:flex-end; padding-top: calc(150px + var(--utilbar-h)); padding-bottom: 70px; color:#fff; background: var(--ca-ink); } /* the photograph becomes the full background */ .ab-open-media{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; z-index:0; margin:0 !important; border-radius:0 !important; clip-path:none !important; -webkit-clip-path:none !important; } .ab-open-media img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; } /* the same two-part scrim the other heroes use */ .ab-open-media::after{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(13,27,42,.78) 0%, rgba(13,27,42,.52) 42%, rgba(13,27,42,.26) 68%, rgba(13,27,42,.06) 100%), linear-gradient(0deg, rgba(13,27,42,.6) 0%, rgba(13,27,42,.08) 46%, rgba(13,27,42,.02) 100%); } /* the diagonal seam belonged to the split layout */ .ab-open-media-seam{ display:none !important; } /* the copy sits over the photograph, on the page container. The wrapper stays static so the absolute media anchors to the section itself rather than to this wrapper. */ .ab-open-inner{ position:static !important; display:block !important; width:100%; max-width:none !important; margin:0 !important; padding:0 !important; gap:0 !important; } .ab-open-copy{ position:relative; z-index:2; width:100%; max-width: var(--container, 1240px); margin:0 auto; padding:0 var(--gutter, 32px) !important; box-sizing:border-box; } .ab-open-copy > *{ max-width:760px; } @media (max-width: 900px){ .ab-open{ min-height: 88vh; padding-bottom:54px; } .ab-open-copy{ max-width:none; } } /* ========================================================= TRADING · air between the category sections The categories alternate image-left / image-right. With the standard 118px section padding, one photograph finished only ~236px above the next one started, so the images read as a stack rather than as separate categories. These sections get a deeper rhythm; the rest of the site is unchanged. ========================================================= */ .hm-section:has(> .container > .td-cat), .hm-section:has(> .container > * > .td-cat), .hm-section:has(.td-cat){ padding-top: 158px; padding-bottom: 158px; } @media (max-width: 900px){ .hm-section:has(.td-cat){ padding-top: 92px; padding-bottom: 92px; } } /* and a little more room between the copy and its photograph */ .td-cat{ align-items:center; } /* ========================================================= GRASS GREEN — one colour for every section label --------------------------------------------------------- Every eyebrow on the site ("WHAT WE PROVIDE", "WHY CLEANADVANCE", "THE CHALLENGE", "DIRECTION" …) now carries the same grass green, and so do the standalone figures. Two values of the one colour, for legibility only: · on dark surfaces #54A343 (grass green) · on light surfaces #3A7D2E (the same green, deepened) At 11px uppercase, #54A343 on a near-white ground measures 2.9:1 and would be hard to read; the deepened value reads as the same green and measures 4.7:1. ========================================================= */ :root{ --ca-grass: #54A343; /* on dark */ --ca-grass-ink: #3A7D2E; /* on light */ } /* ---- the eyebrows ---- */ .hm-kicker, .eyebrow, .hm-hero-kicker, .hm-pagehero-kicker, .cn-why-label, .ex-diff-label, .cn-bio-label, .hm-brief-top span, .td-cat-k, .hm-net2-stat-t{ color: var(--ca-grass-ink) !important; } .hm-dark .hm-kicker, .hm-dark .eyebrow, .hm-dark .hm-hero-kicker, .hm-dark .cn-why-label, .hm-dark .ex-diff-label, .hm-dark .hm-brief-top span, .hm-dark .hm-net2-stat-t, .section-dark .eyebrow, .ab-network .hm-kicker, .hm-hero .hm-hero-kicker, .hm-pagehero .hm-pagehero-kicker, [data-theme="dark"] .hm-kicker, [data-theme="dark"] .eyebrow, [data-theme="dark"] .cn-why-label, [data-theme="dark"] .ex-diff-label, [data-theme="dark"] .hm-net2-stat-t{ color: var(--ca-grass) !important; } /* the small rule beside each label follows its label */ .hm-kicker::before, .eyebrow::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before{ background: var(--ca-grass-ink) !important; } .hm-dark .hm-kicker::before, .hm-dark .eyebrow::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before, .hm-final-banner .hm-kicker::before, [data-theme="dark"] .hm-kicker::before, [data-theme="dark"] .eyebrow::before{ background: var(--ca-grass) !important; } /* the closing banner keeps its white label on the green ground */ .hm-final-banner .hm-kicker{ color:#fff !important; } .hm-final-banner .hm-kicker::before{ background:#fff !important; } /* ---- the standalone figures ---- */ /* Home · Connecting industry across key markets — 3 / 1 / 1 */ .hm-net2-stat b{ color: var(--ca-grass-ink) !important; } [data-theme="dark"] .hm-net2-stat b, .hm-dark .hm-net2-stat b{ color: var(--ca-grass) !important; } /* Consulting · From plant constraints … — 1 / 2 / 3 */ .cn-approach-num{ color: var(--ca-grass-ink) !important; } [data-theme="dark"] .cn-approach-num, .hm-dark .cn-approach-num{ color: var(--ca-grass) !important; } .cn-approach-badge{ color: var(--ca-grass-ink) !important; } [data-theme="dark"] .cn-approach-badge, .hm-dark .cn-approach-badge{ color: var(--ca-grass) !important; } /* the brief card's kicker no longer shares its row with a code */ .hm-brief-top{ justify-content:flex-start !important; } /* ========================================================= ANCHORS · a section must never arrive cut The utility bar and the nav are both fixed, together 120px tall. Nothing offset for them, so clicking a link like "Explore Our Services" or a category jump scrolled the section to y=0 and the header covered its label and title — the section arrived cut off. Every jump target now clears the header with a little air above it. ========================================================= */ html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } section[id], [id]:not(html):not(body){ scroll-margin-top: 150px; } @media (max-width: 900px){ section[id], [id]:not(html):not(body){ scroll-margin-top: 116px; } } /* ========================================================= RHYTHM · tightened The standard section used 118px top and bottom, so two sections put 236px of empty space between their content. 96px brings that to ~192px — still generous, with less dead scrolling between blocks. The Trading category sections keep their deeper rhythm, since their alternating photographs need the separation. ========================================================= */ .hm-section{ padding-top: 96px; padding-bottom: 96px; } @media (max-width: 900px){ .hm-section{ padding-top: 68px; padding-bottom: 68px; } } /* the remaining letterspaced labels join the same green */ .cn-approach-step h4, .hm-net2-role{ color: var(--ca-grass-ink) !important; } .hm-dark .cn-approach-step h4, .hm-dark .hm-net2-role, [data-theme="dark"] .cn-approach-step h4, [data-theme="dark"] .hm-net2-role{ color: var(--ca-grass) !important; } /* ========================================================= HERO · one section at a time The heroes were 96vh, so on landing a 4vh sliver of the next section showed along the bottom edge and the page read as two sections at once. They now fill the viewport exactly, so you meet one section, then the next. 100dvh follows the mobile browser's dynamic toolbars. ========================================================= */ .hm-hero, .ab-open{ min-height: 100vh; min-height: 100dvh; } @media (max-width: 900px){ .hm-hero{ min-height: auto; } .ab-open{ min-height: 88vh; min-height: 88dvh; } } /* ========================================================= CONSULTING · the service list The 01 / 02 / 03 numerals and the small capability tags (PRODUCTION · PROCESS OPTIMISATION · QUALITY · FEEDSTOCK) join the same grass green as every other label and figure. ========================================================= */ .cn-service-num{ color: var(--ca-grass-ink) !important; opacity: 1 !important; } .cn-service:hover .cn-service-num{ color: var(--ca-grass-ink) !important; opacity: 1 !important; } .cn-service-tags{ color: var(--ca-grass-ink) !important; } .cn-service-tags span{ color: inherit !important; } .cn-service-tags i{ color: inherit !important; opacity:.45; } .hm-dark .cn-service-num, .hm-dark .cn-service-tags, [data-theme="dark"] .cn-service-num, [data-theme="dark"] .cn-service:hover .cn-service-num, [data-theme="dark"] .cn-service-tags{ color: var(--ca-grass) !important; } /* ========================================================= PHOTOGRAPHY · let the images read The scrims had grown heavy — the hero was carrying 94% ink at its left edge, so the photograph behind it was almost lost. Every background treatment is lightened here so the picture is legible, while keeping enough weight under the copy for white text to stay comfortable. ========================================================= */ /* page heroes */ .hm-hero-bg::after, .hm-pagehero-bg::after{ background: linear-gradient(90deg, rgba(7,26,38,.80) 0%, rgba(7,26,38,.56) 46%, rgba(7,26,38,.18) 100%), linear-gradient(180deg, rgba(7,26,38,.34) 0%, transparent 42%, rgba(7,26,38,.52) 100%) !important; } /* About opening — the same treatment as the other heroes */ .ab-open-media::after{ background: linear-gradient(90deg, rgba(7,26,38,.80) 0%, rgba(7,26,38,.56) 46%, rgba(7,26,38,.18) 100%), linear-gradient(180deg, rgba(7,26,38,.34) 0%, transparent 42%, rgba(7,26,38,.52) 100%) !important; } /* Consulting · the photograph behind each service row */ .cn-service-bg img{ opacity: .42 !important; filter: saturate(.86) !important; } .cn-service:hover .cn-service-bg img{ opacity:.52 !important; } /* Expansion / Trading · the full-section photograph behind the cards */ .ex-grid-photo::after{ background: radial-gradient(78% 62% at 6% 20%, rgba(247,245,241,.82) 0%, rgba(247,245,241,.42) 46%, transparent 74%), linear-gradient(180deg, rgba(247,245,241,.06) 0%, rgba(247,245,241,.34) 34%, rgba(247,245,241,.74) 62%, var(--ca-bone) 96%) !important; } [data-theme="dark"] .ex-grid-photo::after{ background: radial-gradient(78% 62% at 6% 20%, rgba(13,31,26,.86) 0%, rgba(13,31,26,.5) 46%, transparent 74%), linear-gradient(180deg, rgba(13,31,26,.28) 0%, rgba(13,31,26,.6) 34%, rgba(13,31,26,.84) 62%, var(--ca-ink) 96%) !important; } /* Trading / Expansion · the ship behind the route */ .ex-path-bg-photo{ opacity: .28 !important; filter: saturate(.68) contrast(.96) !important; } /* About · the network band */ .ab-network-overlay{ background: linear-gradient(100deg, rgba(13,27,42,.86) 0%, rgba(13,27,42,.68) 45%, rgba(13,27,42,.38) 100%) !important; } /* Home · the split panel photograph */ .hm-diff-panel-photo{ opacity:1; filter:saturate(.95); } /* ========================================================= SMALL LABELS · the tagline green TECHNICAL UNDERSTANDING · LOCAL PERSPECTIVE · COMMERCIAL EXECUTION, the capability tags (PRODUCTION · PROCESS OPTIMISATION · QUALITY · FEEDSTOCK) and every other small label now carry #1F6B41 — the exact green of the logo tagline "WHERE INDUSTRY ADVANCES, CLEANER." and of the COMPANY OVERVIEW label. On dark surfaces that green is too close to the ground to read (2.6:1), so there the label keeps the lighter grass #54A343. On light surfaces #1F6B41 measures 6.0:1. The large numerals (3 / 1 / 1, 01 / 02 / 03) are left in the fresher green — they are figures, not labels, and read as the accent. ========================================================= */ :root{ --ca-label: #1F6B41; /* light surfaces — the tagline green */ --ca-label-dark: #54A343; /* dark surfaces — grass green */ } .hm-kicker, .eyebrow, .hm-hero-kicker, .hm-pagehero-kicker, .cn-why-label, .ex-diff-label, .cn-bio-label, .cn-service-tags, .cn-service-tags span, .cn-approach-step h4, .hm-brief-top span, .td-cat-k, .hm-net2-stat-t, .hm-net2-role{ color: var(--ca-label) !important; } .hm-kicker::before, .eyebrow::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before{ background: var(--ca-label) !important; } /* dark surfaces keep the lighter grass so the label stays legible */ .hm-dark .hm-kicker, .hm-dark .eyebrow, .hm-dark .hm-hero-kicker, .hm-dark .cn-why-label, .hm-dark .ex-diff-label, .hm-dark .cn-bio-label, .hm-dark .cn-service-tags, .hm-dark .cn-service-tags span, .hm-dark .cn-approach-step h4, .hm-dark .hm-brief-top span, .hm-dark .td-cat-k, .hm-dark .hm-net2-stat-t, .hm-dark .hm-net2-role, .section-dark .eyebrow, .ab-network .hm-kicker, .hm-hero .hm-hero-kicker, .ab-open .hm-hero-kicker, .hm-pagehero .hm-pagehero-kicker, [data-theme="dark"] .hm-kicker, [data-theme="dark"] .eyebrow, [data-theme="dark"] .cn-why-label, [data-theme="dark"] .ex-diff-label, [data-theme="dark"] .cn-bio-label, [data-theme="dark"] .cn-service-tags, [data-theme="dark"] .cn-service-tags span, [data-theme="dark"] .cn-approach-step h4, [data-theme="dark"] .hm-brief-top span, [data-theme="dark"] .td-cat-k, [data-theme="dark"] .hm-net2-stat-t, [data-theme="dark"] .hm-net2-role{ color: var(--ca-label-dark) !important; } .hm-dark .hm-kicker::before, .hm-dark .eyebrow::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before, [data-theme="dark"] .hm-kicker::before, [data-theme="dark"] .eyebrow::before{ background: var(--ca-label-dark) !important; } /* the closing banner keeps its white label on the green ground */ .hm-final-banner .hm-kicker{ color:#fff !important; } .hm-final-banner .hm-kicker::before{ background:#fff !important; } /* ========================================================= PHOTOGRAPHY · a second, lighter pass Taken further again so the images really read. The copy keeps a soft plate of weight directly beneath it, which is where the text actually needs it — the rest of the frame is left much closer to the original photograph. ========================================================= */ .hm-hero-bg::after, .hm-pagehero-bg::after, .ab-open-media::after{ background: linear-gradient(90deg, rgba(7,26,38,.68) 0%, rgba(7,26,38,.40) 46%, rgba(7,26,38,.08) 100%), linear-gradient(180deg, rgba(7,26,38,.22) 0%, transparent 44%, rgba(7,26,38,.40) 100%) !important; } .cn-service-bg img{ opacity: .58 !important; filter: saturate(.94) !important; } .cn-service:hover .cn-service-bg img{ opacity:.70 !important; } .ex-grid-photo::after{ background: radial-gradient(76% 60% at 6% 20%, rgba(247,245,241,.72) 0%, rgba(247,245,241,.30) 46%, transparent 74%), linear-gradient(180deg, rgba(247,245,241,0) 0%, rgba(247,245,241,.20) 34%, rgba(247,245,241,.62) 62%, var(--ca-bone) 96%) !important; } [data-theme="dark"] .ex-grid-photo::after{ background: radial-gradient(76% 60% at 6% 20%, rgba(13,31,26,.78) 0%, rgba(13,31,26,.40) 46%, transparent 74%), linear-gradient(180deg, rgba(13,31,26,.16) 0%, rgba(13,31,26,.48) 34%, rgba(13,31,26,.78) 62%, var(--ca-ink) 96%) !important; } .ex-path-bg-photo{ opacity: .40 !important; filter: saturate(.8) contrast(1) !important; } .ab-network-overlay{ background: linear-gradient(100deg, rgba(13,27,42,.78) 0%, rgba(13,27,42,.56) 45%, rgba(13,27,42,.24) 100%) !important; } /* ========================================================= TEXT OVER PHOTOGRAPHY With the scrims lightened, the small labels sitting directly on a photograph lost their footing. Rather than darkening the picture again, the type carries its own soft shadow — the image stays clear and the label stays readable whatever is behind it. ========================================================= */ .hm-hero-kicker, .ab-open .hm-hero-kicker, .hm-pagehero-kicker, .hm-hero-tag, .ab-open-tag, .hm-hero-sub, .hm-brief-top span, .hm-brief h3, .hm-brief-list li{ text-shadow: 0 1px 10px rgba(7,26,38,.75), 0 0 2px rgba(7,26,38,.55); } .hm-hero h1, .ab-open-h1{ text-shadow: 0 2px 22px rgba(7,26,38,.45); } /* the rule beside the hero label gets the same lift */ .hm-hero-kicker::before, .hm-pagehero-kicker::before{ box-shadow: 0 1px 8px rgba(7,26,38,.7); } /* the brief card sits on glass — give it a touch more ground so its contents hold against the brighter photograph */ .hm-brief{ background: rgba(7,26,38,.56) !important; backdrop-filter: blur(9px) saturate(1.05); -webkit-backdrop-filter: blur(9px) saturate(1.05); } /* ========================================================= HERO SCRIM · weight where the words are, clarity elsewhere A flat lighter scrim made the whole frame brighter, which left the small green label with nothing to sit on. Instead the ink is concentrated over the copy column on the left and falls away quickly, so the right of the frame — where the subject of the photograph actually is — stays clear. ========================================================= */ .hm-hero-bg::after, .hm-pagehero-bg::after, .ab-open-media::after{ background: linear-gradient(90deg, rgba(7,26,38,.90) 0%, rgba(7,26,38,.74) 30%, rgba(7,26,38,.30) 58%, rgba(7,26,38,.02) 84%, rgba(7,26,38,0) 100%), linear-gradient(180deg, rgba(7,26,38,.24) 0%, transparent 46%, rgba(7,26,38,.34) 100%) !important; } /* ========================================================= SMALL LABELS · one weight The labels were running at three different weights — 600, 700 and 800. They all carry 800 now, so a label reads with the same strength wherever it appears, and holds its own against the photography behind it. ========================================================= */ .hm-kicker, .eyebrow, .hm-hero-kicker, .hm-pagehero-kicker, .cn-why-label, .ex-diff-label, .cn-bio-label, .cn-service-tags, .cn-service-tags span, .cn-approach-step h4, .hm-brief-top span, .td-cat-k, .hm-net2-stat-t, .hm-net2-role, .ab-mv-label{ font-weight: 800 !important; } /* ========================================================= THE BRIEF PANEL — PARTNER BRIEF · TECHNICAL FOCUS · SOURCING PROFILE · THE BRIDGE --------------------------------------------------------- The panel that carries these words is rebuilt as a dark, cinematic technical plate: deep charcoal-green ground, a fine engineering grid, hairline rules, and the label in a restrained electric green with a soft glow rather than a fluorescent one. The photograph behind it stays clear — the depth comes from the plate, not from dimming the image. ========================================================= */ :root{ --ca-electric: #7FD44B; /* the digital green — sits between the brand green and the lime */ --ca-electric-soft: rgba(127,212,75,.42); } .hm-brief{ position: relative; isolation: isolate; overflow: hidden; padding: 38px 34px 34px !important; border-radius: 14px !important; border: 1px solid rgba(127,212,75,.22) !important; background: linear-gradient(150deg, rgba(9,26,20,.90) 0%, rgba(7,20,26,.94) 58%, rgba(6,16,14,.96) 100%) !important; backdrop-filter: blur(14px) saturate(1.1) !important; -webkit-backdrop-filter: blur(14px) saturate(1.1) !important; box-shadow: 0 40px 90px -50px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); } /* the engineering grid, very quiet, drifting slowly */ .hm-brief::before{ content:""; position:absolute; inset:-40%; z-index:0; pointer-events:none; background-image: linear-gradient(rgba(127,212,75,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(127,212,75,.055) 1px, transparent 1px); background-size: 34px 34px; transform: translate3d(0,0,0); animation: caGridDrift 34s linear infinite; } @keyframes caGridDrift{ from{ transform: translate3d(0,0,0); } to { transform: translate3d(34px,34px,0); } } /* a corner mark — small geometric accent, top right */ .hm-brief::after{ content:""; position:absolute; top:16px; right:16px; z-index:1; width:22px; height:22px; pointer-events:none; border-top:1px solid rgba(127,212,75,.55); border-right:1px solid rgba(127,212,75,.55); opacity:0; transform: translate(-6px,6px); transition: opacity .7s ease .5s, transform .8s cubic-bezier(.22,.68,.24,1) .5s; } .hm-brief.aos-animate::after{ opacity:1; transform:none; } .hm-brief > *{ position:relative; z-index:2; } /* the label — electric green, glowing, with a drawn rule beneath */ .hm-brief-top{ position:relative; margin-bottom: 26px !important; padding-bottom: 16px; } .hm-brief-top span{ color: var(--ca-electric) !important; letter-spacing: .22em !important; font-size: .66rem !important; text-shadow: 0 0 14px var(--ca-electric-soft), 0 0 2px rgba(7,26,38,.8) !important; } .hm-brief-top::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background: linear-gradient(90deg, var(--ca-electric) 0%, rgba(127,212,75,.18) 46%, transparent 100%); transform: scaleX(0); transform-origin:left center; transition: transform 1.1s cubic-bezier(.22,.68,.24,1) .25s; } .hm-brief.aos-animate .hm-brief-top::after{ transform: scaleX(1); } /* the statement */ .hm-brief h3{ font-size: clamp(1.16rem, 1.35vw, 1.42rem) !important; line-height: 1.28 !important; letter-spacing: -.015em; margin: 0 0 16px !important; } /* the list — each line arrives on its own beat, with a node */ .hm-brief-list{ padding-top: 20px !important; border-top: 1px solid rgba(127,212,75,.16) !important; gap: 14px !important; } .hm-brief-list li{ opacity:0; transform: translateX(-8px); transition: opacity .6s ease, transform .7s cubic-bezier(.22,.68,.24,1); } .hm-brief.aos-animate .hm-brief-list li{ opacity:1; transform:none; } .hm-brief.aos-animate .hm-brief-list li:nth-child(1){ transition-delay:.55s; } .hm-brief.aos-animate .hm-brief-list li:nth-child(2){ transition-delay:.70s; } .hm-brief.aos-animate .hm-brief-list li:nth-child(3){ transition-delay:.85s; } .hm-brief-list svg{ color: var(--ca-electric) !important; } /* Expansion · the chain resolves into the hub */ .ex-bridge-chain{ border-top: 1px solid rgba(127,212,75,.16) !important; } .ex-bridge-hub{ color: var(--ca-electric) !important; text-shadow: 0 0 12px var(--ca-electric-soft); } .ex-bridge-chain.is-on li.is-on .ex-bridge-dot{ background: var(--ca-electric) !important; box-shadow: 0 0 0 4px rgba(127,212,75,.12), 0 0 14px -2px var(--ca-electric-soft) !important; } .ex-bridge-chain li:not(:last-child)::after{ background-image: repeating-linear-gradient(180deg, var(--ca-electric) 0 7px, transparent 7px 15px) !important; } @media (prefers-reduced-motion: reduce){ .hm-brief::before{ animation:none !important; } .hm-brief::after, .hm-brief-top::after, .hm-brief-list li{ opacity:1 !important; transform:none !important; transition:none !important; } .hm-brief-top::after{ transform: scaleX(1) !important; } } /* The reveal hook sits on the panel itself on some pages and on a wrapper on others, so both are matched. Without this the list stayed at opacity 0 wherever the attribute was on the wrapper. */ .aos-animate .hm-brief::after, .hm-brief.aos-animate::after{ opacity:1; transform:none; } .aos-animate .hm-brief .hm-brief-top::after, .hm-brief.aos-animate .hm-brief-top::after{ transform: scaleX(1); } .aos-animate .hm-brief .hm-brief-list li, .hm-brief.aos-animate .hm-brief-list li{ opacity:1; transform:none; } .aos-animate .hm-brief .hm-brief-list li:nth-child(1){ transition-delay:.55s; } .aos-animate .hm-brief .hm-brief-list li:nth-child(2){ transition-delay:.70s; } .aos-animate .hm-brief .hm-brief-list li:nth-child(3){ transition-delay:.85s; } /* last-resort safety: if the panel is on screen for a moment and no reveal class ever arrives, the content must still be readable */ @media (prefers-reduced-motion: no-preference){ .hm-brief-list li{ animation: caBriefFailsafe 0s linear 3s forwards; } } @keyframes caBriefFailsafe{ to{ opacity:1; transform:none; } } /* ========================================================= THE BRIEF PANEL · the label becomes the title Bigger, led by a single green point, with the detail lines in white beneath it. ========================================================= */ .hm-brief-top{ display:flex !important; align-items:center !important; gap:12px; } .hm-brief-top span{ font-family:'Sora','Inter',sans-serif !important; font-size: clamp(.98rem, 1.15vw, 1.16rem) !important; font-weight: 800 !important; letter-spacing: .14em !important; line-height: 1.1 !important; } /* the single point that leads the title */ .hm-brief-top::before{ content:""; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background: var(--ca-electric); box-shadow: 0 0 0 4px rgba(127,212,75,.14), 0 0 14px -1px var(--ca-electric-soft); transform: scale(0); transition: transform .6s cubic-bezier(.22,.9,.3,1) .15s; } .aos-animate .hm-brief-top::before, .hm-brief.aos-animate .hm-brief-top::before{ transform: scale(1); } /* the written details read white */ .hm-brief-list li{ color:#fff !important; } .hm-brief p{ color: rgba(255,255,255,.90) !important; } .ex-bridge-chain li{ color:#fff !important; } @media (prefers-reduced-motion: reduce){ .hm-brief-top::before{ transform: scale(1) !important; transition:none !important; } } /* ========================================================= EXPANSION · WHY CLEANADVANCE — editorial composition Three columns rather than three boxes: the heading leads on the left, the explanation sits in the middle, and the three principles run down the right as one connected rail — a green line drawing through 01 → 02 → 03 rather than three separate cards. ========================================================= */ .ex-why-grid{ display:grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.02fr) minmax(0,1.06fr); gap: clamp(32px, 4vw, 68px); align-items:start; } .ex-why-lead .hm-h2{ font-size: clamp(1.9rem, 2.9vw, 2.7rem); line-height:1.1; margin:0; } .ex-why-body{ padding-top:6px; } .ex-why-body .hm-lede{ margin:0 0 16px; max-width:44ch; } .ex-why-body .hm-lede:last-child{ margin-bottom:0; } /* the rail */ .ex-why-rail{ list-style:none; margin:0; padding:0; position:relative; display:flex; flex-direction:column; gap:34px; } .ex-why-step{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; } /* the connector between one principle and the next */ .ex-why-step:not(:last-child)::after{ content:""; position:absolute; left:17px; top:38px; bottom:-34px; width:1px; background-image: repeating-linear-gradient(180deg, var(--ca-fresh) 0 6px, transparent 6px 13px); transform: scaleY(0); transform-origin:top center; transition: transform .8s cubic-bezier(.3,.75,.3,1); } .ex-why-rail.aos-animate .ex-why-step:nth-child(1)::after{ transition-delay:.35s; } .ex-why-rail.aos-animate .ex-why-step:nth-child(2)::after{ transition-delay:.75s; } .ex-why-rail.aos-animate .ex-why-step::after{ transform: scaleY(1); } .ex-why-num{ width:35px; height:35px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:'Sora','Inter',sans-serif; font-size:.76rem; font-weight:800; letter-spacing:.02em; color: var(--ca-fresh); border:1px solid rgba(84,163,67,.45); background: var(--bg); position:relative; z-index:1; opacity:0; transform: translateY(6px); transition: opacity .5s ease, transform .6s cubic-bezier(.22,.68,.24,1), border-color .4s ease, box-shadow .5s ease; } .ex-why-rail.aos-animate .ex-why-num{ opacity:1; transform:none; } .ex-why-rail.aos-animate .ex-why-step:nth-child(1) .ex-why-num{ transition-delay:.15s; } .ex-why-rail.aos-animate .ex-why-step:nth-child(2) .ex-why-num{ transition-delay:.55s; } .ex-why-rail.aos-animate .ex-why-step:nth-child(3) .ex-why-num{ transition-delay:.95s; } .ex-why-text .ex-diff-label{ display:block; margin:8px 0 8px; } .ex-why-text p{ margin:0; font-size:.94rem; line-height:1.65; color: var(--text-soft); max-width:38ch; } @media (hover:hover) and (pointer:fine){ .ex-why-step:hover .ex-why-num{ border-color: var(--ca-fresh); box-shadow: 0 0 0 5px rgba(84,163,67,.10); } } /* laptop: the rail moves under the copy, still one connected system */ @media (max-width:1180px){ .ex-why-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); row-gap: clamp(34px, 4vw, 54px); } .ex-why-rail{ grid-column: 1 / -1; flex-direction:row; gap:36px; } .ex-why-step{ flex:1 1 0; grid-template-columns:1fr; gap:0; } .ex-why-step:not(:last-child)::after{ left:44px; right:-36px; top:17px; bottom:auto; width:auto; height:1px; background-image: repeating-linear-gradient(90deg, var(--ca-fresh) 0 6px, transparent 6px 13px); transform: scaleX(0); transform-origin:left center; } .ex-why-rail.aos-animate .ex-why-step::after{ transform: scaleX(1); } } @media (max-width:820px){ .ex-why-grid{ grid-template-columns:1fr; } .ex-why-rail{ flex-direction:column; gap:30px; } .ex-why-step{ grid-template-columns:auto 1fr; gap:16px; } .ex-why-step:not(:last-child)::after{ left:17px; right:auto; top:38px; bottom:-30px; width:1px; height:auto; background-image: repeating-linear-gradient(180deg, var(--ca-fresh) 0 6px, transparent 6px 13px); transform: scaleY(0); transform-origin:top center; } .ex-why-rail.aos-animate .ex-why-step::after{ transform: scaleY(1); } .ex-why-text p{ max-width:none; } } @media (prefers-reduced-motion: reduce){ .ex-why-num, .ex-why-step::after{ transition:none !important; } .ex-why-num{ opacity:1 !important; transform:none !important; } .ex-why-step::after{ transform:none !important; } } /* ========================================================= FINAL CTA · compact and refined The closing banner was 88px/118px of padding inside a 260px capsule, which made it the largest object on most pages. It keeps the capsule shape but is now roughly half the height, with a tighter horizontal composition, a hairline edge, a green accent line that draws into place, and a smaller button. ========================================================= */ .cta-banner{ display:flex; align-items:center; justify-content:space-between; gap: clamp(24px, 3vw, 48px); padding: clamp(28px, 3vw, 40px) clamp(34px, 4.4vw, 62px) !important; border-radius: 999px !important; border: 1px solid rgba(185,227,81,.22); box-shadow: 0 26px 60px -40px rgba(6,18,14,.66); } .cta-banner > div{ max-width: 60ch; } .cta-banner h2{ font-size: clamp(1.24rem, 1.9vw, 1.72rem) !important; line-height: 1.18 !important; letter-spacing: -.02em; margin: 0 0 8px !important; } .cta-banner p{ font-size: clamp(.86rem, 1vw, .94rem) !important; line-height: 1.55 !important; margin: 0 !important; max-width: 56ch; color: rgba(255,255,255,.86) !important; } /* a fine accent line that draws across the capsule as it arrives */ .cta-banner::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:0; background: linear-gradient(90deg, transparent, var(--ca-green-fresh), transparent); opacity:.5; transform: scaleX(0); transform-origin:left center; transition: transform 1.3s cubic-bezier(.22,.68,.24,1) .2s; } .cta-banner.aos-animate::after{ transform: scaleX(1); } /* the button: smaller, still strong */ .cta-banner .btn{ height: 46px !important; padding: 0 26px !important; font-size: .855rem !important; flex: 0 0 auto; } .cta-banner .btn::after{ content:none; } @media (max-width: 900px){ .cta-banner{ flex-direction: column; align-items: flex-start; border-radius: 34px !important; padding: 30px 28px !important; gap: 20px; } .cta-banner > div{ max-width:none; } .cta-banner .btn{ width:100%; } } /* ========================================================= BUTTONS · a touch smaller across the site ========================================================= */ .btn{ height: 46px; padding: 0 26px; font-size: .875rem; } .btn-sm{ height: 40px; padding: 0 20px; font-size: .82rem; } .nav-links a.btn-primary{ height: 42px !important; padding: 0 20px !important; font-size: .855rem !important; } /* the arrow steps forward on hover */ .btn{ position:relative; } .btn:hover{ transform: translateY(-1px); } @media (max-width: 900px){ .btn{ height:46px; padding:0 22px; } } @media (prefers-reduced-motion: reduce){ .cta-banner::after{ transform: scaleX(1) !important; transition:none !important; } } /* ========================================================= FLUID TYPOGRAPHY The headings scaled on viewport width alone, which meant a 13" laptop got nearly the large-desktop size while mobile sat on a flat minimum. These curves combine a rem base with a viewport term, so each screen gets a size chosen for it: strong on a large display, a step down on a laptop, compact but confident on a phone. ========================================================= */ h1{ font-size: clamp(2.0rem, 0.90rem + 2.60vw, 3.6rem) !important; line-height: 1.06; letter-spacing: -.025em; } .hm-h2{ font-size: clamp(1.5rem, 0.85rem + 1.75vw, 2.6rem) !important; line-height: 1.12; } h2:not(.hm-h2):not(.cta-banner h2){ font-size: clamp(1.4rem, 0.85rem + 1.45vw, 2.2rem); } h3{ font-size: clamp(1.05rem, .95rem + .42vw, 1.28rem); } .hm-lede{ font-size: clamp(.95rem, .90rem + .26vw, 1.06rem) !important; line-height: 1.68; } .hm-hero-sub{ font-size: clamp(.96rem, .90rem + .30vw, 1.1rem); line-height: 1.62; } body{ font-size: clamp(.94rem, .92rem + .12vw, 1rem); } /* the mono labels hold a readable floor on small screens */ .hm-kicker, .eyebrow, .hm-hero-kicker, .hm-pagehero-kicker, .cn-why-label, .ex-diff-label, .cn-service-tags, .td-cat-k{ font-size: clamp(.68rem, .64rem + .12vw, .74rem) !important; } /* laptop: pull the tall sections in so a 13–16" screen isn't scrolling through the same whitespace a 27" monitor needs */ @media (min-width: 901px) and (max-width: 1400px){ .hm-section{ padding-top: 78px; padding-bottom: 78px; } .hm-section:has(.td-cat){ padding-top: 108px; padding-bottom: 108px; } .hm-head{ margin-bottom: 44px; } } @media (max-width: 900px){ .hm-head{ margin-bottom: 34px; } } /* ========================================================= READING POSITION A hairline rail beneath the header shows how far through the page you are, and any in-page link to the section you are currently reading is marked. No second navigation. ========================================================= */ .ca-progress{ position: fixed; top: calc(var(--utilbar-h, 44px) + 76px); left: 0; right: 0; height: 2px; z-index: 999; pointer-events: none; background: transparent; } .ca-progress-bar{ display:block; height:100%; width:100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--ca-fresh), var(--ca-green-fresh)); opacity:.85; } /* an in-page link pointing at the section being read */ a.is-current-link{ color: var(--ca-fresh) !important; font-weight: 700; } /* the section currently under the header gets its label lifted very slightly — enough to register, not enough to distract */ section.is-current > .container > .hm-head .hm-kicker, section.is-current > .container .hm-kicker{ opacity: 1; } @media (max-width: 900px){ .ca-progress{ top: calc(var(--utilbar-h, 44px) + 62px); height:2px; } } @media (prefers-reduced-motion: reduce){ .ca-progress{ display:none; } } /* ========================================================= HOME · INTERNATIONAL NETWORK — now a dark section The repeated location list and the 3 / 1 / 1 figures are gone: the globe already shows the geography and the line above already says what the network does. What remains is the headline, one sentence, and the globe as the focal point on a deep green ground. ========================================================= */ .hm-net2.hm-dark{ background: linear-gradient(168deg, #0F1F19 0%, #13291F 46%, #0D1F1A 100%); color:#fff; } .hm-net2.hm-dark .hm-h2{ color:#fff; } .hm-net2.hm-dark .ca-hl{ color: var(--ca-green-fresh); } .hm-net2.hm-dark .hm-lede{ color: rgba(255,255,255,.80); max-width:52ch; } /* the two columns rebalance now that the list has gone */ .hm-net2-top{ align-items:center; gap: clamp(40px, 5vw, 84px); } .hm-net2-copy{ align-self:center; } /* the globe becomes the focal point */ .hm-net2-globe{ filter: drop-shadow(0 40px 70px rgba(0,0,0,.5)); } .hm-net2.hm-dark .hm-net2-orbits{ stroke: var(--ca-green-fresh) !important; opacity:.30; } .hm-net2.hm-dark .hm-net2-orbit-dot{ fill: var(--ca-green-fresh) !important; opacity:.9; } .hm-net2.hm-dark .hm-net2-arc{ stroke: var(--ca-green-fresh) !important; } .hm-net2.hm-dark .hm-net2-halo{ opacity:.5; } @media (max-width: 900px){ .hm-net2-top{ gap:34px; } } /* ========================================================= TRADING · CATEGORY RHYTHM — dark, light, dark, light 01 Fertilizers dark 02 Chemicals light 03 Feedstocks dark 04 Biofuels light The alternation carries the scroll; nothing needed to be added to the page to create it. ========================================================= */ .hm-section.td-cat-dark{ background: linear-gradient(168deg, #101F19 0%, #14291F 50%, #0E1F1A 100%); color:#fff; } .td-cat-dark .hm-h2{ color:#fff; } .td-cat-dark .hm-lede, .td-cat-dark .td-cat-body p{ color: rgba(255,255,255,.80); } .td-cat-dark .hm-kicker{ color: var(--ca-label-dark) !important; } .td-cat-dark .hm-kicker::before{ background: var(--ca-label-dark) !important; } /* the material chips read on the dark ground */ .td-cat-dark .td-cat-body .tag, .td-cat-dark .td-cat-body .hm-tag, .td-cat-dark .td-cat-body li, .td-cat-dark .td-cat-body span:not([data-i18n="common.category"]){ border-color: rgba(255,255,255,.22); } .td-cat-dark .td-cat-media{ box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); } /* ========================================================= HIERARCHY · the label steps back, the headline leads The eyebrows had grown to compete with the headlines, and the headlines themselves were running large. Both come down a step so the headline is clearly the focus and the label reads as a label. ========================================================= */ .hm-kicker, .eyebrow, .hm-hero-kicker, .hm-pagehero-kicker{ font-size: clamp(.60rem, .57rem + .10vw, .665rem) !important; font-weight: 700 !important; letter-spacing: .17em !important; margin-bottom: 18px !important; opacity: .92; } .hm-kicker::before, .eyebrow::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before{ width: 22px !important; height: 1px !important; } /* the headline: confident, no longer enormous */ h1{ font-size: clamp(1.92rem, 0.86rem + 2.30vw, 3.15rem) !important; } .hm-h2{ font-size: clamp(1.42rem, 0.82rem + 1.52vw, 2.22rem) !important; } h2:not(.hm-h2):not(.cta-banner h2){ font-size: clamp(1.32rem, 0.82rem + 1.28vw, 1.95rem); } /* the small technical labels stay legible but discreet */ .cn-why-label, .ex-diff-label, .cn-bio-label, .cn-service-tags, .cn-service-tags span, .td-cat-k, .hm-net2-stat-t, .hm-net2-role{ font-size: clamp(.62rem, .59rem + .10vw, .69rem) !important; letter-spacing: .14em !important; } /* A gradient leaves background-color transparent, so anything measuring contrast (and any renderer that drops the gradient) sees the page behind it. The dark sections get a solid base. */ .hm-section.td-cat-dark{ background-color: #101F19; } .hm-net2.hm-dark{ background-color: #0F1F19; } /* ========================================================= THE BRIEF PANEL · smaller title PARTNER BRIEF · TECHNICAL FOCUS · SOURCING PROFILE · THE BRIDGE step back down — they lead the panel without competing with the statement under them. ========================================================= */ .hm-brief-top span{ font-size: clamp(.72rem, .66rem + .28vw, .84rem) !important; letter-spacing: .17em !important; } .hm-brief-top{ gap: 10px; margin-bottom: 20px !important; padding-bottom: 13px; } .hm-brief-top::before{ width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(127,212,75,.14), 0 0 11px -1px var(--ca-electric-soft); } /* ========================================================= TRADING · the category number matches its card The four cards at the top of the page introduce 01 Fertilizers · 02 Chemicals · 03 Biodiesel Feedstocks · 04 Biofuels & By-products. Each detail section below now carries its number in exactly the same treatment and the same green, so the card and its section read as a pair. ========================================================= */ .td-cat .hm-kicker{ display: flex; align-items: baseline; gap: 9px; font-family: var(--font-mono) !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .12em !important; opacity: 1 !important; margin-bottom: 14px !important; } /* the card's number has no rule beside it, so neither does this */ .td-cat .hm-kicker::before{ display: none !important; } /* the word "Category" recedes; the numeral carries the link */ .td-cat .hm-kicker > span[data-i18n="common.category"]{ opacity: .5; font-weight: 600; } /* light sections take the card's green, dark sections the lighter one so it stays readable */ .td-cat .hm-kicker{ color: var(--forest-dark) !important; } .td-cat-dark .td-cat .hm-kicker, .td-cat-dark .hm-kicker{ color: var(--ca-green-fresh) !important; } /* the index card and its section share one hover relationship */ .pr-index a span{ color: var(--ca-fresh) !important; opacity:.9; } .pr-index a:hover span{ opacity:1; } [data-theme="dark"] .pr-index a span, .hm-dark .pr-index a span{ color: var(--ca-green-fresh) !important; } /* ========================================================= THE YELLOW · a signal colour with a job --------------------------------------------------------- The logo is green and yellow; the site was green and white, so the mark sat apart from the design. The yellow now has defined work, and only this work: · the small rule beside every section label · the point that travels the process connectors · the nodes on the globe and the network paths · the marker on the active navigation item · the arrow's micro-accent on hover One value, #F5C53C, used nowhere else. Green stays the brand, white the space, dark the contrast — yellow only ever marks a position or a moment. ========================================================= */ :root{ --ca-signal: #F5C53C; --ca-signal-soft: rgba(245,197,60,.30); } /* ---- 1. the rule beside each section label ---- */ .hm-kicker::before, .eyebrow::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before{ background: var(--ca-signal) !important; height: 2px !important; } /* the label itself stays green — only the rule signals */ /* ---- 2. the point travelling the process connectors ---- */ .cn-step::before, .hm-flow-step::before{ content:""; position:absolute; z-index:2; top:18px; left:56px; right:-46px; height:7px; pointer-events:none; opacity:0; background-image: radial-gradient(circle, var(--ca-signal) 0 2.1px, rgba(245,197,60,0) 2.6px); background-size: 14px 7px; background-repeat: no-repeat; background-position: 0% center; filter: drop-shadow(0 0 5px var(--ca-signal-soft)); } .hm-flow-step::before{ top:20px; left:calc(22px + 58px); right:-14px; } .cn-step:last-child::before, .hm-flow-step:last-child::before{ display:none; } .cn-steps.is-live .cn-step.is-run::before, .hm-flow.is-live .hm-flow-step.is-run::before{ animation: caSignalRun 3.2s linear infinite; } @keyframes caSignalRun{ 0% { background-position: 0% center; opacity: 0; } 10% { opacity: 1; } 86% { opacity: 1; } 100% { background-position: 100% center; opacity: 0; } } /* below the 2-up breakpoint there is no connector to travel */ @media (max-width:1100px){ .cn-step::before, .hm-flow-step::before{ display:none; } } /* ---- 3. nodes on the globe and the network paths ---- */ .hm-net2-arc{ stroke: var(--ca-signal) !important; opacity:.55; } .ex-globe-arc{ stroke: var(--ca-signal) !important; } .hm-net2-orbit-dot{ fill: var(--ca-signal) !important; opacity:.95 !important; } /* ---- 4. the active navigation item carries a small marker ---- */ .nav-links a.active{ position:relative; } .nav-links a.active::before{ content:""; position:absolute; top:2px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background: var(--ca-signal); opacity:0; transform: translateY(-3px); transition: opacity .4s ease, transform .5s cubic-bezier(.22,.68,.24,1); } .nav-links a.active::before{ opacity:1; transform:none; } /* ---- 5. the arrow's micro-accent on hover ---- */ .btn:hover svg, .hm-svc-arrow svg{ transition: transform .35s var(--ca-ease), color .3s ease; } .hm-svc-card:hover .hm-svc-arrow{ color: var(--ca-signal) !important; } .cn-service:hover .cn-service-go{ color: var(--ca-signal) !important; } .ex-cell:hover::after{ background: var(--ca-signal); } /* ---- 6. the reading rail finishes on the signal colour ---- */ .ca-progress-bar{ background: linear-gradient(90deg, var(--ca-fresh) 0%, var(--ca-green-fresh) 72%, var(--ca-signal) 100%); } /* ---- 7. the brief panel's corner mark is a signal, not decoration ---- */ .hm-brief::after{ border-top-color: var(--ca-signal) !important; border-right-color: var(--ca-signal) !important; } @media (prefers-reduced-motion: reduce){ .cn-step::before, .hm-flow-step::before{ animation:none !important; opacity:0 !important; } .nav-links a.active::before{ transition:none !important; } } /* ========================================================= LABEL RULE · fix The rule beside each section label was set to scaleX(0) until the label itself received the reveal class — but the reveal attribute sits on the section head, not on the label, so on most sections the rule never drew and was invisible. Both shapes are matched now, and a failsafe guarantees the rule is there even if no class arrives. ========================================================= */ .hm-kicker::before, .eyebrow::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before{ transform: scaleX(0); transform-origin: left center; transition: transform .75s cubic-bezier(.22,.68,.24,1) .1s; animation: caRuleFailsafe 0s linear 2.2s forwards; } @keyframes caRuleFailsafe{ to{ transform: none; } } .aos-animate .hm-kicker::before, .aos-animate .eyebrow::before, .aos-animate .hm-hero-kicker::before, .aos-animate .hm-pagehero-kicker::before, .hm-kicker.aos-animate::before, .eyebrow.aos-animate::before, .hm-hero-kicker.aos-animate::before, .hm-pagehero-kicker.aos-animate::before, .is-in .hm-hero-kicker::before, .hm-hero .hm-hero-kicker::before, .ab-open .hm-hero-kicker::before, .hm-pagehero .hm-pagehero-kicker::before{ transform: none; } @media (prefers-reduced-motion: reduce){ .hm-kicker::before, .eyebrow::before, .hm-hero-kicker::before, .hm-pagehero-kicker::before{ transform: none !important; transition:none !important; animation:none !important; } } /* ========================================================= CONSULTING · OUR APPROACH — dark The diagnosis-to-implementation process now sits on the deep green ground, so the page alternates light and dark the way Trading does and the process reads as a distinct moment rather than more of the same white page. ========================================================= */ .hm-section.cn-approach-dark{ background-color: #101F19; background-image: linear-gradient(168deg, #101F19 0%, #14291F 52%, #0E1F1A 100%); color:#fff; } .cn-approach-dark .hm-h2{ color:#fff; } .cn-approach-dark .hm-lede{ color: rgba(255,255,255,.80); } .cn-approach-dark .hm-kicker{ color: var(--ca-label-dark) !important; } /* the process takes its dark-surface treatment */ .cn-approach-dark .cn-step h4{ color:#fff; } .cn-approach-dark .cn-step p{ color: rgba(255,255,255,.78); } .cn-approach-dark .cn-step-num{ background: transparent !important; border-color: rgba(255,255,255,.22) !important; color: rgba(255,255,255,.5) !important; } .cn-approach-dark .cn-steps.is-on .cn-step.is-on .cn-step-num{ border-color: var(--ca-green-fresh) !important; color: var(--ca-green-fresh) !important; box-shadow: 0 0 0 5px rgba(185,227,81,.10), 0 0 18px -6px rgba(185,227,81,.45); } .cn-approach-dark .cn-steps.is-live .cn-step.is-on .cn-step-num{ animation: caBreathDark 4.6s ease-in-out infinite; } .cn-approach-dark .cn-steps::before{ background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 7px, transparent 7px 15px); } .cn-approach-dark .cn-step::after{ background-image: repeating-linear-gradient(90deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px); } .cn-approach-dark .cn-steps::after{ background-image: linear-gradient(90deg, transparent, rgba(185,227,81,.85), transparent); } @media (max-width:720px){ .cn-approach-dark .cn-step::after{ background-image: repeating-linear-gradient(180deg, var(--ca-green-fresh) 0 7px, transparent 7px 15px); } } /* ========================================================= THE BRIEF PANEL · smaller again ========================================================= */ .hm-brief-top span{ font-size: clamp(.63rem, .60rem + .14vw, .70rem) !important; letter-spacing: .19em !important; } .hm-brief-top{ gap: 9px; margin-bottom: 17px !important; padding-bottom: 11px; } .hm-brief-top::before{ width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(127,212,75,.13), 0 0 9px -1px var(--ca-electric-soft); } /* ========================================================= HOME · INTERNATIONAL NETWORK — back to the light section The section is light again with the day globe and the region list (Europe · North Africa · GCC). Portugal is not listed — the sentence above already says it is the base of operations. The dark-surface leftovers are neutralised. ========================================================= */ .hm-net2-globe{ filter: none; } .hm-net2-top{ align-items: start; } /* ========================================================= CONSULTING · IDENTIFY → ANALYSE → IMPROVE Brought down to the size of the process rows on the other pages, and onto the same component language: a small ring carrying the numeral, the shared dashed green run with its travelling yellow signal, and the same sequential timing. ========================================================= */ .cn-approach-top{ gap: 12px !important; margin-bottom: 18px !important; } /* the numeral moves inside a ring, like every other process */ .cn-approach-num{ order: 1; width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--ca-line, rgba(22,35,29,.18)); background: var(--bg); font-family: var(--font-mono) !important; font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .04em !important; color: var(--ca-grey, #66756D) !important; transition: border-color .45s var(--ca-ease), color .45s ease, box-shadow .5s var(--ca-ease), opacity .5s ease, transform .55s var(--ca-ease); opacity: .55; transform: translateY(8px); } .cn-approach.aos-animate .cn-approach-num, .aos-animate .cn-approach-num{ opacity: 1; transform: none; border-color: var(--ca-fresh) !important; color: var(--ca-fresh) !important; box-shadow: 0 0 0 5px rgba(84,163,67,.10); animation: caBreathLight 4.6s ease-in-out infinite; } .aos-animate .cn-approach-step:nth-child(1) .cn-approach-num{ transition-delay:.05s; } .aos-animate .cn-approach-step:nth-child(2) .cn-approach-num{ transition-delay:.30s; } .aos-animate .cn-approach-step:nth-child(3) .cn-approach-num{ transition-delay:.55s; } /* the icon becomes a light chip beside it, not a heavy dark disc */ .cn-approach-badge{ order: 2; width: 34px !important; height: 34px !important; background: rgba(84,163,67,.12) !important; color: var(--ca-fresh) !important; } .cn-approach-badge svg{ width:17px !important; height:17px !important; } /* the connector is the shared dashed green run */ .cn-approach-line{ order: 3; position: relative; height: 1px !important; background: none !important; background-image: repeating-linear-gradient(90deg, var(--ca-fresh) 0 7px, transparent 7px 15px) !important; background-size: 200% 100%; transform: scaleX(0); transform-origin: left center; transition: transform .43s cubic-bezier(.35,.75,.3,1); } .cn-approach.aos-animate .cn-approach-line, .aos-animate .cn-approach-line{ transform: scaleX(1); animation: caRunFlow 3.2s linear infinite; } .aos-animate .cn-approach-step:nth-child(1) .cn-approach-line{ transition-delay:.20s; } .aos-animate .cn-approach-step:nth-child(2) .cn-approach-line{ transition-delay:.45s; } .aos-animate .cn-approach-step:nth-child(3) .cn-approach-line{ transition-delay:.70s; } /* the travelling yellow signal, as on every other connector */ .cn-approach-line::after{ content:""; position:absolute; left:0; right:0; top:-3px; height:7px; pointer-events:none; opacity:0; background-image: radial-gradient(circle, var(--ca-signal) 0 2.1px, rgba(245,197,60,0) 2.6px); background-size: 14px 7px; background-repeat: no-repeat; background-position: 0% center; filter: drop-shadow(0 0 5px var(--ca-signal-soft)); } .aos-animate .cn-approach-line::after{ animation: caSignalRun 3.2s linear infinite; } /* the label and copy settle with the step */ .cn-approach-step h4{ margin-bottom: 8px; } .cn-approach-step p{ font-size:.94rem; line-height:1.62; } @media (max-width: 900px){ .cn-approach-num{ width:40px; height:40px; } .cn-approach-line{ display:none; } .cn-approach-line::after{ display:none; } } @media (prefers-reduced-motion: reduce){ .cn-approach-num, .cn-approach-line{ transition:none !important; animation:none !important; } .cn-approach-num{ opacity:1 !important; transform:none !important; } .cn-approach-line{ transform:none !important; } .cn-approach-line::after{ display:none !important; } } /* ========================================================= ABOUT · "Our Core Values" joins Mission and Vision Same chip, same Fresh Green glyph, same title size — the three headings on the page now read as one family. ========================================================= */ .ab-val-head{ display:flex; align-items:center; gap:14px; margin:0; } .ab-val-head .hm-h2{ font-size: 1.6rem !important; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 !important; max-width: none; } @media (max-width:900px){ .ab-val-head .hm-h2{ font-size:1.36rem !important; } } /* ========================================================= WHY CLEANADVANCE · numbered points 01 TECHNICAL UNDERSTANDING · 02 LOCAL PERSPECTIVE · 03 COMMERCIAL EXECUTION — the numeral in Fresh Green, the same treatment the Expansion rail already uses. ========================================================= */ .cn-why-point{ display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; } .cn-why-num{ grid-row: 1 / span 2; font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .04em; line-height: 1.9; color: var(--ca-fresh); opacity: .95; } .cn-approach-dark .cn-why-num, .hm-dark .cn-why-num{ color: var(--ca-green-fresh); } /* ========================================================= THE GLOBE · brighter connection points The destination nodes take the brighter green used on the PARTNER BRIEF panel, and the Portugal hub takes the yellow signal — a solid mark reads clearly at this size where a thin green numeral would not. ========================================================= */ /* the three destination markers — the brighter green from the PARTNER BRIEF panel; the Portugal hub keeps the yellow signal */ .hm-net2-globe circle.hm-net2-ring[fill="var(--ca-green-dark)"]{ fill: var(--ca-electric) !important; } .hm-net2-globe circle.hm-net2-ring{ transition: fill .4s ease; } .hm-net2-orbit-dot{ fill: var(--ca-signal) !important; opacity:1 !important; } .hm-net2-arc{ stroke: var(--ca-signal) !important; opacity:.7 !important; } /* ========================================================= CONSULTING · the three service rows fit together The section ran 1016px against a 900px viewport, so the third row was always below the fold. The rows are tightened — less padding, a slightly smaller title, the description held to two lines — so the heading and all three areas are seen in one view. ========================================================= */ .cn-service{ padding: 22px 30px !important; align-items: center; } .cn-service-main h3{ font-size: clamp(1.06rem, .96rem + .5vw, 1.28rem) !important; margin: 0 0 6px !important; } .cn-service-tags{ margin-bottom: 7px !important; } .cn-service-main p{ font-size: .90rem !important; line-height: 1.5 !important; max-width: 62ch; } .cn-services{ gap: 14px !important; } @media (min-width: 901px){ .hm-section#services{ padding-top: 66px; padding-bottom: 66px; } .hm-section#services .hm-head{ margin-bottom: 30px; } } @media (max-width: 900px){ .cn-service{ padding: 20px 20px !important; } } /* ========================================================= NUMERALS · one clear green, everywhere --------------------------------------------------------- The numbers had drifted across three values — #1F6B41 on the category cards and section labels, #54A343 on the process rows and cells, grey while dormant. Every numeral on the site now uses the clear Fresh Green #54A343, with the lime on dark surfaces so it stays legible. Only the pre-activation state of an animated step stays muted, so the sequence still reads as a sequence. ========================================================= */ .cn-step-num, .hm-flow-num, .cn-approach-num, .ex-cell-num, .cn-service-num, .pr-index span, .ex-why-num, .cn-why-num, .ex-path-num, .ab-step-num, .td-material-num, .ab-guide-num, .hm-diff-stat b, .td-cat .hm-kicker{ color: var(--ca-fresh) !important; } /* the numeral inside a category label keeps its full strength while the word "Category" stays quiet */ .td-cat .hm-kicker > span[data-i18n="common.category"]{ opacity:.5; } /* activated process rings take the same green */ .cn-steps.is-on .cn-step.is-on .cn-step-num, .cn-approach.aos-animate .cn-approach-num, .aos-animate .cn-approach-num{ border-color: var(--ca-fresh) !important; color: var(--ca-fresh) !important; } /* dark surfaces use the lime so the numeral still reads */ .hm-dark .cn-step-num, .hm-dark .hm-flow-num, .hm-dark .cn-approach-num, .hm-dark .ex-cell-num, .hm-dark .cn-service-num, .hm-dark .pr-index span, .hm-dark .ex-why-num, .hm-dark .cn-why-num, .hm-dark .ex-path-num, .hm-dark .td-material-num, .hm-dark .td-cat .hm-kicker, .td-cat-dark .hm-kicker, .cn-approach-dark .cn-step-num, [data-theme="dark"] .cn-step-num, [data-theme="dark"] .hm-flow-num, [data-theme="dark"] .cn-approach-num, [data-theme="dark"] .ex-cell-num, [data-theme="dark"] .cn-service-num, [data-theme="dark"] .pr-index span, [data-theme="dark"] .ex-why-num, [data-theme="dark"] .cn-why-num, [data-theme="dark"] .td-material-num{ color: var(--ca-green-fresh) !important; } /* the dormant state of an animated step stays muted — the sequence needs somewhere to travel from */ .cn-step-num{ color: var(--ca-grey, #66756D) !important; } .cn-steps.is-on .cn-step.is-on .cn-step-num{ color: var(--ca-fresh) !important; } .hm-dark .cn-step-num, .cn-approach-dark .cn-step-num{ color: rgba(255,255,255,.5) !important; } .hm-dark .cn-steps.is-on .cn-step.is-on .cn-step-num, .cn-approach-dark .cn-steps.is-on .cn-step.is-on .cn-step-num{ color: var(--ca-green-fresh) !important; } .hm-flow-num{ color: rgba(255,255,255,.5) !important; } .hm-flow.is-on .hm-flow-step.is-on .hm-flow-num{ color: var(--ca-green-fresh) !important; } /* ========================================================= THE GLOBE · Kelly Green trade routes The animated arcs between Portugal and the destinations now run in Kelly Green #4CBB17 on both globes. ========================================================= */ .hm-net2-arc, .ex-globe-arc{ stroke: var(--ca-kelly) !important; opacity: .85 !important; } .hm-net2-globe .hm-net2-halo{ opacity:.7; } /* ========================================================= TRADING · the category index — surround only The cards keep their existing shape and layout exactly as they were. Only the surround changes: the outer border and the hairlines between the four cells take a green tint, and the rule that grows across the top on hover is Kelly Green, matching the trade routes on the globe. ========================================================= */ /* the cards have their own rounded borders, so tinting the container background showed as wedges between them — the tint belongs on each card's own edge */ .pr-index{ background: transparent !important; border-color: transparent !important; } .pr-index a{ border: 1px solid rgba(76,187,23,.34) !important; } .pr-index a::before{ background: var(--ca-kelly) !important; } .pr-index a:hover{ border-color: rgba(76,187,23,.45) !important; } .pr-index a::after{ color: var(--ca-kelly) !important; } [data-theme="dark"] .pr-index{ background: rgba(185,227,81,.20) !important; border-color: rgba(185,227,81,.30) !important; } /* the trade routes read darker against the pale globe */ .hm-net2-arc, .ex-globe-arc{ stroke: var(--ca-kelly-ink) !important; opacity: 1 !important; stroke-width: 1.6 !important; } /* ========================================================= RTL — THE PAGE RUNS THE OTHER WAY --------------------------------------------------------- Arabic reads right to left, so every piece of motion that carries a direction has to turn around with it: the reveal travel, the process connectors that draw toward the next step, the travelling dashes and the yellow signal point. Anything that stays put in LTR stays put here too. ========================================================= */ /* ---------- 1. reveal travel ---------- */ [dir="rtl"] [data-aos="fade-right"]{ transform: translateX(24px); } [dir="rtl"] [data-aos="fade-left"] { transform: translateX(-24px); } /* ---------- 2. the connectors draw toward the next step ---------- */ [dir="rtl"] .cn-step::after{ left:-46px; right:56px; transform-origin: right center; } [dir="rtl"] .hm-flow-step::after{ left:-14px; right:calc(22px + 58px); transform-origin: right center; } [dir="rtl"] .cn-chain-line, [dir="rtl"] .cn-approach-line{ transform-origin: right center; } /* the yellow signal point rides the same connector, mirrored */ [dir="rtl"] .cn-step::before{ left:-46px; right:56px; } [dir="rtl"] .hm-flow-step::before{ left:-14px; right:calc(22px + 58px); } /* ---------- 3. the travelling dashes run right to left ---------- */ @keyframes caRunFlowRTL{ from{ background-position: 0 0; } to { background-position: 200% 0; } } @keyframes caGlintRTL{ 0% { background-position: 118% 0; opacity:0; } 14% { opacity:1; } 62% { opacity:1; } 100% { background-position: -18% 0; opacity:0; } } @keyframes caSignalRunRTL{ 0% { background-position: 100% center; opacity: 0; } 10% { opacity: 1; } 86% { opacity: 1; } 100% { background-position: 0% center; opacity: 0; } } [dir="rtl"] .cn-steps.is-live .cn-step.is-run::after, [dir="rtl"] .hm-flow.is-live .hm-flow-step.is-run::after, [dir="rtl"] .cn-chain.is-live .cn-chain-node.is-run + .cn-chain-line, [dir="rtl"] .hm-split-mid.is-in::before, [dir="rtl"] .hm-split-mid.is-in::after, [dir="rtl"] .aos-animate .cn-approach-line{ animation-name: caRunFlowRTL !important; } [dir="rtl"] .cn-steps.is-live::after, [dir="rtl"] .hm-flow.is-live::after, [dir="rtl"] .cn-chain.is-live::after{ animation-name: caGlintRTL !important; } [dir="rtl"] .cn-steps.is-live .cn-step.is-run::before, [dir="rtl"] .hm-flow.is-live .hm-flow-step.is-run::before, [dir="rtl"] .aos-animate .cn-approach-line::after{ animation-name: caSignalRunRTL !important; } /* ---------- 4. small directional details ---------- */ [dir="rtl"] .pr-index a::before{ left:auto; right:0; transform-origin: right center; } [dir="rtl"] .pr-index a::after{ transform: translateX(8px); } [dir="rtl"] .pr-index a:hover::after{ transform: translateX(0); } /* ---------- 5. the Consulting practice band mirrors properly ---------- The photo is absolutely placed against the page edge with a concave mask, so in RTL it has to move to the other edge — otherwise it sits on top of the copy column the grid has just placed there. */ [dir="rtl"] .cn-practice2-media{ right:auto; left:0; -webkit-mask-image: radial-gradient(ellipse 128% 185% at 0% 50%, #000 60%, transparent 60.35%); mask-image: radial-gradient(ellipse 128% 185% at 0% 50%, #000 60%, transparent 60.35%); } [dir="rtl"] .cn-practice2-media::after{ background: radial-gradient(ellipse 128% 185% at 0% 50%, transparent 59.75%, var(--forest) 59.75%, var(--forest) 60.35%, transparent 60.4%); } [dir="rtl"] .cn-practice2-copy{ padding: 96px max(28px, calc((100vw - 1240px) / 2)) 96px 64px; } @media (max-width:900px){ [dir="rtl"] .cn-practice2-copy{ padding:72px 28px 40px; } } /* ---------- 6. the remaining directional markers ---------- */ /* Expansion — the vertical bridge chain hangs from its dot */ [dir="rtl"] .ex-bridge-chain li:not(:last-child)::after{ left:auto; right:5px; } /* Expansion — the visual path arrow runs toward the next node */ [dir="rtl"] .ex-path--visual .ex-path-step:not(:last-child)::after{ left:-30px; right:84px; background: linear-gradient(270deg, rgba(185,227,81,.75), rgba(185,227,81,.45)); transform-origin: right; } [dir="rtl"] .ex-path-line{ left: calc(25% - 48px); right:24px; } [dir="rtl"] .ex-path-line-fill{ transform-origin: right center; } @media (max-width:900px){ [dir="rtl"] .ex-path-num{ left:auto; right:-25px; } [dir="rtl"] .ex-path-step:last-child{ border-left-color:initial; } } /* Expansion — the "why" principles connector, and the card mark */ [dir="rtl"] .ex-why-step:not(:last-child)::after{ left:auto; right:17px; } [dir="rtl"] .ex-cell::after{ left:auto; right:34px; transform: translateX(8px); } [dir="rtl"] .ex-cell:hover::after{ transform: translateX(0); } /* Consulting — the stamp on the biodiesel photo */ [dir="rtl"] .cn-bio-stamp{ left:auto; right:24px; } /* Home — the numbered badge on a business card */ [dir="rtl"] .biz-num{ left:auto; right:18px; } /* ========================================================= THE MARK --------------------------------------------------------- The logo is now a transparent PNG. Two things follow from that: it must never be cropped (the ring has to close), and on a dark surface the deep green lettering needs a light plate behind it or it disappears into the background. ========================================================= */ img[src*="images/logo.png"]{ object-fit: contain !important; transform: none !important; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(13,27,42,.06); } .brand img[src*="images/logo.png"]{ padding: 2px; } .footer-brand img[src*="images/logo.png"]{ padding: 3px; } /* inside the Home badge the white circle is already drawn */ .hm-split-mid .badge img[src*="images/logo.png"]{ background: transparent; box-shadow: none; } /* ========================================================= HOME · CLOSING BANNER Four prompts now instead of three, so the copy column takes a little more width and the row tightens up — they should read as one line of invitations, not a wrapped list. ========================================================= */ @media (min-width:1024px){ .cta-banner > .hm-final-banner-copy{ max-width: 76ch; } } .hm-final-banner .hm-final-points{ gap: 8px 20px; font-size:.95rem; } .hm-final-banner .hm-final-line{ max-width: 600px; }