/* ============================================================================ Eastbridge Comms — site stylesheet Visual direction: flat colour blocks, square corners, heavy headlines, a sand mark closing each headline, arrows on every action. Inspired by arcsystems.co.uk, translated into the Eastbridge palette. Structure of this file: 1. Tokens 6. Buttons 11. Calculator 2. Reset & base 7. Header/nav 12. FAQ 3. Type 8. Blocks 13. Forms 4. Layout 9. Cards & grids 14. Service-page furniture 5. Icons 10. Lists & steps 15. Footer, 404 game, utilities Colour rule of thumb: white sections and navy sections alternate. Anything inside `.band-quiet` or `.on-navy` is sitting on navy and needs light text — that inversion is handled here, not in the HTML, so a new section can never accidentally render navy-on-navy. ========================================================================== */ /* ---------------------------------------------------------- 1. Tokens ----- */ :root{ --navy:#0a0941; --navy-lift:#15134f; --navy-deep:#070630; --sand:#e7c9a5; --sand-lift:#f0dcc2; --sand-ink:#5a4526; /* body text on a sand block — 5.75:1 */ --sand-deep:#8a6d45; /* sand-family text on white — 4.82:1 */ /* The two brights. Both carry navy text at 10:1 or better; neither can carry white text at all, so a bright block is always navy-on-colour. They are block and accent colours only — never text on a white background. */ --cyan:#2fd3e1; --cyan-lift:#63e0ea; --cyan-ink:#0b3f45; /* body text on a cyan block — 6.36:1 */ --marigold:#ffb627; --marigold-lift:#ffc95c; --marigold-ink:#5a3d00; /* body text on a marigold block — 5.70:1 */ --white:#ffffff; --ink:#0a0941; --ink-muted:#5c5c7a; --on-navy:#ffffff; --on-navy-muted:#b9b9d4; --navy-02:#fafafc; --navy-05:#f4f4f8; --navy-10:#e8e8f0; --navy-20:#d2d2e0; --hair:1px solid var(--navy-20); --hair-light:1px solid rgba(255,255,255,.2); --rule-gap:2px; /* the gap that makes grids read as tiles */ /* Fraunces carries the headlines; Inter carries everything you actually read. Fraunces is a high-contrast display serif with an optical-size axis, so it sharpens as it gets bigger — which is what gives large headings their edge and stops small ones looking spindly. */ --font-display:"Fraunces",Georgia,"Times New Roman",serif; --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; /* Cyan is a block colour and cannot be text on white (1.82:1). This is the same hue pushed dark enough to read — 4.86:1 — for highlighted words in a headline on a light background. */ --cyan-deep:#0e7d8a; --header-h:80px; --t:160ms cubic-bezier(.2,.6,.3,1); } /* -------------------------------------------------- 2. Reset & base ------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} body{ margin:0; background:var(--white); color:var(--ink); font-family:var(--font-body); font-weight:400; font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block} a{color:inherit} hr{border:0; border-top:var(--hair); margin:0} .skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--sand); color:var(--navy); padding:12px 20px; font-weight:500; } .skip:focus{left:0} :focus-visible{outline:3px solid var(--navy); outline-offset:3px} /* On navy the ring has to be light; on a bright block it has to be dark. */ .band-quiet :focus-visible,.on-navy :focus-visible,.site-header :focus-visible{outline-color:var(--cyan)} .band-cyan :focus-visible,.band-marigold :focus-visible,.band-sand :focus-visible, .cta :focus-visible{outline-color:var(--navy)} /* ------------------------------------------------------------ 3. Type ----- */ h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.012em; line-height:1.08; color:inherit; } /* Fraunces has an optical-size axis. Feeding it the real size keeps the thin strokes from disappearing at small sizes and sharpens them at large ones. */ h1{font-size:clamp(2.5rem,5.6vw,4.1rem); font-variation-settings:"opsz" 120; line-height:1.04} h2{font-size:clamp(1.9rem,3.8vw,2.95rem); font-variation-settings:"opsz" 72; line-height:1.08} h3{font-size:1.24rem; font-variation-settings:"opsz" 24; line-height:1.3; letter-spacing:-.006em} h4{font-size:1.05rem; font-variation-settings:"opsz" 18} /* A phrase inside a headline picked out in the accent — ARO's most repeated trick after the coloured full stop. The colour has to change by surface: cyan is unreadable on white, cyan-deep is unreadable on navy. */ .hl{color:var(--cyan-deep)} .band-quiet .hl,.on-navy .hl,.hero .hl{color:var(--cyan)} /* On a bright block the heading is already navy, so navy would make the highlight invisible. Each block's ink token is a different hue from navy and still passes AA against its own background. */ .band-sand .hl{color:var(--sand-ink)} .band-cyan .hl{color:var(--cyan-ink)} .band-marigold .hl,.cta .hl{color:var(--marigold-ink)} p{margin:0} p + p{margin-top:16px} /* The sand mark that closes a headline. Square rather than round — it reads as a deliberate mark, not a stray full stop. Added by a span in the markup so it can be left off where it would look wrong. */ .dot{ display:inline-block; width:.32em; height:.32em; background:var(--cyan); margin-left:.14em; vertical-align:baseline; } .band-quiet .dot,.on-navy .dot{background:var(--cyan)} .eyebrow{ margin:0 0 22px; font-size:.76rem; font-weight:500; line-height:1.4; text-transform:uppercase; letter-spacing:.16em; color:var(--sand-deep); } .band-quiet .eyebrow,.on-navy .eyebrow,.cta .eyebrow{color:var(--sand)} .lede{ margin-top:22px; font-size:1.14rem; line-height:1.62; font-weight:400; color:var(--ink-muted); max-width:64ch; } .band-quiet .lede,.on-navy .lede,.cta .lede{color:var(--on-navy-muted)} .hero__note,.partners__note,.caveat{ margin-top:20px; font-size:.93rem; font-weight:400; color:var(--ink-muted); } .band-quiet .hero__note,.band-quiet .caveat, .on-navy .hero__note,.on-navy .caveat{color:var(--on-navy-muted)} .rich p + p{margin-top:16px} .rich a{color:var(--sand-deep); text-underline-offset:3px} .band-quiet .rich a,.on-navy .rich a{color:var(--sand)} /* ---------------------------------------------------------- 4. Layout ----- */ .wrap{width:min(1240px,calc(100% - 48px)); margin:0 auto} @media(max-width:640px){ .wrap{width:calc(100% - 32px)} } section{padding:110px 0} section.tight{padding:76px 0} @media(max-width:760px){ section{padding:72px 0} section.tight{padding:56px 0} } /* White and navy alternate. `.band-quiet` is the navy one. */ .band-quiet{background:var(--navy); color:var(--on-navy)} .band-navy{background:var(--navy-deep); color:var(--on-navy)} .on-navy{color:var(--on-navy)} .section-head{max-width:74ch; margin-bottom:58px} .section-head--center{margin-left:auto; margin-right:auto; text-align:center} .section-head--center .lede{margin-left:auto; margin-right:auto} .split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center} /* min-width:0 stops a long word or wide table blowing the column out */ .split__body,.split__media{min-width:0} .split--media-first .split__media{order:-1} @media(max-width:960px){ .split{grid-template-columns:1fr; gap:40px} .split--media-first .split__media{order:0} } .mt-0{margin-top:0} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .mt-32{margin-top:32px} .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} [id]{scroll-margin-top:calc(var(--header-h) + 16px)} /* ----------------------------------------------------------- 5. Icons ----- */ .icon{width:48px; height:48px; color:currentColor} .icon .ia{stroke:var(--sand-deep)} .icon .ifill{fill:var(--sand-deep); stroke:var(--sand-deep)} .band-quiet .icon .ia,.on-navy .icon .ia{stroke:var(--sand)} .band-quiet .icon .ifill,.on-navy .icon .ifill{fill:var(--sand); stroke:var(--sand)} /* No tile, no border, no background — the icon sits on the surface. */ .icon-tile{margin-bottom:28px; line-height:0} .icon-tile .icon{width:44px; height:44px} .icon-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; background:var(--sand); padding:48px} .icon-grid__cell{display:grid; place-items:center} .icon-grid .icon{width:44px; height:44px; color:var(--navy)} .icon-grid .ia{stroke:var(--navy); opacity:.55} .icon-grid .ifill{fill:var(--navy); stroke:var(--navy)} @media(max-width:560px){ .icon-grid{grid-template-columns:repeat(3,1fr); padding:32px; gap:20px} } .icon-panel{background:var(--sand); padding:56px; display:grid; place-items:center; text-align:center} .icon-panel__mark .icon{width:88px; height:88px; color:var(--navy)} .icon-panel__mark .ia{stroke:var(--navy); opacity:.55} .icon-panel__mark .ifill{fill:var(--navy); stroke:var(--navy)} .icon-panel__cap{margin-top:22px; font-size:.9rem; color:var(--sand-ink); font-weight:400} /* --------------------------------------------------------- 6. Buttons ----- */ .btn{ display:inline-flex; align-items:center; gap:14px; padding:17px 28px; border:2px solid transparent; border-radius:0; font-family:inherit; font-size:.97rem; font-weight:500; line-height:1; text-decoration:none; cursor:pointer; transition:background var(--t),color var(--t),border-color var(--t); } .btn::after{content:"→"; font-size:1.05em; line-height:1; transition:transform var(--t)} .btn:hover::after{transform:translateX(4px)} .btn--sm{padding:13px 20px; font-size:.9rem; gap:10px} .btn--block{display:flex; width:100%; justify-content:center} /* Sunshine is the action colour — the header CTA, the primary button, the number chips. Sand is now a surface, not an accent. */ .btn--accent{background:var(--cyan); color:var(--navy)} .btn--accent:hover{background:var(--cyan-lift)} .btn--primary{background:var(--navy); color:var(--white)} .btn--primary:hover{background:var(--navy-lift)} .band-quiet .btn--primary,.on-navy .btn--primary{background:var(--white); color:var(--navy)} .band-quiet .btn--primary:hover,.on-navy .btn--primary:hover{background:var(--sand)} .btn--secondary{border-color:var(--navy); color:var(--navy)} .btn--secondary:hover{background:var(--navy); color:var(--white)} /* On navy the outline has to invert, or the button vanishes. This is written defensively — every navy surface, not just the ones marked `.on-navy`. */ .band-quiet .btn--secondary,.on-navy .btn--secondary, .calc__out .btn--secondary,.card--navy .btn--secondary,.cta .btn--secondary{ border-color:rgba(255,255,255,.55); color:var(--white); background:transparent; } .band-quiet .btn--secondary:hover,.on-navy .btn--secondary:hover, .calc__out .btn--secondary:hover,.card--navy .btn--secondary:hover,.cta .btn--secondary:hover{ border-color:var(--sand); color:var(--sand); background:transparent; } .btn--ghost{border-color:transparent; color:var(--navy); padding-left:0; padding-right:0} .btn--ghost:hover{color:var(--sand-deep)} .band-quiet .btn--ghost,.on-navy .btn--ghost{color:var(--sand)} .hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px} /* ------------------------------------------------------ 7. Header/nav ----- */ .site-header{ background:var(--navy); color:var(--on-navy); position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(231,201,165,.16); transition:box-shadow var(--t); } .site-header.is-stuck{box-shadow:0 2px 22px rgba(10,9,65,.4)} .nav{display:flex; align-items:center; gap:30px; height:var(--header-h)} .logo{display:flex; align-items:center; margin-right:auto; text-decoration:none} .logo__img{height:38px; width:auto} .nav__links{display:flex; gap:30px; list-style:none; margin:0; padding:0; font-size:.95rem; font-weight:400} .nav__links a{text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; transition:color var(--t),border-color var(--t)} .nav__links a:hover{border-bottom-color:var(--sand); color:var(--sand)} .nav__links a[aria-current]{border-bottom-color:var(--sand)} .nav__cta{padding:14px 22px; font-size:.9rem} .nav__toggle{ display:none; background:none; border:1px solid rgba(255,255,255,.4); color:inherit; font-family:inherit; font-size:.9rem; padding:9px 15px; cursor:pointer; } @media(max-width:960px){ .nav{height:auto; flex-wrap:wrap; padding:16px 0} .nav__toggle{display:block; order:3} .nav__cta{order:2} .nav__links{order:4; flex-basis:100%; flex-direction:column; gap:0; display:none; border-top:var(--hair-light)} .nav__links.is-open{display:flex} .nav__links a{display:block; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1)} } /* ---------------------------------------------------------- 8. Blocks ----- */ .hero{background:var(--navy); color:var(--on-navy); padding:104px 0} .hero--short{padding:80px 0} .hero h1{max-width:16ch} /* Inner-page headlines are longer than the homepage's, so they need more room before wrapping or they stack into four or five short lines. */ .hero--short h1{max-width:22ch} .hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center} @media(max-width:960px){ .hero__grid{grid-template-columns:1fr; gap:44px} .hero{padding:72px 0} } /* ---- Angular masks ---- ARO cuts a chevron out of the edge of its hero image and repeats the shape behind headlines. clip-path does it with no image editing and no extra assets, and it degrades to a plain rectangle in anything that can't do it. Kept off narrow screens, where slicing 14% off an already small image costs more than the shape is worth. */ .clip-arrow{clip-path:polygon(0 50%, 14% 0, 100% 0, 100% 100%, 14% 100%)} .clip-notch{clip-path:polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%)} .clip-wedge{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0)} @media(max-width:760px){ .clip-arrow,.clip-notch{clip-path:none} } .media{background:var(--navy-lift); overflow:hidden} .media--filled{background:none} .media img{width:100%; height:auto; object-fit:cover} .media--wide img{aspect-ratio:16/7} .media--square img{aspect-ratio:1/1} .media--tall img{aspect-ratio:3/4} .media__caption{margin:0; padding:26px; font-size:.85rem; color:var(--on-navy-muted); text-align:center} .cta{background:var(--cyan); color:var(--navy); text-align:center; padding:104px 0} .cta .lede{margin-left:auto; margin-right:auto; color:var(--cyan-ink)} .cta .eyebrow{color:var(--cyan-ink)} .cta .dot{background:var(--navy)} .cta .hero__actions{justify-content:center} .cta .btn--accent{background:var(--navy); color:var(--white)} .cta .btn--accent:hover{background:var(--navy-lift)} .cta .btn--secondary{border-color:var(--navy); color:var(--navy); background:transparent} .cta .btn--secondary:hover{background:var(--navy); color:var(--white)} /* ---- Textures -------------------------------------------------------------- Line patterns drawn as inline SVG data URIs, so there is no image to fetch and they stay sharp at any density. They sit on top of the background colour, not instead of it. Opacity is baked in at 4–9% — enough to read as a surface, little enough that body copy over it is unaffected. `.tex-*` = light lines, for navy surfaces. `.tex-*--dark` = navy lines, for sand and bright surfaces. */ .tex-diamond{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 32 32 0l32 32-32 32z' fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E"); background-size:64px 64px; } .tex-chevron{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64'%3E%3Cpath d='M0 64 28 8l28 56M14 64l14-28 14 28' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E"); background-size:56px 64px; } .tex-grid{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 0v72M0 36h72' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1'/%3E%3Cpath d='M36 26a10 10 0 1 1 0 20 10 10 0 0 1 0-20z' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E"); background-size:72px 72px; } .tex-diamond--dark{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 32 32 0l32 32-32 32z' fill='none' stroke='%230a0941' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E"); background-size:64px 64px; } .tex-chevron--dark{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64'%3E%3Cpath d='M0 64 28 8l28 56M14 64l14-28 14 28' fill='none' stroke='%230a0941' stroke-opacity='.085' stroke-width='1'/%3E%3C/svg%3E"); background-size:56px 64px; } /* ---- Reasons grid ---------------------------------------------------------- ARO's "Why us for X" block: a hairline above each item, a small accent number, a heading and two lines. Three across, no boxes — the rules divide. */ .reasons{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:52px 44px} .reasons > li{border-top:1px solid var(--navy-20); padding-top:26px} .reasons b{ display:block; margin-bottom:16px; font-size:.82rem; font-weight:500; letter-spacing:.18em; color:var(--sand-deep); } .reasons h3{font-size:1.42rem; margin-bottom:14px; line-height:1.18} .reasons p{color:var(--ink-muted); font-size:1rem} .band-quiet .reasons > li,.on-navy .reasons > li{border-top-color:rgba(255,255,255,.3)} .band-quiet .reasons b,.on-navy .reasons b{color:var(--cyan)} .band-quiet .reasons p,.on-navy .reasons p{color:var(--on-navy-muted)} .band-sand .reasons > li,.band-cyan .reasons > li,.band-marigold .reasons > li{border-top-color:rgba(10,9,65,.3)} .band-sand .reasons b,.band-cyan .reasons b,.band-marigold .reasons b{color:var(--navy)} @media(max-width:980px){ .reasons{grid-template-columns:repeat(2,1fr); gap:40px 32px} } @media(max-width:620px){ .reasons{grid-template-columns:1fr; gap:32px} } /* ---- Feature row ---- Three columns under a heavy rule, for the short "what this actually is" summary near the top of a service page. */ .feature-row{display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:44px} .feature-row > div{border-top:2px solid var(--navy); padding-top:26px} .feature-row h3{margin-bottom:14px; font-size:1.3rem} .feature-row p{color:var(--ink-muted); font-size:1rem} .band-quiet .feature-row > div,.on-navy .feature-row > div{border-top-color:var(--cyan)} .band-quiet .feature-row p,.on-navy .feature-row p{color:var(--on-navy-muted)} @media(max-width:900px){ .feature-row{grid-template-columns:1fr; gap:30px} } /* ---- Previous / next ---- Sideways movement through the seven services, rather than back to the hub. */ .pagenav{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; border-top:var(--hair); padding-top:34px; } /* The underline is the affordance, so it needs 3:1 as a UI component. Cyan on white is 1.82:1 — navy on white, cyan on navy, as everywhere else. */ .pagenav a{ text-decoration:none; font-size:1.02rem; border-bottom:2px solid var(--navy); padding-bottom:7px; transition:color var(--t),border-color var(--t),background var(--t); } .pagenav a:hover{background:var(--cyan)} .pagenav__next{margin-left:auto; text-align:right} .band-quiet .pagenav,.on-navy .pagenav{border-top-color:rgba(255,255,255,.24)} .band-quiet .pagenav a,.on-navy .pagenav a{border-bottom-color:var(--cyan)} .band-quiet .pagenav a:hover,.on-navy .pagenav a:hover{background:var(--cyan); color:var(--navy)} /* ---- Bright blocks ------------------------------------------------------- Each coloured section sets three local variables and the shared rules below read them. Adding a fourth colour later means one new block of four lines, not a fresh copy of every descendant rule. */ .band-sand {--block-bg:var(--sand); --block-ink:var(--navy); --block-muted:var(--sand-ink)} .band-cyan {--block-bg:var(--cyan); --block-ink:var(--navy); --block-muted:var(--cyan-ink)} .band-marigold{--block-bg:var(--marigold); --block-ink:var(--navy); --block-muted:var(--marigold-ink)} .band-sand,.band-cyan,.band-marigold{background:var(--block-bg); color:var(--block-ink)} .band-sand .lede,.band-cyan .lede,.band-marigold .lede, .band-sand p,.band-cyan p,.band-marigold p, .band-sand .hero__note,.band-cyan .hero__note,.band-marigold .hero__note, .band-sand .caveat,.band-cyan .caveat,.band-marigold .caveat{color:var(--block-muted)} .band-sand .eyebrow,.band-cyan .eyebrow,.band-marigold .eyebrow{color:var(--block-muted)} .band-sand h1,.band-cyan h1,.band-marigold h1, .band-sand h2,.band-cyan h2,.band-marigold h2, .band-sand h3,.band-cyan h3,.band-marigold h3{color:var(--block-ink)} /* On a bright block the headline mark inverts to navy — a sand square on sunshine is invisible. */ .band-sand .dot,.band-cyan .dot,.band-marigold .dot{background:var(--navy)} .band-sand .btn--accent,.band-cyan .btn--accent,.band-marigold .btn--accent{background:var(--navy); color:var(--white)} .band-sand .btn--accent:hover,.band-cyan .btn--accent:hover,.band-marigold .btn--accent:hover{background:var(--navy-lift)} .band-sand .btn--secondary,.band-cyan .btn--secondary,.band-marigold .btn--secondary{border-color:var(--navy); color:var(--navy); background:transparent} .band-sand .btn--secondary:hover,.band-cyan .btn--secondary:hover,.band-marigold .btn--secondary:hover{background:var(--navy); color:var(--white)} .band-sand .icon,.band-cyan .icon,.band-marigold .icon{color:var(--navy)} .band-sand .ia,.band-cyan .ia,.band-marigold .ia{stroke:var(--navy); opacity:.55} .band-sand .ifill,.band-cyan .ifill,.band-marigold .ifill{fill:var(--navy); stroke:var(--navy)} /* Tiles on a bright block are white and invert to navy on hover, rather than filling with a colour that is already the background. */ .band-sand .cards,.band-cyan .cards,.band-marigold .cards, .band-sand .ticks,.band-cyan .ticks,.band-marigold .ticks, .band-sand .steps,.band-cyan .steps,.band-marigold .steps{background:rgba(10,9,65,.22)} .band-sand .card,.band-cyan .card,.band-marigold .card, .band-sand .ticks li,.band-cyan .ticks li,.band-marigold .ticks li, .band-sand .step,.band-cyan .step,.band-marigold .step{background:var(--white); color:var(--ink)} .band-sand .card p,.band-cyan .card p,.band-marigold .card p, .band-sand .step p,.band-cyan .step p,.band-marigold .step p{color:var(--ink-muted)} .band-sand .card:hover,.band-cyan .card:hover,.band-marigold .card:hover, .band-sand .step:hover,.band-cyan .step:hover,.band-marigold .step:hover{background:var(--navy); color:var(--on-navy)} .band-sand .card:hover p,.band-cyan .card:hover p,.band-marigold .card:hover p, .band-sand .step:hover p,.band-cyan .step:hover p,.band-marigold .step:hover p{color:var(--on-navy-muted)} .band-sand .card:hover .card__link,.band-cyan .card:hover .card__link,.band-marigold .card:hover .card__link{color:var(--cyan)} .band-sand .card:hover .icon,.band-cyan .card:hover .icon,.band-marigold .card:hover .icon{color:var(--white)} .band-sand .card:hover .ia,.band-cyan .card:hover .ia,.band-marigold .card:hover .ia{stroke:var(--cyan); opacity:1} .band-sand .faq,.band-cyan .faq,.band-marigold .faq, .band-sand .faq details,.band-cyan .faq details,.band-marigold .faq details{border-color:rgba(10,9,65,.28)} .band-sand .faq details p,.band-cyan .faq details p,.band-marigold .faq details p{color:var(--block-muted)} .callout{background:var(--sand); color:var(--navy); padding:34px 38px; margin:36px 0} .callout p{color:var(--sand-ink)} .callout p:first-child{color:var(--navy); font-weight:500} /* ------------------------------------------------- 9. Cards and grids ----- */ /* The 2px gap plus a coloured backdrop is what turns a row of cards into a block of tiles with hairlines between them. */ .cards{display:grid; gap:var(--rule-gap); background:var(--navy-10); grid-template-columns:repeat(3,1fr)} .cards--2{grid-template-columns:repeat(2,1fr)} .cards--4{grid-template-columns:repeat(4,1fr)} .band-quiet .cards,.on-navy .cards{background:rgba(255,255,255,.18)} @media(max-width:980px){ .cards,.cards--4{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .cards,.cards--2,.cards--4{grid-template-columns:1fr} } .card{ background:var(--white); color:var(--ink); padding:44px 38px 38px; display:flex; flex-direction:column; transition:background var(--t),color var(--t); } .card h3{margin-bottom:14px} .card p{color:var(--ink-muted); font-size:1rem} .card__icon{margin-bottom:26px} .card__tags{margin-top:18px; display:flex; flex-wrap:wrap; gap:6px} .card__link{ margin-top:auto; padding-top:28px; display:inline-flex; align-items:center; gap:12px; font-size:.95rem; font-weight:500; text-decoration:none; color:var(--navy); } .card__link::after{content:"→"; transition:transform var(--t)} /* Hover fills the whole tile sand. This is the one interaction that carries the design — a grid of quiet tiles, one of which lights up under the cursor. */ .card:hover{background:var(--cyan); color:var(--navy)} .card:hover p{color:var(--cyan-ink)} .card:hover .icon{color:var(--navy)} .card:hover .icon .ia{stroke:var(--navy); opacity:.6} .card:hover .icon .ifill{fill:var(--navy); stroke:var(--navy)} .card:hover .tag{border-color:rgba(10,9,65,.3); color:var(--cyan-ink)} .card:hover .badge{background:var(--navy); color:var(--cyan)} .card:hover .card__link{color:var(--navy)} .card:hover .card__link::after{transform:translateX(4px)} /* Cards on a navy block start navy and light up the same way. */ .band-quiet .card,.on-navy .cards .card{background:var(--navy); color:var(--on-navy)} .band-quiet .card p,.on-navy .cards .card p{color:var(--on-navy-muted)} .band-quiet .card__link,.on-navy .cards .card__link{color:var(--sand)} .band-quiet .card:hover,.on-navy .cards .card:hover{background:var(--cyan); color:var(--navy)} .band-quiet .card:hover p,.on-navy .cards .card:hover p{color:var(--cyan-ink)} .band-quiet .card:hover .card__link,.on-navy .cards .card:hover .card__link{color:var(--navy)} .band-quiet .card:hover .icon .ia{stroke:var(--navy); opacity:.6} .band-quiet .card:hover .icon .ifill{fill:var(--navy); stroke:var(--navy)} .card--navy{background:var(--navy); color:var(--on-navy)} .card--navy p{color:var(--on-navy-muted)} /* A card that is itself a link — the whole tile is the target. */ a.card{text-decoration:none} .tag{ display:inline-block; font-size:.76rem; font-weight:400; letter-spacing:.04em; border:var(--hair); padding:5px 11px; color:var(--ink-muted); transition:border-color var(--t),color var(--t); } .band-quiet .tag,.on-navy .tag{border-color:rgba(255,255,255,.3); color:var(--on-navy-muted)} .badge{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px; background:var(--navy); color:var(--sand); font-size:.95rem; font-weight:500; letter-spacing:.04em; transition:background var(--t),color var(--t); } .badge--quiet{background:var(--navy-10); color:var(--navy)} .band-quiet .badge--quiet,.on-navy .badge--quiet{background:rgba(255,255,255,.14); color:var(--sand)} .industry{background:var(--white); transition:background var(--t),color var(--t)} .industry__body{padding:44px 38px 38px} .industry h3{margin:0 0 14px} .industry p{color:var(--ink-muted); font-size:1rem} .industry:hover{background:var(--cyan); color:var(--navy)} .industry:hover p{color:var(--cyan-ink)} .industry:hover .icon{color:var(--navy)} .industry:hover .icon .ia{stroke:var(--navy); opacity:.6} .industry:hover .icon .ifill{fill:var(--navy); stroke:var(--navy)} .industry:hover .ticks li{background:transparent; color:var(--navy)} .industry:hover .ticks li::before{color:var(--navy)} .industry:hover .ticks{background:transparent} /* ------------------------------------------------ 10. Lists and steps ----- */ .ticks{list-style:none; margin:0; padding:0; display:grid; gap:var(--rule-gap); background:var(--navy-10)} .ticks--2{grid-template-columns:repeat(2,1fr)} .ticks--3{grid-template-columns:repeat(3,1fr)} .ticks li{ background:var(--white); padding:24px 26px; font-size:1rem; font-weight:400; display:flex; align-items:flex-start; gap:14px; } /* Navy on white, sand on navy. Sand on white measures 1.58:1 and disappears. */ .ticks li::before{content:"→"; color:var(--navy); font-weight:500; flex:none} .band-quiet .ticks,.on-navy .ticks{background:rgba(255,255,255,.18)} .band-quiet .ticks li,.on-navy .ticks li{background:var(--navy); color:var(--on-navy)} .band-quiet .ticks li::before,.on-navy .ticks li::before{color:var(--sand)} /* Inside a card the list is part of the tile, not its own grid. */ .industry .ticks,.solution__aside .ticks{background:transparent; gap:0; grid-template-columns:1fr; margin-top:18px} .industry .ticks li,.solution__aside .ticks li{background:transparent; padding:7px 0; font-size:.95rem; color:var(--ink-muted)} @media(max-width:860px){ .ticks--3{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .ticks--2,.ticks--3{grid-template-columns:1fr} } /* ---- Numbered list ---- Sunshine chip, white bar, chevron. Designed to sit on a navy block, which is where the white bars have something to push against. Two columns on desktop so a list of seven or ten stays above the fold. */ .numlist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px} .numlist a{ display:flex; align-items:stretch; text-decoration:none; background:var(--white); color:var(--navy); transition:background var(--t),color var(--t); } .numlist__n{ flex:none; display:flex; align-items:center; justify-content:center; min-width:58px; padding:16px 12px; background:var(--cyan); color:var(--navy); font-size:.95rem; font-weight:500; letter-spacing:.06em; transition:background var(--t),color var(--t); } .numlist__t{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 20px; font-size:1.02rem; font-weight:400; } .numlist__t::after{content:"→"; font-weight:500; transition:transform var(--t)} .numlist a:hover{background:var(--cyan)} .numlist a:hover .numlist__n{background:var(--navy); color:var(--cyan)} .numlist a:hover .numlist__t::after{transform:translateX(4px)} @media(max-width:820px){ .numlist{grid-template-columns:1fr; gap:8px} } .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--rule-gap); background:var(--navy-10)} .step{background:var(--white); padding:38px 32px; transition:background var(--t),color var(--t)} .step b{display:block; font-family:var(--font-display); font-size:1.2rem; font-weight:700; letter-spacing:-.012em; margin-bottom:12px} .step p{color:var(--ink-muted); font-size:.98rem} .step:hover{background:var(--cyan); color:var(--navy)} .step:hover p{color:var(--cyan-ink)} .band-quiet .steps,.on-navy .steps{background:rgba(255,255,255,.18)} .band-quiet .step,.on-navy .step{background:var(--navy); color:var(--on-navy)} .band-quiet .step p,.on-navy .step p{color:var(--on-navy-muted)} .band-quiet .step:hover,.on-navy .step:hover{background:var(--cyan); color:var(--navy)} .band-quiet .step:hover p,.on-navy .step:hover p{color:var(--cyan-ink)} @media(max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .steps{grid-template-columns:1fr} } .partners{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--rule-gap); background:var(--navy-10)} .partner{background:var(--white); min-height:150px; padding:30px; display:flex; align-items:center; justify-content:center} .partner__img{width:auto; height:auto; object-fit:contain} .partner__img--ee{height:56px} .partner__img--o2{height:50px} .partner__img--vodafone{height:50px} .partner__slot{font-size:.82rem; color:var(--ink-muted); border:1px dashed var(--navy-20); padding:16px 26px} .band-quiet .partners,.on-navy .partners{background:rgba(255,255,255,.18)} @media(max-width:620px){ .partners{grid-template-columns:1fr} .partner{min-height:112px} .partner__img--ee{height:46px} .partner__img--o2,.partner__img--vodafone{height:41px} } .stats{background:var(--navy-deep); color:var(--on-navy)} .stats__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--rule-gap); padding:0} .stat{padding:44px 26px} .stat b{display:block; font-family:var(--font-display); font-weight:700; font-size:2.4rem; line-height:1.05; letter-spacing:-.02em} .stat span{font-size:.9rem; color:var(--on-navy-muted); font-weight:400} @media(max-width:760px){ .stats__grid{grid-template-columns:repeat(2,1fr)} } /* The class sits on the