/* ========================================================================== CGT People & Development Standalone stylesheet. No build step, no framework. Sections: 1 tokens · 2 base · 3 header/nav · 4 journey route · 5 hero 6 services · 7 process · 8 about · 9 contact · 10 footer 11 motion · 12 responsive · 13 reduced motion / print ========================================================================== */ /* 1 · Design tokens ------------------------------------------------------ */ :root { --ink: #111316; --ink-soft: #1b1e22; --paper: #f4f3f1; --paper-alt: #efeeeb; --white: #ffffff; --line: #d5d4d1; /* Red: --red is the brand red used for graphics and large shapes. --red-text is a darkened variant used only where red sits behind small text, so body-sized copy clears WCAG 2.2 AA (4.5:1). */ --red: #d71920; --red-dark: #a90d13; --red-text: #c2141a; --red-on-dark: #ff4d54; /* Text colours, all verified against their own background for AA. */ --body-on-paper: #4a4d52; --body-on-paper-alt: #55585e; --body-on-white: #55585e; --body-on-ink: #c8c9cc; --muted-number: #86888c; --focus: #ff5a60; --route-width: 4px; --header-h: 96px; /* Hero parallax offset, written by script.js on mouse move. Declared here so the float-mark keyframes can compose with it. */ --mark-x: 0px; --mark-y: 0px; } /* 2 · Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { /* Set on the root as well as body so anything resolving `inherit` still lands on the brand typeface. */ font-family: "Manrope", "Segoe UI", Arial, sans-serif; scroll-behavior: smooth; /* Anchor targets clear the fixed-height header. */ scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { position: relative; margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; /* Guards against any single decorative overhang creating a sideways scroll. */ overflow-x: hidden; } /* Form controls do not inherit the page font by default. Note that `body` must NOT be listed here: `font-family: inherit` on body would resolve against and drop the brand typeface back to the browser default. */ button, input, textarea, select { font-family: inherit; font-size: inherit; } a { color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } img, svg { display: block; max-width: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; z-index: 100; top: 0; left: 50%; padding: 14px 26px; transform: translate(-50%, -120%); background: var(--red); color: var(--white); font-size: 15px; font-weight: 700; text-decoration: none; transition: transform 180ms ease; } .skip-link:focus-visible { transform: translate(-50%, 0); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } /* Arrow / tick glyph sizing, shared. */ .arrow, .tick { width: 20px; height: 20px; flex: none; } /* 3 · Header and navigation --------------------------------------------- */ .site-header { position: absolute; z-index: 40; top: 0; left: 0; display: flex; width: 100%; height: var(--header-h); align-items: center; justify-content: space-between; padding: 0 clamp(22px, 5vw, 82px); border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: var(--white); } .brand { display: block; width: 180px; flex: none; } .brand img { width: 100%; height: auto; } .site-nav { display: flex; align-items: center; gap: clamp(26px, 4vw, 58px); } .site-nav a { position: relative; padding: 14px 2px; color: rgba(255, 255, 255, 0.92); font-size: 14px; font-weight: 500; text-decoration: none; } .site-nav a::after { position: absolute; right: 0; bottom: 6px; left: 0; height: 2px; background: var(--red-on-dark); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 240ms ease; } .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); } .menu-button { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.24); background: transparent; color: var(--white); cursor: pointer; } .menu-button svg { width: 24px; height: 24px; } .menu-button__close { display: none; } .menu-button[aria-expanded="true"] .menu-button__open { display: none; } .menu-button[aria-expanded="true"] .menu-button__close { display: block; } .nav-scrim { position: fixed; z-index: 30; inset: 0; background: rgba(8, 9, 11, 0.55); opacity: 0; pointer-events: none; transition: opacity 260ms ease; } .nav-scrim.is-visible { opacity: 1; pointer-events: auto; } /* 4 · Journey route ------------------------------------------------------ */ /* One continuous SVG path spanning the whole document, drawn by script.js from measured element positions. It sits above the section backgrounds but below section content, so the service and process circles mask the line exactly where the reference artwork shows a node. */ .journey { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Hidden until script.js has measured a real path, to avoid a flash of unpositioned artwork on first paint. */ opacity: 0; transition: opacity 420ms ease; } .journey.is-ready { opacity: 1; } .journey__svg { display: block; width: 100%; height: 100%; overflow: visible; } /* The line is drawn progressively as the page scrolls. script.js sets stroke-dasharray to the full path length and then moves stroke-dashoffset so the visible end of the line sits at the reader's scroll position. The faint track underneath keeps the route legible before it is drawn. */ .journey__track { stroke: var(--red); stroke-width: var(--route-width); stroke-linecap: round; stroke-linejoin: round; opacity: 0.13; } .journey__line { stroke: var(--red); stroke-width: var(--route-width); stroke-linecap: round; stroke-linejoin: round; } .journey__pulse { stroke: #ff7076; stroke-width: calc(var(--route-width) + 2px); stroke-linecap: round; opacity: 0; } /* Node markers fade in as the drawn line reaches them. */ .journey__node { opacity: 0; transition: opacity 320ms ease; } .journey__node.is-reached { opacity: 1; } .journey__node { fill: var(--ink); stroke: var(--red); stroke-width: var(--route-width); } .journey__node--end { fill: var(--ink-soft); } /* Small dot inside the terminal node, matching the approved artwork. */ .journey__node--end + .journey__node, .journey__node--hero { fill: var(--ink); } /* 5 · Hero --------------------------------------------------------------- */ /* The hero ground is built from three layers of the existing brand language rather than photography: a charcoal wash, a soft red bloom where the journey route enters, and a fine dot field masked to a diagonal so it fades out behind the headline. All CSS, so it adds nothing to page weight. */ .hero { position: relative; display: flex; min-height: 600px; align-items: center; padding: calc(var(--header-h) + 30px) clamp(22px, 5vw, 82px) 66px; overflow: hidden; background: radial-gradient(1100px 620px at 74% 26%, rgba(215, 25, 32, 0.19), transparent 62%), radial-gradient(820px 520px at 8% 92%, rgba(255, 255, 255, 0.055), transparent 62%), linear-gradient(157deg, #191d22 0%, #121519 46%, #0b0d0f 100%); color: var(--white); } /* Dot field. Masked on the diagonal so it never crowds the reading column. */ .hero::before { position: absolute; z-index: 0; inset: 0; content: ""; background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(112deg, transparent 26%, #000 58%, transparent 94%); mask-image: linear-gradient(112deg, transparent 26%, #000 58%, transparent 94%); opacity: 0.55; } /* A single hairline echoing the route's diagonal entry, well clear of the copy. */ .hero::after { position: absolute; z-index: 0; top: -20%; right: -8%; bottom: -20%; width: 1px; content: ""; background: linear-gradient( 180deg, transparent, rgba(215, 25, 32, 0.45) 42%, rgba(215, 25, 32, 0.12) 68%, transparent ); transform: rotate(14deg); transform-origin: top center; } .hero__content { position: relative; z-index: 3; width: min(680px, 60vw); } .hero__mark { position: absolute; z-index: 0; top: 118px; right: -170px; width: min(46vw, 640px); height: auto; /* Carries a little more presence now that it is the only figure in the hero. */ opacity: 0.075; will-change: transform; } .eyebrow { margin: 0 0 20px; color: var(--red-on-dark); font-size: 14px; font-weight: 700; letter-spacing: 0.115em; text-transform: uppercase; } .eyebrow--dark { color: var(--red-text); } /* Type hierarchy: the hero headline stays a clear step above the section headings below it (50px vs 38px at the top of the scale). Reducing one without the other would flatten the page's top level. */ .hero h1 { max-width: 15ch; margin: 0; font-size: clamp(34px, 3.4vw, 50px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.06; text-wrap: balance; } .hero__intro { max-width: 52ch; margin: 24px 0 0; color: var(--body-on-ink); font-size: clamp(16px, 1.05vw, 18px); line-height: 1.62; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 30px; } /* Buttons and links ------------------------------------------------------ */ .button, .text-link { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 20px; font-size: 15px; font-weight: 600; text-decoration: none; } .button { padding: 0 26px; border: 0; cursor: pointer; } .button--primary { background: var(--red); color: var(--white); transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease; } .button--primary:hover, .button--primary:focus-visible { background: var(--red-dark); box-shadow: 0 14px 30px rgba(215, 25, 32, 0.24); transform: translateY(-2px); } .text-link { min-height: 46px; border-bottom: 2px solid var(--red-on-dark); color: var(--white); } .button .arrow, .text-link .arrow, .service__arrow .arrow { transition: transform 220ms ease; } .button:hover .arrow, .button:focus-visible .arrow, .text-link:hover .arrow, .text-link:focus-visible .arrow { transform: translateX(5px); } /* 6 · Services ----------------------------------------------------------- */ .services { position: relative; padding: 26px clamp(22px, 5vw, 82px) 22px; background: var(--paper); } .service-list { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; } .service { position: relative; display: grid; grid-template-columns: 80px 76px minmax(0, 1fr) 52px; align-items: center; gap: 20px; min-height: 168px; padding-inline: 14px; border-bottom: 1px solid var(--line); border-radius: 6px; transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 300ms ease, background 250ms ease; } /* Lift on hover. The whole row moves together, so the icon ring slides along the vertical journey line rather than detaching from it. */ .service:hover, .service:focus-within { transform: translateY(-5px); background: var(--white); box-shadow: 0 16px 34px rgba(17, 19, 22, 0.1), 0 3px 8px rgba(17, 19, 22, 0.05); border-bottom-color: transparent; } .service__number { color: var(--muted-number); font-size: 38px; font-weight: 400; letter-spacing: -0.05em; transition: color 250ms ease; } .service:hover .service__number { color: var(--red-text); } .service__icon { display: grid; width: 60px; height: 60px; place-items: center; border: 2px solid var(--red); border-radius: 50%; /* Opaque so the route line is masked inside the ring, as per the artwork. */ background: var(--paper); color: var(--ink); transition: background 250ms ease; } .service:hover .service__icon { background: var(--white); } .service__icon svg { width: 27px; height: 27px; } .service__content h3 { margin: 0 0 11px; font-size: clamp(19px, 1.55vw, 23px); font-weight: 700; letter-spacing: -0.03em; } .service__content p { max-width: 60ch; margin: 0; color: var(--body-on-paper); font-size: 15px; line-height: 1.62; } .service__arrow { display: grid; width: 48px; height: 48px; place-items: center; color: var(--ink); transition: color 200ms ease, transform 200ms ease; } .service__arrow .arrow { width: 26px; height: 26px; } .service__arrow:hover, .service__arrow:focus-visible { color: var(--red-text); transform: translateX(5px); } /* 7 · How we help -------------------------------------------------------- */ .process { position: relative; display: grid; grid-template-columns: 0.82fr 1.8fr; gap: clamp(44px, 6.5vw, 112px); padding: 78px clamp(22px, 5vw, 82px) 94px; background: var(--paper-alt); } .process__heading, .process__steps { position: relative; z-index: 2; } .process__heading h2, .about h2, .contact h2 { margin: 0; font-size: clamp(26px, 2.7vw, 38px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; } .process__heading > p:last-child { max-width: 38ch; margin: 22px 0 0; color: var(--body-on-paper-alt); font-size: 15px; line-height: 1.68; } .process__steps { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 0; margin: 0; padding: 56px 0 0; list-style: none; counter-reset: none; } /* In the wide layout the horizontal through the three nodes is drawn solely by the journey SVG, which runs exactly through the node centres and stops at node 01. Giving each step its own border-top as well produced a doubled line (the two sit 2px apart) and made the last step's rule overshoot the corner where the route turns up toward the rail. */ .process-step { position: relative; min-height: 190px; padding: 62px 26px 0; } .process-step__number { position: absolute; top: -30px; left: 24px; display: grid; width: 60px; height: 60px; place-items: center; border: 2px solid var(--red); border-radius: 50%; /* Opaque so the route is masked inside the ring. */ background: var(--paper-alt); color: var(--ink); font-size: 19px; font-weight: 700; } .process-step h3 { margin: 0 0 12px; font-size: 20px; } .process-step p { margin: 0; max-width: 34ch; color: var(--body-on-paper-alt); font-size: 14px; line-height: 1.65; } /* 8 · About -------------------------------------------------------------- */ .about { position: relative; min-height: 440px; padding: 84px clamp(22px, 5vw, 82px); overflow: hidden; background: var(--ink-soft); color: var(--white); } .about__content { position: relative; z-index: 2; max-width: 560px; margin-left: auto; } .about__content > p:not(.eyebrow) { margin: 24px 0 0; color: var(--body-on-ink); font-size: clamp(15px, 1vw, 17px); line-height: 1.72; } .about__points { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 30px 0 0; padding: 0; list-style: none; } .about__points li { display: inline-flex; align-items: center; gap: 9px; color: #ececef; font-size: 14px; font-weight: 600; } .about__points .tick { width: 18px; height: 18px; color: var(--red-on-dark); } .about__mark { position: absolute; z-index: 0; left: -150px; bottom: -130px; width: 600px; height: auto; opacity: 0.07; } /* 9 · Contact ------------------------------------------------------------ */ .contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(44px, 7vw, 118px); padding: 84px clamp(22px, 6vw, 100px); background: var(--white); } .contact__intro > p:not(.eyebrow):not(.contact__location) { max-width: 46ch; margin: 22px 0 0; color: var(--body-on-white); font-size: 15px; line-height: 1.68; } .contact__location { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; color: var(--body-on-white); font-size: 14px; } .contact__location svg { width: 22px; height: 22px; flex: none; color: var(--red-text); } .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-content: start; } .form-notice { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-left: 3px solid var(--red); background: #faf3f3; color: #4a4d52; font-size: 13px; line-height: 1.6; } .field { display: grid; gap: 8px; align-content: start; } .field--wide { grid-column: 1 / -1; } .field label { font-size: 13px; font-weight: 700; } .req { color: var(--red-text); } .field input, .field textarea { width: 100%; padding: 0 2px; border: 0; border-bottom: 1px solid #9a9ca0; border-radius: 0; outline: none; background: transparent; color: var(--ink); font-size: 16px; transition: border-color 180ms ease, box-shadow 180ms ease; } .field input { height: 48px; } .field textarea { padding: 12px 2px; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--red); box-shadow: 0 2px 0 var(--red); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red-dark); box-shadow: 0 2px 0 var(--red-dark); } .field__error { margin: 0; color: #a3070d; font-size: 13px; font-weight: 600; } /* Reveal stagger. These were style="--delay: 90ms" attributes on the elements themselves until the Content-Security-Policy went live: style-src 'self' blocks style attributes as well as