/* ========================================================================== Growack v2.0 — Sushil feedback build (loaded LAST, after graphics.css) Implements: hero compression (A), early trust/logos (B), repeated reviews (C), bold section rhythm (D), CTA emphasis (E), 4-column footer (F). Palette unchanged: orange #F97316/#C2410C · teal #0F766E · slate #111827 · surfaces #FFFFFF / #F1F5F9 / #F8FAFC. Fonts unchanged: DM Sans + Inter. ========================================================================== */ /* ---------- A. HERO COMPRESSION — fit the first fold, CTA visible ---------- */ /* His #1 item: "content in hero banner is big… must be contained in first fold with clear visible CTA at the end of the fold." */ .hero--dark { padding-block: clamp(28px, 4.5vh, 56px) clamp(24px, 4vh, 44px); } .hero--dark .hero-grid { gap: clamp(24px, 3.5vw, 56px); align-items: center; } .hero--dark .hero-superline { margin-bottom: var(--space-4); } /* H1 kept strong (weight 800 + tight tracking) but sized to the brief §2.2 scale: 44px desktop / 32px mobile, line-height 1.2. */ .hero--dark h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); line-height: 1.2; margin-bottom: var(--space-4); } .hero--dark .hero-sub { font-size: 1.03rem; line-height: 1.55; max-width: 46ch; margin-bottom: var(--space-5, 20px); } .hero--dark .check-list { margin-top: var(--space-4); gap: 10px; } .hero--dark .check-list li { font-size: 0.94rem; line-height: 1.45; } .hero--dark .check-list .cl-ic { width: 22px; height: 22px; } .hero--dark .check-list .cl-ic svg { width: 13px; height: 13px; } .hero--dark .cta-row { margin-top: var(--space-6); } .hero--dark .hero-trust { margin-top: var(--space-4); font-size: 0.85rem; } /* the product mockup: smaller so it supports rather than competes */ .hero--dark .app-window { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg) scale(0.94); } @media (max-width: 1180px) { .hero--dark .app-window { transform: scale(0.9); } } @media (max-width: 860px) { .hero--dark .app-window { transform: none; } } /* short viewports (laptops) — clamp harder so the CTA never drops below fold */ @media (min-width: 861px) and (max-height: 860px) { .hero--dark { padding-block: 24px 20px; } .hero--dark h1 { font-size: clamp(2rem, 1.3rem + 2.1vw, 2.7rem); } .hero--dark .hero-sub { font-size: 0.98rem; margin-bottom: 14px; } .hero--dark .check-list { margin-top: 12px; gap: 8px; } .hero--dark .check-list li { font-size: 0.88rem; } .hero--dark .app-window { transform: scale(0.82); } } /* ---------- B. TRUST STRIP — real client logos, directly under the hero ---- */ .trust-strip { padding-block: clamp(22px, 3vw, 34px); background: var(--color-surface); border-bottom: 1px solid var(--color-border); } /* ---- ONE MICRO-LABEL FOR EVERY LOGO LOOP --------------------------------- The client strip and the partner strip are the same object: a short uppercase caption sitting directly above a looping row of marks. Both are rendered on all 45 content pages, one under the other, ~300px apart. They were declared twice and had drifted into two different type treatments: .trust-strip__label ran 0.78rem / 0.13em (12.48px, tracking 1.62px) and .partner-strip__label ran var(--fs-sm) / .08em (14px, tracking 1.12px). Each passes every per-element check on its own; stacked, one caption is visibly smaller and wider-tracked than the caption 300px below it. Converged on the TOKEN values -- 0.78rem was a magic number used nowhere else on the site, while var(--fs-sm) is the site's small-text rung and was already carried by two of the three loop captions. The THIRD caption of the same object is .marquee-label, the line above the tools loop, and it is the one that stacks directly under the other two on every page. It was still declared on its own in premium.css at weight 500, no letter-spacing and NO text-transform, so it rendered sentence case at a lighter weight immediately below two uppercase, 600-weight, tracked captions. Folded in here: v2.css loads after premium.css, so this single declaration is the one that lands, and all three captions now resolve to byte-identical computed type. Uppercase is the treatment kept because it was already the site's micro-label convention on two of the three and on every other logo-loop caption; the copy strings themselves are untouched and the case is applied purely by text-transform. DECLARED ONCE, for all three selectors, so they cannot drift apart again. margin-BOTTOM only, never the `margin` shorthand: the two trust-inset-* partials lift this caption with .mt-8 / .mt-12 in a hero, and a shorthand here would out-specify those utilities and delete the lift. */ .trust-strip__label, .partner-strip__label, .marquee-label { text-align: center; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-6); } .trust-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 2.6vw, 40px); } /* Keep the strip on a SINGLE row on desktop so no logo is orphaned underneath (6 logos previously wrapped, stranding the last one on a second row). */ @media (min-width: 861px) { .trust-logos { flex-wrap: nowrap; gap: clamp(16px, 2.2vw, 34px); } .trust-logos img { flex: 0 1 auto; min-width: 0; } } /* Box comes from the optical scale table at the foot of this file. Ink, opacity and the hover transition come from figures.css section 9, the one rule that owns a logo mark's appearance. */ /* dark variant — sits inside the dark hero band (Anaplan pattern) */ .trust-strip--on-dark { background: transparent; border-bottom: 0; border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-8); } /* One declared on-dark token, not an ad-hoc alpha: at 0.6 this caption ran 3.3:1 on #111827 and failed AA, and it was a second treatment for an element that is identical on the other 43 pages. --color-on-dark is the site's on-dark body token (~10:1 here). */ .trust-strip--on-dark .trust-strip__label { color: var(--color-on-dark); } /* REMOVED — `filter: grayscale(1) brightness(0) invert(1)` forced every mark in a .trust-logos row on a dark strip to pure white. The cream inset band travels WITH the loop, so those marks rendered white-on-cream: the historic invisible-logo bug, documented again further down this file. The rule was dormant only because no page emits .trust-logos today; leaving it shipped meant reintroducing the old markup would silently restore the bug. The on-dark strip now inherits the one measured treatment, like every other surface. */ /* ---------- B/C. LOGO GRID + TESTIMONIAL (Unmuted pattern, our styling) ---- */ .proof-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 3.5vw, 48px); align-items: stretch; } @media (max-width: 900px) { .proof-split { grid-template-columns: 1fr; } } .logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); } @media (max-width: 520px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } } .logo-grid__cell { display: grid; place-items: center; padding: clamp(16px, 2.4vw, 26px); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .logo-grid__cell img { height: 30px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.66; transition: filter .25s, opacity .25s; } .logo-grid__cell:hover img { filter: grayscale(0); opacity: 1; } /* ---------- C. TESTIMONIAL CARD (real, named) ----------------------------- */ .tq { display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(20px, 2.6vw, 30px); height: 100%; } .tq__mark { color: var(--color-primary); font-family: var(--font-heading); font-weight: 800; font-size: 2rem; line-height: 0.6; } .tq__quote { font-size: 1.02rem; line-height: 1.55; color: var(--color-text); } .tq__foot { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); } .tq__avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; background: var(--color-primary-soft); color: var(--color-primary); } /* display:block is REQUIRED — these are s, and inline spans sit on one line, which made the name and role run together ("SusieDigital Marketing Manager"). */ .tq__name { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.2; } .tq__role { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.3; } /* accent variant for the hero-adjacent card */ .tq--accent { background: linear-gradient(160deg, #fff, var(--color-primary-soft)); border-color: #f6dfae; } .tq--teal .tq__mark { color: var(--color-teal); } .tq--teal .tq__avatar { background: var(--color-teal-soft); color: var(--color-teal); } /* on dark sections */ .section--dark .tq { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); } .section--dark .tq__quote { color: #fff; } .section--dark .tq__name { color: #fff; } .section--dark .tq__role { color: rgba(255,255,255,0.62); } /* ---------- C. REVIEW RATING BADGES (Clutch + HubSpot, links out) --------- */ .ratings { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: stretch; } .rating-card { display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: 14px 18px; text-decoration: none; color: inherit; /* hover timing: MOTION SYSTEM role 3, foot of this file */ } .rating-card:hover { border-color: #d9c9b8; box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; } .rating-card img { height: 40px; width: auto; flex: none; } .rating-card__score { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--color-text); } .rating-card__stars { color: var(--color-primary-bright); font-size: 0.9rem; letter-spacing: 1px; line-height: 1; margin-top: 3px; } .rating-card__meta { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 3px; } .section--dark .rating-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); } .section--dark .rating-card__score { color: #fff; } .section--dark .rating-card__meta { color: rgba(255,255,255,0.62); } /* The review count is the third row of the same card and needs the same dark-surface treatment as __meta above. Left on --color-text-muted it composites to 2.83:1 on rgb(29,36,50) and fails AA; this token gives 6.84:1. */ .section--dark .rating-card__reviews { color: rgba(255,255,255,0.62); } /* ---------- D. SECTION RHYTHM — his prescribed alternation ---------------- */ /* Bold, deliberate differentiation so "big moments" read differently to supporting sections. Use these instead of everything defaulting to flat. */ .sec-white { background: #FFFFFF; } .sec-gray { background: #F1F5F9; } /* his exact value for Services */ .sec-paper { background: var(--color-bg); } .sec-accent { background: linear-gradient(180deg, #FFF7ED 0%, #FEF3C7 100%); } /* soft orange */ .sec-accent-teal { background: linear-gradient(180deg, #FFFFFF 0%, var(--color-teal-soft) 100%); } .sec-band { background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%); } /* hairline separators so adjacent light bands still read as distinct */ .sec-gray + .sec-white, .sec-white + .sec-gray, .sec-paper + .sec-white, .sec-white + .sec-paper { border-top: 1px solid var(--color-border); } /* ---------- E. PROMOTIONAL BAND — for high-priority CTAs (Quick Audit) ---- */ /* "this is important CTA and it cannot just go like double and unhighlighted" */ .promo { position: relative; overflow: hidden; background: linear-gradient(135deg, #111827 0%, #17233b 60%, #1f2937 100%); border-radius: var(--radius-lg); padding: clamp(26px, 3.4vw, 44px); color: rgba(255,255,255,0.78); } .promo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 78% at 88% 12%, rgba(249,115,22,0.26), transparent 62%), radial-gradient(46% 70% at 4% 96%, rgba(15,118,110,0.22), transparent 66%); } .promo > * { position: relative; z-index: 1; } .promo__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; } .promo__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-bright); margin-bottom: 10px; } .promo__eyebrow::before { content: ""; width: 20px; height: 1.5px; background: var(--color-primary-bright); } .promo h2, .promo .promo__title { color: #fff; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 1.9rem); line-height: 1.2; max-width: 24ch; } .promo p { color: rgba(255,255,255,0.76); margin-top: 10px; max-width: 60ch; } .promo .free-tag { color: var(--color-primary-bright); font-weight: 700; } .promo__cta { flex: none; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .promo__note { font-size: var(--fs-xs); color: rgba(255,255,255,0.55); } /* ---------- D5. SERVICE / EXPERTISE TILES — visible without hover --------- */ /* "at the moment even you hover, then only appears" */ .tile-grid .card, .card--tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 10px 24px -18px rgba(17,24,39,.18); position: relative; overflow: hidden; } .card--tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--color-primary-bright); } .card--tile:nth-child(even)::before { background: var(--color-teal); } .card--tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #dfe6ee; } /* centred section head option (D6) */ .section-head--mid { text-align: center; margin-inline: auto; } .section-head--mid p { margin-inline: auto; } /* ---------- F. FOOTER — 4 middle columns per Brief §3.2 ------------------- */ .footer-top--v2 { grid-template-columns: 1.25fr repeat(4, 1fr); } @media (max-width: 1040px) { .footer-top--v2 { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 720px) { .footer-top--v2 { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .footer-top--v2 { grid-template-columns: 1fr; } } .footer-addr { font-size: var(--fs-sm); line-height: 1.6; color: #94a3b8; margin-top: var(--space-4); } .footer-addr strong { color: #e2e8f0; font-weight: 600; display: block; } /* Meeting doc item 9: email id sits ABOVE the Growack address block. */ .footer-addr .footer-mail { display: block; color: #e2e8f0; margin-bottom: var(--space-3); word-break: break-word; } .footer-addr .footer-mail:hover { color: #fff; } /* Meeting doc item 10: styles.css `svg { fill: currentColor }` outranks the fill="none" presentation attribute, which floods closed outline shapes solid. Scoped guard so any outline glyph dropped into the social row stays an outline. */ .footer-social svg[fill="none"] { fill: none; } /* ---------- G. BLOG DETAIL — two columns, guided nav LEFT (Exit Five / Dapper) "content on the right and navigation on the left… that's guided navigation, what is in this article, all the sections. That's pretty cool." */ .article-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; } @media (max-width: 940px) { .article-layout { grid-template-columns: 1fr; } } .article-nav { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; } @media (max-width: 940px) { .article-nav { position: static; } } .article-nav__title { font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; margin-bottom: var(--space-4); } .article-nav ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; counter-reset: toc; border-left: 2px solid var(--color-border); } .article-nav li { margin: 0; } /* SCOPED TO THE TOC LIST — a container rule must not reach a component. These three rules used to read `.article-nav a`, specificity (0,2,1), in the last stylesheet loaded. That beat `.btn--primary { color: var(--color-text) }` (0,1,0) in premium.css, so the sidebar's own primary CTA rendered muted grey #626977 on the orange fill (1.97:1), and `.article-nav a:hover` beat `.btn--primary:hover`, so the site's highest-priority CTA lost its orange fill on the exact interaction that precedes the click. The TOC links are the only intended target and they all live inside the
    . */ .article-nav ol a { display: block; padding: 8px 14px; font-size: 0.88rem; line-height: 1.4; color: var(--color-text-muted); border-left: 2px solid transparent; margin-left: -2px; } .article-nav ol a:hover { color: var(--color-text); text-decoration: none; background: var(--color-surface-alt); } .article-nav ol a.is-current { color: var(--color-primary); font-weight: 600; border-left-color: var(--color-primary-bright); background: var(--color-primary-soft); } .article-body { max-width: 38em; } /* see figures.css — `ch` overshoots */ .article-body h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); scroll-margin-top: calc(var(--header-h) + 24px); } .article-body h3 { margin-top: var(--space-8); margin-bottom: var(--space-2); } .article-body p { margin-bottom: var(--space-4); line-height: 1.7; color: var(--color-text-muted); } .article-body p strong { color: var(--color-text); } .article-body ul { margin: 0 0 var(--space-4); padding-left: 1.2rem; } .article-body li { color: var(--color-text-muted); line-height: 1.65; margin-block: 6px; } .article-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-4); } .article-meta .am-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; } /* newsletter promo inside the article template (Exit Five pattern) */ .article-cta { margin: var(--space-12) 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: linear-gradient(160deg, #fff, var(--color-teal-soft)); } .article-cta h3 { margin-bottom: var(--space-2); } .article-cta p { color: var(--color-text-muted); margin-bottom: var(--space-6); } /* ---------- G7. EVENTS — listing + empty state --------------------------- */ .event-empty { border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: clamp(24px, 3.4vw, 40px); text-align: center; } .event-empty .ee-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin: 0 auto var(--space-4); background: var(--color-primary-soft); color: var(--color-primary); } .event-empty .ee-ic svg { width: 24px; height: 24px; } .event-list { display: grid; gap: var(--space-4); } .event-row { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: var(--space-6); align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: var(--space-6); /* hover timing: MOTION SYSTEM role 3 */ } .event-row:hover { border-color: #dfe6ee; box-shadow: var(--shadow-md); transform: translateY(-2px); } @media (max-width: 700px) { .event-row { grid-template-columns: 1fr; gap: var(--space-3); } } .event-date { text-align: center; border-right: 1px solid var(--color-border); padding-right: var(--space-4); } @media (max-width: 700px) { .event-date { text-align: left; border-right: 0; padding-right: 0; } } .event-date .ed-day { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--color-primary); } .event-date .ed-mon { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-top: 4px; } .event-row h3 { font-size: var(--fs-h4); margin-bottom: 4px; } .event-row p { color: var(--color-text-muted); font-size: 0.93rem; } .event-tag { font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-text-muted); } /* ---------- misc utilities used by v2 sections --------------------------- */ .mt-5 { margin-top: 20px; } .stack-sm { display: grid; gap: var(--space-3); } /* ---------- His #1 rule holds on SMALL PHONES too -------------------------- The hero .check-list is an addition (CONTENT §1.1 / BRIEF §4.1 list only eyebrow, H1, subcopy, CTA, secondary link, micro-trust). On a 390x740 viewport its 157px pushed the CTA and trust line below the fold. Hide it there so the spec'd hero content and a visible CTA always fit the first fold. */ @media (max-width: 480px) and (max-height: 780px) { .hero--dark .check-list { display: none; } } /* Same rule, applied to the WHOLE hero band — both columns, not just the copy. At 860px and below the hero grid stacks, so the illustration lands underneath the CTA and pushes the band 450-500px past the fold (390x740 leaves 667px, and the spec'd eyebrow + H1 + subcopy + CTAs + trust line already fill ~620px of it; 768x1024 overflows the same way). Wherever the hero stacks, the mockup drops out so the band itself ends inside the first fold with both CTAs visible. From 861px up — every two-column layout — it is back, untouched. Verified: 1440x800, 1366x768, 1280x720, 768x1024, 430x932, 390x740. */ /* Scale the hero graphic down on small screens rather than deleting it — he wants a sales & marketing site to LOOK like one, and mobile is the most-viewed screen. */ @media (max-width: 860px) { .hero--dark .hero-visual { margin-top: var(--space-6); } .hero--dark .app-window { transform: none; } } /* v3 item 1 — the 340px cap below 560px squeezed the DESKTOP render into a third of the screen, which is what made it stack and run ~1,040px tall. The mockup now takes the full container width and graphics.css holds the desktop 3-up / 4-up grids inside it. (font-size: 0.9em did nothing: every child of .app-window is sized in rem, not em.) */ @media (max-width: 560px) { .hero--dark .hero-visual { max-width: none; margin-inline: 0; } } /* ============================================================ v3 — WHY FOUNDER-LED (Sushil 28.07, item A) "Design idea for key sections (with elevated cards/tiles)" ============================================================ */ .wfl-sec { position: relative; } /* v3 background rhythm: white -> soft band -> gray */ .wfl-sec::after { /* faint accent wash so it reads as a "big moment" */ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(52rem 22rem at 12% 0%, rgba(249,115,22,.055), transparent 62%), radial-gradient(46rem 20rem at 88% 100%, rgba(15,118,110,.05), transparent 62%); } .wfl-sec > .container { position: relative; z-index: 1; } .wfl-grid { margin-top: var(--space-8); align-items: stretch; } /* ---- ELEVATED CARDS ALL SIT ON ONE RADIUS RUNG -------------------------- The radius scale is --radius-sm 7 / --radius 12 / --radius-lg 18, and the site follows a clear rule: a flat bordered card is 12 (.card, .step-card, .card--hover) and an elevated one -- border + shadow -- is 18 (.card--tile, 199 instances). .wfl-card, .msys-card and .rvai-card are all elevated cards and all hardcoded 14px, a value that is on no rung of the scale and appears nowhere else. .wfl-card is the clearest case: it is .card--tile rebuilt by hand, down to the 3px accent rule across the top, but at 14px with a shadow of 10px 26px -14px against the tile's 10px 24px -18px. On / the two sit six sections apart, so the home page shipped two elevated-tile families whose corners and drop shadows almost, but not quite, agree. All three now take the tile's rung and the tile's elevation. */ .wfl-card { position: relative; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 10px 24px -18px rgba(17,24,39,.18); /* hover timing: MOTION SYSTEM role 3, foot of this file */ } .wfl-card::before { /* elevated tile: accent top rule */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(90deg, var(--color-primary-bright), var(--color-secondary)); } .wfl-card:hover { transform: translateY(-4px); border-color: var(--color-primary-soft); box-shadow: 0 2px 4px rgba(17,24,39,.05), 0 22px 44px -20px rgba(17,24,39,.28); } .wfl-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: var(--space-4); border-radius: 11px; color: var(--color-primary); background: var(--color-primary-soft); } .wfl-card:nth-child(2) .wfl-ico { color: var(--color-secondary); background: var(--color-secondary-soft); } .wfl-card h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h4); line-height: 1.3; } .wfl-card p { margin: 0; color: var(--color-text-muted); } .wfl-close { max-width: 36em; margin: var(--space-8) auto 0; text-align: center; padding-top: var(--space-6); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 1.0625rem; } @media (max-width: 860px) { .wfl-grid { grid-template-columns: 1fr; gap: var(--space-4); } .wfl-close { text-align: left; } } /* ============================================================ v3 — MANAGED REVOPS & AI-REVOPS (Sushil 28.07) Sequential section => progressive-flow rail + numbered steps ============================================================ */ .msys { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-6); } .msys-item { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--space-5, 20px); align-items: start; } .msys-n { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; color: #fff; background: var(--color-primary); box-shadow: 0 0 0 5px var(--color-primary-soft); } .msys-item:not(:last-child)::before { /* progressive flow rail */ content: ""; position: absolute; left: 22px; top: 46px; bottom: calc(-1 * var(--space-6)); width: 2px; background: linear-gradient(180deg, var(--color-primary-soft), var(--color-border)); } /* radius rung + elevation: see the .wfl-card note above */ .msys-card { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 10px 24px -18px rgba(17,24,39,.18); } .msys-card h3 { margin: 0; font-size: var(--fs-h4); line-height: 1.25; } .msys-sub { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); } .msys-tag { margin: var(--space-3) 0 var(--space-2); font-weight: 600; color: var(--color-primary); } .msys-card > p { color: var(--color-text-muted); margin-bottom: var(--space-3); } .msys-lbl { margin: var(--space-4) 0 var(--space-2) !important; font-weight: 700; color: var(--color-text); } .msys-list { margin: 0 0 var(--space-4); padding-left: 1.1em; color: var(--color-text-muted); } .msys-list li { margin-bottom: 6px; } .msys-for { margin: 0 !important; padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); } .msys-for span { display: block; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 4px; } /* ---- RevOps vs AI-RevOps: two distinctive cards, centred ---- */ .section-head--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 60ch; } .rvai { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); } /* radius rung + elevation: see the .wfl-card note above */ .rvai-card { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 10px 24px -18px rgba(17,24,39,.18); } .rvai-card--ops { border-top: 3px solid var(--color-secondary); } .rvai-card--ai { border-top: 3px solid var(--color-primary-bright); } .rvai-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; margin-bottom: var(--space-4); } .rvai-card--ops .rvai-ico { color: var(--color-secondary); background: var(--color-secondary-soft); } .rvai-card--ai .rvai-ico { color: var(--color-primary); background: var(--color-primary-soft); } .rvai-card h3 { margin: 0 0 var(--space-3); font-size: var(--fs-h4); line-height: 1.25; } .rvai-alt { font-weight: 400; color: var(--color-text-muted); } .rvai-list { margin: 0; padding-left: 1.1em; color: var(--color-text-muted); } .rvai-list li { margin-bottom: 8px; } .rvai-close { max-width: 36em; margin: var(--space-8) auto 0; text-align: center; font-weight: 600; color: var(--color-text); } @media (max-width: 860px) { .rvai { grid-template-columns: 1fr; gap: var(--space-4); } .msys-item { grid-template-columns: 40px 1fr; gap: var(--space-4); } .msys-n { width: 36px; height: 36px; font-size: .95rem; box-shadow: 0 0 0 4px var(--color-primary-soft); } .msys-item:not(:last-child)::before { left: 18px; top: 38px; } .msys-card { padding: var(--space-5, 20px); } /* .section-head--center USED TO BE LEFT-ALIGNED HERE and no longer is. .section-head--mid and .section-head--center are two names for one thing: a centred section head. Both centre at 1280. Below 860 only --center dropped to left, so the two inverted: measured at 390, 21 --center heads went left while 31 --mid heads stayed centred, and on /services/ BOTH appear on the same page -- "How the work lands" centred, "What it's like to work with me" left, four sections apart. Converged on the majority and on their own desktop behaviour: centred stays centred at every width. .rvai-close keeps the left-align; it is a closing sentence on /services/revops-systems/, not a section head, and is why this rule exists. */ .rvai-close { text-align: left; } } /* section-level hooks: v3 background rhythm (bolder alternation) */ .msys-sec { position: relative; overflow: hidden; } .msys-sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48rem 20rem at 88% 0%, rgba(249,115,22,.05), transparent 60%); } .msys-sec > .container { position: relative; z-index: 1; } .rvai-sec { position: relative; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } /* ============================================================ v3 — TECHNOLOGY PARTNER STRIP (Sushil 28.07) "only logo in loop, with a slight different background", near client reviews / client logo sections. ============================================================ */ .partner-strip { padding-block: var(--space-12); background: var(--color-surface-alt, #F1F5F9); /* the "slightly different background" */ border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } /* .partner-strip__label is declared ONCE, with .trust-strip__label, at the top of this file. It used to be declared a second time here, and the two copies had drifted apart (0.78rem/.13em vs var(--fs-sm)/.08em). Do not re-add a local copy: two loop captions on the same page must stay one type object. */ /* The edge fade is inherited from .marquee's --mq-fade token (premium.css). It was typed out here as a literal 6%/94% and again on .trust-mq, which is how the third loop on the page kept the base rule's 8%/92% and read as a different component. One token, three loops. Do not re-declare it here. */ /* Duration is written at runtime from --mq-speed (see the MOTION SYSTEM block at the foot of this file); the box that decides the track's width is set below, and the two no longer have to be chosen by hand together. */ .partner-mq__item { flex: none; display: flex; align-items: center; justify-content: center; } /* Ink, opacity and the hover transition: figures.css section 9. */ @media (max-width: 860px) { .partner-strip { padding-block: var(--space-8); } } @media (prefers-reduced-motion: reduce) { .partner-mq__track { animation: none !important; } .partner-mq { -webkit-mask-image: none; mask-image: none; overflow-x: auto; } } /* ============================================================ v3 — BACKGROUND RHYTHM (Sushil 28.07) "Alternate section backgrounds more boldly ... sections feel more similar in weight, making it harder to identify big moments vs supporting sections." The palette only sanctions three light neutrals (#FFFFFF / #F8FAFC / #F1F5F9) which sit ~2% apart, so contrast alone cannot separate two adjacent light bands. A hairline fold edge does - and it auto-applies wherever they meet. ============================================================ */ .sec-white + .sec-paper, .sec-paper + .sec-white, .sec-white + .sec-gray, .sec-gray + .sec-white, .sec-paper + .sec-gray, .sec-gray + .sec-paper, .sec-white + .sec-band, .sec-band + .sec-white, .sec-paper + .sec-band, .sec-band + .sec-paper, .sec-gray + .sec-band, .sec-band + .sec-gray, .sec-white + .sec-white, .sec-paper + .sec-paper, .sec-gray + .sec-gray, .sec-band + .sec-band, .trust-strip + .sec-white, .trust-strip + .sec-paper, .trust-strip + .sec-gray, .partner-strip + .sec-white, .partner-strip + .sec-paper, .partner-strip + .sec-gray, /* ---- THE MATRIX WAS ONLY HALF WIRED ------------------------------------- Measured every adjacent band junction on all 48 pages, comparing the colour each band actually PAINTS at the seam (a gradient band's bottom stop, not its declared background). Of 210 junctions where the two sides land within one palette step of each other, the hairline was present on every one except these three groups: .sec-gray + .trust-strip 22 pages #F1F5F9 meets #F8FAFC .sec-band + .trust-strip 4 pages #F1F5F9 meets #F8FAFC .sec-white + .sec-accent-teal 9 pages #FFFFFF meets #FFFFFF The strip direction was covered (.trust-strip + .sec-*) but not the approach to it (.sec-* + .trust-strip), so on 26 pages a grey section ran into the client logo strip with no fold while the identical pairing one section further down had one. .sec-accent-teal is the worse case: it is a gradient that BEGINS on pure #FFFFFF, so after a .sec-white section there is literally no boundary -- and the same junction on /services/revops-systems/ already drew one. Junctions where the two sides are genuinely far apart (cream, teal-soft, navy) are deliberately NOT listed: contrast already separates them. */ .sec-gray + .trust-strip, .sec-band + .trust-strip, .sec-white + .sec-accent-teal { border-top: 1px solid var(--color-border); } /* the accent band now carries this fold, so drop the competing radial wash */ .wfl-sec::after { display: none; } /* ============================================================ v3 — TILE FAMILIES (Sushil 28.07, items 4 & 5: "Who I serve / Services tiles - missing visual distinction", + "borrow the card + mini icon + subtitle style from your Services dropdown and repeat it in Services cards and Expertise cards for consistency") The accent used to alternate by :nth-child(even), so it was decorative noise: two services could look different and a service could look identical to an expertise area. Here the accent CARRIES MEANING - orange = a service you can buy, teal = an expertise that runs through the work. Declared after the nth-child rule so the family always wins. ============================================================ */ .card--tile.tile--service::before { background: var(--color-primary-bright); } .card--tile.tile--expertise::before { background: var(--color-teal); } .tile--service .card-icon { background: var(--color-primary-soft); color: var(--color-primary); } .tile--expertise .card-icon { background: var(--color-teal-soft); color: var(--color-teal); } /* the family reads on hover too, not just the 3px rule */ .card--tile.tile--service:hover { border-color: #f3cba7; } .card--tile.tile--expertise:hover { border-color: #a7d5d0; } /* compact variant for the 5-up teaser rows (homepage) */ .tile--compact { padding: var(--space-5); } .tile--compact .card-icon { width: 38px; height: 38px; border-radius: 10px; margin-bottom: var(--space-4); } .tile--compact .card-icon svg { width: 19px; height: 19px; } /* 1.0625rem = 17px rendered the five homepage expertise-card headings 3px smaller than the SAME five headings in the SAME card on /expertise/ (20px), and only 0.5px above the blog h4, so the hierarchy read flat. One size for one role: the site's card-heading step. */ .tile--compact h3 { font-size: var(--fs-h4); line-height: 1.3; margin: 0; } .tile--compact h3 a { color: inherit; text-decoration: none; } .tile--compact h3 a:hover { color: var(--color-secondary); } .tile--compact p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.45; } /* ============================================================================ v3 — CSS CONSOLIDATION PASS (one edit, all implementer requests) Every rule below was requested by a markup agent during the V3 gap-register run. Requests that duplicated an existing rule (the .sec-band/.sec-white and same-on-same hairlines already declared above) are NOT repeated here. Only palette tokens that exist in styles.css are used. ============================================================================ */ /* ---------- 1. GAP-08 — above-the-fold heroes must never start invisible --- .js .reveal computes to opacity 0 until deferred JS runs. Every hero is above the fold, so the reveal buys nothing there and costs the primary CTA. .reveal stays intact for everything below the fold. */ .js .hero .reveal, .js .hero h1, .js .hero .hero-sub, .js .hero .cta-row, .js .page-hero .reveal, .js .page-hero h1, .js .page-hero .lead, .js .page-hero .cta-row { opacity: 1 !important; transform: none !important; } /* ---------- 2. GAP-26 — remaining band boundaries -------------------------- The gray/white/paper/band pairs are already covered further up this file. These two adjacencies were not. */ .sec-accent-teal + .sec-accent-teal, .sec-accent + .sec-accent, .page-hero.sec-white + .trust-strip, .page-hero.sec-paper + .trust-strip { border-top: 1px solid var(--color-border); } /* ---------- 3. Sub-heads inside a section (h3 in a .section-head) ---------- Used by the two "Outcomes" blocks in the named cases on /work, which keep one h1 per page and a sane heading order by dropping to an h3. */ .section-head h3 { /* 1.75rem = 28px is a rung that exists nowhere else: sitewide h3 runs 24px (31 pages) and 20px (44 pages), and 28px sat 4px under the 32px h2, which compressed the level gap on this one page. Mapped onto the existing 24px h3 step so /work/ uses the same scale as the rest of the site. */ font-size: var(--fs-h3); line-height: 1.25; margin-bottom: var(--space-2); } /* ---------- 4. GAP-17 — a client logo may be wrapped in a case-anchor link - .trust-logos is a flex row that only sizes its img children, so a bare anchor becomes an unsized flex item. */ .trust-logos a { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; border-radius: var(--radius-sm); } .trust-logos a:hover img { filter: grayscale(0); opacity: 1; } .trust-logos a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } @media (max-width: 860px) { .trust-logos a { flex: 0 1 auto; } .trust-logos a img { max-width: 100%; } } /* ---------- 5. GAP-30b — category chips are links on /resources ------------ */ a.stack-chip { text-decoration: none; transition: color .2s, border-color .2s, background-color .2s; } a.stack-chip:hover, a.stack-chip:focus-visible { color: var(--color-primary); border-color: var(--color-primary-bright); background: var(--color-primary-soft); text-decoration: none; } a.stack-chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } @media (max-width: 860px) { a.stack-chip { font-size: 0.78rem; padding: 6px 12px; } } /* ---------- 6. GAP-30 + GAP-28 — soft CTA inside the blog article rail ----- */ .article-nav__cta { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .article-nav__cta p { font-family: var(--font-heading); margin-bottom: var(--space-4); } /* flex-wrap must go too: a WRAPPING column flex line takes its cross size from the widest item, so the cards stretched to 262px inside a 260px rail */ .article-nav__cta .ratings { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-3); } /* The rating cards are s INSIDE .article-nav, so the table-of-contents anchor rule above (display:block, border-left:2px, margin-left:-2px, 0.88rem) lands on them and pushed each card 2px wider than the rail. Reset it, and let the card and its text column shrink so the label wraps in ~260px. */ .article-nav__cta .rating-card { display: flex; padding: 12px 14px; gap: var(--space-3); min-width: 0; margin-left: 0; border-left-width: 1px; font-size: var(--fs-body); line-height: 1.4; } .article-nav__cta .rating-card > span { min-width: 0; } .article-nav__cta .rating-card img { height: 32px; } @media (max-width: 860px) { .article-nav__cta { margin-top: var(--space-6); } .article-nav__cta .rating-card { padding: 11px 13px; } } /* ---------- 7. GAP-14 — progressive-flow rail for .steps-cards ------------- Aligns to the centre of the 30px .sc-n badge (1px border + 24px padding + 15px). The rail is only correct while the grid is a SINGLE row, so it is switched on per breakpoint and never shows once the cards wrap or stack. */ .steps-cards { position: relative; } .steps-cards::before { content: ""; display: none; position: absolute; top: 39px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--color-border) 0 8px, transparent 8px 16px); z-index: 0; } .step-card { position: relative; z-index: 1; } @media (min-width: 901px) { .steps-cards--4::before { display: block; } } @media (min-width: 1041px) { .steps-cards::before { display: block; } } /* stacked / wrapped: the numbered badges carry the sequence on their own */ @media (max-width: 860px) { .steps-cards::before { display: none; } } /* four-up step cards that carry a list rather than a paragraph: match the optical weight of .step-card p so the list never outweighs the card title */ .step-card .feature-list li { font-size: 0.9rem; line-height: 1.55; } @media (max-width: 860px) { .step-card .feature-list li { font-size: 0.92rem; } } /* ---------- 8. GAP-14 (secondary) — .journey keeps its rail on phones ------ visuals.css kills .journey::before below 860px, so the progressive-flow device vanished on mobile on every page that uses it. Below 860 the row becomes a vertical timeline instead, with the rail running between the badges exactly as .msys does. */ @media (max-width: 860px) { .journey, .journey--3, .journey--5 { grid-template-columns: 1fr; gap: var(--space-6); } .journey-step { text-align: left; padding-left: 88px; min-height: 84px; } .journey-step .js-badge { position: absolute; left: 0; top: 8px; margin: 0; } .journey-step:not(:last-child)::before { content: ""; position: absolute; left: 33px; top: 8px; bottom: calc(-1 * var(--space-6)); width: 2px; background: repeating-linear-gradient(180deg, var(--color-border) 0 8px, transparent 8px 16px); } .journey-step p { max-width: 60ch; } } /* ---------- 9. The AI band keeps the teal accent, including its rail ------- Every other AI moment is teal (.eyebrow--ai, .callout--ai, .tq--teal), so an orange .msys rail inside a teal band read as the odd one out. */ .sec-accent-teal .msys-n { background: var(--color-teal); box-shadow: 0 0 0 5px var(--color-teal-soft); } .sec-accent-teal .msys-item:not(:last-child)::before { background: linear-gradient(180deg, var(--color-teal-soft), var(--color-border)); } .sec-accent-teal .msys-tag { color: var(--color-teal); } /* ---------- 10. GAP-33 — the two-system sync diagram reads as live --------- .dataflow sits inside .chart-card, which main.js primes with .gfx-anim and releases with .gfx-in on scroll. DELIBERATE LIMIT: nothing that carries a WORD is primed to opacity 0. The established .gfx-anim rules only ever hide bars, rings and cells, never copy, so that a stalled observer can never blank out a sentence. Here the system boxes ("HubSpot", "Salesforce") and the row lines therefore stay fully rendered at all times; only the object pills slide in, and only the status dot keeps moving. That is the "feels live" cue on its own. */ .gfx-anim .df-obj { transform: translateX(-8px); } .gfx-in .df-obj { transform: none; transition: transform 0.45s var(--ease-out); } .gfx-in .df-mid .df-obj:nth-child(2) { transition-delay: 0.10s; } .gfx-in .df-mid .df-obj:nth-child(3) { transition-delay: 0.20s; } .gfx-in .df-mid .df-obj:nth-child(4) { transition-delay: 0.30s; } /* the status dot on each synced object keeps a slow, quiet pulse: the one element on the diagram whose whole job is to say "this is still running" */ @keyframes dfSync { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.45; } } /* 2.4s ease-in-out, not the 2.6s var(--ease) this used to carry. See MOTION SYSTEM role 4 at the foot of this file: 2.4s is the site's ambient-loop period (.aw-live and .journey-step both run it, and .aw-live shares this page), and var(--ease) is an ENTRANCE curve, which on a symmetric 0%,100% -> 50% breathe made the return leg read differently from the outbound one. Delays below hold the same phase they had at 2.6s. */ .df-obj::before { animation: dfSync 2.4s ease-in-out infinite; } .df-mid .df-obj:nth-child(2)::before { animation-delay: 0.32s; } .df-mid .df-obj:nth-child(3)::before { animation-delay: 0.64s; } .df-mid .df-obj:nth-child(4)::before { animation-delay: 0.96s; } /* the synced-row ticks settle in behind the pills, motion only, never opacity */ .gfx-anim .dfl-ok { transform: translateY(3px); } .gfx-in .dfl-ok { transform: none; transition: transform 0.5s var(--ease-out) 0.30s; } @media (prefers-reduced-motion: reduce) { .gfx-anim .df-obj, .gfx-anim .dfl-ok { transform: none; } .gfx-in .df-obj, .gfx-in .dfl-ok { transition: none; } .df-obj::before { animation: none; } } /* on phones the object pills sit in a wrapped flex row, where a horizontal entrance would shuffle them sideways: hold them still, keep the dot pulse */ @media (max-width: 860px) { .gfx-anim .df-obj, .gfx-anim .dfl-ok { transform: none; } .gfx-in .df-obj, .gfx-in .dfl-ok { transition: none; } } /* ============================================================ v3 — CLIENT LOGO STRIP AS A MOVING LOOP "should keep moving horizontally just like the stack I build these systems in ... on top of the stack" (Sushil). Same marquee mechanics as .marquee-track; keeps the greyscale -> colour hover he explicitly said he liked. ============================================================ */ /* Edge fade comes from .marquee's --mq-fade token; see premium.css. */ /* animation-duration is written at runtime from --mq-speed. The 40s that used to be pinned here made this loop run at 45.4 px/s on the six pages carrying the 12-mark roster and 37.6 px/s on the other 39, because the duration was fixed while the roster was not. Speed, not duration, is the thing the eye compares between two loops. */ /* min-height, not height: the emblem band of the optical scale table caps a square mark at 45-48px, and a fixed 40px box would CLIP it if one were ever added to the marquee roster. min-height keeps the 40px rhythm for the current wordmark roster and lets the track grow instead of cropping. */ .trust-mq__item { flex: none; display: flex; align-items: center; justify-content: center; min-height: 40px; margin-inline: clamp(18px, 3vw, 44px); } /* Box comes from the optical scale table at the foot of this file. */ /* ---- LOGO TREATMENT — one rule, measured per pixel, not judged by eye ------- `grayscale(1)` + an opacity knock-down is a treatment that assumes every mark is dark. It is not. Measured per pixel over the real cream band, the old grayscale(1)/opacity .74 put ZERO ink above 3:1 for settly, bijles, clairify and phantombuster, and 8-19% for activecampaign and wind-energy, while breachlock and curioinvest sat at 86-93%. Two failure modes were hiding in one rule: light BRAND marks greyscale to a light tone, and several assets (activecampaign 73% of ink, hubspot 43%, phantombuster 35%) are WHITE-ink files meant for a dark surface. Desaturating and then DARKENING fixes both, because it maps every mark, light or dark, brand-coloured or white, into the same narrow ink band — which is also what "all the logos should look uniform" asks for. Measured across the whole 23-mark roster on all four surfaces the loop paints on (#FEF3C7, #FFF7ED, #F1F5F9, #FFFFFF): the worst mark now puts 95% of its ink at >=3:1, against a previous floor of 0%. Re-run the per-pixel test before changing the 0.55, and before adding any mark to the roster. *** SUPERSEDED 02.08 by figures.css section 9, which sets brightness(0) at opacity .72 for BOTH loops and for the /resources/ plate tiles. The 0.55 measurement above is kept as the record of why a single flat ink is the right shape of answer; it is NOT the live value and this rule no longer declares one. Do not re-add a filter here: a second declaration of the same property is how the plate tiles ended up a scroll away from the same marks in a different ink. */ @media (max-width: 860px) { .trust-mq__item { margin-inline: 14px; min-height: 34px; } } @media (prefers-reduced-motion: reduce) { .trust-mq__track { animation: none !important; } .trust-mq { -webkit-mask-image: none; mask-image: none; overflow-x: auto; } } /* ============================================================ v3 — PROGRESSIVE-FLOW ARROWS on sequential sections His highlighted rule (Feedback p.2): "All sections on any page - if it is sequential flow (one after another) add some graphical elements that depicts progressive flow in visual". On that page he hand-drew ARROWS between Diagnose > Design > Build > Optimise. The rail was a dashed line with no direction; these are the arrowheads he drew. ============================================================ */ .journey-step { --jarrow: var(--color-primary); } .journey-step:not(:last-child)::after { /* arrowhead into the next step */ content: ""; position: absolute; z-index: 2; top: 34px; right: -9px; transform: translateY(-50%) rotate(45deg); width: 13px; height: 13px; border-top: 3px solid var(--jarrow); border-right: 3px solid var(--jarrow); border-radius: 2px; } /* ------------------------------------------------------------ FINAL FEEDBACK, ITEM 9 — "make the visual look more progressive and the flow tangible". What he was looking at: a 2px near-white dashed rule with one 9px chevron floating mid-span. At the rendered scale the four steps read as four unrelated tiles, because the only thing joining them was invisible and the only thing that changed from step 1 to step 4 was the digit in the badge. THE SHAPE TEST, applied. The geometry now carries the argument on its own, without reading a word: - the rail is a 5px TRACK, not a hairline, so the row is one object rather than four; - it is cut into one visible SEGMENT PER LEG by hard colour stops, and each leg is a stronger tint of the brand orange than the one before it, so the direction of travel is legible from the colour ramp alone. The stop positions are a function of the node count: 3 legs at 33.3/66.6 for the four-step row, 2 legs at 50 for .journey--3, 4 legs at 25/50/75 for .journey--5, which is where the badge centres actually sit (the rail already spans centre-to-centre, see figures.css); - the arrowheads are 13px at 3px weight in the AA-safe orange ink, so they read on the pale first leg as well as on the saturated last one; - the arrival node is emphasised, so the flow has an end and not just a right-hand edge. Tints of --color-primary-bright #F97316 only. No new hue. ------------------------------------------------------------ */ .journey::before { top: 34px; height: 5px; border-radius: 999px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(249,115,22,0.30) 0%, rgba(249,115,22,0.30) 33.333%, rgba(249,115,22,0.62) 33.333%, rgba(249,115,22,0.62) 66.666%, rgba(249,115,22,1) 66.666%, rgba(249,115,22,1) 100%) !important; } .journey--3::before { background: linear-gradient(90deg, rgba(249,115,22,0.42) 0%, rgba(249,115,22,0.42) 50%, rgba(249,115,22,1) 50%, rgba(249,115,22,1) 100%) !important; } .journey--5::before { background: linear-gradient(90deg, rgba(249,115,22,0.26) 0%, rgba(249,115,22,0.26) 25%, rgba(249,115,22,0.50) 25%, rgba(249,115,22,0.50) 50%, rgba(249,115,22,0.74) 50%, rgba(249,115,22,0.74) 75%, rgba(249,115,22,1) 75%, rgba(249,115,22,1) 100%) !important; } /* The numbers are the sequence, so they have to be readable as one. The chip keeps its orange fill and gains a surface-coloured ring, which separates it from the icon tile it overlaps at every background the component ships on. */ .journey-step .js-badge .js-n { width: 26px; height: 26px; top: -9px; right: -9px; font-size: 13px; box-shadow: 0 0 0 2px var(--color-surface), 0 2px 6px rgba(249,115,22,0.35); } /* Arrival: the last node is where the flow lands. */ .journey-step:last-child .js-badge { border-color: rgba(249,115,22,0.55); box-shadow: 0 6px 18px rgba(249,115,22,0.16); } /* ...but the rule above matches the hover rule in visuals.css at equal specificity and would otherwise win it on cascade order, so the last badge would be the one tile in the row with no hover feedback. Restated here. */ .journey-step:last-child:hover .js-badge { border-color: #d9c9b8; box-shadow: var(--shadow-md); } @media (max-width: 860px) { /* the row becomes a vertical timeline below 860, so the arrow points DOWN and the rail runs between the badges instead of across them. Same treatment, rotated: a solid 4px track, not a dashed hairline. */ .journey-step:not(:last-child)::after { top: auto; bottom: -16px; right: auto; left: 34px; /* the badge is 68px wide at left:0, so its axis is 34 */ transform: translateX(-50%) rotate(135deg); } .journey-step:not(:last-child)::before { left: 32px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, rgba(249,115,22,0.34), rgba(249,115,22,0.9)); } } @media (prefers-reduced-motion: no-preference) { .js .journey.is-in .journey-step:not(:last-child)::after { animation: jarrow 2.4s ease-in-out infinite; } @keyframes jarrow { 0%,100% { opacity:.62; } 50% { opacity:1; } } } /* ============================================================ CLIENT LOGO OPTICAL SCALE TABLE *** SUPERSEDED by the v3.1 block at the foot of this file. *** Sushil ruled against the two-band system in writing (meeting doc item 4: "all the logos should be of same size. For example the covalent logo is small in proportion to other logos"). Every mark now gets an identical 150x46 box, so the per-mark --logo-h rows below are inert. They are kept only as the record of each mark's native pixels and ink ratio, which is still what a re-supplied file has to be checked against. The marks are supplied at native resolution from each company's own domain, so their aspect ratios run from 0.95:1 (a round emblem) to 6.7:1 (a long wordmark). One shared height cap makes a long wordmark read as a thin sliver and an emblem read as oversized, so each mark carries its own height cap. TWO BANDS, because equal AREA is the right target for wordmarks and the wrong one for emblems: 1. WORDMARKS (aspect >= 1.7) hold a constant optical area: h = min(40, sqrt(3300 / aspect)) , w = h * aspect , hard cap w <= 140 Only the height needs a table entry; the width follows from the mark's own aspect ratio and never exceeds 140px, so a long wordmark cannot dominate a row of compact marks. Areas land between 2,931 and 3,369 px2, against 1,882 to 3,733 px2 before. BreachLock is the one mark the 140px width cap binds (2,931 px2, ~11% under the band): that is the cap doing its job on the widest mark in the set, not a miss. 2. ROUND / SQUARE EMBLEMS (aspect < 1.7) are sized by HEIGHT, not area. Equal area would put a 0.95:1 emblem at 57px beside a 21px wordmark and it would read as a badge, not a peer. They sit at 45-48px, about 1.3x the tallest wordmark, which is where a compact mark reads level with a wordmark row. The cap is additionally held at or below the mark's own native height so contain only ever scales DOWN: Wind Energy is 45px because its artwork is 45px tall, not because 45 balanced best. THE RATIOS ARE INK RATIOS, NOT CANVAS RATIOS. Five of the marks shipped with baked-in white padding, so sizing off the canvas sized the padding: Wind Energy's canvas was 2.85:1 but its artwork was 0.96:1 inside it and rendered as a 33x34 smudge, and Covalent's artwork rendered 40% under its intended height. Every file has since been cropped to its artwork (originals kept in _v3-source/logos-untrimmed/), so canvas ratio now equals ink ratio and this table can be read straight off the file dimensions. A NEW MARK MUST BE CROPPED TO ITS ARTWORK BEFORE IT GETS A ROW HERE. object-fit: contain with width/height auto means a mark is only ever scaled DOWN inside its cap, and never squashed when a flex row has to shrink. ============================================================ */ /* --logo-unit is declared on :root, not just on the strips, so a mark dropped into any other context still resolves a cap instead of falling back to none and painting at its native 1549px. */ :root { --logo-unit: 1px; } @media (max-width: 860px) { .trust-logos, .trust-mq { --logo-unit: 0.82px; } } .trust-logos img, .trust-mq__item img { --logo-h: 34; --logo-w: 140; width: auto; height: auto; max-height: calc(var(--logo-h) * var(--logo-unit, 1px)); max-width: calc(var(--logo-w) * var(--logo-unit, 1px)); object-fit: contain; } /* band 1 - wordmarks, constant area, in descending aspect ratio. native px / ratio / drawn */ img[src*="/logos/breachlock.png"] { --logo-h: 21; } /* 1337x200 6.68 140x21 */ img[src*="/logos/curioinvest.png"] { --logo-h: 23; } /* 1154x192 6.01 138x23 */ img[src*="/logos/cogoport.png"] { --logo-h: 26; } /* 1089x224 4.86 126x26 */ img[src*="/logos/coflo.png"] { --logo-h: 27; } /* 858x186 4.61 125x27 */ img[src*="/logos/everynet.svg"] { --logo-h: 30; } /* 180x40 4.50 135x30 VECTOR */ img[src*="/logos/covalent.png"] { --logo-h: 28; } /* 119x29 4.10 115x28 */ img[src*="/logos/settly.png"] { --logo-h: 32; } /* 1549x480 3.23 103x32 */ img[src*="/logos/peddler.png"] { --logo-h: 32; } /* 800x256 3.12 100x32 */ img[src*="/logos/quantamix.png"] { --logo-h: 34; } /* 376x129 2.91 99x34 */ img[src*="/logos/leapest.png"] { --logo-h: 35; } /* 250x90 2.78 97x35 */ img[src*="/logos/edcast.png"] { --logo-h: 36; } /* 1206x511 2.36 85x36 */ img[src*="/logos/bijles.png"] { --logo-h: 37; } /* 300x125 2.40 89x37 */ img[src*="/logos/enar.png"] { --logo-h: 40; } /* 411x240 1.71 69x40 */ /* band 2 - round / square emblems, sized by height. Each cap is <= the mark's own native height, so contain still only ever scales DOWN. */ img[src*="/logos/clairify.png"] { --logo-h: 48; } /* 128x128 1.00 48x48 */ img[src*="/logos/wind-energy.png"] { --logo-h: 45; } /* 160x160 1.00 45x45 */ /* 05.08 - three rows above carried the pre-02.08 native sizes (everynet 173x47, leapest 104x38, clairify 59x62, wind-energy 43x45) after those files were re-supplied. The block is inert, but it is declared as the record a re-supplied file is checked against, so a stale row is a trap. Measured off the shipped files this session. */ /* Covalent, Leapest and Wind Energy are retired brands whose only surviving artwork is small, so they draw at roughly 1:1 and go soft on a 2x display. Nothing to fix in CSS; they need re-supplied files. Wind Energy is the limit case: its cap IS its native height, so it cannot be enlarged any further without upscaling, and it stays the smallest mark in any row it sits in. */ /* ========================================================================== HubSpot form embeds (item 16) -------------------------------------------------------------------------- The form cards render Sushil's own HubSpot forms. HubSpot ships its own markup and its own class names, so everything below is a skin: the embedded form has to be indistinguishable from the hand-built one it replaces. ========================================================================== */ /* Shell. Hidden until the loader decides the embed is the one to show. */ .hs-embed[hidden] { display: none; } .hs-embed { display: block; } .hs-embed__head { margin-bottom: var(--space-6); } .hs-embed__head h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .hs-embed__head .hint { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 4px; } .hs-embed__status { font-size: var(--fs-sm); color: var(--color-text-muted); } /* Skeleton while HubSpot paints, so the card never collapses to nothing. */ .hs-embed__target { min-height: 220px; } .hs-embed.is-ready .hs-embed__target { min-height: 0; } /* NO HEIGHT FLOOR WHILE LOADING. The previous build held an unpainted frame open at 620px, which is the empty white card in his v3.1 feedback: the frame existed, so the loader called it painted, and the floor gave it the height to look like a form. Nothing here may give an empty frame height, because the loader's paint test would then be reading this stylesheet's own work. .has-frame is added only AFTER HubSpot has reported a real height itself. */ .hs-embed .hs-form-frame { width: 100%; } .hs-embed.has-frame .hs-form-frame iframe { width: 100%; border: 0; display: block; } /* Neutralise the site's own .input rule: HubSpot uses .input as a WRAPPER div around each control, which would otherwise draw a second bordered box. */ .hs-embed .hs-form-field > .input { border: 0; background: none; padding: 0; border-radius: 0; box-shadow: none; width: auto; } .hs-embed .hs-form { font-family: var(--font-body); } .hs-embed .hs-form-field { margin-bottom: var(--space-4); } .hs-embed .hs-form-field > label { font-size: var(--fs-sm); font-weight: 600; display: block; margin-bottom: 7px; color: var(--color-text); } .hs-embed .hs-form-required { color: var(--color-error); margin-left: 2px; } .hs-embed .hs-field-desc { font-size: var(--fs-xs); color: var(--color-text-muted); margin: 0 0 7px; padding: 0; float: none; display: block; } .hs-embed .hs-input { font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text); padding: 11px 13px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s; width: 100%; max-width: 100%; box-sizing: border-box; } .hs-embed .hs-input:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px var(--color-primary-soft); } .hs-embed textarea.hs-input { resize: vertical; min-height: 120px; } .hs-embed select.hs-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; } .hs-embed .hs-input[type="checkbox"], .hs-embed .hs-input[type="radio"] { width: auto; accent-color: var(--color-primary); margin-right: 8px; } .hs-embed .inputs-list { list-style: none; padding: 0; margin: 0; } .hs-embed .inputs-list > li { margin: 0 0 6px; } .hs-embed .hs-form-booleancheckbox-display, .hs-embed .hs-form-checkbox-display, .hs-embed .hs-form-radio-display { display: flex; align-items: flex-start; gap: 4px; font-size: var(--fs-sm); color: var(--color-text-muted); font-weight: 400; } /* Legal consent / rich text blocks */ .hs-embed .hs-richtext, .hs-embed .legal-consent-container { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); } .hs-embed .hs-richtext p { margin: 0 0 8px; } /* Validation messages */ .hs-embed .hs-error-msgs { list-style: none; padding: 0; margin: 6px 0 0; } .hs-embed .hs-error-msg, .hs-embed .hs-main-font-element { font-size: var(--fs-sm); color: var(--color-error); font-weight: 500; } .hs-embed .hs-input.invalid { border-color: var(--color-error); } /* Submit button — matches .btn.btn--primary.btn--lg.btn--block */ .hs-embed .hs_submit { margin-top: var(--space-8); } .hs-embed .hs_submit .actions { padding: 0; margin: 0; } .hs-embed .hs-button { display: block; width: 100%; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1; padding: 15px 26px; border-radius: var(--radius-sm); border: 1.5px solid transparent; background: var(--color-primary); color: #fff; box-shadow: var(--shadow-xs); cursor: pointer; text-align: center; transition: background-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease); } .hs-embed .hs-button:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-primary); } .hs-embed .hs-button:active { transform: translateY(1px); } .hs-embed .hs-button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* HubSpot's own inline thank-you, styled like .form-success */ .hs-embed .submitted-message { text-align: center; padding: var(--space-8) var(--space-4); font-size: var(--fs-body); color: var(--color-text); } @media (max-width: 600px) { .hs-embed .hs-form-field { margin-bottom: var(--space-4); } } /* -------------------------------------------------------------------------- The current HubSpot loader paints into a shadow root on .hs-form-frame, where a stylesheet in the page cannot reach it — hubspot-embed.js pushes the same skin in there. These rules cover the case where it paints into the light DOM instead, so the form looks the same either way. -------------------------------------------------------------------------- */ .hs-embed .hsfc-Form, .hs-embed .hsfc-Step { font-family: var(--font-body); color: var(--color-text); } .hs-embed .hsfc-FieldGroup, .hs-embed .hsfc-Row { margin-bottom: var(--space-4); } .hs-embed .hsfc-FieldLabel, .hs-embed .hsfc-Label { font-size: var(--fs-sm); font-weight: 600; display: block; margin-bottom: 7px; color: var(--color-text); } .hs-embed .hsfc-TextInput, .hs-embed .hsfc-EmailInput, .hs-embed .hsfc-PhoneInput, .hs-embed .hsfc-NumberInput, .hs-embed .hsfc-TextareaInput, .hs-embed .hsfc-DropdownInput { font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text); padding: 11px 13px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); width: 100%; max-width: 100%; box-sizing: border-box; } .hs-embed .hsfc-TextInput:focus, .hs-embed .hsfc-EmailInput:focus, .hs-embed .hsfc-TextareaInput:focus, .hs-embed .hsfc-DropdownInput:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px var(--color-primary-soft); } .hs-embed .hsfc-TextareaInput { resize: vertical; min-height: 120px; } .hs-embed .hsfc-ErrorAlert, .hs-embed .hsfc-FieldError { font-size: var(--fs-sm); color: var(--color-error); font-weight: 500; } .hs-embed .hsfc-RichText, .hs-embed .hsfc-Description { font-size: var(--fs-sm); color: var(--color-text-muted); } .hs-embed .hsfc-Button { display: block; width: 100%; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1; padding: 15px 26px; border-radius: var(--radius-sm); border: 1.5px solid transparent; background: var(--color-primary); color: #fff; box-shadow: var(--shadow-xs); cursor: pointer; text-align: center; margin-top: var(--space-6); transition: background-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease); } .hs-embed .hsfc-Button:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-primary); } .hs-embed .hsfc-Button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* -------------------------------------------------------------------------- Which form is on screen. One rule decides it, and it is driven by a class that hubspot-embed.js adds to the card the moment that file runs: no .hs-live -> the hand-built form is the form (surfaces with no GUID yet, and the case where the loader itself is blocked) .hs-live -> HubSpot's embed is the form, the hand-built one is hidden .is-fallback -> the embed failed to paint inside 12s, so the hand-built form is restored; it posts to the HubSpot Submissions API with the same GUID, so the lead is still captured Nothing here can hide both: the fallback is only ever hidden by a class that arrives with the script that can also bring it back. -------------------------------------------------------------------------- */ .form-card.hs-live [data-hs-native] { display: none; } .form-card.hs-live [data-hs-native].is-fallback { display: block; } .hs-embed.is-failed { display: none; } /* No JavaScript: neither HubSpot's embed nor the JS-submitted hand-built form can work, so both are hidden and the