/* ============================================================ Novatrix Digital 1. tokens 7. selected work 2. base 8. who it's for + process 3. buttons 9. pricing 4. header 10. testimonials 5. hero 11. contact + form 6. sections 12. faq, cta, footer, responsive ============================================================ */ /* ── 1. tokens ───────────────────────────────────────────── */ :root{ color-scheme:light; /* the design is light-only — don't let the OS invert controls */ accent-color:#e2952b; /* surface + text The two greys are set at real contrast ratios on --paper, not by eye: --slate ≈ 6.6:1 and --slate-lt ≈ 4.8:1, so even the smallest caption clears WCAG AA. Going lighter than this is what made the old small labels wash out on bright screens. */ --ink:#0e1a2b; --ink-2:#1c2b40; --ink-hi:#1a2c45; /* one step up from ink — pressed/hover fills */ --slate:#4c5c70; /* Was #65717f, which measured 4.33:1 on --paper-2 — under the 4.5:1 WCAG AA floor for normal text, so the "Delivered" labels in the work section were failing. It passed on --paper (4.77:1); the darker panel is what tipped it. Darkened one step to clear the floor on every surface it lands on: 4.73:1 on --paper-2, 5.20:1 on --paper, 5.43:1 on white. */ --slate-lt:#5f6b79; --paper:#fbfaf7; --paper-2:#f2efe9; --foot:#0a1522; --line:#e3ded4; --line-2:#cfc8bb; --white:#fff; /* accents */ --amber:#e2952b; --amber-hi:#f2ab48; --amber-lt:#f7dfb4; --amber-dp:#a3691a; /* dark enough to read as a mark on --amber-lt */ --blue:#1b4b7f; /* states */ --green:#1f8a4c; --green-hi:#1a7541; --danger:#c0432f; --danger-bg:#fdf5f3; --success:#1c6b46; --shadow-sm:0 1px 2px rgba(14,26,43,.06), 0 2px 8px rgba(14,26,43,.04); --shadow-md:0 2px 4px rgba(14,26,43,.05), 0 12px 28px -12px rgba(14,26,43,.16); --shadow-lg:0 4px 8px rgba(14,26,43,.06), 0 28px 56px -20px rgba(14,26,43,.22); /* type ──────────────────────────────────────────────────── Two families, each doing one job: Fraunces — an editorial serif, on the display headings, the wordmark, the prices and the quotes. This is where the "premium" reads from; it is never used below ~1rem. Inter — everything you actually read or click: body copy, nav, buttons, labels, form fields, card titles. Both are loaded from Google Fonts in each page's . The names after them are the fallbacks that show while the files fetch, or if the visitor is offline — so nothing ever renders unstyled. To try a different display face, change --display in one place: "Playfair Display" (sharper, more formal) and "Cormorant Garamond" (lighter, more classical) both drop in without touching anything else — just swap the family name in the link too. */ --display:"Fraunces",Georgia,"Iowan Old Style","Times New Roman",serif; --serif:"Fraunces",Georgia,"Iowan Old Style","Times New Roman",serif; --sans:"Inter","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont, "Helvetica Neue",Arial,sans-serif; --mono:"Cascadia Mono",ui-monospace,"SFMono-Regular",Consolas,monospace; /* The page's content column. It follows the screen instead of sitting at a fixed 1180px, which on a wider monitor left a band of empty paper down each side while the layout stayed the same size. 92vw is the lower of the two on any screen narrower than about 1565px, so the column simply grows with the window. Past that the 1440px cap takes over, and it is a readability limit rather than a stylistic one: a line of text much beyond that is measurably harder to read, because the eye loses its place travelling back to the start of the next line. So a very wide monitor still shows margins — deliberately. */ --wrap:min(92vw,1440px); --gut:clamp(20px,5vw,64px); --r-sm:10px; --r:14px; --r-lg:22px; --r-pill:100px; --ease:cubic-bezier(.22,.61,.36,1); --focus:var(--amber); --focus-w:2.5px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px} /* Edge and Chrome on Windows let the whole page rubber-band away from the cursor when you press and drag past the top or the side — the page slides, then springs back. This turns that off: the page scrolls, but it never leaves its own edges. */ html{overscroll-behavior:none} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; font-family:var(--sans); /* never below 16px, on any screen — that is the floor where body copy stops being a squint on a phone (and the size iOS stops zooming at) */ font-size:clamp(16px,.36vw + 14.9px,17px); line-height:1.65; color:var(--ink-2); background:var(--paper); font-optical-sizing:auto; font-synthesis:none; /* use the real italic/bold cuts, never a faked slant */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; overflow-x:clip; /* clip, not hidden: hidden still leaves the page pannable sideways by drag even with no scrollbar. hidden stays above it as the fallback for older browsers. */ overscroll-behavior:none; overflow-wrap:break-word; /* a long email or URL can't blow out a 320px screen */ } /* set while the mobile menu is open, so the page behind it can't scroll */ body.nav-open{overflow:hidden} /* ── 2. base ─────────────────────────────────────────────── */ h1,h2,h3,h4{ margin:0;color:var(--ink); font-weight:600;line-height:1.16;letter-spacing:-.018em; text-wrap:balance; } /* Only the two display sizes take the serif. h3 and h4 are card titles and small labels — at those sizes a serif goes muddy, so they stay in the sans and keep their edge. That split is the whole type system. */ h1,h2{font-family:var(--display);font-optical-sizing:auto} h1{font-size:clamp(2.1rem,4.5vw,3.5rem);line-height:1.07;letter-spacing:-.022em} h2{font-size:clamp(1.62rem,2.85vw,2.4rem);line-height:1.13} h3{font-size:1.16rem;font-weight:620;line-height:1.34;letter-spacing:-.014em} /* The small uppercase label. It used to be carried by the

tag, but every place the site used one sat directly under an

, which skips a level and reads as a gap in the outline to a screen reader. The tags are

now and the look moved onto this class, so the heading level and the type size are no longer forced to agree. h4 keeps the rule because a synced article can still produce one from a deep Medium heading. */ h4,.h-label{font-size:.8rem;font-weight:640;letter-spacing:.1em;text-transform:uppercase} p{margin:0} /* the italic phrase inside a headline: same family, real italic, one notch lighter — it reads as a change of voice rather than a change of font */ h1 em,h2 em{ font-family:var(--display);font-style:italic;font-weight:450;letter-spacing:-.004em; } a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0;list-style:none} img,svg{max-width:100%} /* Stop the browser picking an image up and floating a copy under the cursor when someone click-drags. Real content stays selectable — this only kills image drag. */ img,svg{-webkit-user-drag:none} button{ font:inherit;color:inherit;border:0;background:none;cursor:pointer; text-align:inherit;-webkit-tap-highlight-color:transparent; } button,a{touch-action:manipulation} /* no 300ms delay waiting for a double-tap */ input,select,textarea{font:inherit;color:inherit} /* One focus ring for the whole site. It must NOT set border-radius — the outline already follows each element's own shape, and forcing a radius here squares off the pill buttons and round icon buttons. */ :focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:3px} /* amber ring on an amber button is invisible — go white on those */ .plan-hero .btn:focus-visible,.btn-light:focus-visible{outline-color:var(--white)} /* Anyone who asks for less motion gets less motion, everywhere. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .sec{padding-block:clamp(58px,7.5vw,108px)} .skip{ position:absolute;left:14px;top:-60px;z-index:200; padding:10px 18px;border-radius:0 0 10px 10px; background:var(--ink);color:var(--white);font-size:.9rem; transition:top .2s var(--ease); } .skip:focus{top:0} /* eyebrow / labels */ .eyebrow{ display:flex;align-items:center;gap:10px; margin-bottom:16px; font-size:.76rem;font-weight:640;letter-spacing:.12em;text-transform:uppercase; color:var(--slate); } .eyebrow .dash{width:26px;height:2px;background:var(--amber);flex:none} .eyebrow.light{color:rgba(255,255,255,.74)} /* for a long, list-style eyebrow: tighter tracking and a real line-height so it reads as a strapline when it wraps, instead of a stack of shouting */ .eyebrow.long{letter-spacing:.085em;line-height:1.75;align-items:start} .eyebrow.long .dash{margin-top:.72em} .sec-head{max-width:660px;margin-bottom:clamp(34px,4vw,58px)} /* Grid, not flex: as a flex row these two would wrap the moment the heading and the note together exceeded the 1052px content width, dropping the note onto its own line with the flex gap left hanging above it. */ .sec-head.split{ display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,4vw,72px);align-items:end;max-width:none; } .sec-head.split .sec-note{margin-top:0} .sec-head.split>div{max-width:640px} .sec-note{margin-top:18px;color:var(--slate);max-width:44ch;font-size:1.03em;line-height:1.62} .sec-note.wide{max-width:56ch} .sec-note a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px} /* ── 3. buttons ────────────────────────────────────────────── Every variant is just three custom properties: resting fill, hover fill, text. Nothing below re-declares background or colour directly, so states stay in sync automatically. */ .btn{ --bg:var(--ink); --bg-hi:var(--ink-hi); --fg:var(--white); --ring:transparent; display:inline-flex;align-items:center;gap:9px; padding:14px 24px;border-radius:var(--r-pill); background:var(--bg);color:var(--fg); font-size:.95rem;font-weight:600;letter-spacing:-.008em;white-space:nowrap; box-shadow:var(--shadow-sm); transition:transform .22s var(--ease),box-shadow .22s var(--ease), background-color .18s,color .18s; } .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease)} .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--bg-hi)} .btn:hover svg{transform:translateX(3px)} .btn:active{transform:translateY(0) scale(.985)} .btn-sm{padding:10px 19px;font-size:.88rem} .btn-ghost{ --bg:transparent;--fg:var(--ink);--bg-hi:var(--paper-2);--ring:var(--line-2); box-shadow:inset 0 0 0 1.5px var(--ring); } .btn-ghost:hover{--ring:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ring)} .btn-light{--bg:var(--white);--fg:var(--ink);--bg-hi:var(--amber-lt)} .btn-wa{--bg:var(--green);--fg:var(--white);--bg-hi:var(--green-hi);margin-top:26px} /* the two calls to action under the contact details */ .contact-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .contact-actions .btn-wa{margin-top:26px} .contact-actions .btn-ghost{margin-top:26px} .btn-wa:hover svg{transform:none} /* leading icon — nothing to point at */ .btn-full{width:100%;justify-content:center} /* the submit button really does go disabled while a message is in flight */ .btn:disabled,.btn[aria-disabled="true"]{ background:var(--bg);opacity:.5;cursor:not-allowed; transform:none;box-shadow:var(--shadow-sm); } .btn:disabled svg{transform:none} /* on touch there is no pointer to leave, so a lift on tap just sticks */ @media (hover:none){ .btn:hover,.why-card:hover,.svc:hover,.case:hover,.work-list li:hover, .social a:hover,.to-top:hover,.arrows button:hover{transform:none} } /* reveal on scroll */ .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}} /* no JavaScript: everything that JS would normally open stays open */ .no-js .acc-panel{height:auto} .no-js .chart .line{stroke-dashoffset:0} .no-js .chart .area,.no-js .chart .pts circle{opacity:1} .no-js .slides{display:block} .no-js .slide+.slide{margin-top:38px;padding-top:34px;border-top:1px solid var(--line)} .no-js .slider-ui,.no-js .burger{display:none} /* ── 3. header ───────────────────────────────────────────── */ .site-head{ position:sticky;top:0;z-index:100; background:rgba(251,250,247,.82); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:border-color .3s,box-shadow .3s,background .3s; } .site-head.stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(14,26,43,.5)} .head-inner{display:flex;align-items:center;justify-content:space-between;gap:24px; min-height:70px} .brand{display:inline-flex;align-items:center;gap:11px;flex:none} /* The NX artwork is drawn to glow on a dark field: on the cream header its silver half all but vanishes. Keeping it on the same dark tile the old lettered mark used solves that and lets one lockup serve both the header and the footer — which is the point, since two different marks on one page read as two different companies. The wordmark beside it stays live text in the serif: it stays sharp at any zoom, is selectable and searchable, and costs nothing to load. */ .brand-mark{ display:grid;place-items:center;width:37px;height:37px;flex:none; border-radius:9px;background:var(--ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } /* the artwork carries its own margin, so it is inset from the tile edge */ .brand-mark img{display:block;width:29px;height:auto} /* block, not a flex column: as a flex column the name and the strapline became two separate flex items and sat side by side. Inline text plus a block stacks them, which is the shape the lockup needs. */ .brand-text{ display:block;line-height:1.05; font-family:var(--display); font-size:1.26rem;font-weight:600;letter-spacing:-.012em;color:var(--ink); /* "Novatrix Digital" is two words and must never break across them */ white-space:nowrap; } /* The strapline stays at every width. It used to be hidden below 480px, which left the phone showing a different logo from the desktop — a bare name against the full lockup. It has to hold one line at "Shopify & Digital Marketing", which is ten characters longer than the old wording, so the size and the tracking both ease off on the way down: at the 320px floor the whole lockup measures 224px and still clears the burger. */ .brand-text small{ display:block;font-family:var(--sans); font-size:clamp(.55rem,1.9vw,.6rem); font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--slate-lt);margin-top:5px; /* one line, always: broken over two it stops reading as part of the mark */ white-space:nowrap; } .nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,34px)} .nav>ul{display:flex;align-items:center;gap:clamp(10px,1.9vw,28px)} /* scoped to the list, so the CTA button keeps its own button styling instead of needing an !important to win the colour back */ .nav>ul a{ position:relative;padding:6px 2px; font-size:.94rem;font-weight:540;letter-spacing:-.006em;color:var(--ink-2); transition:color .18s; } .nav>ul a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px; background:var(--amber);transition:right .28s var(--ease); } .nav>ul a:hover{color:var(--ink)} .nav>ul a:hover::after,.nav>ul a.is-here::after{right:0} .burger{display:none;width:42px;height:42px;border-radius:10px;padding:11px 9px} .burger span{display:block;height:2px;background:var(--ink);border-radius:2px; transition:transform .28s var(--ease),opacity .2s} .burger span+span{margin-top:5px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ── 4. hero ─────────────────────────────────────────────── */ .hero{position:relative;padding-top:clamp(44px,6vw,80px);overflow:hidden} .hero::before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(680px 420px at 88% -6%,rgba(226,149,43,.13),transparent 68%), radial-gradient(560px 380px at 4% 0%,rgba(27,75,127,.09),transparent 70%); } .hero-grid{ display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); gap:clamp(32px,5vw,72px);align-items:center; padding-bottom:clamp(48px,6vw,84px); } .hero h1{margin-bottom:22px} .lede{ font-size:1.13em;line-height:1.55;letter-spacing:-.006em; color:var(--slate);max-width:50ch; } /* the detail paragraph under a lede — steps down in size so the opening sentence stays the thing the eye lands on */ .hero-sub{margin-top:16px;font-size:.98em;line-height:1.62;color:var(--slate);max-width:58ch} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .hero-proof{ display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,46px); margin-top:clamp(38px,4.5vw,54px);padding-top:26px; border-top:1px solid var(--line); } .hero-proof li{display:flex;flex-direction:column;gap:2px} .hero-proof strong{ font-family:var(--display); font-size:1.6rem;font-weight:600;letter-spacing:-.018em;color:var(--ink); } .hero-proof span{font-size:.86rem;color:var(--slate);max-width:15ch;line-height:1.42} /* hero panel */ .hero-panel{position:relative} .panel-card{ background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-lg);overflow:hidden; } .panel-top{ display:flex;align-items:center;justify-content:space-between; padding:13px 18px;border-bottom:1px solid var(--line);background:var(--paper-2); } .dot-row{display:flex;gap:6px} .dot-row i{width:9px;height:9px;border-radius:50%;background:var(--line-2)} .dot-row i:first-child{background:var(--amber)} .panel-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;color:var(--slate-lt)} /* the extra bottom padding is clearance for the badge that overlaps the card's bottom edge — without it the badge sits on top of the foot text */ .panel-body{padding:22px 22px 42px} .panel-foot{ margin-top:22px;padding-top:16px;border-top:1px dashed var(--line); } .panel-foot strong{display:block;font-size:.88rem;font-weight:600;color:var(--ink)} .panel-foot span{font-size:.8rem;color:var(--slate)} /* Sits inside the card's own width on purpose. Hanging it off the left edge put it under the page gutter, where body{overflow-x:hidden} clipped it. */ .panel-badge{ position:absolute;right:20px;bottom:-21px;left:auto; display:flex;align-items:center;gap:9px; padding:11px 17px;border-radius:var(--r-pill); background:var(--ink);color:#fff;box-shadow:var(--shadow-md); font-size:.74rem;line-height:1.34;font-weight:580;letter-spacing:.005em; } .panel-badge svg{width:22px;height:22px;flex:none;fill:var(--amber);stroke:none} /* client strip */ .strip{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--paper-2); padding-block:20px; } .strip-label{ text-align:center;margin-bottom:12px; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-lt); } /* The strip scrolls on its own, so dragging across it only ever produced a smeared selection that followed the cursor. Nothing in here is worth copying. */ .marquee{ overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); user-select:none;-webkit-user-select:none; } .marquee-track{ display:flex;align-items:center;gap:26px;width:max-content; animation:slide 42s linear infinite; } .marquee:hover .marquee-track{animation-play-state:paused} /* one tool = optional logo + its name. If the logo file isn't there yet, js/main.js drops the and the name stands on its own. */ .tool{display:flex;align-items:center;gap:10px;white-space:nowrap} .tool-logo{ display:none; /* main.js reveals it only once the file loads */ width:24px;height:24px;flex:none;object-fit:contain; } .marquee-track span{ font-size:1.02rem;font-weight:580;letter-spacing:-.015em; color:var(--slate);white-space:nowrap; } /* the gap does the separating now that each item is a logo + label pair */ .marquee-track{gap:34px} @keyframes slide{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto} } /* ── 5. why us ───────────────────────────────────────────── */ .why-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); } .why-card{ padding:30px 26px 28px;border-radius:var(--r); background:var(--white);border:1px solid var(--line); transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .2s; } .why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2)} .why-num{ display:block;margin-bottom:20px; font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;color:var(--amber); } .why-card h3{margin-bottom:10px} .why-card p{color:var(--slate);font-size:.97em;line-height:1.62} /* the answer half of a problem card: ruled off from the problem above it and set a shade darker, so the eye can tell "here's what's wrong" from "here's what we do about it" without a label spelling it out */ .why-fix{ margin-top:18px;padding-top:16px; border-top:1px dashed var(--line-2); color:var(--ink-2)!important; } .why-fix strong{font-weight:620;color:var(--ink)} /* four-across variant, used by the SEO/AEO/GEO/LSEO section */ .why-grid.grid-4{grid-template-columns:repeat(4,1fr)} /* two-across, for the same four channels once each one carries a list */ .why-grid.grid-2{grid-template-columns:repeat(2,1fr)} .grid-4 .why-num,.grid-2 .why-num{ font-family:var(--sans);font-size:.72rem;font-weight:660;letter-spacing:.12em; margin-bottom:16px; } /* five cards over two columns leaves the last one alone — let it run wide rather than sit in a half-empty row */ .why-grid.grid-2 .why-card:nth-child(5):last-child{grid-column:1/-1} /* the badge earns a pill when it sits above a whole block of detail */ .grid-2 .why-num{ display:inline-block;padding:5px 11px;border-radius:var(--r-pill); background:var(--amber-lt);color:var(--amber-dp);text-transform:uppercase; } /* the centred statement that closes a section — used under the four search channels and under the selected work */ .sec-close{ margin-top:clamp(30px,4vw,48px); padding-top:clamp(28px,3.4vw,40px); border-top:1px solid var(--line); text-align:center; } /* The closing note's heading. On most pages a section h2 sits above it, so it is an h3 there. On /reviews nothing does, and an h3 straight after the h1 skips a level — so that one is an h2. Both are styled identically here, including the sans and the h3 weight that an h2 would otherwise override with the display serif: the tag is about the outline, this is about size. */ .sec-close h2,.sec-close h3{ font-size:clamp(1.22rem,2.1vw,1.6rem);margin-bottom:12px; font-family:var(--sans);font-weight:620;line-height:1.34;letter-spacing:-.014em; } .sec-close p{max-width:66ch;margin-inline:auto;color:var(--slate)} .sec-close p + p{margin-top:14px;font-size:.92rem;color:var(--slate-lt)} .sec-close a{ color:var(--blue);text-decoration:underline; text-decoration-thickness:1.5px;text-underline-offset:3px; } .ava{ display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none; background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); font-size:.8rem;font-weight:640;letter-spacing:.04em;color:#fff; } /* ── services ────────────────────────────────────────────── */ .services{background:var(--paper-2);border-block:1px solid var(--line)} .svc-grid{ display:grid;grid-template-columns:repeat(6,1fr); gap:clamp(16px,1.8vw,24px); } .svc{ grid-column:span 2; padding:26px 24px;border-radius:var(--r); background:var(--white);border:1px solid var(--line); transition:transform .28s var(--ease),box-shadow .28s var(--ease); } .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .svc-lg{grid-column:span 3;display:grid;grid-template-columns:150px 1fr; gap:26px;align-items:start;padding:26px} .svc h3{margin-bottom:9px} .svc p{color:var(--slate);font-size:.96em;line-height:1.6} /* the "supporting" tag on the two secondary service cards */ .svc h3 small{ display:inline-block;margin-left:8px;vertical-align:middle; padding:3px 8px;border-radius:100px; background:var(--paper-2);border:1px solid var(--line); font-size:.62rem;font-weight:620;letter-spacing:.1em;text-transform:uppercase; color:var(--slate-lt); } /* ── service rows ──────────────────────────────────────────── The three core services run full width so a ten-item "Includes" list can sit in two columns; the two supporting ones sit half width beside each other, where a single column still fits. */ .svc-full{grid-column:1/-1} .svc-half{grid-column:span 3} .svc-tag{ margin-bottom:12px; font-size:1.03rem;font-weight:600;letter-spacing:-.012em; color:var(--ink-2)!important; } .incl-label{ margin-top:20px;padding-top:16px; border-top:1px dashed var(--line); font-size:.7rem;font-weight:640;letter-spacing:.12em;text-transform:uppercase; color:var(--slate-lt)!important; } /* when the label is present it owns the rule, so the list drops its own */ .incl-label + .deliver{margin-top:12px;padding-top:0;border-top:0} .deliver.cols{display:block;columns:2;column-gap:clamp(22px,3.4vw,48px)} .deliver.cols li{break-inside:avoid;margin-bottom:9px} /* link out from a summary service card to that service's own page */ .svc-more{margin-top:22px} /* real product logos sitting on the tinted art panel, each on its own white chip so a coloured mark never fights the gradient behind it */ .art-logos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center} .art-logos li{ display:grid;place-items:center;width:40px;height:40px;border-radius:11px; background:var(--white);box-shadow:var(--shadow-sm); } .art-logos img{width:21px;height:21px;object-fit:contain} .svc-ico img{width:22px;height:22px;object-fit:contain} .svc-art{border-radius:11px;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)} .svc-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)} .svc:hover .svc-art img{transform:scale(1.035)} .art-a{background:linear-gradient(140deg,#eef3f9,#dde8f3)} .art-b{background:linear-gradient(140deg,#fdf2e2,#f8e4c6)} .art-c{background:linear-gradient(140deg,#eaf3ee,#d7e8de)} .svc-art svg{width:100%;height:100%;fill:none;stroke:var(--blue);stroke-width:2; stroke-linecap:round;stroke-linejoin:round;opacity:.72} .art-b svg{stroke:#b9752a} .art-c svg{stroke:#2f6d52} .svc-ico{ display:grid;place-items:center;width:44px;height:44px;border-radius:11px; margin-bottom:18px;background:var(--paper-2); } .svc-ico svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .svc:hover .svc-ico{background:var(--amber-lt)} .deliver{display:grid;gap:8px;margin-top:18px;padding-top:16px; border-top:1px dashed var(--line)} .deliver li{ position:relative;padding-left:19px; font-size:.87rem;line-height:1.5;color:var(--slate); } .deliver li::before{ content:"";position:absolute;left:1px;top:.5em; width:9px;height:5px;border-left:1.8px solid var(--amber); border-bottom:1.8px solid var(--amber);transform:rotate(-45deg); } /* ── metrics band ────────────────────────────────────────── */ .band{background:var(--ink);color:#fff;position:relative;overflow:hidden} .band::before{ content:"";position:absolute;inset:0; background:radial-gradient(700px 300px at 78% 120%,rgba(226,149,43,.16),transparent 70%); } .band .wrap{position:relative} .band h2{color:#fff;max-width:22ch} .band-head{margin-bottom:clamp(34px,4vw,54px)} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,34px)} .stats li{padding-top:22px;border-top:1px solid rgba(255,255,255,.16)} /* Figures stay in the sans on purpose: these count up in JS, and the sans is the family with dependable tabular figures — every digit the same width, so nothing jitters while the number climbs. */ .stat{ display:block;margin-bottom:9px; font-size:clamp(2.35rem,4.4vw,3.4rem);font-weight:640;line-height:1; letter-spacing:-.03em;color:var(--amber); font-variant-numeric:tabular-nums; } .stat-title{ display:block;margin-bottom:7px; font-size:1.02rem;font-weight:620;letter-spacing:-.015em;color:#fff; } /* 32ch rather than 24: the column width is the real constraint now that each figure carries a sentence under it, not three words */ .stats p{font-size:.9rem;color:rgba(255,255,255,.72);max-width:32ch;line-height:1.5} .band-head .sec-note{color:rgba(255,255,255,.72);max-width:62ch} /* ── toolkit ─────────────────────────────────────────────── */ .stack{background:var(--paper-2);border-block:1px solid var(--line)} .stack-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,30px)} /* six columns read better as two rows of three than as one cramped row */ .stack-6{grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px) clamp(24px,3.4vw,48px)} /* four across — grouped rule lists and integration groups */ .stack-4{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,34px) clamp(22px,3vw,40px)} .stack-col h3{ padding-bottom:11px;margin-bottom:14px;border-bottom:1px solid var(--line-2); color:var(--slate); } .stack-col li{ display:flex;align-items:center;gap:11px; padding:8px 0;font-size:.94rem;font-weight:540;color:var(--ink-2); border-bottom:1px dotted var(--line); } .stack-col li:last-child{border-bottom:0} /* Fixed 18px slot for every row — a product logo or a line icon, either way the names stay on one vertical line, including while a logo file is still loading. */ .tool-ico{flex:none;display:grid;place-items:center;width:18px;height:18px} .tool-ico img{ width:100%;height:100%;object-fit:contain; filter:none;opacity:1; /* full colour here — the marquee is the greyscale one */ } .tool-ico svg{ width:100%;height:100%;fill:none;stroke:var(--slate-lt); stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } /* ── growth chart ────────────────────────────────────────── */ /* Both remaining users of this grid (capabilities on the home page, "who runs it" on about) put a .facts table in the right column. Centred, the heading floated halfway down while the table started at the top, so the two columns never shared a top edge — they line up from the first line now. */ .chart-grid{ display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,5vw,68px);align-items:start; } .delta{margin-top:30px;display:grid;gap:0} .delta li{ display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline; justify-content:space-between; padding:16px 0;border-bottom:1px solid var(--line); } .delta li:first-child{border-top:1px solid var(--line)} .delta-label{font-size:.96rem;font-weight:550;color:var(--ink)} .delta-val{display:inline-flex;align-items:center;gap:11px} .delta-val em{font-style:normal;color:var(--slate-lt);font-size:.95rem} .delta-val strong{ font-size:1.3rem;font-weight:640;letter-spacing:-.022em;color:var(--ink); font-variant-numeric:tabular-nums; } .delta-val svg{width:17px;height:17px;fill:none;stroke:var(--amber);stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .chart-note{margin-top:20px;font-size:.89rem;line-height:1.6;color:var(--slate-lt);max-width:46ch} .chart{ margin:0;padding:clamp(20px,2.6vw,30px); background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-md); } .chart figcaption{ margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line); font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-lt); } .chart svg{width:100%;height:auto;display:block;overflow:visible} .chart .grid line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5} .chart .ylab text,.chart .xlab text{ font-family:var(--mono);font-size:10px;fill:var(--slate-lt); } .chart .ylab text{text-anchor:end} .chart .xlab text{text-anchor:middle} .chart .line{ fill:none;stroke:var(--amber);stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:500;stroke-dashoffset:500; /* ≈ the polyline's own length */ } .chart.drawn .line{transition:stroke-dashoffset 1.6s var(--ease);stroke-dashoffset:0} .chart .area{opacity:0;transition:opacity .9s .5s ease} .chart.drawn .area{opacity:1} .chart .pts circle{fill:var(--white);stroke:var(--amber);stroke-width:2.4; opacity:0;transition:opacity .35s ease} .chart.drawn .pts circle{opacity:1} .chart.drawn .pts circle:nth-child(2){transition-delay:.35s} .chart.drawn .pts circle:nth-child(3){transition-delay:.6s} .chart.drawn .pts circle:nth-child(4){transition-delay:.85s} .chart.drawn .pts circle:nth-child(5){transition-delay:1.1s} .chart.drawn .pts circle:nth-child(6){transition-delay:1.35s} .chart .pt-last{fill:var(--amber);stroke:var(--white);stroke-width:3} @media (prefers-reduced-motion:reduce){ .chart .line{stroke-dashoffset:0} .chart .area,.chart .pts circle{opacity:1} } /* ── hero audit checklist ────────────────────────────────── */ /* "We audit the" — the lead-in that turns the ticks below into a sentence */ .audit-lead{ margin-bottom:14px; font-size:.72rem;font-weight:640;letter-spacing:.12em;text-transform:uppercase; color:var(--slate-lt); } .audit-list{display:grid;gap:13px} .audit-list li{ display:flex;align-items:flex-start;gap:11px; font-size:.93rem;line-height:1.5;color:var(--ink-2); } .tick{ position:relative;width:19px;height:19px;flex:none;margin-top:1px; border-radius:50%;background:var(--amber-lt); } .tick::after{ content:"";position:absolute;left:6px;top:5.5px; width:7px;height:4px; border-left:2px solid var(--amber-dp);border-bottom:2px solid var(--amber-dp); transform:rotate(-45deg); } /* ── why clients choose us ─────────────────────────────────── Six one-line reasons, two across. Sits on plain paper between the tinted services band and the search section, so it reads as a pause rather than another card grid. */ .choose-list{ display:grid;grid-template-columns:1fr 1fr; gap:0 clamp(28px,4vw,64px); } .choose-list li{ display:flex;align-items:flex-start;gap:13px; padding:17px 0;border-bottom:1px solid var(--line); font-size:1.01rem;line-height:1.5;color:var(--ink-2); } /* the last row in each column keeps its rule off */ .choose-list li:nth-last-child(-n+2){border-bottom:0;padding-bottom:0} /* One column on a phone. Two columns of a 320px screen give each reason about 140px, which breaks these one-line points into four ragged lines each. */ @media (max-width:620px){ .choose-list{grid-template-columns:1fr} /* stacked, only the true last item drops its rule — the second-to-last is now mid-list rather than the foot of a column */ .choose-list li:nth-last-child(2){border-bottom:1px solid var(--line);padding-bottom:17px} } /* ── client work cards (clients.html) ──────────────────────── Three across, each a 16:9 preview above the detail. The preview is a styled browser frame by default; drop a real screenshot into img/ and swap in the that sits commented inside each card. */ .work-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px);align-items:stretch; } .work-card{ display:flex;flex-direction:column; border-radius:19px;overflow:hidden; background:var(--white);border:1px solid var(--line); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s; } .work-card:hover{ transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line-2); } .work-shot{ position:relative;aspect-ratio:16/9; background:linear-gradient(145deg,#eef3f9,#dde8f3); border-bottom:1px solid var(--line);overflow:hidden; } .work-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center} /* the live screenshot sits on top of the browser-frame placeholder, so if the screenshot service is slow or down, onerror removes it and the frame shows through instead of a broken-image icon */ .shot-live{position:absolute;inset:0;z-index:1} /* browser chrome for the placeholder */ .shot-bar{ position:absolute;inset:0 0 auto;height:26px; display:flex;align-items:center;gap:5px;padding:0 10px; background:rgba(255,255,255,.72);border-bottom:1px solid rgba(14,26,43,.07); } .shot-bar i{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:none} .shot-bar em{ margin-left:8px;font-style:normal;font-family:var(--mono); font-size:.66rem;letter-spacing:.02em;color:var(--slate-lt); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .shot-face{ position:absolute;inset:26px 0 0;display:grid;place-items:center;padding:14px; text-align:center;font-family:var(--display,var(--serif)); font-size:clamp(1rem,1.5vw,1.24rem);font-weight:600;letter-spacing:-.02em; color:var(--blue);opacity:.62; } .work-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px} .work-name{font-size:1.12rem;font-weight:640;letter-spacing:-.02em;color:var(--ink)} .work-industry{ margin-top:4px;font-size:.78rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--amber); } .badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px} .badges li{ padding:5px 11px;border-radius:var(--r-pill); background:var(--paper-2);border:1px solid var(--line); font-size:.74rem;font-weight:560;color:var(--slate); } .work-visit{ display:inline-flex;align-items:center;gap:7px; margin-top:auto;padding-top:20px; font-size:.92rem;font-weight:590;color:var(--blue); } .work-visit svg{ width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease); } .work-card:hover .work-visit svg{transform:translate(2px,-2px)} .work-visit.is-soon{color:var(--slate-lt);font-weight:520} /* ── featured quote (home page) ─────────────────────────────── One testimonial, straight after the results numbers: the figures make the claim, a named client confirms it. Links through to the full page. */ .quote-sec{padding-block:clamp(46px,5.6vw,80px)} .quote{margin:0;text-align:center;max-width:60ch;margin-inline:auto} .quote .stars{justify-content:center;margin-bottom:20px} .quote blockquote{margin:0} .quote blockquote p{ font-family:var(--display,var(--serif)); font-size:clamp(1.18rem,2.1vw,1.6rem);line-height:1.45;letter-spacing:-.014em; color:var(--ink); } /* The quote marks are written into the HTML here rather than added with ::before/::after, so the closing one can be glued to the final word with .nb — otherwise it wraps onto a line of its own. */ .quote .nb{white-space:nowrap} .quote figcaption{ display:flex;align-items:center;justify-content:center;gap:13px; margin-top:26px;text-align:left; } .quote figcaption .ava{background:var(--ink);box-shadow:none} .quote figcaption strong{display:block;color:var(--ink);font-weight:620;font-size:.97rem} .quote figcaption small{color:var(--slate);font-size:.86rem} .quote-more{ display:inline-block;margin-top:26px; font-size:.92rem;font-weight:560;color:var(--blue); text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px; } .quote-more:hover{color:var(--ink)} /* ── selected work / case studies ────────────────────────── */ .cases{background:var(--paper-2);border-block:1px solid var(--line)} .case-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px); align-items:start; } .case{ display:flex;flex-direction:column; padding:28px 26px;border-radius:var(--r-lg); background:var(--white);border:1px solid var(--line); transition:transform .28s var(--ease),box-shadow .28s var(--ease); } .case:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .case-head{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)} .case-sector{ display:inline-block;margin-bottom:9px; font-size:.7rem;font-weight:640;letter-spacing:.12em;text-transform:uppercase; color:var(--amber); } .case-head h3{font-size:1.22rem} .case-body{margin:0;flex:1} .case-body dt{ margin-bottom:5px; font-size:.7rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase; color:var(--slate-lt); } .case-body dd{margin:0 0 18px;font-size:.95rem;color:var(--slate);line-height:1.6} .case-body dd:last-of-type{margin-bottom:0} .case-res{ margin:18px 0 14px; font-size:.7rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase; color:var(--slate-lt); } .case-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto} .case-stats li{ padding:12px 14px;border-radius:11px; background:var(--paper-2);border:1px solid var(--line); } .case-stats strong{ display:block;font-size:1.14rem;font-weight:660;letter-spacing:-.025em;color:var(--ink); } .case-stats span{ display:block;margin-top:3px;font-size:.75rem;color:var(--slate-lt);line-height:1.4; } /* home-page project summary — the full write-ups live on clients.html */ .work-list{ display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px); align-items:stretch; } /* Direct children only. The cards now contain their own