/* Shared case-study template, section layers (the references' v1-v16 revisions). Loaded after case-study.css. */ /* ── v1: TrueWholesale case study ── */ /* 40 px tap targets on phones for the links live left at 24 px (breadcrumb, stack names, store and message links) */ @media (max-width: 767px) { main a.min-h-6, main a.cs-textlink { display: inline-flex; align-items: center; min-height: 40px; } } /* ── v2: TrueWholesale case study ── */ .tw2-fix { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #F3FAF6; border: 1px solid rgba(0, 116, 74, .18); box-shadow: inset 3px 0 0 #00B26B; } .tw2-fix__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #00744A; } .tw2-fix b { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: #111; } .tw2-fix p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: rgba(0, 0, 0, .72); } .tw2-line b, .tw2-carry b { font-weight: 600; } /* "What Provis built" box: from 768px the TrueWholesale look, a full green outline with a check (phones keep the left bar) */ @media (min-width: 768px) { .tw2-fix { position: relative; padding: 16px 18px 16px 52px; border-radius: 16px; border-color: rgba(0, 178, 107, .28); box-shadow: none; } .tw2-fix::before { content: ""; position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; background: url("../img/ecommerce/icon-check.svg") center / contain no-repeat; } .tw2-fix__label { letter-spacing: .12em; color: #007A4A; } .tw2-fix b { font-size: 17px; line-height: 1.35; } .tw2-fix p { color: rgba(0, 0, 0, .75); } } /* notes under the phases: one white panel, each note a soft row with a check, like TrueWholesale's panels */ .tw2-lines { display: grid; gap: 10px; margin: 16px 0 0; padding: 16px; list-style: none; border-radius: 20px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); } @media (min-width: 768px) { .tw2-lines { margin-top: 20px; padding: 20px; } } .tw2-lines .tw2-line { position: relative; max-width: none; padding: 14px 16px 14px 50px; border-radius: 14px; background: #F6F8F7; font-size: 15px; line-height: 1.6; color: rgba(0, 0, 0, .75); } .tw2-lines .tw2-line::before { content: ""; position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; background: url("../img/ecommerce/icon-check.svg") center / contain no-repeat; } .tw2-lines .tw2-line b { color: #111; } @media (max-width: 767px) { .tw2-lines { gap: 8px; padding: 8px; border-radius: 18px; } .tw2-lines .tw2-line { padding: 12px 14px 12px 44px; } .tw2-lines .tw2-line::before { left: 14px; top: 13px; width: 20px; height: 20px; } } .tw2-carry { color: rgba(255, 255, 255, .78); max-width: 42rem; } /* closing CTA: the "carries over" note as a card with an icon */ .cs-carry { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; max-width: 42rem; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(78, 211, 156, .22); background: linear-gradient(135deg, rgba(0, 178, 107, .14), rgba(255, 255, 255, .03)); } .cs-carry .tw2-carry { margin-top: 0; } .cs-carry .tw2-carry + .tw2-carry { margin-top: 8px; } .cs-carry__icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 178, 107, .18) url("../img/founder/icon-sparkles.svg") center / 20px no-repeat; border: 1px solid rgba(78, 211, 156, .35); } .cs-cta__h { max-width: 15em; } @media (min-width: 1024px) { .cs-cta__h { font-size: 42px; line-height: 1.12; } } @media (min-width: 1280px) { .cs-cta-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; } } .tw2-carry b { color: #fff; } @media (max-width: 639px) { .tw2-see { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; } } /* light-background "See it live" lines (CYB Wear, Karb-Tech, Emploi Retraite): label, then the links as pills */ .tw9-see { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .tw9-see > span:first-child { margin-right: 2px; color: rgba(0, 0, 0, .65); } .tw9-live { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .14); background: #fff; font-size: 14px; font-weight: 600; color: #111; text-decoration: none; transition: border-color .2s, color .2s; } .tw9-live:hover { border-color: #00B26B; color: #007A4A; } .tw9-live:focus-visible { outline: 2px solid #007A4A; outline-offset: 3px; } @media (max-width: 639px) { .tw9-see > span:first-child { flex-basis: 100%; } .tw9-live { flex: 1 1 auto; justify-content: center; min-height: 44px; } } /* ── v3: TrueWholesale case study ── */ .tw3-client { display: flex; align-items: center; gap: 12px; } .tw3-client img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 1px solid rgba(255, 255, 255, .25); flex: none; } .tw3-client span { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .78); } .tw3-client b { display: block; font-weight: 600; color: #fff; } /* one white card: eyebrow, the three labelled columns (hairline dividers from 1024px), the facts under a hairline */ .tw3-glance { padding: 22px 20px; border-radius: 24px; border: 1px solid rgba(0, 0, 0, .1); background: #fff; } @media (min-width: 768px) { .tw3-glance { padding: 32px 36px; } } .tw3-psr { display: grid; gap: 20px; margin: 18px 0 0; padding: 0; list-style: none; } .tw3-psr__k { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #FEECEB; color: #B42318; border: 1px solid rgba(222, 75, 71, .3); } .tw3-psr__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .tw3-psr--solution .tw3-psr__k { background: #EAF7F0; color: #007A4A; border-color: rgba(0, 178, 107, .35); } .tw3-psr--result .tw3-psr__k { background: #007A4A; color: #fff; border-color: #007A4A; } .tw3-psr p { margin-top: 12px; font-size: 17px; line-height: 1.55; color: rgba(0, 0, 0, .8); } .tw3-psr--result p { font-weight: 600; color: #111; } @media (min-width: 1024px) { .tw3-psr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .tw3-psr li { padding: 0 32px; border-left: 1px solid rgba(0, 0, 0, .1); } .tw3-psr li:first-child { padding-left: 0; border-left: 0; } .tw3-psr li:last-child { padding-right: 0; } } .tw3-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin: 24px 0 0; padding-top: 22px; border-top: 1px solid rgba(0, 0, 0, .1); } @media (min-width: 1024px) { .tw3-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 32px; margin-top: 32px; padding-top: 28px; } } .tw3-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .6); } .tw3-facts dd { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: #111; } /* a word longer than its box (a domain like "(practiceppeexams.ca)" on a 360px phone) wraps inside it instead of pushing the page sideways */ .cs-tws :is(p, dd, dt, li, h2, h3, h4, figcaption, blockquote) { overflow-wrap: break-word; } /* phones: label beside value, one row per fact, on a soft tinted panel */ @media (max-width: 639px) { .tw3-facts { grid-template-columns: 1fr; gap: 0; margin-top: 22px; padding: 4px 16px; border-top: 0; border-radius: 16px; background: #F6F8F7; } .tw3-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid rgba(0, 0, 0, .07); } .tw3-facts > div:first-of-type { border-top: 0; } .tw3-facts dt { padding-top: 2px; font-size: 11px; } .tw3-facts dd { margin: 0; font-size: 14px; } } .tw3-res { font-size: 15px; font-weight: 600; color: #007A4A; } /* ── v4: TrueWholesale case study ── */ @media (min-width: 640px) { .tw3-facts { grid-auto-flow: row dense; } .tw3-facts > .tw4-wide { grid-column: span 2; } } @media (min-width: 1024px) { section[aria-labelledby="cs-cta"] .cs-btn-secondary { padding-left: 20px; padding-right: 20px; } } /* ── v7: TrueWholesale case study ── */ .tw7-formcard { background: #fff; color: #111; border-radius: 20px; padding: 22px 20px; } @media (min-width: 768px) { .tw7-formcard { padding: 28px; } } h3.cs-hd, h4.cs-hd { margin-bottom: 0; font-weight: 700; line-height: inherit; } /* a heading that looks like the bold text it replaced */ h3.cs-label { margin-bottom: 0; } .tw7-formcard__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: #111; } .tw7-field { margin-top: 14px; } .tw7-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #111; } .tw7-field label span { margin-left: 5px; font-weight: 400; color: rgba(0, 0, 0, .62); } .tw7-labelrow { display: flex; align-items: baseline; justify-content: space-between; } .tw7-labelrow label { margin-bottom: 6px; } .tw7-count { font-size: 12px; color: rgba(0, 0, 0, .62); } .tw7-field input, .tw7-field textarea { display: block; width: 100%; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 12px; background: #fff; color: #111; font: inherit; font-size: 16px; } .tw7-field input { height: 48px; padding: 0 14px; } .tw7-field textarea { padding: 12px 14px; resize: vertical; min-height: 110px; } .tw7-field input::placeholder, .tw7-field textarea::placeholder { color: #6b7076; } .tw7-field input:focus, .tw7-field textarea:focus { outline: none; border-color: #00744A; box-shadow: 0 0 0 3px rgba(0, 178, 107, .3); } .tw7-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 18px; border: 0; border-radius: 14px; background: #00B26B; color: #04150D; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; } .tw7-submit:hover { background: #00A060; } .tw7-submit:focus-visible { outline: 3px solid #04150D; outline-offset: 2px; } .tw7-note { margin-top: 14px; text-align: center; font-size: 13px; color: rgba(0, 0, 0, .65); } @media (min-width: 1024px) { .tw7-hero > .grid > .cs-reveal:first-child { align-self: start; } } /* text column level with the chips, not sunk to the screenshots' baseline */ .tw7-hero { padding-top: 84px !important; } /* clears the fixed header, as .cs-hero-in does on TrueWholesale */ @media (min-width: 768px) { .tw7-hero { padding-top: 112px !important; } } @media (min-width: 1024px) { .tw7-hero { padding-top: 120px !important; } } /* client line: logo | divider | photo + name; logo on its own line on phones */ .tw7-client { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; } .tw7-person { display: flex; align-items: center; gap: 12px; } .tw3-client img.tw7-logo { display: block; width: 168px; height: auto; border: 0; border-radius: 0; object-fit: contain; } .tw7-sep { width: 1px; height: 36px; background: rgba(255, 255, 255, .25); } @media (max-width: 639px) { .tw7-logo-wrap { flex-basis: 100%; } .tw7-sep { display: none; } .tw3-client img.tw7-logo { width: 150px; } } #cs-form { scroll-margin-top: 140px; } /* clears the fixed header, as on TrueWholesale (96px left the form's top under it) */ /* the CTA card clips without becoming a scroll container, so #cs-form scrolls the page, not the card */ .cs-tws .cs-ctacard { overflow: clip; } .tw7-link { color: #007A4A; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(0, 122, 74, .35); } .cs-arrow { display: inline-block; text-decoration: none; } /* a link's trailing arrow is never underlined */ .tw7-link:hover { text-decoration-color: currentColor; } .cs-ctacard .tw7-link, .tw7-hero .tw7-link { text-decoration-color: currentColor; } /* on the dark bands the green tint would vanish */ .tw7-eyebrow-link { color: #4ED39C; text-decoration: none; transition: color .2s; } /* as TrueWholesale's hero badge: green, no underline */ .tw7-eyebrow-link:hover { color: #8FE3BF; } .tw7-eyebrow-link:focus-visible { outline: 2px solid #4ED39C; outline-offset: 3px; border-radius: 4px; } /* primary button arrow drawn in the label's colour, as on TrueWholesale (was a white image next to dark text) */ .cs-btn__arrow { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("../img/ecommerce/icons/btn-arrow.svg") center / contain no-repeat; mask: url("../img/ecommerce/icons/btn-arrow.svg") center / contain no-repeat; transition: transform .2s; } a:hover .cs-btn__arrow { transform: translateX(2px); } @media (max-width: 767px) { .tw3-facts .tw7-link { display: inline; } /* inline-block put the comma or full stop after a link on a line of its own (CW-08, TV-09) */ .tw7-eyebrow-link { display: inline-block; padding: 14px 0; margin: -14px 0; } } /* ── v9: TrueWholesale case study ── */ .tw7-field input, .tw7-field textarea { scroll-margin-top: 96px; } /* "Where it is today": the dark band (figures, and the "See it live" links in its footer; with no figures a slim strip of just the links) as on TrueWholesale */ .cs-stats { position: relative; overflow: hidden; margin-top: 32px; border-radius: 24px; background: #050806; color: #fff; border: 1px solid rgba(255, 255, 255, .08); } .cs-stats::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 0% 0%, rgba(0, 178, 107, .28), transparent 60%), radial-gradient(50% 100% at 100% 100%, rgba(0, 178, 107, .16), transparent 65%); } @media (min-width: 768px) { .cs-stats { margin-top: 40px; } } .cs-stats__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin: 0; padding: 26px 20px; } @media (min-width: 640px) { .cs-stats__grid { grid-template-columns: repeat(min(var(--n, 3), 3), minmax(0, 1fr)); padding: 32px 32px; } } @media (min-width: 1280px) { .cs-stats__grid { grid-template-columns: repeat(min(var(--n, 6), 6), minmax(0, 1fr)); gap: 0; padding: 40px 16px; } .cs-stats__item { padding: 0 24px; border-left: 1px solid rgba(255, 255, 255, .1); } .cs-stats__item:first-child { border-left: 0; } } .cs-stats__num { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; } @media (min-width: 768px) { .cs-stats__num { font-size: 40px; } } .cs-stats__label { margin-top: 10px; font-size: 14px; line-height: 1.4; color: #8FE3BF; } .cs-stats__live { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); } .cs-stats--slim .cs-stats__live { border-top: 0; } @media (min-width: 640px) { .cs-stats__live { padding: 18px 32px; } } @media (min-width: 1024px) { .cs-stats__live { padding: 18px 40px; } } .cs-stats__see { margin-right: 4px; font-size: 14px; color: rgba(255, 255, 255, .7); } .cs-livebtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; transition: background-color .2s, border-color .2s, transform .2s; } .cs-livebtn img { width: 18px; height: 18px; object-fit: contain; } .cs-livebtn:hover { border-color: #00B26B; background: rgba(0, 178, 107, .18); transform: translateY(-1px); } .cs-livebtn:focus-visible { outline: 2px solid #4ED39C; outline-offset: 3px; } @media (max-width: 639px) { /* phones: the label, then one full-width button per link, equal gaps */ .cs-stats__live { display: grid; gap: 10px; } .cs-stats__see { margin: 0 0 2px; } .cs-livebtn { width: 100%; min-height: 44px; } } .tw9-mbar { position: fixed; left: 0; right: 0; bottom: var(--cs-cookie-h, 0px); z-index: 40; /* case-study.js sets --cs-cookie-h while the cookie banner is showing */ display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #000; border-top: 1px solid rgba(255,255,255,.12); transform: translateY(calc(110% + var(--cs-cookie-h, 0px))); transition: transform .25s ease; } /* fully off-screen whatever the lift */ .tw9-mbar.on { transform: none; } .tw9-mbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; font-weight: 600; font-size: 15px; text-decoration: none; } .tw9-mbar__call { flex: 1; background: #00B26B; color: #04150D; } .tw9-mbar__wa { padding: 0 16px; border: 1px solid rgba(255,255,255,.4); color: #fff; } @media (max-width: 767px) { .tw9-mbar { display: flex; } } @media (prefers-reduced-motion: reduce) { .tw9-mbar { transition: none; } } /* ── v10: TrueWholesale case study ── */ .tw10-client { margin-top: 18px; } @media (min-width: 1024px) { .tw10-client { margin-top: 22px; } } /* ── v13: TrueWholesale case study ── */ .tw13-after { display: grid; overflow: hidden; border-radius: 24px; border: 1px solid rgba(0, 0, 0, .1); background: #fff; } /* the card: tinted run column, padded white "how" column, no gap (as TrueWholesale's .cs-after) */ .tw13-after__run { padding: 24px 20px; background: #F6F9F7; } .tw13-after__how { padding: 24px 20px; border-top: 1px solid rgba(0, 0, 0, .08); } @media (min-width: 768px) { .tw13-after__run, .tw13-after__how { padding: 32px 36px; } } @media (min-width: 1024px) { .tw13-after { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .tw13-after__run { padding: 40px; } .tw13-after__how { padding: 40px; border-top: 0; border-left: 1px solid rgba(0, 0, 0, .08); } } /* run column: icon rows on the tint; one row may be the green highlighted line */ .tw13-after__run .cs-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid rgba(0, 0, 0, .08); } .tw13-after__run .cs-row:first-of-type { margin-top: 22px; } .tw13-after__run .cs-row p { font-size: 15px; } .cs-row__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid rgba(0, 178, 107, .25); } .cs-row__icon::before { content: ""; width: 20px; height: 20px; background: #00B26B; -webkit-mask: url("../img/mvp-estimate/check.svg") center / contain no-repeat; mask: url("../img/mvp-estimate/check.svg") center / contain no-repeat; } .cs-row--accent { align-items: center; margin-top: 6px; padding: 14px 16px !important; border: 0 !important; border-radius: 14px; background: #007A4A; } .cs-row--accent p { font-weight: 600; color: #fff !important; } .cs-row--accent .cs-row__icon { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); } .cs-row--accent .cs-row__icon::before { background: #fff; -webkit-mask-image: url("../img/ecommerce/icons/ec-step-shield-check.svg"); mask-image: url("../img/ecommerce/icons/ec-step-shield-check.svg"); } /* the column heading is the link to How We Work */ .cs-after__hww { display: inline; font-size: 20px; font-weight: 600; line-height: 1.3; color: #111; text-decoration: none; } .cs-after__hww::after { content: ""; display: inline-block; margin-left: 8px; vertical-align: -2px; width: 18px; height: 18px; background: #007A4A; -webkit-mask: url("../img/ecommerce/icons/arrow-up-right.svg") center / 1.6em no-repeat; mask: url("../img/ecommerce/icons/arrow-up-right.svg") center / 1.6em no-repeat; transition: transform .2s; } .cs-after__hww:hover { color: #007A4A; } .cs-after__hww:hover::after { transform: translate(2px, -2px); } .cs-after__hww:focus-visible { outline: 2px solid #007A4A; outline-offset: 3px; border-radius: 4px; } @media (min-width: 768px) { .cs-after__hww { font-size: 22px; } } /* the promises: round check badge, bold promise, one grey line, hairline above each row */ .tw13-list { display: grid; margin: 20px 0 0; padding: 0; list-style: none; } .tw13-list li { position: relative; padding: 16px 0 16px 40px; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, .65); } .tw13-list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: #EAF7F0; } .tw13-list li::after { content: ""; position: absolute; left: 0; top: 16px; width: 26px; height: 26px; background: #007A4A; -webkit-mask: url("../img/mvp-estimate/check.svg") center / 14px no-repeat; mask: url("../img/mvp-estimate/check.svg") center / 14px no-repeat; } .tw13-list b { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 600; color: #111; } /* IST: its own tinted strip at the end, clock instead of a check */ .tw13-list li.cs-runlist__clock { margin-top: 8px; padding: 14px 16px 14px 52px; border: 0; border-radius: 14px; background: #F6F9F7; } .tw13-list li.cs-runlist__clock::before { left: 14px; top: 15px; background: #fff; border: 1px solid rgba(0, 178, 107, .25); width: 24px; height: 24px; } .tw13-list li.cs-runlist__clock::after { left: 14px; top: 15px; width: 26px; height: 26px; -webkit-mask-image: url("../img/how-we-work/icon-clock.svg"); mask-image: url("../img/how-we-work/icon-clock.svg"); -webkit-mask-size: 16px; mask-size: 16px; } @media (min-width: 640px) { .tw13-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; } } @media (min-width: 1024px) { .tw13-next { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 1023px) { .tw13-next { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── v14: TrueWholesale case study ── */ .tw13-list li.tw14-wide { grid-column: 1 / -1; } @media (max-width: 767px) { .tw14-hww { display: inline-block; padding: 12px 0; margin: -12px 0; } } /* ── v15: TrueWholesale case study ── */ /* ── v16: TrueWholesale case study ── */ @media (min-width: 768px) { .cs-tws .tw2-fix p .tw7-link, .cs-tws .tw2-line .tw7-link, .cs-tws .hz-proof .tw7-link, .cs-tws .tw13-after__run p .tw7-link, .cs-tws [aria-labelledby="cs-impact"] .cs-small .tw7-link { display: inline-block; padding: 10px 0; margin: -10px 0; } } /* tap target of a link in running copy; phones keep them inline (inline-block pushed the full stop after one onto its own line, TV-09; in-sentence links are exempt from the target-size minimum) */ /* standalone links: at least 24px to hit on tablets and desktop (phones: the 40px rules above); padding + negative margin keeps the layout */ @media (min-width: 768px) { .tw14-hww, .tw7-eyebrow-link, .cs-acs .acs-also__list .tw7-link { display: inline-block; padding: 8px 0; margin: -8px 0; } } /* body copy: a comfortable line length wherever the column is wider than ~72 characters */ @layer base { /* in a layer, below the Tailwind utilities: an explicit max-w-* on the element wins (an unlayered rule beat them all) */ :where(.cs-tws) :where(.tw2-line, .cs-body, .cs-small, .tw14-wide, blockquote p, .acs-also__list li) { max-width: 72ch; } } /* ── form states: the layout's .custom-form-box handler and case-study.js fill .error-help-block ── */ .tw7-field .error-help-block, .tw7-form > .error-help-block { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: #B42318; font-weight: 500; } .tw7-form > .error-help-block { text-align: center; } .tw7-field .error-help-block:empty, .tw7-form > .error-help-block:empty { display: none; } .tw7-field [aria-invalid="true"] { border-color: #B42318 !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); } .tw7-count.is-near { color: #B42318; } .tw7-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(4, 21, 13, .3); border-top-color: #04150D; animation: tw7-spin .7s linear infinite; } .tw7-spinner.d-none, .tw7-spinner:not(.d-none) + svg { display: none; } @keyframes tw7-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .tw7-spinner { animation-duration: 2s; } } /* initials in place of a photo on the client quote */ .cs-mono { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: #04150D; color: #fff; font-weight: 600; font-size: 18px; letter-spacing: .02em; } /* App section: the grid of real screens (cs/app.blade.php) and the lightbox they open in */ .cs-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; } @media (min-width: 768px) { .cs-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } .cs-shots li { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); background: #fff; box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .45); } .cs-shots img { display: block; width: 100%; height: auto; } .cs-shots span { display: block; padding: 12px 16px; font-size: 14px; line-height: 1.45; color: rgba(0, 0, 0, .7); border-top: 1px solid rgba(0, 0, 0, .06); } .cs-zoomable li { cursor: zoom-in; } .cs-zoomable li:focus-visible, .cs-tws .kt-shot:focus-visible, .cs-tws .sb-zoom:focus-visible, .cs-tws .sb-card-btn:focus-visible { outline: 3px solid #00744A; outline-offset: 3px; } .cs-lightbox { position: fixed; inset: 0; z-index: 100000; /* above the cookie banner (99999) */ display: flex; align-items: flex-start; justify-content: center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 64px 12px 16px; background: rgba(0, 0, 0, .86); } .cs-lightbox[hidden] { display: none; } /* every width: the image fills the dialog width (up to its natural width, set by case-study.js); a tall one scrolls inside the dialog */ .cs-lightbox img.is-wide { width: min(100%, calc((100vh - 80px) * var(--ar))); } /* landscape screens fit the window whole (case-study.js sets .is-wide); portrait ones fill the width and scroll */ .cs-lightbox img { display: block; width: 100%; max-width: min(100%, 1200px); height: auto; margin-block: auto; border-radius: 10px; background: #fff; } .cs-lightbox__close { position: fixed; top: 10px; right: 12px; z-index: 1; width: 48px; height: 48px; border: 2px solid #fff; border-radius: 50%; background: #111; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); } .cs-lightbox__close:focus-visible { outline: 3px solid #00B26B; outline-offset: 3px; } /* Optional slots shared by the studies (see the slot table in template.blade.php) */ .cs-tws .cs-bridge { max-width: 48rem; } /* impact.bridge */ .cs-tws .cs-video { margin-left: auto; } /* quote.video */ @media (max-width: 767px) { .cs-tws .cs-video { display: inline-block; padding: 10px 0; margin: -10px 0; } } .cs-tws .cs-pullquote { font-size: 20px; } /* situation.quote with a byline */ @media (min-width: 768px) { .cs-tws .cs-pullquote { font-size: 26px; } } .cs-tws .cs-pullquote-by { display: block; margin-top: 14px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: rgba(0, 0, 0, .6); } .cs-tws .cs-zoom-hero { margin: 0; padding: 0; list-style: none; } /* hero.zoom: the shot enlarges in the lightbox */ .cs-tws .cs-zoom-hero li { border-radius: 16px; } .cs-tws .cs-herocap { padding: 8px 14px 10px; font-size: 13px; line-height: 1.4; color: rgba(0, 0, 0, .66); background: #fff; border-top: 1px solid rgba(0, 0, 0, .08); } /* hero.caption */ .cs-tws [data-hero-wa] { display: none; } /* hero.wa_phone: "WhatsApp Us" replaces "Send Us a Message" on phones */ @media (max-width: 639px) { .cs-tws [data-hero-wa] { display: inline-flex; } .cs-tws [data-hero-msg] { display: none; } } /* Slots added for the remaining studies (see the slot table in template.blade.php) */ .cs-tws .cs-devices { margin: 0; } /* hero.devices: a bare image, no browser frame */ .cs-tws .cs-devices img { display: block; width: 100%; height: auto; } .cs-tws .cs-stagecap { margin-top: 10px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .72); } /* hero.note, caption of hero.devices */ .cs-tws .cs-stagecap + .tw3-client { margin-top: 12px; } .cs-tws .cs-tile__num--word { font-size: clamp(26px, 3vw, 36px) !important; } /* a word, not a number, in an impact tile */ .cs-tws .cs-tile__num--word-lg { font-size: clamp(30px, 3.2vw, 44px) !important; line-height: 1.1; } /* the larger word size */ @media (min-width: 1024px) { .cs-tws .cs-tile__num--word-lg { font-size: clamp(28px, 2.6vw, 38px) !important; } } .cs-tws .cs-logo-sm { width: 150px !important; height: auto !important; } /* hero client logo (data hero.client.logo[4]) */ @media (max-width: 767px) { .tw13-next.cs-cols-3 { grid-template-columns: minmax(0, 1fr); } } /* three cards: one column or three across, never 2 + 1 */ @media (min-width: 768px) and (max-width: 1023px) { .tw13-next.cs-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .tw13-next.cs-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* read-next: three across (data cta.next_class) */ .cs-tws .cs-chain__step--provis { border-color: rgba(0, 178, 107, .6); background: #E6F7EF; box-shadow: inset 0 4px 0 #00B26B; } /* a step Provis built */ .cs-tws .cs-chain__step--provis .cs-chain__num { background: #00B26B; color: #04150D; } .cs-tws .cs-chain__key--provis { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 4px; background: #E6F7EF; border: 1px solid rgba(0, 178, 107, .6); box-shadow: inset 0 2px 0 #00B26B; vertical-align: -1px; } .cs-tws .cs-nw { white-space: nowrap; } /* [[words]] in rich copy */ .cs-tws .cs-chain__fixref { display: block; margin-top: 2px; font-weight: 600; color: #00744A !important; } /* "Fixed in 01 below" under a step */ .cs-tws .cs-lightlink { color: #6EE7B7 !important; } /* a link on the dark closing card */ @media (min-width: 1024px) { /* column count of a route (chain.class) or the phases (built.chain_class): cs-cols-3 … cs-cols-6 */ .cs-tws .cs-cols-3.cs-chain, .cs-tws .cs-cols-3 .cs-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-tws .cs-cols-4.cs-chain, .cs-tws .cs-cols-4 .cs-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cs-tws .cs-cols-5.cs-chain, .cs-tws .cs-cols-5 .cs-chain { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cs-tws .cs-cols-6.cs-chain, .cs-tws .cs-cols-6 .cs-chain { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* "what could go wrong" box under the phases (built.extra):

+