/* ========================================================================== Norvel Capital — design system v6 Light institutional. Works LTR and RTL: layout uses logical properties, so switching is enough — no mirrored stylesheet needed. ========================================================================== */ :root{ /* surface */ --bg: #FFFFFF; --bg-soft: #FAFAF8; --bg-tint: #F5F6F4; --navy: #0C2340; --navy-deep: #081A30; /* ink */ --ink: #0F1E2E; --ink-2: #46566A; --ink-3: #7C8A99; /* accent */ --gold: #B08D57; --gold-soft: #D8C4A3; --gold-wash: #F6F0E6; --green: #1F8A6D; --green-soft: #E7F3EE; /* line */ --line: #E6E8EA; --line-soft: #F0F1F2; --line-dark: rgba(255,255,255,.12); /* type */ --serif: "Source Serif 4", "IBM Plex Sans Arabic", Georgia, serif; --sans: "Inter", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* metrics */ --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(12,35,64,.04), 0 8px 24px -12px rgba(12,35,64,.10); --shadow-lg: 0 2px 4px rgba(12,35,64,.04), 0 24px 60px -24px rgba(12,35,64,.18); --nav-h: 72px; --gutter: clamp(20px, 4vw, 48px); --maxw: 1280px; } *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100% } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{ max-width:100%; display:block } a{ color:inherit; text-decoration:none } button{ font:inherit; color:inherit; cursor:pointer } .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:max(var(--gutter), env(safe-area-inset-left)); } /* ---------- type scale ---------------------------------------------------- */ h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.12; letter-spacing:-.02em; color:var(--ink) } h1{ font-size:clamp(38px, 5.2vw, 62px) } h2{ font-size:clamp(28px, 3.4vw, 42px) } h3{ font-size:clamp(19px, 1.5vw, 22px); letter-spacing:-.01em } p { margin:0 } /* the period at the end of a display heading, in gold — as in the mockups */ .dot{ color:var(--gold) } .eyebrow{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); } .lede{ font-size:17px; line-height:1.65; color:var(--ink-2); max-width:52ch } .muted{ color:var(--ink-3) } /* ---------- buttons ------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:var(--radius-sm); border:1px solid transparent; font-size:14.5px; font-weight:600; letter-spacing:.01em; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-1px) } .btn:active{ transform:none } .btn-primary{ background:var(--navy); color:#fff } .btn-primary:hover{ background:var(--navy-deep) } .btn-ghost{ background:transparent; color:var(--gold); border-color:var(--gold-soft) } .btn-ghost:hover{ background:var(--gold-wash); border-color:var(--gold) } .btn-gold{ background:var(--gold); color:#fff } .btn-gold:hover{ background:#9C7B49 } /* arrow flips automatically in RTL */ .btn .arw{ transition:transform .2s ease } .btn:hover .arw{ transform:translateX(3px) } [dir="rtl"] .btn .arw{ transform:scaleX(-1) } [dir="rtl"] .btn:hover .arw{ transform:scaleX(-1) translateX(3px) } /* ---------- nav ----------------------------------------------------------- */ .nav{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease; } .nav.scrolled{ border-bottom-color:var(--line); box-shadow:0 1px 20px -12px rgba(12,35,64,.4) } .nav-inner{ height:var(--nav-h); display:flex; align-items:center; gap:28px; } .logo{ display:flex; align-items:center; gap:11px; flex-shrink:0 } .logo-mark{ width:34px; height:34px; flex-shrink:0 } .logo-text{ display:flex; flex-direction:column; line-height:1 } .logo-name{ font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:.13em; color:var(--ink) } .logo-sub { font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.28em; color:var(--gold); margin-top:4px } .nav-links{ display:flex; align-items:center; gap:26px; margin-inline-start:auto } .nav-links a{ font-size:14px; font-weight:500; color:var(--ink-2); padding:6px 0; position:relative; transition:color .2s ease; } .nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--ink) } .nav-links a[aria-current="page"]::after{ content:""; position:absolute; inset-inline:0; bottom:-2px; height:2px; background:var(--gold); border-radius:2px; } .nav-side{ display:flex; align-items:center; gap:14px; margin-inline-start:auto } .nav-links + .nav-side{ margin-inline-start:0 } .lang{ display:flex; align-items:center; gap:2px } .lang button{ background:none; border:0; padding:6px 9px; border-radius:6px; font-size:13px; font-weight:600; color:var(--ink-3); transition:color .2s ease, background .2s ease; } .lang button:hover{ color:var(--ink); background:var(--bg-tint) } .lang button[aria-pressed="true"]{ color:var(--ink) } .lang .sep{ width:1px; height:14px; background:var(--line) } .nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:9px 11px; line-height:0; } /* ---------- hero ---------------------------------------------------------- */ .hero{ position:relative; padding:clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px); overflow:hidden } .hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px, 4vw, 56px); align-items:center; } .hero-copy{ position:relative; z-index:2 } .hero h1{ margin:18px 0 20px } .hero .lede{ margin-bottom:30px } .hero-cta{ display:flex; flex-wrap:wrap; gap:12px } /* dotted world map sits behind the copy and under the card */ .hero-map{ position:absolute; inset-block:0; inset-inline-end:0; width:min(760px, 62%); pointer-events:none; z-index:1; display:flex; align-items:center; opacity:.85; } .hero-map svg{ width:100%; height:auto } .map-dot{ fill:#C9D2DA } .map-dot.hl{ fill:var(--gold-soft) } .map-pin{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:100px; padding:5px 12px 5px 9px; font-size:11.5px; font-weight:600; color:var(--ink); box-shadow:var(--shadow); white-space:nowrap; } .map-pin i{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0 } .map-pin.eu { inset-inline-start:52%; top:30% } .map-pin.na { inset-inline-start:22%; top:41% } .map-pin.me { inset-inline-start:62%; top:52% } .map-pin.asia{ inset-inline-start:80%; top:44% } /* ---------- portfolio overview card --------------------------------------- */ .pcard{ position:relative; z-index:3; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:22px; } .pcard-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px } .pcard-head h3{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:0 } .pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-2); border:1px solid var(--line); border-radius:100px; padding:5px 11px; } .pill i{ width:6px; height:6px; border-radius:50%; background:var(--green) } .perf-label{ font-size:12px; color:var(--ink-3); margin-bottom:4px } .perf-value{ font-family:var(--sans); font-size:30px; font-weight:700; color:var(--green); letter-spacing:-.02em } .spark{ margin:8px 0 20px; height:78px } .spark svg{ width:100%; height:100% } .pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius-sm); overflow:hidden } .pgrid > div{ background:#fff; padding:14px 16px } .pgrid .k{ font-size:11.5px; color:var(--ink-3); margin-bottom:5px } .pgrid .v{ font-size:17px; font-weight:600; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:10px } .pcard-foot{ margin-top:16px; display:flex } .pcard-foot a{ font-size:13.5px; font-weight:600; color:var(--navy); display:inline-flex; align-items:center; gap:7px } .pcard-foot a:hover{ color:var(--gold) } /* small gauges drawn inline */ .gauge{ width:42px; height:24px; flex-shrink:0 } .ring { width:26px; height:26px; flex-shrink:0 } /* ---------- stats bar ----------------------------------------------------- */ .stats{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); display:grid; grid-template-columns:repeat(5, 1fr); margin-block:8px 0; } .stat{ display:flex; align-items:center; gap:14px; padding:22px 24px; border-inline-end:1px solid var(--line-soft); } .stat:last-child{ border-inline-end:0 } .stat-ico{ color:var(--gold); flex-shrink:0 } .stat .v{ font-family:var(--sans); font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.2 } .stat .l{ font-size:12px; color:var(--ink-3); margin-top:3px } /* ---------- section shell ------------------------------------------------- */ .section{ padding:clamp(56px, 7vw, 92px) 0 } .section-soft{ background:var(--bg-soft) } .section-head{ margin-bottom:36px } .section-head.center{ text-align:center } .section-head.center .lede{ margin-inline:auto } .section-head h2{ margin:12px 0 0 } .rule{ width:56px; height:2px; background:var(--gold); border-radius:2px; margin:16px auto 0 } .head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:32px } .head-row h2{ margin-top:10px } /* ---------- platform cards ------------------------------------------------ */ .platforms{ display:grid; grid-template-columns:repeat(6, 1fr); gap:16px } .pf{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .pf:hover{ border-color:var(--gold-soft); box-shadow:var(--shadow); transform:translateY(-3px) } .pf-img{ position:relative; aspect-ratio:4/3; background:var(--bg-tint); overflow:hidden } .pf-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease } .pf:hover .pf-img img{ transform:scale(1.05) } .pf-ico{ position:absolute; inset-block-end:-18px; inset-inline-start:14px; width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--green); } .pf-body{ padding:28px 16px 18px; display:flex; flex-direction:column; flex:1 } .pf-body h3{ font-family:var(--sans); font-size:15.5px; font-weight:650; margin-bottom:6px } .pf-body p{ font-size:12.8px; line-height:1.55; color:var(--ink-3); flex:1 } .pf-more{ margin-top:14px; color:var(--gold); display:inline-flex } /* ---------- trusted approach strip ---------------------------------------- */ .approach{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; display:grid; grid-template-columns:auto repeat(5, 1fr); align-items:center; } .approach-label{ padding:20px 22px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border-inline-end:1px solid var(--line-soft); } .ap{ display:flex; gap:12px; padding:20px 18px; border-inline-end:1px solid var(--line-soft) } .ap:last-child{ border-inline-end:0 } .ap svg{ color:var(--gold); flex-shrink:0; margin-top:2px } .ap b{ display:block; font-size:13px; font-weight:600; margin-bottom:3px } .ap span{ font-size:11.8px; line-height:1.45; color:var(--ink-3) } /* ---------- calculator (dark) --------------------------------------------- */ .calc{ background:var(--navy); color:#fff; border-radius:var(--radius); overflow:hidden } .calc-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) } .calc-intro{ padding:clamp(32px, 4vw, 52px) } .calc-intro .eyebrow{ color:var(--gold-soft) } .calc-intro h2{ color:#fff; margin:14px 0 16px } .calc-intro p{ color:rgba(255,255,255,.72); font-size:15px; line-height:1.65 } .calc-note{ margin-top:24px; display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.55); } .calc-panel{ background:#fff; margin:clamp(18px, 2vw, 26px); border-radius:var(--radius); padding:22px; color:var(--ink) } .calc-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px } .field label{ display:block; font-size:11.5px; color:var(--ink-3); margin-bottom:6px } .field .box{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; } .field .box:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash) } .field .box span{ color:var(--ink-3); font-size:14px } .field input,.field select{ border:0; outline:0; width:100%; background:transparent; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink); } .field select{ cursor:pointer } .switch{ display:flex; align-items:center; gap:10px } .switch input{ position:absolute; opacity:0; width:0; height:0 } .track{ width:42px; height:24px; border-radius:100px; background:var(--line); position:relative; transition:background .2s ease; flex-shrink:0; } .track::after{ content:""; position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s ease; } .switch input:checked + .track{ background:var(--green) } .switch input:checked + .track::after{ transform:translateX(18px) } [dir="rtl"] .switch input:checked + .track::after{ transform:translateX(-18px) } .switch input:focus-visible + .track{ box-shadow:0 0 0 3px var(--green-soft) } .calc-out{ margin-top:6px; padding-top:16px; border-top:1px solid var(--line-soft) } .calc-out .k{ font-size:11.5px; color:var(--ink-3) } .calc-out .v{ font-family:var(--sans); font-size:28px; font-weight:700; letter-spacing:-.02em } .calc-out .d{ font-size:13px; font-weight:600; color:var(--green) } .calc-chart{ height:120px; margin-top:10px } .calc-chart svg{ width:100%; height:100% } .calc-legend{ display:flex; gap:16px; font-size:11.5px; color:var(--ink-3); margin-top:8px } .calc-legend i{ width:9px; height:2px; display:inline-block; vertical-align:middle; margin-inline-end:5px } /* ---------- why / value props --------------------------------------------- */ .why-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center } .why-list{ display:grid; gap:22px; margin-top:28px } .why-item{ display:flex; gap:14px } .why-item svg{ color:var(--gold); flex-shrink:0; margin-top:3px } .why-item b{ display:block; font-size:14.5px; margin-bottom:4px } .why-item span{ font-size:13.5px; color:var(--ink-3); line-height:1.55 } .quote-card{ background:var(--gold-wash); border:1px solid var(--gold-soft); border-radius:var(--radius); padding:clamp(28px,3.5vw,44px); } .quote-card .eyebrow{ letter-spacing:.2em } .quote-card p{ font-family:var(--serif); font-size:clamp(20px,2.2vw,27px); line-height:1.38; margin-top:16px; color:var(--navy) } /* ---------- closing CTA --------------------------------------------------- */ .cta{ background:var(--navy); color:#fff; border-radius:var(--radius); padding:clamp(36px,4.5vw,60px); text-align:center } .cta h2{ color:#fff } .cta p{ color:rgba(255,255,255,.7); margin:14px auto 26px; max-width:56ch } .cta .btn-ghost{ color:var(--gold-soft); border-color:rgba(255,255,255,.28) } .cta .btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:var(--gold-soft) } /* ---------- footer -------------------------------------------------------- */ .footer{ background:var(--navy-deep); color:rgba(255,255,255,.66); padding:clamp(44px,5vw,68px) 0 28px; margin-top:clamp(56px,7vw,92px) } .footer-top{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap:32px; padding-bottom:36px; border-bottom:1px solid var(--line-dark) } .footer .logo-name{ color:#fff } .footer-about{ font-size:13.5px; line-height:1.65; margin-top:16px; max-width:40ch } .footer h4{ font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:14px } .footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px } .footer a{ font-size:13.5px; transition:color .2s ease } .footer a:hover{ color:var(--gold-soft) } .footer-bottom{ padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,.45) } .disclaimer{ font-size:11.5px; line-height:1.6; color:rgba(255,255,255,.4); margin-top:18px; max-width:90ch } /* ---------- reveal on scroll ---------------------------------------------- */ .reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1) } .reveal.in{ opacity:1; transform:none } .d1{ transition-delay:.07s } .d2{ transition-delay:.14s } .d3{ transition-delay:.21s } .d4{ transition-delay:.28s } .d5{ transition-delay:.35s } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none } *{ animation-duration:.001ms !important; transition-duration:.001ms !important } } /* ---------- responsive ---------------------------------------------------- */ @media (max-width: 1180px){ .platforms{ grid-template-columns:repeat(3, 1fr) } .approach{ grid-template-columns:repeat(3, 1fr) } .approach-label{ grid-column:1 / -1; border-inline-end:0; border-bottom:1px solid var(--line-soft) } .ap:nth-child(4){ border-inline-end:0 } } @media (max-width: 980px){ .nav-links{ display:none } .nav-toggle{ display:block } .nav-inner{ gap:16px } .hero-grid{ grid-template-columns:1fr } .hero-map{ position:relative; width:100%; inset:auto; margin-top:28px; opacity:.6 } .map-pin{ display:none } .stats{ grid-template-columns:repeat(2, 1fr) } .stat{ border-bottom:1px solid var(--line-soft) } .stat:nth-child(2n){ border-inline-end:0 } .stat:last-child{ grid-column:1 / -1; border-bottom:0 } .calc-grid{ grid-template-columns:1fr } .why-grid{ grid-template-columns:1fr } .footer-top{ grid-template-columns:1fr 1fr } } @media (max-width: 720px){ .platforms{ grid-template-columns:repeat(2, 1fr) } .approach{ grid-template-columns:1fr 1fr } .ap{ border-bottom:1px solid var(--line-soft) } .calc-row{ grid-template-columns:1fr } .pgrid{ grid-template-columns:1fr } .footer-top{ grid-template-columns:1fr } .footer-bottom{ flex-direction:column } } @media (max-width: 460px){ .platforms{ grid-template-columns:1fr } .stats{ grid-template-columns:1fr } .stat{ border-inline-end:0 } .hero-cta .btn{ width:100% ; justify-content:center } } /* mobile drawer */ .drawer{ position:fixed; inset:0; z-index:200; background:rgba(8,26,48,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; } .drawer.open{ opacity:1; pointer-events:auto } .drawer-panel{ position:absolute; inset-block:0; inset-inline-end:0; width:min(320px, 86vw); background:#fff; padding:22px; display:flex; flex-direction:column; gap:4px; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.7,.3,1); } [dir="rtl"] .drawer-panel{ transform:translateX(-100%) } .drawer.open .drawer-panel{ transform:none } .drawer-panel a{ padding:13px 6px; font-size:15px; font-weight:500; border-bottom:1px solid var(--line-soft) } .drawer-close{ align-self:flex-end; background:none; border:0; padding:6px; margin-bottom:8px; line-height:0 } /* ========================================================================== v6.1 — colour, imagery and the components used by the inner pages ========================================================================== */ :root{ --c1:#1F8A6D; --c1-bg:#E8F4EF; /* equities — green */ --c2:#2E6FA7; --c2-bg:#E9F1F8; /* private mkts — blue */ --c3:#B08D57; --c3-bg:#F6F0E6; /* real assets — gold */ --c4:#7A5AA8; --c4-bg:#F0EBF7; /* global trade — violet */ --c5:#C2703D; --c5-bg:#FAEEE5; /* technology — clay */ --c6:#2F8F8A; --c6-bg:#E7F3F2; /* ethical — teal */ } .t1{ color:var(--c1) } .t2{ color:var(--c2) } .t3{ color:var(--c3) } .t4{ color:var(--c4) } .t5{ color:var(--c5) } .t6{ color:var(--c6) } /* coloured icon tile */ .tile{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .tile.b1{ background:var(--c1-bg); color:var(--c1) } .tile.b2{ background:var(--c2-bg); color:var(--c2) } .tile.b3{ background:var(--c3-bg); color:var(--c3) } .tile.b4{ background:var(--c4-bg); color:var(--c4) } .tile.b5{ background:var(--c5-bg); color:var(--c5) } .tile.b6{ background:var(--c6-bg); color:var(--c6) } /* platform cards get their own accent */ .pf.a1 .pf-ico{ color:var(--c1) } .pf.a2 .pf-ico{ color:var(--c2) } .pf.a3 .pf-ico{ color:var(--c3) } .pf.a4 .pf-ico{ color:var(--c4) } .pf.a5 .pf-ico{ color:var(--c5) } .pf.a6 .pf-ico{ color:var(--c6) } .pf.a1:hover{ border-color:var(--c1) } .pf.a2:hover{ border-color:var(--c2) } .pf.a3:hover{ border-color:var(--c3) } .pf.a4:hover{ border-color:var(--c4) } .pf.a5:hover{ border-color:var(--c5) } .pf.a6:hover{ border-color:var(--c6) } .pf .pf-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(12,35,64,.42)); } .pf.a1 .pf-more{ color:var(--c1) } .pf.a2 .pf-more{ color:var(--c2) } .pf.a3 .pf-more{ color:var(--c3) } .pf.a4 .pf-more{ color:var(--c4) } .pf.a5 .pf-more{ color:var(--c5) } .pf.a6 .pf-more{ color:var(--c6) } /* stat bar accents */ .stat:nth-child(1) .stat-ico{ color:var(--c1) } .stat:nth-child(2) .stat-ico{ color:var(--c2) } .stat:nth-child(3) .stat-ico{ color:var(--c3) } .stat:nth-child(4) .stat-ico{ color:var(--c4) } .stat:nth-child(5) .stat-ico{ color:var(--c6) } /* ---------- page hero with photograph ------------------------------------- */ .phero{ position:relative; overflow:hidden; background:var(--navy); color:#fff; padding:clamp(64px,9vw,120px) 0 clamp(48px,6vw,84px); } .phero::before{ content:""; position:absolute; inset:0; background-image:var(--photo); background-size:cover; background-position:center; opacity:.30; filter:saturate(.85); } .phero::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(8,26,48,.94) 12%, rgba(8,26,48,.62) 62%, rgba(8,26,48,.34)); } .phero > *{ position:relative; z-index:2 } .phero h1{ color:#fff; margin:16px 0 18px; max-width:18ch } .phero .eyebrow{ color:var(--gold-soft) } .phero .lede{ color:rgba(255,255,255,.78); max-width:56ch } .phero-crumb{ font-size:12.5px; color:rgba(255,255,255,.5) } .phero-crumb a:hover{ color:#fff } /* photo band between sections */ .band{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:clamp(200px,26vw,320px); display:flex; align-items:flex-end; color:#fff; } .band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover } .band-inner{ position:relative; z-index:2; padding:clamp(22px,3vw,38px); background:linear-gradient(0deg, rgba(8,26,48,.86), transparent); width:100%; } .band-inner h3{ color:#fff; font-size:clamp(20px,2.2vw,28px); font-family:var(--serif) } .band-inner p{ color:rgba(255,255,255,.78); font-size:14px; margin-top:8px; max-width:56ch } /* split section: text + photo */ .split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,60px); align-items:center } .split-img{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--bg-tint) } .split-img img{ width:100%; height:100%; object-fit:cover } /* photo collage */ .collage{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; aspect-ratio:1/1 } .collage figure{ margin:0; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-tint) } .collage img{ width:100%; height:100%; object-fit:cover } .collage figure:first-child{ grid-row:span 2 } /* ---------- pillars / value cards ----------------------------------------- */ .cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px } .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .card:hover{ box-shadow:var(--shadow); transform:translateY(-2px) } .card h3{ font-family:var(--sans); font-size:16px; font-weight:650; margin:16px 0 8px } .card p{ font-size:13.6px; line-height:1.6; color:var(--ink-3) } .card .num{ font-family:var(--serif); font-size:34px; color:var(--gold-soft); line-height:1 } /* "what we will not do" list */ .nots{ display:grid; gap:12px; margin-top:22px } .not{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-inline-start:3px solid #C0392B; border-radius:var(--radius-sm); padding:15px 18px; font-size:14px; } .not svg{ color:#C0392B; flex-shrink:0; margin-top:2px } /* ---------- strategy rows -------------------------------------------------- */ .srow{ display:grid; grid-template-columns:auto minmax(0,1.5fr) repeat(2, minmax(0,.55fr)); gap:20px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:12px; transition:border-color .25s ease, box-shadow .25s ease; } .srow:hover{ box-shadow:var(--shadow) } .srow h3{ font-family:var(--sans); font-size:16px; font-weight:650; margin-bottom:5px } .srow p{ font-size:13.4px; color:var(--ink-3); line-height:1.55 } .srow .meta .k{ font-size:11px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase } .srow .meta .v{ font-size:14px; font-weight:600; margin-top:3px } /* allocation bars */ .bars{ display:grid; gap:14px } .bar-row .bar-head{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:7px } .bar-head b{ font-weight:600 } .bar{ height:8px; border-radius:100px; background:var(--line-soft); overflow:hidden } .bar-fill{ height:100%; width:0; border-radius:100px; transition:width 1s cubic-bezier(.2,.7,.3,1) } .legend{ display:grid; gap:10px } .legend-row{ display:flex; align-items:center; gap:10px; font-size:13.5px } .legend-row i{ width:10px; height:10px; border-radius:3px; flex-shrink:0 } .legend-row .pct{ margin-inline-start:auto; font-weight:600; color:var(--ink-2) } /* ---------- tier cards ----------------------------------------------------- */ .tiers{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; align-items:start } .tier{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; display:flex; flex-direction:column; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .tier::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; border-radius:var(--radius) var(--radius) 0 0; } .tier.k1::before{ background:var(--c1) } .tier.k2::before{ background:var(--c2) } .tier.k3::before{ background:var(--c4) } .tier.k4::before{ background:var(--c3) } .tier:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px) } .tier.featured{ border-color:var(--gold); box-shadow:var(--shadow-lg) } .tier-badge{ position:absolute; inset-block-start:-11px; inset-inline-start:22px; background:var(--gold); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:100px; } .tier h3{ font-family:var(--sans); font-size:16.5px; font-weight:650 } .tier .min{ font-family:var(--sans); font-size:32px; font-weight:700; letter-spacing:-.02em; margin:12px 0 2px } .tier .minl{ font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em } .tier .desc{ font-size:13.4px; color:var(--ink-3); line-height:1.6; margin:16px 0 18px } .tier ul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; flex:1 } .tier li{ display:flex; gap:9px; font-size:13.4px; line-height:1.45 } .tier li svg{ flex-shrink:0; margin-top:3px; color:var(--c1) } /* ---------- comparison table ---------------------------------------------- */ .tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff } table.cmp{ width:100%; border-collapse:collapse; min-width:620px } table.cmp th,table.cmp td{ padding:14px 18px; text-align:start; font-size:13.6px; border-bottom:1px solid var(--line-soft) } table.cmp thead th{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); background:var(--bg-soft); font-weight:700; } table.cmp tbody tr:last-child td{ border-bottom:0 } table.cmp tbody th{ font-weight:650 } /* ---------- FAQ ------------------------------------------------------------ */ .faqs{ display:grid; gap:10px; max-width:820px; margin-inline:auto } details.faq{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden } details.faq[open]{ border-color:var(--gold-soft) } details.faq summary{ cursor:pointer; list-style:none; padding:16px 20px; font-size:14.6px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:16px; } details.faq summary::-webkit-details-marker{ display:none } .faq-mark{ position:relative; width:12px; height:12px; flex-shrink:0 } .faq-mark::before,.faq-mark::after{ content:""; position:absolute; background:var(--gold); inset-block-start:5px; inset-inline-start:0; width:12px; height:2px; border-radius:2px; transition:transform .2s ease; } .faq-mark::after{ transform:rotate(90deg) } details.faq[open] .faq-mark::after{ transform:rotate(0) } .faq-a{ padding:0 20px 18px; font-size:14px; line-height:1.65; color:var(--ink-2) } .faq-a strong{ color:var(--ink) } /* ---------- article cards -------------------------------------------------- */ .arts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px } .art{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .art:hover,.art:focus-visible{ box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--gold-soft); outline:none } .art-img{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-tint) } .art-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease } .art:hover .art-img img{ transform:scale(1.05) } .art-body{ padding:20px; display:flex; flex-direction:column; flex:1 } .art-body h3{ font-size:17px; line-height:1.3; margin-bottom:9px } .art-body p{ font-size:13.6px; color:var(--ink-3); line-height:1.6; flex:1 } .art-more{ margin-top:16px; font-size:13px; font-weight:600; color:var(--gold); display:inline-flex; align-items:center; gap:7px } /* modal */ .modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(8,26,48,.55); opacity:0; pointer-events:none; transition:opacity .25s ease; } .modal.open{ opacity:1; pointer-events:auto } .modal-panel{ background:#fff; border-radius:var(--radius); max-width:720px; width:100%; max-height:86vh; overflow:auto; padding:clamp(24px,3.4vw,40px); position:relative; transform:translateY(10px); transition:transform .25s ease; } .modal.open .modal-panel{ transform:none } .modal-close{ position:absolute; inset-block-start:16px; inset-inline-end:16px; background:var(--bg-tint); border:0; border-radius:8px; padding:8px; line-height:0; } .modal-panel h2{ font-size:clamp(22px,2.6vw,30px); margin-bottom:16px; padding-inline-end:40px } .modal-panel .body{ font-size:15px; line-height:1.75; color:var(--ink-2); white-space:pre-line } /* ---------- contact form ---------------------------------------------------- */ .form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow) } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px } .form-grid .full{ grid-column:1 / -1 } .inp{ width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; font:inherit; font-size:14.5px; background:#fff; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease; } .inp:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash) } textarea.inp{ min-height:120px; resize:vertical } .flabel{ display:block; font-size:12px; color:var(--ink-3); margin-bottom:6px } .form-note{ font-size:12px; color:var(--ink-3); line-height:1.55; margin-top:14px } .channels{ display:grid; gap:12px } .channel{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; } .channel .k{ font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.09em } .channel .v{ font-size:15px; font-weight:600; margin-top:3px; word-break:break-word } /* ---------- misc ------------------------------------------------------------ */ .metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px } .metric{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px } .metric .v{ font-family:var(--sans); font-size:30px; font-weight:700; letter-spacing:-.02em } .metric .l{ font-size:12.5px; color:var(--ink-3); margin-top:6px } .metric.g1 .v{ color:var(--c1) } .metric.g2 .v{ color:var(--c2) } .metric.g3 .v{ color:var(--c3) } .metric.g4 .v{ color:var(--c4) } .steps{ display:grid; gap:14px } .step{ display:flex; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px } .step-n{ width:32px; height:32px; border-radius:50%; flex-shrink:0; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; } .step b{ display:block; font-size:14.5px; margin-bottom:4px } .step span{ font-size:13.4px; color:var(--ink-3); line-height:1.6 } .err-wrap{ min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center } @media (max-width: 1180px){ .tiers{ grid-template-columns:repeat(2,1fr) } .arts{ grid-template-columns:repeat(2,1fr) } .metrics{ grid-template-columns:repeat(2,1fr) } } @media (max-width: 980px){ .split{ grid-template-columns:1fr } .srow{ grid-template-columns:auto 1fr; row-gap:14px } .srow .meta{ grid-column:span 1 } } @media (max-width: 720px){ .tiers{ grid-template-columns:1fr } .arts{ grid-template-columns:1fr } .form-grid{ grid-template-columns:1fr } .collage{ aspect-ratio:4/3 } } /* ========================================================================== v6.2 — colour pass. The page was reading as one long white sheet; sections, cards and figures now carry tinted grounds so the eye has somewhere to rest. ========================================================================== */ /* ---------- tinted section grounds ---------------------------------------- */ .section-mint { background:linear-gradient(180deg,#F3F9F6 0%,#E8F3EE 100%) } .section-sky { background:linear-gradient(180deg,#F3F8FC 0%,#E8F1F8 100%) } .section-sand { background:linear-gradient(180deg,#FCF8F2 0%,#F6EFE4 100%) } .section-lilac{ background:linear-gradient(180deg,#F7F4FB 0%,#EFE9F7 100%) } .section-navy{ background:linear-gradient(135deg,#0C2340 0%,#123453 55%,#12463F 100%); color:#fff; } .section-navy h2,.section-navy h3{ color:#fff } .section-navy .lede,.section-navy p{ color:rgba(255,255,255,.76) } .section-navy .eyebrow{ color:var(--gold-soft) } /* soft divider so two tinted sections never butt together flatly */ .section-mint + .section-sky, .section-sky + .section-mint, .section-sand + .section-mint, .section-mint + .section-sand{ border-top:1px solid rgba(12,35,64,.05) } /* ---------- hero: colour wash instead of plain white ---------------------- */ .hero{ background: radial-gradient(1100px 560px at 88% -12%, #E4F2EC 0%, rgba(228,242,236,0) 62%), radial-gradient(900px 520px at -6% 4%, #EAF1F9 0%, rgba(234,241,249,0) 58%), radial-gradient(700px 420px at 46% 108%, #FAF2E4 0%, rgba(250,242,228,0) 60%), linear-gradient(180deg,#FDFCFA 0%,#FFFFFF 100%); } .hero::after{ /* thin gold hairline closing the hero */ content:""; position:absolute; inset-inline:0; inset-block-end:0; height:1px; background:linear-gradient(90deg, transparent, var(--gold-soft), transparent); } .map-dot{ fill:#B9C7D3 } .map-dot.hl{ fill:var(--gold) } /* ---------- stats: five tinted cards, not one white slab ------------------ */ .stats{ background:transparent; border:0; box-shadow:none; gap:12px; margin-top:-28px; position:relative; z-index:4; } .stat{ border:1px solid transparent; border-radius:var(--radius); padding:20px; box-shadow:0 6px 20px -14px rgba(12,35,64,.35); } .stat:nth-child(1){ background:var(--c1-bg); border-color:rgba(31,138,109,.18) } .stat:nth-child(2){ background:var(--c2-bg); border-color:rgba(46,111,167,.18) } .stat:nth-child(3){ background:var(--c3-bg); border-color:rgba(176,141,87,.22) } .stat:nth-child(4){ background:var(--c4-bg); border-color:rgba(122,90,168,.18) } .stat:nth-child(5){ background:var(--c6-bg); border-color:rgba(47,143,138,.18) } .stat .l{ color:var(--ink-2) } /* ---------- platform cards: tinted bodies --------------------------------- */ .pf-body{ background:#fff; transition:background .25s ease } .pf.a1 .pf-body{ background:linear-gradient(180deg,var(--c1-bg),#fff 70%) } .pf.a2 .pf-body{ background:linear-gradient(180deg,var(--c2-bg),#fff 70%) } .pf.a3 .pf-body{ background:linear-gradient(180deg,var(--c3-bg),#fff 70%) } .pf.a4 .pf-body{ background:linear-gradient(180deg,var(--c4-bg),#fff 70%) } .pf.a5 .pf-body{ background:linear-gradient(180deg,var(--c5-bg),#fff 70%) } .pf.a6 .pf-body{ background:linear-gradient(180deg,var(--c6-bg),#fff 70%) } .pf .pf-ico{ border-color:transparent; box-shadow:0 4px 12px -6px rgba(12,35,64,.3) } /* ---------- approach strip ------------------------------------------------ */ .approach{ background:linear-gradient(120deg,#FCF8F2,#F3F9F6 55%,#F3F8FC); border-color:rgba(12,35,64,.07) } .approach-label{ color:var(--gold); border-inline-end-color:rgba(12,35,64,.07) } .ap{ border-inline-end-color:rgba(12,35,64,.07) } .ap:nth-child(2) svg{ color:var(--c1) } .ap:nth-child(3) svg{ color:var(--c2) } .ap:nth-child(4) svg{ color:var(--c3) } .ap:nth-child(5) svg{ color:var(--c4) } .ap:nth-child(6) svg{ color:var(--c6) } /* ---------- pillars, metrics, tiers, articles ----------------------------- */ .cards .card:nth-child(4n+1){ background:linear-gradient(180deg,var(--c1-bg),#fff 62%); border-color:rgba(31,138,109,.16) } .cards .card:nth-child(4n+2){ background:linear-gradient(180deg,var(--c2-bg),#fff 62%); border-color:rgba(46,111,167,.16) } .cards .card:nth-child(4n+3){ background:linear-gradient(180deg,var(--c4-bg),#fff 62%); border-color:rgba(122,90,168,.16) } .cards .card:nth-child(4n+4){ background:linear-gradient(180deg,var(--c3-bg),#fff 62%); border-color:rgba(176,141,87,.2) } .card .num{ color:var(--gold) } .metric.g1{ background:linear-gradient(180deg,var(--c1-bg),#fff 65%); border-color:rgba(31,138,109,.18) } .metric.g2{ background:linear-gradient(180deg,var(--c2-bg),#fff 65%); border-color:rgba(46,111,167,.18) } .metric.g3{ background:linear-gradient(180deg,var(--c3-bg),#fff 65%); border-color:rgba(176,141,87,.22) } .metric.g4{ background:linear-gradient(180deg,var(--c4-bg),#fff 65%); border-color:rgba(122,90,168,.18) } .tier.k1{ background:linear-gradient(180deg,var(--c1-bg) 0%,#fff 34%) } .tier.k2{ background:linear-gradient(180deg,var(--c2-bg) 0%,#fff 34%) } .tier.k3{ background:linear-gradient(180deg,var(--c4-bg) 0%,#fff 34%) } .tier.k4{ background:linear-gradient(180deg,var(--c3-bg) 0%,#fff 34%) } .tier.k1 li svg{ color:var(--c1) } .tier.k2 li svg{ color:var(--c2) } .tier.k3 li svg{ color:var(--c4) } .tier.k4 li svg{ color:var(--c3) } .tier.k1 .min{ color:var(--c1) } .tier.k2 .min{ color:var(--c2) } .tier.k3 .min{ color:var(--c4) } .tier.k4 .min{ color:var(--c3) } .art{ position:relative } .art::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; z-index:2 } .arts .art:nth-child(6n+1)::before{ background:var(--c1) } .arts .art:nth-child(6n+2)::before{ background:var(--c2) } .arts .art:nth-child(6n+3)::before{ background:var(--c5) } .arts .art:nth-child(6n+4)::before{ background:var(--c3) } .arts .art:nth-child(6n+5)::before{ background:var(--c4) } .arts .art:nth-child(6n+6)::before{ background:var(--c6) } .step:nth-child(1) .step-n{ background:var(--c1) } .step:nth-child(2) .step-n{ background:var(--c2) } .step:nth-child(3) .step-n{ background:var(--c3) } .step{ background:rgba(255,255,255,.72) } .channel:nth-child(1){ background:linear-gradient(120deg,var(--c2-bg),#fff 60%) } .channel:nth-child(2){ background:linear-gradient(120deg,var(--c1-bg),#fff 60%) } .channel:nth-child(3){ background:linear-gradient(120deg,var(--c3-bg),#fff 60%) } details.faq{ background:rgba(255,255,255,.8) } details.faq[open]{ background:#fff; box-shadow:var(--shadow) } table.cmp thead th{ background:linear-gradient(180deg,#F3F8FC,#E9F1F8); color:var(--navy) } table.cmp tbody tr:nth-child(odd) td, table.cmp tbody tr:nth-child(odd) th{ background:rgba(255,255,255,.6) } /* ---------- CTA and footer ------------------------------------------------ */ .cta{ background:linear-gradient(125deg,#0C2340 0%,#14405C 48%,#16564A 100%); position:relative; overflow:hidden; } .cta::before{ content:""; position:absolute; inset-block-start:-40%; inset-inline-end:-10%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(176,141,87,.34), transparent 68%); } .cta > *{ position:relative; z-index:2 } .footer{ background:linear-gradient(180deg,#081A30 0%,#0B2438 100%) } .footer h4{ color:var(--gold-soft) } /* section-soft keeps working, just warmer than before */ .section-soft{ background:linear-gradient(180deg,#FBFAF7,#F6F5F1) } @media (max-width: 980px){ .stats{ margin-top:8px } }