(not :root) means every existing --sky-based accent (eyebrows, section titles, card links, numbered badges, buttons, icons, pathway steps) picks up the page's own colour, while the shared header/footer chrome stays on the default brand blue everywhere. Home/About/Contact keep the default sky blue — only the four core service pages get a colour. */ main.page-develop { --sky: #8D97AD; } main.page-manage { --sky: #E07A29; } main.page-advise { --sky: #B9A6DC; } main.page-network { --sky: #3FAE8A; } main.page-about { --sky: #C9A227; } /* Same per-page colours, scoped to so the nav's active/hover underline (outside

) can pick them up via --nav-highlight below, without pulling the rest of the header/nav chrome (logo, CTA button) off the shared brand blue. */ body.page-develop { --nav-highlight: #8D97AD; } body.page-manage { --nav-highlight: #E07A29; } body.page-advise { --nav-highlight: #B9A6DC; } body.page-network { --nav-highlight: #3FAE8A; } body.page-about { --nav-highlight: #C9A227; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--body); font-weight: 400; color: var(--pale); background: transparent; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Continuous fixed background wash — the single backdrop behind every section on every page, injected once at runtime by main.js. Content scrolls over this fixed layer rather than the layer scrolling with the page, which is what gives the "background stays put" feel. */ .bg-wash { position: fixed; inset: 0; z-index: -1; background: radial-gradient(1200px 800px at 50% calc(20% + var(--scroll-progress, 0) * 40%), rgba(92, 165, 242, 0.16), transparent 60%), linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-deep) 100%); } img { max-width: 100%; display: block; } a { color: var(--sky); text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; font-size: 1rem; } /* Focus visibility (accessibility requirement) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; } .container { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--white); padding: 12px 20px; z-index: 1000; border-radius: 0 0 6px 0; } .skip-link:focus { left: 0; } /* ---------- Type ---------- */ h1, h2, h3, h4, .heading { font-family: var(--heading); font-weight: 300; color: var(--white); line-height: 1.15; letter-spacing: 0; } h3, h4 { font-weight: 500; } h1 { font-size: clamp(2.4rem, 6.4vw, 4.8rem); } h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); } h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); } .eyebrow { font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sky); display: block; margin-bottom: 12px; } .section-title { letter-spacing: 0; } .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--pale); max-width: 62ch; } .on-dark { color: var(--white); } .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); } .on-dark .lede { color: var(--pale); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.03em; padding: 14px 28px; border-radius: var(--btn-radius); border: 1px solid transparent; transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--sky); color: var(--navy-deep); } .btn-primary:hover { background: var(--white); } .btn-outline { border-color: rgba(255, 255, 255, 0.5); color: var(--white); background: transparent; } .btn-outline:hover { background: var(--white); color: var(--navy-deep); border-color: var(--white); } .on-dark .btn-outline { color: var(--white); } .on-dark .btn-outline:hover { background: var(--white); color: var(--navy-deep); } /* Minimal text+arrow link, for secondary actions — Kea Consultants-style */ .btn-text { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-weight: 600; font-size: 0.95rem; color: var(--white); padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.35); transition: border-color 0.2s var(--ease), gap 0.2s var(--ease), color 0.2s var(--ease); } .btn-text .arrow { transition: transform 0.2s var(--ease); } .btn-text:hover { border-color: var(--sky); color: var(--sky); gap: 14px; } .btn-text:hover .arrow { transform: translateX(3px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 500; background: rgba(244, 246, 248, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(1, 33, 105, 0.08); } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; } .brand-logo img { height: 40px; width: auto; } .main-nav { display: flex; align-items: center; gap: 32px; } .main-nav a { font-family: var(--body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--navy-deep); padding: 6px 2px; border-bottom: 2px solid transparent; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--navy); border-color: var(--nav-highlight, var(--sky)); } .nav-cta { display: flex; align-items: center; } .nav-cta .btn { padding: 10px 20px; font-size: 0.85rem; } .nav-toggle { display: none; background: none; border: none; width: 44px; height: 44px; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--navy-deep); transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); } .nav-toggle span { top: 21px; } .nav-toggle span::before { top: -8px; } .nav-toggle span::after { top: 8px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { background: transparent; padding: 96px 0 88px; position: relative; overflow: hidden; } .hero .container { position: relative; z-index: 2; max-width: 820px; } .hero h1 { margin-bottom: 20px; } .hero .lede { margin-bottom: 32px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; } .hero-sub { padding: 64px 0; background: var(--off-white); } /* Hero with a background photo — keeps the Navy wash mood via a gradient scrim so the image reads as tinted rather than replacing the wash, and drifts slightly slower than scroll for a subtle parallax feel. */ .hero-with-image { padding: 140px 0 120px; } .hero-bg { position: absolute; inset: -60px 0 0 0; z-index: 0; } .hero-bg img { width: 100%; height: calc(100% + 60px); object-fit: cover; transform: translateY(calc(var(--scroll-progress, 0) * -50px)); } .hero-with-image::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, rgba(1, 33, 105, 0.90) 0%, rgba(13, 26, 38, 0.86) 55%, rgba(13, 26, 38, 0.95) 100%); /* Translucent when you first land on the hero (image clearly visible), then the navy wash progressively covers it as you scroll through — driven by --hero-progress, set in main.js from the hero's own scroll position (0 = just landed, 1 = scrolled past). Floor raised from 0.38 so hero text stays legible over bright patches of photo even before any scrolling has happened. */ opacity: calc(0.55 + var(--hero-progress, 0) * 0.45); transition: opacity 0.05s linear; } /* Eyebrow over a photo hero can't rely on --sky alone for contrast — the scrim is intentionally translucent on load, so bright parts of the photo can sit directly behind it. Force white + a shadow instead. */ .hero-with-image .eyebrow { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); } /* ---------- Sections ---------- */ /* Every section is transparent — the .bg-wash layer is the one continuous backdrop for the whole page. These modifier classes are kept as harmless no-ops (some still set text color) so existing markup doesn't need touching. */ section { padding: 76px 0; background: transparent; } .section-tight { padding: 48px 0; } .section-navy, .section-pale { background: transparent; color: var(--pale); } .section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--white); } .section-navy .lede { color: var(--pale); } .section-navy p { color: var(--pale); } /* ---------- Grids / Cards ---------- */ .grid { display: grid; gap: 28px; } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .card { background: transparent; color: var(--pale); border-radius: var(--radius); padding: 32px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28); border: 1.5px solid rgba(255, 255, 255, 0.22); } .card h1, .card h2, .card h3, .card h4 { color: #fff; font-weight: 600; } .card h3 { margin-bottom: 12px; } .card p { color: var(--pale); margin-bottom: 16px; } .card a { color: var(--sky); } .card-link { font-family: var(--body); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em; color: var(--sky); } .card-link::after { content: ' →'; } /* NOTE: .section-pale is a legacy no-op — see the "Sections" comment below, every section shows the same dark .bg-wash regardless of this class, so .card never needs a light-background variant. (An earlier pass added one, assuming .section-pale meant an actual light background; it didn't, and it made cards render dark-text-on-dark — invisible. Do not reintroduce that override.) */ .pillar-card { border-top: 4px solid var(--sky); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } .pillar-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.4); } /* ---------- Service accordion cards (

, keyboard-native) ---------- */ .service-accordion { padding: 0; overflow: hidden; } .service-accordion summary { list-style: none; cursor: pointer; padding: 32px; display: block; } .service-accordion summary::-webkit-details-marker { display: none; } .service-accordion summary::marker { content: ''; } .service-accordion summary:focus-visible { outline: 2px solid var(--sky); outline-offset: -4px; } .service-accordion .icon { display: block; margin-bottom: 14px; } .service-accordion summary h3 { margin-bottom: 12px; } .service-accordion summary p { margin-bottom: 0; } .accordion-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--sky); } .accordion-toggle .chevron { transition: transform 0.2s var(--ease); } .service-accordion[open] .accordion-toggle .chevron { transform: rotate(180deg); } .service-accordion[open]:hover { transform: none; } .service-details { padding: 0 32px 32px; } .service-details ul { list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 16px; } .service-details li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 0.92rem; } .service-details li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); } /* ---------- Value-point row (3 + 2 centred wrap) ---------- */ .value-point-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .value-point { flex: 1 1 280px; max-width: 320px; text-align: left; } /* ---------- Stage number badge (reused by value-point-row lists site-wide) ---------- */ .stage-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--sky); color: var(--navy-deep); font-family: var(--heading); font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; } .methodology-connector { margin-top: 56px; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, 0.12); } /* Click/tap affordance hint above the two interactive diagrams below — neither the wedges nor the infinity band read as obviously interactive at a glance, so a small labelled hint sits just above each one. */ .interaction-hint { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--sky); font-family: var(--body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; } .interaction-hint .hint-icon { flex-shrink: 0; } /* ---------- Integr8ted Blueprint© interactive wheel ---------- */ .blueprint-wheel-layout { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 40px; align-items: center; margin-top: 8px; } .blueprint-wheel-visual { width: 100%; max-width: 440px; margin: 0 auto; } .blueprint-wheel-visual > svg { width: 100%; height: auto; display: block; } .blueprint-segment { cursor: pointer; transform: translate(0, 0); transition: transform 220ms var(--ease), filter 220ms var(--ease); outline: none; } .blueprint-segment path { stroke: var(--navy-deep); stroke-width: 2; } .blueprint-segment:hover, .blueprint-segment:focus-visible, .blueprint-segment.is-active { transform: translate(var(--seg-tx), var(--seg-ty)); filter: brightness(1.14); } .blueprint-seg-num { font-family: var(--heading); font-weight: 800; font-size: 20px; } .blueprint-seg-label { font-family: var(--body); font-weight: 700; font-size: 10.5px; letter-spacing: 0.01em; } .blueprint-centre { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; } .blueprint-centre-label { fill: var(--sky); font-family: var(--heading); font-weight: 800; font-size: 34px; text-anchor: middle; } .blueprint-wheel-panel { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius); padding: 28px 32px; min-height: 160px; } .blueprint-panel-num { display: block; font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); margin-bottom: 8px; } .blueprint-wheel-panel h3 { margin-bottom: 10px; } .blueprint-wheel-panel p { color: var(--pale); margin: 0; } /* Fallback list: full content for no-JS visitors. Hidden once the wheel has initialised (js-ready class added by blueprint-wheel.js). */ .blueprint-fallback-list { list-style: none; counter-reset: stage; margin-top: 32px; } .blueprint-fallback-list li { counter-increment: stage; display: flex; gap: 14px; margin-bottom: 14px; } .blueprint-fallback-list li::before { content: counter(stage); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--sky); color: var(--navy-deep); font-family: var(--heading); font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; } .blueprint-fallback-list strong { color: #fff; } /* .blueprint-wheel-layout (js-ready) and .blueprint-fallback-list are siblings, not ancestor/descendant — a general sibling combinator is needed to hide the fallback once the wheel has initialised. */ .blueprint-wheel-layout.js-ready ~ .blueprint-fallback-list { display: none; } @media (prefers-reduced-motion: reduce) { .blueprint-segment { transition: none; } } @media (max-width: 1024px) { .blueprint-wheel-layout { grid-template-columns: 1fr; } } /* ---------- Design Thinking interactive infinity-loop ---------- */ /* Illustration on the right, stage panel on the left — mirrors the Blueprint wheel (illustration left / panel right) intentionally. */ .dt-loop-layout { display: grid; grid-template-columns: 1fr minmax(280px, 520px); gap: 40px; align-items: center; margin-top: 8px; } .dt-loop-visual { width: 100%; max-width: 520px; margin: 0 auto; } .dt-loop-visual > svg { width: 100%; height: auto; display: block; overflow: visible; } /* pointer-events: all makes the ENTIRE segment — including the icon's fill:none interior/gaps, which by default only register clicks on their drawn stroke — clickable as one unit, not just the curve band and the icon's outline. */ .dt-segment { cursor: pointer; outline: none; pointer-events: all; } .dt-segment > path { stroke-width: 38px; transition: stroke-width 220ms var(--ease), filter 220ms var(--ease); } .dt-segment:hover > path, .dt-segment:focus-visible > path { stroke-width: 42px; filter: brightness(1.1); } .dt-segment.is-active > path { stroke-width: 44px; filter: brightness(1.16); } .dt-segment.is-active:hover > path, .dt-segment.is-active:focus-visible > path { stroke-width: 47px; filter: brightness(1.22); } .dt-loop-label { font-family: var(--body); font-weight: 700; font-size: 15px; } .dt-leader { stroke-width: 1.5px; stroke-dasharray: 2 5; opacity: 0.6; transition: opacity 220ms var(--ease); } .dt-segment:hover .dt-leader, .dt-segment:focus-visible .dt-leader, .dt-segment.is-active .dt-leader { opacity: 0.95; } .dt-loop-panel { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius); padding: 28px 32px; min-height: 160px; } .dt-loop-panel h3 { margin-bottom: 10px; } .dt-loop-panel p { color: var(--pale); margin: 0; } .dt-fallback-list { list-style: none; counter-reset: dtstage; margin-top: 32px; } .dt-fallback-list li { counter-increment: dtstage; display: flex; gap: 14px; margin-bottom: 14px; } .dt-fallback-list li::before { content: counter(dtstage); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--sky); color: var(--navy-deep); font-family: var(--heading); font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; } .dt-fallback-list strong { color: #fff; } .dt-loop-layout.js-ready ~ .dt-fallback-list { display: none; } @media (prefers-reduced-motion: reduce) { .dt-segment > path { transition: none; } } @media (max-width: 1024px) { .dt-loop-layout { grid-template-columns: 1fr; } } /* Pathway line: steps and connectors are separate flex siblings, so the connecting line only ever occupies the gap between two step pills — it never runs underneath or "through" a pill (no absolute-positioned line + background-masking hack). */ .pathway-line { display: flex; align-items: center; gap: 0; margin-top: 24px; flex-wrap: wrap; row-gap: 16px; } .pathway-connector { flex: 1 1 24px; min-width: 24px; height: 1px; background: rgba(255, 255, 255, 0.25); } .pathway-step { flex-shrink: 0; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.3); padding: 8px 18px; border-radius: 999px; font-family: var(--heading); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--pale); white-space: nowrap; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } /* Sequential "chase" highlight, step 1 through 5, once the line scrolls into view — driven by main.js (its own IntersectionObserver on the .pathway-line itself, not the wider reveal block it sits in), which also auto-scrolls each step into view in turn on narrow viewports where all 5 don't fit on screen at once. */ .pathway-step.is-active { background: var(--sky); border-color: var(--sky); color: var(--navy-deep); transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .pathway-step { transition: none; } } /* ---------- Strategic Impact case-study overview cards ---------- */ .case-card { display: block; text-decoration: none; color: inherit; } .case-card-img { display: block; width: calc(100% + 64px); height: 200px; object-fit: cover; margin: -32px -32px 20px; border-radius: var(--radius) var(--radius) 0 0; } .case-card-placeholder { align-items: center; justify-content: center; text-align: center; background: rgba(255, 255, 255, 0.06); border: 1px dashed rgba(255, 255, 255, 0.35); color: var(--pale); font-size: 0.82rem; font-weight: 600; line-height: 1.4; padding: 20px; } /* Generic "missing photo asset" placeholder — used anywhere a recommended image isn't yet in the asset library (flagged in the completion report rather than guessed at, per the copydeck's own instruction). */ .photo-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(255, 255, 255, 0.06); border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: var(--radius); color: var(--pale); font-size: 0.85rem; font-weight: 600; line-height: 1.5; padding: 24px; } @media (max-width: 640px) { /* Five pills + connectors don't fit one line at phone widths even unpadded — rather than let the 5th pill wrap onto its own row, keep the whole row intact and let it scroll horizontally. */ .pathway-connector { display: none; } .pathway-line { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pathway-line::-webkit-scrollbar { display: none; } .pathway-step { padding: 8px 14px; font-size: 0.78rem; } } /* Impact pathway (homepage): stage labels are full phrases rather than single words, so they need to wrap and centre instead of nowrap. */ .impact-pathway .pathway-step { white-space: normal; text-align: center; max-width: 220px; } .module-num { display: block; font-family: var(--heading); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.1em; color: var(--sky); margin-bottom: 14px; } /* ---------- Spotlight banner ---------- */ .spotlight { border-radius: var(--radius); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--white); padding: 48px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; } .spotlight img { border-radius: var(--radius); } .spotlight h2 { color: var(--white); } .spotlight-bleed { background: transparent; border: none; padding: 0; border-radius: 0; } /* ---------- Ecosystem strip ---------- */ .ecosystem-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; padding: 40px 0; } .ecosystem-strip a { display: flex; align-items: center; transition: transform 0.25s var(--ease), filter 0.25s var(--ease); filter: drop-shadow(0 0 0 rgba(92, 165, 242, 0)); } .ecosystem-strip img { height: 40px; width: auto; } .ecosystem-strip a:hover { transform: translateY(-4px); filter: drop-shadow(0 6px 16px rgba(92, 165, 242, 0.45)); } /* ---------- Credentials / stat strips ---------- */ .stat-row { display: flex; flex-wrap: wrap; gap: 40px; } .stat { min-width: 160px; } .stat .num { font-family: var(--heading); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--sky); display: block; line-height: 1; margin-bottom: 6px; } .stat .icon { display: block; margin-bottom: 8px; color: var(--sky); } .card .icon, .card svg.icon { color: var(--sky); } .stat .label { font-size: 0.92rem; color: var(--pale); } /* ---------- Advantage list ---------- */ .advantage-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .advantage-list li { padding: 24px; background: transparent; color: var(--pale); border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.22); } .advantage-list li strong { color: #fff; } .advantage-list .n { font-family: var(--heading); font-weight: 700; color: var(--sky); font-size: 1.6rem; display: block; margin-bottom: 8px; } /* ---------- Integr8ted Blueprint illustration ---------- */ .blueprint-illustration { display: flex; justify-content: center; align-items: center; } .blueprint-illustration img { width: 100%; max-width: 520px; height: auto; } /* ---------- Case study ---------- */ .case-study-header { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin-bottom: 48px; } .case-study-header img { border-radius: var(--radius); box-shadow: var(--shadow); } .case-caption { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); margin-top: 10px; } .challenge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .challenge-grid .card { border-left: 4px solid var(--sky); border-top: none; } .photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; align-items: start; } .photo-strip figure img { width: 100%; height: auto; border-radius: var(--radius); } .photo-strip figcaption { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); margin-top: 8px; } .testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .pull-quote { display: flex; gap: 28px; align-items: flex-start; background: var(--pale); border-radius: var(--radius); padding: 40px; } .pull-quote img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .pull-quote blockquote { font-style: italic; font-size: 1.25rem; line-height: 1.5; margin-bottom: 16px; color: var(--navy-deep); } .pull-quote cite { font-style: normal; font-family: var(--heading); font-weight: 700; font-size: 0.9rem; color: var(--navy); } .pull-quote .role { display: block; font-family: var(--body); font-weight: 400; font-size: 0.85rem; color: #33475b; } .partner-strip { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; } .partner-strip span { background: var(--off-white); color: var(--navy-deep); font-family: var(--heading); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em; padding: 10px 18px; border-radius: 999px; } /* ---------- Trusted-by logo carousel ---------- */ /* Track is the logo list duplicated once in the HTML; translateX(-50%) moves exactly one full set, so the loop reads as seamless regardless of how many logos are in the list. */ .logo-carousel { overflow: hidden; margin-top: 32px; padding: 28px 0; background: var(--off-white); border-radius: var(--radius); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .logo-carousel-track { display: flex; align-items: center; gap: 56px; width: max-content; /* Forces its own compositor layer — mask-image + an animated transform on the same element is a known trigger for the animation silently freezing on iOS/WebKit; promoting to its own layer avoids that. */ will-change: transform; animation: logoCarouselScroll 40s linear infinite; padding: 0 32px; } .logo-carousel-track img { height: 40px; width: auto; flex-shrink: 0; } .logo-carousel:hover .logo-carousel-track, .logo-carousel:focus-within .logo-carousel-track { animation-play-state: paused; } @keyframes logoCarouselScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .logo-carousel-track { animation: none; } .logo-carousel { overflow-x: auto; } } /* ---------- News cards ---------- */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .news-card time { font-size: 0.8rem; color: var(--sky); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } /* ---------- Forms ---------- */ .form-panel { background: var(--white); color: var(--navy-deep); border-radius: var(--radius); padding: 40px; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-family: var(--body); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--navy-deep); } .form-field input, .form-field select, .form-field textarea { padding: 14px 16px; border: 2px solid var(--pale); border-radius: 8px; background: var(--white); color: var(--navy-deep); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--sky); outline: none; } .form-field textarea { resize: vertical; min-height: 140px; } .form-error { color: #c0392b; font-size: 0.85rem; min-height: 1.2em; } .form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select { border-color: #c0392b; } .form-status { margin-top: 16px; font-weight: 700; } .form-status.success { color: #1a7a4c; } .form-status.error { color: #c0392b; } .required-note { font-size: 0.85rem; color: #5a6c7d; margin-bottom: 20px; } /* ---------- Contact info / social ---------- */ .contact-info { display: grid; gap: 20px; } .contact-info a { font-family: var(--body); font-weight: 700; } .social-links { display: flex; gap: 16px; margin-top: 20px; } .social-links a { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--off-white); color: var(--navy); transition: background 0.2s var(--ease), color 0.2s var(--ease); } .social-links a:hover { background: var(--sky); color: var(--white); } /* ---------- CTA band ---------- */ .cta-band { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: var(--white); padding: 64px 0; text-align: center; } .cta-band h2 { color: var(--white); margin-bottom: 16px; } .cta-band .lede { color: var(--pale); margin: 0 auto 28px; } .cta-band .hero-actions { justify-content: center; } /* ---------- Footer ---------- */ .site-footer { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--pale); padding: 64px 0 32px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-brand img { height: 36px; margin-bottom: 16px; } .footer-brand p { font-size: 0.9rem; max-width: 34ch; } .footer-col h4 { color: var(--white); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; } .footer-col ul li { margin-bottom: 10px; } .footer-col a { color: var(--pale); font-size: 0.92rem; } .footer-col a:hover { color: var(--sky); } .footer-bottom { border-top: 1px solid rgba(197, 213, 223, 0.2); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 0.82rem; } .footer-bottom a { color: var(--pale); } .footer-legal { display: flex; gap: 20px; } /* ---------- Diaspora "coming soon" ---------- */ .coming-soon-badge { display: inline-block; background: var(--sky); color: var(--navy-deep); font-family: var(--heading); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; margin-bottom: 20px; } .signup-inline { display: flex; gap: 12px; max-width: 480px; margin-top: 24px; } .signup-inline input { flex: 1; padding: 14px 16px; border-radius: 4px; border: none; color: var(--navy-deep); } .signup-inline .btn { white-space: nowrap; } /* ---------- Photo tint ---------- */ /* Applied to real photography so it blends into the Navy wash rather than sitting as a bright, saturated rectangle against it. Not used on logos/icons. */ .tint { filter: saturate(0.82) brightness(0.94) contrast(1.05); } /* ---------- Scroll-reveal motion ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Legal pages ---------- */ .legal-notice { background: var(--off-white); color: var(--navy-deep); border-left: 4px solid var(--sky); padding: 20px 24px; border-radius: 0 4px 4px 0; margin-bottom: 40px; font-size: 0.92rem; } .legal-body h2 { margin-top: 40px; margin-bottom: 16px; } .legal-body p, .legal-body li { color: var(--pale); margin-bottom: 14px; } .legal-body li { margin-left: 20px; list-style: disc; } .legal-body a { color: var(--sky); } /* ============================================================ Responsive — mobile-first breakpoints at 768 / 1024 / 1440 ============================================================ */ @media (max-width: 1024px) { .grid-4, .grid-3, .advantage-list, .challenge-grid, .testimonials, .news-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .case-study-header { grid-template-columns: 1fr; } .dev-principles-layout { grid-template-columns: 1fr; } } @media (max-width: 860px) { .main-nav { display: none; } .nav-toggle { display: block; } .site-header.nav-open .main-nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: rgba(244, 246, 248, 0.98); flex-direction: column; align-items: flex-start; padding: 20px 24px 28px; gap: 18px; box-shadow: var(--shadow); } .site-header.nav-open .nav-cta { display: none; } } @media (max-width: 768px) { section { padding: 56px 0; } .grid-2, .grid-3, .grid-4, .advantage-list, .challenge-grid, .testimonials, .news-grid, .photo-strip, .form-grid, .footer-grid { grid-template-columns: 1fr; } .blueprint-illustration { padding: 20px; } .spotlight { grid-template-columns: 1fr; padding: 32px; } .spotlight-bleed { padding: 0; } .hero { padding: 72px 0 56px; } .hero-with-image { padding: 96px 0 72px; } .pull-quote { flex-direction: column; padding: 28px; } .stat-row { gap: 28px; } .signup-inline { flex-direction: column; } } @media (min-width: 1441px) { .container { max-width: 1320px; } }