/* ===================================================================== ENGAGE, OVERRIDES Neutralises the demo's SPA splash-screen body rule for the multipage (Eleventy) context. Loaded last. ===================================================================== */ /* ------------------------------------------------------------------ Port corrections (SPA -> multipage) The source stylesheet carries the demo's splash-screen rule (green background, flex-centered, 100vh). In a multipage site that would break every page, so we reset back to a normal document flow here. Loaded last so it wins cleanly without editing the approved design CSS. ------------------------------------------------------------------ */ body { background: #ffffff !important; display: block !important; min-height: 0 !important; padding: 0 !important; } /* The demo hid the nav until the splash dismissed. There is no splash in the static site, so the fixed top nav is always visible. */ nav { display: flex !important; } /* ===================================================================== MOBILE NAV, hamburger menu (25 July 2026, WorkInFlow) The site previously had zero responsive handling for the top nav, .nav-links was an unconditional flex row with 7 items, which either overflows or wraps on phone widths. This adds a standard hamburger toggle below 860px (matching the breakpoint already used for the image-slot sections added this week), driven by main.js. ===================================================================== */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; padding: 0; cursor: pointer; z-index: 110; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--apag-grey, #59595C); border-radius: 1px; transition: transform .25s ease, opacity .2s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 860px) { nav { padding: 0 20px !important; } .nav-toggle { display: flex !important; } .nav-links { position: fixed; top: 64px; left: 0; right: 0; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; background: #fff; border-bottom: 1px solid var(--border, #dfe3e6); box-shadow: 0 12px 24px rgba(17,30,40,0.08); max-height: 0; overflow: hidden; transition: max-height .3s ease; } .nav-links.open { max-height: calc(100vh - 64px); overflow-y: auto; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 16px 24px; border-bottom: 1px solid var(--border, #dfe3e6); font-size: 16px; } .nav-links .nav-cta { display: block; margin: 16px 24px; text-align: center; } } /* Keep the dark footer full-bleed regardless of the demo's section padding rules. */ footer { width: 100%; } /* ===================================================================== CHUNK 3, GUIDES & CASE STUDIES (additive) Collection hubs reuse existing card/grid classes; these rules add the detail-page prose, the guide gate, and small card/detail helpers. All colours come through the design tokens. ===================================================================== */ /* ---- Guide detail: readable prose column ---- */ .guide-section { padding: 56px 32px 72px; background: var(--white); } .guide-wrap { max-width: 760px; margin: 0 auto; } .guide-body > :first-child { margin-top: 0; } .guide-body h2 { font-family: var(--serif); font-size: 24px; color: var(--color-heading); margin: 38px 0 14px; line-height: 1.3; } .guide-body h3 { font-family: var(--serif); font-size: 19px; color: var(--color-heading); margin: 28px 0 10px; line-height: 1.35; } .guide-body p { font-size: 16px; color: var(--slate); line-height: 1.75; margin: 0 0 16px; } .guide-body ul, .guide-body ol { margin: 0 0 18px; padding-left: 22px; } .guide-body li { font-size: 16px; color: var(--slate); line-height: 1.7; margin-bottom: 8px; } .guide-body strong { color: var(--ink); font-weight: 600; } .guide-body em { font-style: italic; } .guide-body a { color: var(--green); text-decoration: underline; } .guide-body blockquote { border-left: 3px solid var(--green); padding-left: 16px; margin: 0 0 18px; color: var(--slate); font-style: italic; } .guide-body table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 14px; } .guide-body th, .guide-body td { border: 1px solid var(--silver); padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.6; } .guide-body th { background: var(--green-light); color: var(--green-dark); font-weight: 600; } .guide-body hr { border: none; border-top: 1px solid var(--silver); margin: 28px 0; } /* ---- Guide gate (gated entries; real form wired in lead-automation phase) ---- */ .guide-gate { max-width: 620px; margin: 8px auto; background: var(--mist); border: 1px solid var(--silver); border-radius: 10px; padding: 36px 32px; text-align: center; } .guide-gate h3 { font-family: var(--serif); font-size: 22px; color: var(--color-heading); margin-bottom: 8px; } .guide-gate p { color: var(--slate); font-size: 15px; line-height: 1.7; margin: 0 auto 20px; max-width: 460px; } .gate-form-ph { border: 1px dashed var(--silver); border-radius: 8px; padding: 18px; color: var(--slate); font-size: 13px; background: var(--white); } .guide-lock { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-dark); background: var(--green-light); padding: 4px 10px; border-radius: 999px; } /* ---- Guides hub: make insight-card clickable + pin a footer row ---- */ .guide-card { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; } .guide-card p { flex: 1; } .guide-card-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--silver); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--slate); } /* ---- Case-study detail: render the approved modal card as a static page ---- */ .cs-detail-section { background: var(--mist); padding: 40px 24px 72px; } .cs-detail-wrap { max-width: 820px; margin: 0 auto; } .cs-breadcrumb { font-size: 12px; color: var(--slate); margin-bottom: 18px; } .cs-breadcrumb a { color: var(--green); text-decoration: none; } .cs-breadcrumb span { margin: 0 8px; color: var(--silver); } .cs-modal { margin: 0 auto; max-width: 820px; box-shadow: var(--shadow-card); } .cs-abstract { font-size: 17px; color: var(--ink); line-height: 1.7; margin-bottom: 28px; font-weight: 500; } /* ===================================================================== CONTENT-LIGHTENING COMPONENTS · v3 · 23 June 2026 (WorkInFlow) New light-page components introduced when the heavy prose sections on The Process and How It Works were converted to a stepper and to grid cards, plus the homepage compact process strip. All built on the clean semantic tokens in tokens.css (APAG CI). Scoped to avoid the dark homepage .grid-card / .step styles in styles.css. ===================================================================== */ /* --- The Process: vertical connected stepper --- */ .stepper { list-style: none; margin: 0; padding: 0; } .stepper .step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 0 0 28px; border: 0; } .stepper .step:last-child { padding-bottom: 0; } .stepper .step::before { content: ""; position: absolute; left: 27px; top: 50px; bottom: -2px; width: 2px; background: var(--border); } .stepper .step:last-child::before { display: none; } .stepper .step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--apag-blue-tint); border: 2px solid var(--color-primary); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; position: relative; z-index: 1; } .stepper .step-body { padding-top: 5px; } .stepper .step-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .stepper .step-head h3 { font-size: 19px; font-weight: 700; color: var(--color-heading); margin: 0; } .stepper .step-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apag-green); background: rgba(31,160,73,0.10); border-radius: 100px; padding: 3px 10px; } .stepper .step-body p { font-size: 15px; color: var(--color-text); line-height: 1.65; margin: 0; max-width: 62ch; } /* --- How It Works: five grid cards (light) --- */ .grids-section .grid-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 0; } .grids-section .grid-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 22px 18px; display: flex; flex-direction: column; } .grids-section .grid-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .grids-section .grid-card-num { font-size: 26px; font-weight: 700; color: var(--color-primary); line-height: 1; } .grids-section .grid-card:nth-child(1) .grid-card-num { color: var(--apag-blue); } .grids-section .grid-card:nth-child(2) .grid-card-num { color: var(--apag-teal); } .grids-section .grid-card:nth-child(3) .grid-card-num { color: var(--apag-green); } .grids-section .grid-card:nth-child(4) .grid-card-num { color: var(--apag-orange); } .grids-section .grid-card:nth-child(5) .grid-card-num { color: var(--apag-blue-dark); } .grids-section .grid-card-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; white-space: nowrap; } .grids-section .grid-card-badge.skills { color: var(--color-primary); background: var(--apag-blue-tint); } .grids-section .grid-card-badge.context { color: var(--apag-green); background: rgba(31,160,73,0.10); } .grids-section .grid-card h3 { font-size: 16px; font-weight: 700; color: var(--color-heading); margin: 0 0 6px; } .grids-section .grid-card p { font-size: 13px; color: var(--color-text); line-height: 1.55; margin: 0; } @media (max-width: 900px) { .grids-section .grid-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grids-section .grid-cards { grid-template-columns: 1fr; } } /* --- Homepage: compact process strip --- */ .process-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; } .process-strip li { display: flex; align-items: center; gap: 10px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 100px; padding: 9px 18px 9px 9px; font-size: 14px; font-weight: 600; color: var(--color-heading); } .process-strip .ps-num { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } @media (max-width: 700px) { .process-strip { flex-direction: column; align-items: stretch; } } /* --- Shared: inline section links / depth pointers --- */ .section-link { margin-top: 24px; margin-bottom: 0; } .section-link a { font-size: 14px; font-weight: 600; color: var(--color-primary); text-decoration: none; } .section-link a:hover { color: var(--color-link-hover); } .stepper-more { margin-top: 28px; font-size: 14px; color: var(--color-text); } .stepper-more a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .stepper-more a:hover { text-decoration: underline; } /* ===================================================================== DEPTH & IMAGE-SLOT PASS · v4 · 23 June 2026 (WorkInFlow) Adds dimensional cues (brand gradient bands, card elevation, outline icons) and a reusable image-slot component + slots ready for real licensed photography. All token-based / APAG CI compliant. ===================================================================== */ /* --- Brand gradient on the dark bands (blue -> hint of green) --- */ .hero { background: linear-gradient(135deg, #004c6b 0%, #0075A0 58%, #1a8f48 165%) !important; } .page-hero { background: linear-gradient(135deg, #004c6b 0%, #0075A0 62%, #1a8f48 180%) !important; } .demo-cta { background: linear-gradient(120deg, #0075A0 0%, #128a4f 120%) !important; } /* --- Card elevation + lift on hover (replaces flat hairline feel) --- */ .diff-card, .case-card, .model-card, .matters-card, .grids-section .grid-card, .receive-item { box-shadow: 0 1px 2px rgba(17,30,40,0.04), 0 10px 26px rgba(17,30,40,0.06); transition: box-shadow .18s ease, transform .18s ease; } .diff-card:hover, .case-card:hover, .model-card:hover, .grids-section .grid-card:hover { box-shadow: 0 2px 4px rgba(17,30,40,0.06), 0 16px 38px rgba(17,30,40,0.10); transform: translateY(-3px); } .stepper .step { border-radius: 12px; transition: background .18s ease; padding-left: 4px; } /* --- Outline icons on the four differentiators --- */ .diff-card { position: relative; } .diff-icon { display: inline-flex; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; margin-bottom: 16px; background: var(--apag-blue-tint); color: var(--color-primary); } .diff-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .diff-card:nth-child(2) .diff-icon { background: rgba(31,160,73,0.10); color: var(--apag-green); } .diff-card:nth-child(3) .diff-icon { background: rgba(0,134,148,0.10); color: var(--apag-teal); } .diff-card:nth-child(4) .diff-icon { background: rgba(238,108,77,0.10); color: var(--apag-orange); } .diff-card:nth-child(1) { border-top-color: var(--apag-blue); } .diff-card:nth-child(2) { border-top-color: var(--apag-green); } .diff-card:nth-child(3) { border-top-color: var(--apag-teal); } .diff-card:nth-child(4) { border-top-color: var(--apag-orange); } /* --- Reusable image slot (placeholder until real photography is added) --- */ .img-slot { position: relative; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #eef3f6 0%, #e3edf0 100%); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .img-slot.ratio-wide { aspect-ratio: 16 / 9; } .img-slot.ratio-photo { aspect-ratio: 4 / 3; } .img-slot.ratio-portrait { aspect-ratio: 3 / 4; } .eng-compare-top .compare-image{width:100%;height:100%;min-height:280px;object-fit:cover;border-radius:14px;} .eng-compare-top .img-slot.compare-image{aspect-ratio:auto;height:100%;min-height:280px;} @media (max-width: 860px){ .eng-compare-top{grid-template-columns:1fr !important;} .eng-compare-top .compare-image,.eng-compare-top .img-slot.compare-image{min-height:220px;order:-1;} } .tension-left{display:flex;flex-direction:column;} .tension-right{display:flex;flex-direction:column;} .tension-right .tension-image{width:100%;height:100%;flex:1;object-fit:cover;border-radius:14px;min-height:320px;} .tension-right .img-slot.tension-image{flex:1;aspect-ratio:auto;min-height:320px;} @media (max-width: 860px){ .tension-right .tension-image,.tension-right .img-slot.tension-image{flex:none;height:280px;margin-top:8px;} } .why-engage-left{display:flex;flex-direction:column;} .img-slot-label { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #7d9aa8; text-align: center; padding: 16px; } .img-slot-label svg { width: 34px; height: 34px; stroke: #9bb3bf; fill: none; stroke-width: 1.5; } .cs-image, .slot-filled { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; } .cs-image { margin: 0 0 4px; max-height: 360px; } /* --- Admin-editable page images (set via Site images in the CMS) --- */ .hero.has-image { background: linear-gradient(135deg, rgba(0,76,107,0.85) 0%, rgba(0,117,160,0.80) 58%, rgba(26,143,72,0.78) 165%), var(--hero-img) center/cover no-repeat !important; } .page-hero.has-image { background: linear-gradient(135deg, rgba(0,76,107,0.88) 0%, rgba(0,117,160,0.82) 62%, rgba(26,143,72,0.80) 180%), var(--hero-img) center/cover no-repeat !important; } .page-photo { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: 14px; } .page-image { max-width: 1100px; margin: 0 auto; padding: 40px 32px 0; } .demo-image { margin-bottom: 28px; } /* ===================================================================== CHUNK 5, NATIVE INFOGRAPHIC COMPONENTS + COMPARISON ACCORDION (WorkInFlow · replaces the client's static PNG infographics with responsive, accessible, CMS-editable components.) All colour comes through the APAG CI tokens in tokens.css. Full palette used as data-device accents; blue/green/grey stay dominant. ===================================================================== */ /* ---- shared bits ---- */ .eng-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--apag-blue);margin-bottom:14px;} .eng-h2{font-size:34px;color:var(--apag-grey);margin:0 0 12px;line-height:1.2;} .eng-rule{width:64px;height:4px;border-radius:2px;background:var(--gradient-brand);margin:0 0 32px;} .eng-lead{font-size:16px;line-height:1.75;color:var(--apag-grey);max-width:720px;} /* ---- A. Benefit list (Overview → "Why organisations choose Engage") ---- */ .eng-benefits{list-style:none;margin:0;padding:0;} .eng-benefits li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--silver);font-size:15px;color:var(--apag-grey);line-height:1.5;} .eng-benefits li:last-child{border-bottom:0;} .eng-benefits .chip{width:30px;height:30px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;} .eng-benefits .chip svg{width:15px;height:15px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;} .eng-benefits li:nth-child(1) .chip{background:var(--apag-blue);} .eng-benefits li:nth-child(2) .chip{background:var(--apag-teal);} .eng-benefits li:nth-child(3) .chip{background:var(--apag-green);} .eng-benefits li:nth-child(4) .chip{background:var(--apag-lime);} .eng-benefits li:nth-child(5) .chip{background:var(--apag-orange);} .eng-benefits li:nth-child(6) .chip{background:var(--apag-yellow);} /* ---- B. Difference grid (Overview → "What makes Engage different") ---- */ .eng-diffgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;} .eng-diffgrid .card{position:relative;background:#fff;border:1px solid var(--silver);border-radius:12px; padding:30px 30px 30px 32px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;} .eng-diffgrid .card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;} .eng-diffgrid .card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,0.08);} .eng-diffgrid .card-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;} .eng-diffgrid .badge{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;} .eng-diffgrid .badge svg{width:26px;height:26px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;} .eng-diffgrid .card h3{font-size:20px;color:var(--apag-grey);margin:0;line-height:1.25;} .eng-diffgrid .card p{font-size:15px;line-height:1.7;color:var(--apag-grey);margin:0;} .eng-diffgrid .c1::before{background:var(--apag-blue);} .eng-diffgrid .c1 .badge{background:var(--apag-blue);} .eng-diffgrid .c2::before{background:var(--apag-teal);} .eng-diffgrid .c2 .badge{background:var(--apag-teal);} .eng-diffgrid .c3::before{background:var(--apag-green);} .eng-diffgrid .c3 .badge{background:var(--apag-green);} .eng-diffgrid .c4::before{background:var(--apag-lime);} .eng-diffgrid .c4 .badge{background:var(--apag-lime);} /* ---- C. Comparison accordion (Overview → "Engage vs traditional") ---- */ .eng-compare .in-short{font-size:15px;line-height:1.75;max-width:760px;color:var(--apag-grey);margin:0 0 24px; padding:16px 20px;background:#fff;border-left:3px solid var(--apag-green);border-radius:0 6px 6px 0;} .eng-compare .in-short strong{color:var(--apag-blue);} .eng-compare .toggle{display:inline-flex;align-items:center;gap:10px;background:var(--gradient-brand);color:#fff;border:none; font-family:var(--font-body,'Helvetica Neue',Helvetica,Arial,sans-serif);font-size:14px;font-weight:600; padding:13px 22px;border-radius:6px;cursor:pointer;box-shadow:0 2px 8px rgba(0,117,160,0.25);transition:filter .15s,box-shadow .15s;} .eng-compare .toggle:hover{filter:brightness(1.06);box-shadow:0 4px 14px rgba(0,117,160,0.32);} .eng-compare .toggle .chev{transition:transform .25s;font-size:12px;} .eng-compare.open .toggle .chev{transform:rotate(180deg);} .eng-compare .panel{overflow:hidden;max-height:0;transition:max-height .45s ease;} .eng-compare.open .panel{max-height:4000px;} .eng-compare .panel-pad{padding-top:28px;} .eng-compare .tbl-wrap{overflow-x:auto;background:#fff;border:1px solid var(--silver);border-radius:8px;} .eng-compare table{width:100%;min-width:680px;border-collapse:collapse;} .eng-compare thead td{background:#005a7a;padding:16px 24px;font-size:12px;font-weight:600;text-transform:uppercase; letter-spacing:0.08em;color:rgba(255,255,255,0.55);} .eng-compare thead td.eng{color:var(--apag-green);} .eng-compare tbody tr{border-top:1px solid var(--silver);} .eng-compare td{padding:16px 24px;font-size:14px;line-height:1.55;vertical-align:top;} .eng-compare td.area{font-weight:600;color:var(--apag-grey);background:var(--mist);width:190px;border-left:4px solid var(--apag-blue);} .eng-compare td.eng{color:#005a7a;background:#f5f9fb;} .eng-compare td.trad{color:var(--apag-grey);} .eng-compare tbody tr:nth-child(1) .area{border-left-color:var(--apag-blue);} .eng-compare tbody tr:nth-child(2) .area{border-left-color:var(--apag-teal);} .eng-compare tbody tr:nth-child(3) .area{border-left-color:var(--apag-green);} .eng-compare tbody tr:nth-child(4) .area{border-left-color:var(--apag-lime);} .eng-compare tbody tr:nth-child(5) .area{border-left-color:var(--apag-yellow);} .eng-compare tbody tr:nth-child(6) .area{border-left-color:var(--apag-orange);} .eng-compare tbody tr:nth-child(7) .area{border-left-color:var(--apag-blue);} .eng-compare tbody tr:nth-child(8) .area{border-left-color:var(--apag-teal);} .eng-compare tbody tr:nth-child(9) .area{border-left-color:var(--apag-green);} .eng-compare .prose{max-width:760px;margin:36px 0 0;} .eng-compare .prose h3{font-size:19px;color:var(--apag-blue);margin:28px 0 8px;display:flex;align-items:center;gap:10px;} .eng-compare .prose h3::before{content:"";width:10px;height:10px;border-radius:2px;flex-shrink:0;} .eng-compare .prose .p1 h3::before{background:var(--apag-teal);} .eng-compare .prose .p2 h3::before{background:var(--apag-orange);} .eng-compare .prose .p3 h3::before{background:var(--apag-green);} .eng-compare .prose p{font-size:15px;line-height:1.75;color:var(--apag-grey);margin:0;} /* ---- D. "Still" list (Landing → traditional pain points) ---- */ .eng-still{list-style:none;margin:0;padding:0;} .eng-still li{display:flex;align-items:center;gap:16px;padding:14px 18px;margin-bottom:10px;border-radius:8px; background:var(--mist);border-left:4px solid var(--apag-blue);font-size:15px;color:var(--apag-grey);line-height:1.5;} .eng-still li:last-child{margin-bottom:0;} .eng-still .chip{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;} .eng-still .chip svg{width:19px;height:19px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;} .eng-still li:nth-child(1){border-left-color:var(--apag-blue);} .eng-still li:nth-child(1) .chip{background:var(--apag-blue);} .eng-still li:nth-child(2){border-left-color:var(--apag-teal);} .eng-still li:nth-child(2) .chip{background:var(--apag-teal);} .eng-still li:nth-child(3){border-left-color:var(--apag-green);} .eng-still li:nth-child(3) .chip{background:var(--apag-green);} .eng-still li:nth-child(4){border-left-color:var(--apag-lime);} .eng-still li:nth-child(4) .chip{background:var(--apag-lime);} .eng-still li:nth-child(5){border-left-color:var(--apag-orange);} .eng-still li:nth-child(5) .chip{background:var(--apag-orange);} @media(max-width:720px){ .eng-h2{font-size:26px;} .eng-diffgrid{grid-template-columns:1fr;gap:16px;} } /* ---- E. Trust band + client carousel (Landing) ---- */ @keyframes engFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } .trust-fade { opacity:0; animation:engFadeUp .6s ease forwards; } .carousel-arrow { border-radius:50%; transition:background .15s ease, color .15s ease; } .carousel-arrow:hover { background:var(--mist); color:var(--apag-blue); } /* ===================================================================== CHUNK 6, PAGE HERO REDESIGN (site-wide) · 24 July 2026 (WorkInFlow) v2, client picked "Option A" from the HTML preview (split layout, divider instead of a white card) with two amendments: the divider sits at the true horizontal centre of the band (equal 1fr/1fr columns, not the earlier 1.15/0.85 split), and the lead paragraph is set larger to close the dead space between it and the heading. Also bumped the eyebrow size per client note ("should be larger in proportion to the rest"). Applies to every page that uses .page-hero (Overview, How It Works, The Process, Case Studies, Guides, FAQ, Book a Demo). This block is the authoritative definition, it loads last, after the several legacy duplicate .page-hero rules ported from the single-file demo, so it wins the cascade without needing to hunt down every earlier occurrence in styles.css. ===================================================================== */ .page-hero { padding: 44px 48px 40px; } .page-hero-inner { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "crumb crumb" "eyebrow eyebrow" "heading lead" "extra extra"; column-gap: 48px; row-gap: 0; align-items: center; max-width: 1180px !important; margin: 0 auto; } .page-hero-inner > .breadcrumb { grid-area: crumb; margin-bottom: 20px; } .page-hero-inner > .eyebrow { grid-area: eyebrow; margin-bottom: 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; } .page-hero-inner > h1 { grid-area: heading; margin-bottom: 0; align-self: center; } .page-hero-inner > .lead { grid-area: lead; align-self: center; max-width: none; margin-bottom: 0; background: transparent; border-left: 1px solid rgba(255,255,255,0.2); padding-left: 36px; color: rgba(255,255,255,0.86); font-size: 19px; line-height: 1.68; } .page-hero-inner > .hero-stats, .page-hero-inner > .hero-meta { grid-area: extra; margin-top: 28px; } @media (max-width: 900px) { .page-hero-inner { grid-template-columns: 1fr; grid-template-areas: "crumb" "eyebrow" "heading" "lead" "extra"; } .page-hero-inner > .lead { margin-top: 22px; border-left: none; padding-left: 0; font-size: 17px; } } /* ===================================================================== CHUNK 7, CLOSING CTA BAND REDESIGN · 24 July 2026 (WorkInFlow) Client picked "Option B" from the HTML preview: text block on the left, buttons on the right, single row instead of a tall stacked block. Also bumped the supporting paragraph so it reads more prominently (was a faded, easy-to-miss line). Applies to The Process and How It Works, which both use .cta-section. The Overview page's equivalent band is hand-styled inline (ported from the demo, not using this class) and was updated to match directly in overview.njk. This block loads last, after the legacy duplicate .cta-section rules in styles.css, so it wins the cascade cleanly. ===================================================================== */ .cta-section { padding: 44px 48px; } .cta-section-inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eyebrow actions" "heading actions" "text actions"; align-items: center; column-gap: 40px; row-gap: 6px; text-align: left; max-width: 1180px; margin: 0 auto; } .cta-section .eyebrow { grid-area: eyebrow; text-align: left; margin: 0; } .cta-section h2 { grid-area: heading; text-align: left; margin: 0; max-width: 560px; } .cta-section p { grid-area: text; text-align: left; margin: 0; max-width: 520px; font-size: 17px; font-weight: 500; color: rgba(255,255,255,0.92); } .cta-section .cta-actions { grid-area: actions; display: flex; gap: 12px; flex-shrink: 0; margin: 0; } @media (max-width: 900px) { .cta-section-inner { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "heading" "text" "actions"; text-align: center; } .cta-section .eyebrow, .cta-section h2, .cta-section p { text-align: center; margin-left: auto; margin-right: auto; } .cta-section .cta-actions { justify-content: center; margin-top: 20px; } } @media (max-width: 900px) { .overview-cta-row { grid-template-columns: 1fr !important; grid-template-areas: "eyebrow" "heading" "text" "actions" !important; text-align: center !important; justify-items: center; } .overview-cta-row > div:last-child { justify-content: center !important; margin-top: 16px; } } /* ===================================================================== CHUNK 8, HOMEPAGE HERO / FRAMEWORK STRIP / DEMO CTA · 25 July 2026 (WorkInFlow). Client-approved HTML preview, built into the live site: 1) homepage .hero, eyebrow, heading, paragraph and buttons sized up. 2) .framework strip, split into two columns by a centre divider, one CTA button on each side, larger type. 3) .demo-cta ("Grade up to 5 of your roles"), heading left-aligned instead of centred, divider down the middle, paragraph + booking form moved to the right column. ===================================================================== */ /* --- 1. Homepage hero --- */ .hero-eyebrow { font-size: 13px; font-weight: 700; margin-bottom: 22px; } .hero h1 { font-size: 62px; line-height: 1.08; margin-bottom: 24px; } .hero-sub { font-size: 19px; line-height: 1.65; margin-bottom: 36px; max-width: 480px; } .hero .btn-primary, .hero .btn-ghost { padding: 17px 36px; font-size: 17px; } .hero .btn-ghost { font-weight: 600; } /* --- 2. Framework strip --- */ .framework-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: center; } .framework-left { border-right: 1px solid rgba(255,255,255,0.2); padding-right: 56px; } .framework-right { padding-left: 0; } .framework .section-eyebrow { font-size: 13px; font-weight: 700; margin-bottom: 16px; } .framework h2 { font-size: 32px; margin-bottom: 22px; } .framework .lead { font-size: 18px; line-height: 1.65; margin-bottom: 22px; } @media (max-width: 900px) { .framework-grid { grid-template-columns: 1fr; } .framework-left { border-right: none; padding-right: 0; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 32px; margin-bottom: 32px; } } /* --- 3. Demo CTA ("Grade up to 5 of your roles") --- */ .demo-cta { text-align: left; padding: 64px 48px; } .demo-cta-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: center; } .demo-cta-left { border-right: 1px solid rgba(255,255,255,0.22); padding-right: 56px; } .demo-cta-right { padding-left: 0; } .demo-cta h2 { margin: 0; max-width: none; font-size: 32px; } .demo-cta p { margin: 0 0 22px; max-width: none; text-align: left; } .demo-cta .demo-form { margin: 0; max-width: 420px; } .demo-cta .demo-note { margin-top: 12px; } @media (max-width: 900px) { .demo-cta-grid { grid-template-columns: 1fr; } .demo-cta-left { border-right: none; padding-right: 0; border-bottom: 1px solid rgba(255,255,255,0.22); padding-bottom: 28px; margin-bottom: 28px; } } /* ===================================================================== CHUNK 9, MOBILE RESPONSIVE PASS · 25 July 2026 (WorkInFlow) Full-site audit found a number of two/three/four-column grids with no breakpoint at all, they were built and approved at desktop width only. This closes those gaps. Two tiers used consistently with the breakpoints already established elsewhere in this file: 900px for "stack to one column" on paired sections, and an additional 560px step for card grids of 3+ so tablets get 2-up before phones get 1-up. ===================================================================== */ /* ---- Footer: 3-column -> stacked on every page, no exceptions ---- */ @media (max-width: 900px) { footer { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 24px !important; } } /* ---- Homepage: "many job evaluation systems" problem/list split ---- */ @media (max-width: 860px) { .tension-grid { grid-template-columns: 1fr !important; gap: 32px !important; } } /* ---- Homepage + The Process: differentiator cards ---- */ @media (max-width: 560px) { .diff-grid { grid-template-columns: 1fr !important; } } /* ---- Homepage: case study preview cards ---- */ @media (max-width: 900px) { .case-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .case-grid { grid-template-columns: 1fr !important; } } /* ---- Case Studies page: full card grid ---- */ @media (max-width: 900px) { .cases-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .cases-grid { grid-template-columns: 1fr !important; } } /* ---- Homepage + Guides page: insight/guide card grid ---- */ @media (max-width: 900px) { .insights-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .insights-grid { grid-template-columns: 1fr !important; } } /* ---- Overview page: "Why Engage exists" text + benefits list ---- */ @media (max-width: 900px) { .why-engage-grid { grid-template-columns: 1fr !important; gap: 32px !important; } } /* ---- Overview page: "Engage evaluates / does not evaluate" pair ---- */ @media (max-width: 700px) { .evaluates-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } /* ---- How It Works: role-not-person intro (text + principle list) ---- */ @media (max-width: 900px) { .intro-inner { grid-template-columns: 1fr !important; gap: 36px !important; } } /* ---- How It Works: two-pillars cards ---- */ @media (max-width: 700px) { .pillars-grid { grid-template-columns: 1fr !important; } } /* ---- How It Works: measured unit size (text + bar chart) ---- */ @media (max-width: 900px) { .mus-inner { grid-template-columns: 1fr !important; gap: 32px !important; } } /* ---- How It Works: what Engage evaluates / does not, two columns ---- */ @media (max-width: 700px) { .yesno-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } /* ---- The Process: overview text + principle list ---- */ @media (max-width: 900px) { .overview-grid { grid-template-columns: 1fr !important; gap: 32px !important; } } /* ---- The Process: "what you leave with" deliverables ---- */ @media (max-width: 900px) { .receive-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .receive-grid { grid-template-columns: 1fr !important; } } /* ---- Book a Demo: main content + fixed-width form card ---- .main-inner was a fixed 1fr/420px split with no fallback, on a 360-400px phone that 420px column alone is wider than the viewport, which forces the whole page to scroll horizontally. Stacking this is the single highest-impact fix in this pass after the nav. */ @media (max-width: 900px) { .main-inner { grid-template-columns: 1fr !important; gap: 40px !important; } } @media (max-width: 600px) { .for-grid { grid-template-columns: 1fr !important; } } /* ---- Homepage hero: headline + video placeholder ---- No breakpoint existed at all for the main .hero grid, the first thing a phone visitor sees was two ~180px-wide squeezed columns with a 540px min-height forcing a lot of empty scroll. */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr !important; min-height: 0 !important; padding: 64px 24px 40px !important; gap: 36px !important; } } /* ---- Client logo carousel: arrows sit closer on narrow screens ---- */ @media (max-width: 560px) { .client-carousel-section { padding: 40px 16px 48px !important; } } /* ---- Insights hub: Guides / Webinars sub-tabs + webinar cards + video embed ---- */ /* Uses tokens.css variables only (avoids the legacy --green aliasing in styles.css). */ .insights-tabs { display: flex; gap: 10px; margin: 0 0 26px; flex-wrap: wrap; } .insights-tab { appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--apag-blue); background: #fff; color: var(--apag-blue); transition: background .15s, color .15s; } .insights-tab:hover { background: var(--apag-blue-tint); } .insights-tab.active { background: var(--apag-blue); color: #fff; } .insights-panel[hidden] { display: none; } .insights-empty { color: var(--apag-grey); font-size: 15px; padding: 20px 0; } /* Webinar cards (share the .insight-card base, but lead with a video thumbnail) */ .webinar-card { padding: 0; overflow: hidden; text-decoration: none; color: var(--apag-grey); display: flex; flex-direction: column; } .webinar-thumb { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #0a2a38; border-bottom: 1px solid var(--border); } .webinar-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,117,160,0.92); box-shadow: 0 4px 14px rgba(0,0,0,0.25); transition: transform .15s, background .15s; } .webinar-play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; } .webinar-card:hover .webinar-play { transform: scale(1.08); background: var(--apag-green); } .webinar-card-body { padding: 18px 22px 22px; } .webinar-card-body h4 { font-family: var(--font-heading); font-size: 17px; color: var(--color-heading); margin: 8px 0 7px; line-height: 1.3; } .webinar-card-body p { font-size: 13px; color: var(--apag-grey); line-height: 1.6; margin: 0; } /* Responsive 16:9 video embed on the webinar detail page */ .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,0.12); margin: 0 auto; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .webinar-body { margin-top: 26px; } .video-missing { color: var(--apag-grey); font-style: italic; padding: 24px; text-align: center; border: 1px dashed var(--border); border-radius: 8px; } /* ===================================================================== CHUNK, Homepage hero explainer video (Vimeo click-to-play facade) --------------------------------------------------------------------- Replaces the static .hero-video placeholder with a poster + play button that only injects the Vimeo