/* Panelhop design v3: the product look (web/README.md, Design v3; brand/guidelines/visual.md). Loaded last, and only on a page whose document says design: 'v3' (render.mjs renderPage; Base.astro puts data-design="v3" on its body). It restyles site.css's own classes in place, so a page takes the new look without new markup, and changes nothing anywhere else: the blog and every v2 page never load it. The rules: - Every selector starts with :where(body[data-design="v3"]) and then repeats the site.css selector it restyles. :where() adds no specificity, so a rule here beats exactly the site.css rule it mirrors (it comes later) and nothing more specific. A themed site.css rule (.ink .x, .lime-bg .x, .hero .x) still wins over a plain rule here, so where one exists and the v3 look differs, it is restated here with the same theme (test/v3-css.test.mjs; the QA contrast check in scripts/qa-screens.mjs catches a miss). - One family: Figtree. The scope points the serif and mono tokens at it; the deal map (.dm) gets JetBrains Mono back, because lib/dealmap.mjs measures its metrics in it. - Labels are sentence case with a lime dot, never mono capitals (the reset group below lists every site.css rule that sets mono capitals or wide tracking; test/v3-css.test.mjs keeps the list complete). - No report chrome: no exhibit numbers, stickers, source or note lines. The renderers drop them on v3 pages; the rules below that hide them are a safety net. A figure's source is in its tooltip (components.css .fig). */ /* ---------- scope: tokens and fonts ---------- */ :where(body[data-design="v3"]) { --f-serif: var(--f-brand); --f-mono: var(--f-brand); --on-ink-3: var(--on-ink-label); } /* the body's own size and leading (site.css sets them on body, so this needs body's specificity) */ :where(body[data-design="v3"]):is(body) { font-size: var(--t-body); line-height: 1.55; } :where(body[data-design="v3"]) .dm { --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; } /* ---------- base type ---------- */ :where(body[data-design="v3"]) h1 { font-size: var(--t-h1); line-height: .98; letter-spacing: -0.035em; } :where(body[data-design="v3"]) h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.03em; } :where(body[data-design="v3"]) h3 { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.012em; font-weight: 700; } :where(body[data-design="v3"]) h4 { font-size: var(--t-h4); line-height: 1.3; letter-spacing: -0.005em; font-weight: 700; } :where(body[data-design="v3"]) .lede { font-size: var(--t-lede); line-height: 1.5; } :where(body[data-design="v3"]) .num { font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } :where(body[data-design="v3"]) .note { font-size: var(--t-small); line-height: 1.45; } /* quotes, questions and annotations were the serif's: Figtree, upright */ :where(body[data-design="v3"]) .quote { font-weight: 600; letter-spacing: -0.02em; } :where(body[data-design="v3"]) .stage-q { font-style: normal; font-weight: 600; } :where(body[data-design="v3"]) .qw-q p { font-weight: 500; } :where(body[data-design="v3"]) .ind-answer .answer-q { font-style: normal; font-weight: 600; } :where(body[data-design="v3"]) .ch .ann { font-style: normal; font-weight: 500; } :where(body[data-design="v3"]) .ch .lab-sm { letter-spacing: 0; } /* ---------- sections: the v3 rhythm (88–150px, tight 72–110px) ---------- */ :where(body[data-design="v3"]) .section { padding-block: var(--sec); } :where(body[data-design="v3"]) .section-tight { padding-block: var(--sec-tight); } /* the section head's own gap below it (components.css); an industry section's head sits in a stack that spaces it */ /* The gap under a section head is --head-gap (64px at 1440, 40px on a phone), as the mockups draw it. A head in a .stack-lg (40px between its blocks) or a .stack (20px) gives that much of its own margin up, or the two add up (104px at 1440). A side head is beside its blocks from 901px (no margin there); an industry section (below) spaces its head with its stack's gap alone. */ :where(body[data-design="v3"]) :where(section:not(.ind-section)) > .stack-lg > .section-head:is(.head-stack, .head-split) { margin-bottom: calc(var(--head-gap) - 40px); } :where(body[data-design="v3"]) :where(section:not(.ind-section)) > .stack > .section-head:is(.head-stack, .head-split) { margin-bottom: calc(var(--head-gap) - 20px); } @media (max-width: 900px) { :where(body[data-design="v3"]) :where(section:not(.ind-section)) > .stack-lg > .section-head.head-side { margin-bottom: calc(var(--head-gap) - 40px); } :where(body[data-design="v3"]) :where(section:not(.ind-section)) > .stack > .section-head.head-side { margin-bottom: calc(var(--head-gap) - 20px); } } /* A split head from 1240px, where its lede's column already holds the lede's 440px: the lede keeps those 440px at the right, where it was, and the title's column takes the rest, 24px clear of it, so a title that fits there sits on one line as home.html draws it ("Deal size decides the design.": 772px at 1440, its column 780px there). A longer title balances over the lines it had. Below 1240px the 7:5 split stands (components.css). */ @media (min-width: 1240px) { :where(body[data-design="v3"]) .section-head.head-split { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 24px; } } /* A head in a column (services.html's Panel Check, Signal Desk and Panel Ops: a split-even group whose first column starts with the label, the heading and the lede): those three 24px apart, then the column's blocks 40px apart, 48px before the stats, a mock and the buttons; on a phone (home-m.html) 20px and 32px. The weeks under the split sit 80px under it (40px on a phone). Each margin is net of its stack's gap: 20px in the column, 40px in the section. */ :where(body[data-design="v3"]) .split-even > .stack { --col-head: 4px; --col-gap: 20px; --col-gap-l: 28px; } @media (max-width: 560px) { :where(body[data-design="v3"]) .split-even > .stack { --col-head: 0px; --col-gap: 12px; --col-gap-l: 12px; } } :where(body[data-design="v3"]) .split-even > .stack > :is(.eyebrow + h2, h2 + .lede) { margin-top: var(--col-head); } :where(body[data-design="v3"]) .split-even > .stack > .lede ~ * { margin-top: var(--col-gap); } :where(body[data-design="v3"]) .split-even > .stack > .lede ~ :is(.stats, figure, .row) { margin-top: var(--col-gap-l); } :where(body[data-design="v3"]) .stack-lg > .split-even + .weeks { margin-top: clamp(0px, 3.81vw - 14.86px, 40px); } /* two columns (from 901px), as services.html: the Panel Check's scorecard stretches to its text column's height, and Panel Ops' text is centred on its report card (Signal Desk's batch card keeps its own height) */ @media (min-width: 901px) { :where(body[data-design="v3"]) .split-even > .mock-scorecard { align-self: stretch; } :where(body[data-design="v3"]) .split-even:has(> .mock-report) { align-items: center; } } /* Three blocks the mockups set further from the block above them than a section's 40px (each margin net of the .stack-lg's gap, from 0 at 390px, where home-m.html keeps 40px): home.html's founder card 80px under the principles and its problem stats' rule 80px under the head (the head's own gap is 64px), services.html's step strip 64px under the packages. */ :where(body[data-design="v3"]) .stack-lg > .principles + .founder { margin-top: clamp(0px, 3.81vw - 14.86px, 40px); } :where(body[data-design="v3"]) :where(section:not(.ind-section)) > .stack-lg > .section-head + .stats-hero { margin-top: clamp(0px, 1.52vw - 5.94px, 16px); } :where(body[data-design="v3"]) .stack-lg > .packages + .step-strip { margin-top: clamp(0px, 2.29vw - 8.93px, 24px); } :where(body[data-design="v3"]) .ind-section .section-head { margin-bottom: 0; } :where(body[data-design="v3"]) .ind-section .section-head h2 { font-size: var(--t-h2); } :where(body[data-design="v3"]) .ind-section .stack-lg { gap: var(--head-gap); } :where(body[data-design="v3"]) .blog-more .section-head h2 { font-size: var(--t-h2-sm); } /* Ink sections get the dot texture, the one gradient the brand allows, drawn as the deal map's is (site.css .dm) */ :where(body[data-design="v3"]) :is(.section, .section-tight, .hero, .page-hero).ink { position: relative; isolation: isolate; } :where(body[data-design="v3"]) :is(.section, .section-tight, .hero, .page-hero).ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, var(--ink-line-2) 1.1px, transparent 1.7px); background-size: 24px 24px; background-position: 12px 12px; pointer-events: none; } /* ---------- the label: sentence case with a lime dot (replaces the mono eyebrow) ---------- The dot is the eyebrow's own .dot span, or drawn before the words when it has none: lime-deep on paper, lime on ink, ink on lime. */ :where(body[data-design="v3"]) .eyebrow { font-family: var(--f-brand); font-size: var(--t-label); font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text-2); } :where(body[data-design="v3"]) .eyebrow .dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--lime-deep); box-shadow: none; vertical-align: 1px; } :where(body[data-design="v3"]) .eyebrow:not(:has(> .dot))::before { content: ""; display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--lime-deep); box-shadow: none; vertical-align: 1px; } :where(body[data-design="v3"]) .ink .eyebrow { color: var(--on-ink-2); } :where(body[data-design="v3"]) .ink .eyebrow .dot { background: var(--lime); } :where(body[data-design="v3"]) .ink .eyebrow:not(:has(> .dot))::before { background: var(--lime); } :where(body[data-design="v3"]) .lime-bg .eyebrow { color: var(--ink); } /* ink surfaces inside a paper section (a tool's output, a brief's head, the After side, a featured offer) */ :where(body[data-design="v3"]) :is(.tool-out, .brief-top, .ba .after, .offer.feature, .pkg.feature, .panel-ink) .eyebrow { color: var(--on-ink-2); } :where(body[data-design="v3"]) :is(.tool-out, .brief-top, .ba .after, .offer.feature, .pkg.feature, .panel-ink) .eyebrow .dot { background: var(--lime); } :where(body[data-design="v3"]) :is(.tool-out, .brief-top, .ba .after, .offer.feature, .pkg.feature, .panel-ink) .eyebrow:not(:has(> .dot))::before { background: var(--lime); } :where(body[data-design="v3"]) .lime-bg .eyebrow .dot { background: var(--ink); } :where(body[data-design="v3"]) .lime-bg .eyebrow:not(:has(> .dot))::before { background: var(--ink); } /* a label inside a flex row (an answer box) keeps its gap instead of the dot's margin */ :where(body[data-design="v3"]) .answer-box .eyebrow::before { margin-right: 0; } /* the tool strip's lead-in reads as a sentence, without a dot */ :where(body[data-design="v3"]) .stack-strip .eyebrow { color: var(--on-ink-2); } :where(body[data-design="v3"]) .stack-strip .eyebrow::before { content: none; } /* a blog card's illustration (From the blog on an industry page) is ink */ :where(body[data-design="v3"]) .post-thumb-mark .eyebrow .dot { background: var(--lime); } :where(body[data-design="v3"]) .post-thumb-mark .eyebrow:not(:has(> .dot))::before { background: var(--lime); } /* Hero labels are the chip: ink-3 with a lime dot */ :where(body[data-design="v3"]) :is(.hero, .page-hero, .ind-hero) .eyebrow { display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; min-height: 34px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--ink-3); color: var(--on-ink); } :where(body[data-design="v3"]) :is(.hero, .page-hero, .ind-hero) .eyebrow .dot { margin-right: 0; background: var(--lime); } :where(body[data-design="v3"]) :is(.hero, .page-hero, .ind-hero) .eyebrow:not(:has(> .dot))::before { margin-right: 0; background: var(--lime); } /* ---------- the mono-caps reset group ---------- Every site.css rule that sets mono text in capitals or with wide tracking, by the same selector: sentence case, no tracking, Figtree at a size it reads at. Outside it: the deal map (.dm*, which keeps its mono metrics) and the blog's own rules (BLOG_ONLY in test/v3-css.test.mjs). */ :where(body[data-design="v3"]) .chapter-no { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .hero-meta dt { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .hero-rings .ring-label { letter-spacing: 0; text-transform: none; font-weight: 600; } :where(body[data-design="v3"]) .hero-services .no { letter-spacing: 0; text-transform: none; font-weight: 600; } :where(body[data-design="v3"]) .hero-services .start-t { letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .hero-guides-tag { font-size: .8125rem; font-weight: 700; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .exhibit-no { letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .tag { font-family: var(--f-brand); font-size: .8125rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; padding: 4px 10px; background: var(--paper-3); color: var(--ink); } :where(body[data-design="v3"]) .kv dt { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .t th { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .ba dt { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .stage-panel h4 { font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .out-grid dt { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .step .k { font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--lime-deep); } :where(body[data-design="v3"]) .quote-by { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .site-footer h4 { font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--on-ink); } :where(body[data-design="v3"]) .brief-sec h5 { font-size: .8125rem; font-weight: 700; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .week .k { font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .area .n { font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--lime-deep); } :where(body[data-design="v3"]) .cad .k { font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .exhibit-data summary { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); } @media (max-width: 700px) { :where(body[data-design="v3"]) table.t.t-cards td::before { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; } } :where(body[data-design="v3"]) .crumbs ol { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .ind-facts dt { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .orbit-k { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .ring-centre b { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .ring-veto, :where(body[data-design="v3"]) .ring-key span::before { font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .glance-title { font-size: var(--t-h4); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); } :where(body[data-design="v3"]) .glance-table th { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .sm-region { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .sm-table thead th { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .bp-card dt, :where(body[data-design="v3"]) .lm-card dt, :where(body[data-design="v3"]) .tm-card dt { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .lm-stage-k { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; } :where(body[data-design="v3"]) .qw-persona { font-size: .875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-2); } :where(body[data-design="v3"]) .st-table thead th { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } @container (max-width: 900px) { :where(body[data-design="v3"]) .st-table td::before { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; } } :where(body[data-design="v3"]) .ind-measures-k { font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); } :where(body[data-design="v3"]) .tg-k { font-size: .875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--lime-deep); } /* the deal map's own label is the v3 label; its title a v3 heading (the rest of the map keeps its mono metrics) */ :where(body[data-design="v3"]) .dm-eyebrow { font-family: var(--f-brand); font-size: var(--t-label); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--on-ink-2); } :where(body[data-design="v3"]) .dm-eyebrow .dot { width: 8px; height: 8px; } /* its pause is a control, not a metric: Figtree, sentence case, like the mockup's "Pause motion" */ :where(body[data-design="v3"]) .dm-pause { font-family: var(--f-brand); font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } /* mono text without capitals: Figtree through the scope's token; its tracking goes */ :where(body[data-design="v3"]) :is(.field output, .field .out, .formula, .step .dur, .ind-fresh, .legend-list span, .sig-row .d, .sig-row .p, .brief-top .meta, .pkg .price, .stage-tab .n, .tm-n, .st-no, .st-dur, .st-svc span, .bp-titles, .motion-badge .b, .stat .src) { letter-spacing: 0; } :where(body[data-design="v3"]) :is(.hop-path .sub, .hop-card .t1) { letter-spacing: 0; } :where(body[data-design="v3"]) .ind-fresh { font-size: .875rem; } :where(body[data-design="v3"]) .score-ring .meta { text-transform: lowercase; letter-spacing: 0; } :where(body[data-design="v3"]) .score-ring .meta::first-letter { text-transform: uppercase; } :where(body[data-design="v3"]) .tag-lime { background: var(--lime-tint); color: var(--lime-deep); } :where(body[data-design="v3"]) .tag-warn { background: var(--warn-tint); color: var(--warn-text); } :where(body[data-design="v3"]) .ink .tag { background: var(--ink-3); color: var(--on-ink); } :where(body[data-design="v3"]) .ink .tag-warn { background: rgba(194, 65, 12, .18); color: var(--warn-on-ink); } /* a stage tab's number on ink: on-ink-3 (on v3 the 5.7:1 label grey), not the paper's muted grey (3.4:1 there) */ :where(body[data-design="v3"]) .ink .stage-tab:not([aria-selected="true"]) .n { color: var(--on-ink-3); } :where(body[data-design="v3"]) .ind-exhibit .tag, :where(body[data-design="v3"]) .ind-hero .tag, :where(body[data-design="v3"]) .glance .tag { font-size: .8125rem; } :where(body[data-design="v3"]) .dm-note .tag { font-size: .8125rem; } /* ---------- exhibits without the report chrome ---------- No 2px rule over a figure, no number or sticker, no foot: the title states the finding and is the trigger of the source tooltip (render.mjs exhibitHead). The deal map has no note under it, so its frame keeps the note's spacing. */ :where(body[data-design="v3"]) .exhibit { border-top: 0; padding-top: 0; gap: 20px; } :where(body[data-design="v3"]) .exhibit-head { gap: 10px; align-items: flex-start; } :where(body[data-design="v3"]) .exhibit-title { font-family: var(--f-brand); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.012em; } :where(body[data-design="v3"]) .exhibit-no, :where(body[data-design="v3"]) .exhibit-foot, :where(body[data-design="v3"]) .glance-foot, :where(body[data-design="v3"]) .dm-note, :where(body[data-design="v3"]) .stat .src, :where(body[data-design="v3"]) .sources { display: none; } :where(body[data-design="v3"]) :is(.table-wrap, .steps, .weeks, .glance, .st-wrap, .ind-measures, .gl) { border-top: 1px solid var(--line); } :where(body[data-design="v3"]) .ink :is(.table-wrap, .steps, .weeks, .glance, .st-wrap, .ind-measures, .gl) { border-top-color: var(--ink-line); } :where(body[data-design="v3"]) .dm-title { font-family: var(--f-brand); font-weight: 700; font-size: var(--t-h2-sm); line-height: 1.06; letter-spacing: -0.025em; } /* the title's tooltip trigger holds both its lines (.dm-l2 is a block), so its focus ring goes round both */ :where(body[data-design="v3"]) .dm-title .fig { display: inline-block; } :where(body[data-design="v3"]) .dm-frame { padding-bottom: clamp(48px, 9vw, 76px); } :where(body[data-design="v3"]) .dm-frame:has(> .dm-note) { padding-bottom: 0; } @container dmf (min-width: 1400px) { :where(body[data-design="v3"]) .dm-eyebrow { gap: 10px; } :where(body[data-design="v3"]) .dm-frame { padding-bottom: calc(56 * var(--u)); } :where(body[data-design="v3"]) .dm-frame:has(> .dm-note) { padding-bottom: 0; } } /* ---------- buttons: 56px pills (44px small and in the header) ---------- */ :where(body[data-design="v3"]) .btn { min-height: 56px; padding: 14px 26px; font-size: 1.0625rem; line-height: 1.2; } :where(body[data-design="v3"]) .btn-sm { min-height: 44px; padding: 10px 20px; font-size: .9375rem; } :where(body[data-design="v3"]) .header-cta .btn { min-height: 44px; padding: 10px 20px; font-size: .9375rem; } :where(body[data-design="v3"]) .btn-ghost { border-color: var(--line-strong); } :where(body[data-design="v3"]) .ink .btn-ghost { border-color: var(--ink-line-2); } :where(body[data-design="v3"]) .lime-bg .btn-ghost { border-color: var(--ink); color: var(--ink); } :where(body[data-design="v3"]) .lime-bg .btn-ghost:hover { background: rgba(17, 19, 24, .06); } /* the v3 link: no underline, weight 700, an arrow that moves. As wide as its words: a linkArrow block in a column (a section's stack, a group, a grid cell) would stretch to the column's width, all of it a target, its focus ring a bar across the row */ :where(body[data-design="v3"]) .link-arrow { width: fit-content; border-bottom: 0; padding-bottom: 0; font-weight: 700; } :where(body[data-design="v3"]) .link-arrow:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } :where(body[data-design="v3"]) .link-arrow > .ic { flex: none; transition: translate .2s ease; } :where(body[data-design="v3"]) .link-arrow:hover > .ic { translate: 3px 0; } /* ---------- surfaces: cards, panels, tools ---------- */ :where(body[data-design="v3"]) :is(.panel, .offer, .pkg, .brief, .card, .tg-card, .bp-card, .tm-card, .qw-q, .answer-box) { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); } :where(body[data-design="v3"]) .post-card a { background: var(--card); border-radius: var(--r-card); } :where(body[data-design="v3"]) .tool { background: var(--card); border-radius: var(--r-tool); } :where(body[data-design="v3"]) :is(.panel-ink, .ba, .lm-card) { border-radius: var(--r-card); } :where(body[data-design="v3"]) :is(.cad, .stage-panel .moves, .form-status) { border-radius: var(--r-ui); } :where(body[data-design="v3"]) :is(.offer, .pkg) { padding: clamp(24px, 2.6vw, 32px); } :where(body[data-design="v3"]) :is(.offer h3, .pkg h3, .step h3) { font-size: var(--t-h3); } /* on ink and in a featured offer: ink-2 with the ink line */ :where(body[data-design="v3"]) .ink :is(.panel, .card, .tg-card, .qw-q) { background: var(--ink-2); border-color: var(--ink-line); color: var(--on-ink); } :where(body[data-design="v3"]) :is(.offer.feature, .pkg.feature) { background: var(--ink); border-color: var(--ink); } :where(body[data-design="v3"]) .card-list { border-top-color: var(--line); } /* ---------- stats: the big numbers, a line above, no source line (it is the number's tooltip) ---------- */ :where(body[data-design="v3"]) .stats { border-bottom: 0; } :where(body[data-design="v3"]) .stat { gap: 16px; padding: 44px 40px 0 0; } :where(body[data-design="v3"]) .stat + .stat { padding-left: 40px; } :where(body[data-design="v3"]) .stat .n { font-size: var(--t-num-xl); letter-spacing: -0.04em; } :where(body[data-design="v3"]) .stat .n small { font-size: 1em; letter-spacing: inherit; margin-left: 0; } /* a stat's number is set once and lines up with nothing: Figtree's own proportional figures, as the mockups draw them (.num and site.css give tabular ones, which the slider, the calculators and the counters keep as their numbers change) */ :where(body[data-design="v3"]) .stat .n { font-variant-numeric: proportional-nums; } :where(body[data-design="v3"]) .stat p { max-width: 300px; font-size: var(--t-body); line-height: 1.5; color: var(--text-2); } :where(body[data-design="v3"]) .stats:has(> :nth-child(4)) .stat .n { font-size: clamp(4rem, 2.9rem + 3.6vw, 6rem); } :where(body[data-design="v3"]) .ind-section .stat .n { font-size: clamp(3rem, 2.2rem + 3vw, 5rem); } /* A number never runs into the next stat: the row is a container, and its numbers share one size, which fits the row's longest number (render.mjs gives the row that length in characters, --ch; about .62em a character at this weight and tracking) in the narrowest text column the row can have (--col: four columns, two from 1000px down, one from 520px down, less a stat's 40px padding on each side). Without container units the sizes above stand. */ @supports (width: 1cqi) { :where(body[data-design="v3"]) .stats[style*="--ch"] { container-type: inline-size; --col: calc(100cqi / 4 - 80px); } :where(body[data-design="v3"]) .stats[style*="--ch"] .stat .n { font-size: min(var(--t-num-xl), var(--col) / (var(--ch) * .62)); } :where(body[data-design="v3"]) .ind-section .stats[style*="--ch"] .stat .n { font-size: min(clamp(3rem, 2.2rem + 3vw, 5rem), var(--col) / (var(--ch) * .62)); } @media (max-width: 1000px) { :where(body[data-design="v3"]) .stats[style*="--ch"] { --col: calc(100cqi / 2 - 80px); } } @media (max-width: 520px) { :where(body[data-design="v3"]) .stats[style*="--ch"] { --col: 100cqi; } } } @supports (width: 1cqi) { :where(body[data-design="v3"]) .stats[style*="--ch"]:has(> :nth-child(4)) .stat .n { font-size: min(clamp(4rem, 2.9rem + 3.6vw, 6rem), var(--col) / (var(--ch) * .62)); } } /* the hero variant (components.css .stats-hero) keeps three columns down to phones: its numbers fit a third */ @supports (width: 1cqi) { :where(body[data-design="v3"]) .stats.stats-hero[style*="--ch"] { --col: calc(100cqi / 3 - 80px); } @media (max-width: 560px) { :where(body[data-design="v3"]) .stats.stats-hero[style*="--ch"] { --col: 130px; } } } @media (max-width: 1000px) { :where(body[data-design="v3"]) .stat:nth-child(3) { padding-left: 0; } } @media (max-width: 520px) { :where(body[data-design="v3"]) .stat { padding: 32px 0 28px; } :where(body[data-design="v3"]) .stat + .stat { padding-left: 0; } } /* ---------- checklists: a plain tick (lime-deep on paper, lime on charcoal) or a cross, no disc ---------- As the mockups draw them (the services' Panel Check and packages). A package's length and terms (li.pkg-terms, set in its own field, never picked by position): a clock instead of the tick. */ :where(body[data-design="v3"]) .checklist li::before { border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%234C7300' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; } :where(body[data-design="v3"]) :is(.ink, .pkg.feature, .offer.feature, .panel-ink, .tool-out) .checklist li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23B7FF00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :where(body[data-design="v3"]) .checklist.cross li::before { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' fill='none' stroke='%23676A70' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; } :where(body[data-design="v3"]) .ink .checklist.cross li::before { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' fill='none' stroke='%23B4B6B1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } :where(body[data-design="v3"]) .pkg .checklist li.pkg-terms::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%234C7300' stroke-width='1.8'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='%234C7300' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 18px; } :where(body[data-design="v3"]) .pkg.feature .checklist li.pkg-terms::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23B7FF00' stroke-width='1.8'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='%23B7FF00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* semibold, as every checklist in the mockups draws it (services.html's Panel Check at 18px, its packages at 16px, home.html's stage panel at 17px) */ :where(body[data-design="v3"]) .checklist { font-weight: 600; } :where(body[data-design="v3"]) .pkg .checklist { gap: 12px; font-size: 1rem; font-weight: 600; } :where(body[data-design="v3"]) .pkg h3 { font-size: clamp(1.5rem, 1.35rem + .45vw, 1.75rem); } :where(body[data-design="v3"]) .pkg { gap: 16px; padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px); } :where(body[data-design="v3"]) .pkg > .checklist { margin-top: 16px; } :where(body[data-design="v3"]) .pkg p { font-size: var(--t-body); line-height: 1.55; } /* A package's label (Diagnose, Programme): a small bold line with no dot, as services.html draws it (the section head keeps its dotted label). On the featured card it keeps its own colour */ :where(body[data-design="v3"]) .pkg > .eyebrow { font-size: var(--t-small); font-weight: 700; line-height: 1.45; color: var(--muted); } :where(body[data-design="v3"]) .pkg > .eyebrow::before { content: none; } /* ---------- the Panel Check's areas (cardGrid areas: the 32 checks behind "See all 32 checks") ---------- A card per area, as the weeks' below: its kicker lime-deep over its title, then its checks, each after a small lime-deep dot (the label's), in the body grey. Four across, two from 1000px down, one on a phone (site.css), where it shares the weeks' phone padding (below). */ :where(body[data-design="v3"]) .areas { gap: 16px; border: 0; } :where(body[data-design="v3"]) .area { gap: 8px; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); } :where(body[data-design="v3"]) .area h4 { font-size: var(--t-h4); } :where(body[data-design="v3"]) .area ul { gap: 8px; margin-top: 8px; padding-left: 0; list-style: none; font-size: var(--t-small); line-height: 1.45; color: var(--text-2); } :where(body[data-design="v3"]) .area li { position: relative; padding-left: 18px; } :where(body[data-design="v3"]) .area li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep); } :where(body[data-design="v3"]) .ink .area { border-color: var(--ink-line); background: var(--ink-2); } :where(body[data-design="v3"]) .ink .area ul { color: var(--on-ink-2); } :where(body[data-design="v3"]) .ink .area li::before { background: var(--lime); } /* ---------- a week plan and a cadence (cardGrid weeks, cadence) ---------- weeks: a card per week, its kicker lime-deep over its title. cadence: a row per rhythm, its kicker a chip of one width (charcoal with lime words for the highlighted one, is-hl) beside its title; a text, when there is one, under the title. */ :where(body[data-design="v3"]) .weeks { gap: 16px; border-top: 0; } :where(body[data-design="v3"]) .week { gap: 8px; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); } :where(body[data-design="v3"]) .week + .week { padding-left: 28px; border-left: 1px solid var(--line); } :where(body[data-design="v3"]) .week h4 { font-size: var(--t-h4); } :where(body[data-design="v3"]) .ink .week, :where(body[data-design="v3"]) .ink .week + .week { border-color: var(--ink-line); background: var(--ink-2); } /* on a phone a week's card and an area's (the 32 checks opened under the weeks) share one padding, home-m.html's card (26px 24px), so their words line up */ @media (max-width: 520px) { :where(body[data-design="v3"]) :is(.week, .week + .week, .area) { padding: 26px 24px; } } :where(body[data-design="v3"]) .cadence { display: flex; flex-direction: column; gap: 12px; } :where(body[data-design="v3"]) .cad { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; } :where(body[data-design="v3"]) .cad .k { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink); text-align: center; } :where(body[data-design="v3"]) .cad:has(> p) .k { grid-row: 1 / span 2; } :where(body[data-design="v3"]) .cad.is-hl .k { border-color: var(--ink); background: var(--ink); color: var(--lime); } :where(body[data-design="v3"]) .cad h4 { font-size: 1.125rem; font-weight: 600; } :where(body[data-design="v3"]) .cad p { grid-column: 2; margin: 0; color: var(--text-2); } :where(body[data-design="v3"]) .ink .cad .k { border-color: var(--ink-line-2); background: var(--ink-2); color: var(--on-ink); } :where(body[data-design="v3"]) .ink .cad.is-hl .k { border-color: var(--lime); background: var(--lime); color: var(--ink); } :where(body[data-design="v3"]) .ink .cad p { color: var(--on-ink-2); } @media (max-width: 480px) { :where(body[data-design="v3"]) .cad { grid-template-columns: 136px minmax(0, 1fr); } } /* ---------- the stage rail (components.mjs moduleTabs, variant rail; components.js 'tabs') ---------- Choosing a stage moves nothing under the rail: once the tabs tool runs (is-live), every panel sits in one grid cell, so the panels' area keeps the tallest panel's height at each width. The panels that aren't open keep their hidden attribute and stay in the cell unseen: visibility: hidden paints nothing and takes them out of the tab order and of what assistive tech reads, as hidden says (site.css's [hidden] rule is !important, so this one is too). Without JavaScript no panel is hidden and they read one after another, as before. */ :where(body[data-design="v3"]) .mods-rail.is-live > .mod-panels { display: grid; grid-template-columns: minmax(0, 1fr); } :where(body[data-design="v3"]) .mods-rail.is-live > .mod-panels > .mod-panel { grid-area: 1 / 1; align-self: start; } :where(body[data-design="v3"]) .mods-rail.is-live > .mod-panels > .mod-panel[hidden] { display: grid !important; visibility: hidden; } /* ---------- the industry tiles (components.mjs tiles) ---------- Three across (641 to 900px) with one tile over (home's 10: the lime "Another market" last), the last two rows share their width two and two, as the last row does four across (components.css), not a lone tile the row's width: six columns, two to a tile, three to each of the last four. */ @media (min-width: 641px) and (max-width: 900px) { :where(body[data-design="v3"]) .tiles:has(> .tile:last-child:nth-child(3n+4)) { grid-template-columns: repeat(6, minmax(0, 1fr)); } :where(body[data-design="v3"]) .tiles:has(> .tile:last-child:nth-child(3n+4)) > .tile { grid-column: span 2; } :where(body[data-design="v3"]) .tiles:has(> .tile:last-child:nth-child(3n+4)) > .tile:nth-last-child(-n+4) { grid-column: span 3; } } /* On a phone the button under the tiles ("All 9 industries") sits 24px under them, as home-m.html draws it: its own 24px margin (components.css .tiles-more) is net of its stack's gap, or the two add up (64px in a .stack-lg). It shows on a phone only. */ :where(body[data-design="v3"]) .stack-lg > .tiles + .tiles-more { margin-top: -16px; } :where(body[data-design="v3"]) .stack > .tiles + .tiles-more { margin-top: 4px; } /* ---------- tags and pills ---------- */ :where(body[data-design="v3"]) .tag { border-radius: var(--r-pill); } /* A package's flag ("Recommended start") and a Leak Fix module's length ("2–3 weeks") are services.html's chip, not the small tag: 34px, 15px/600, 14px in at the sides, as the founder's chips (components.css .founder-chips) */ :where(body[data-design="v3"]) :is(.tag.pkg-flag, .tag.mod-dur) { min-height: 34px; padding: 6px 14px; font-size: .9375rem; line-height: 1.3; } :where(body[data-design="v3"]) .pill { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); font-size: .9375rem; font-weight: 600; } :where(body[data-design="v3"]) .ink .pill { border-color: var(--ink-line-2); background: transparent; color: var(--on-ink-2); } :where(body[data-design="v3"]) :is(.pill[aria-pressed="true"], .pill.is-on) { background: var(--ink); border-color: var(--ink); color: var(--paper); } :where(body[data-design="v3"]) .ink :is(.pill[aria-pressed="true"], .pill.is-on) { background: var(--lime); border-color: var(--lime); color: var(--ink); } :where(body[data-design="v3"]) :is(.stage-tab, .tm-chip) { min-height: 40px; padding: 8px 16px; font-size: .9375rem; } /* ---------- FAQ: lines above and below each question, a 20px question and an outlined plus that turns to minus ---------- A question's row is home.html's .faq-item: 26px above and below the taller of its words and the 36px plus (88px for one line; on a phone 20px, 76px), its words centred on the plus. The side head's line beside it (the FAQ's "Anything else, ask on the call …") is body type, as home.html draws it, not a lede. */ :where(body[data-design="v3"]) .section-head.head-side > .lede { font-size: 1.125rem; line-height: 1.55; } :where(body[data-design="v3"]) .faq { border-top: 1px solid var(--line); } :where(body[data-design="v3"]) .faq summary { display: flex; align-items: center; min-height: 88px; padding: 26px 60px 26px 0; font-size: 1.25rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; } :where(body[data-design="v3"]) .faq summary::after { right: 0; width: 36px; height: 36px; margin-top: -18px; border: 1px solid var(--line-strong); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23111318' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; transition: border-color .2s ease; } :where(body[data-design="v3"]) .faq details[open] summary::after { transform: none; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%23111318' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } :where(body[data-design="v3"]) .faq summary:hover::after { border-color: var(--ink); } :where(body[data-design="v3"]) .faq .a { padding: 0 60px 30px 0; max-width: 700px; font-size: var(--t-body); line-height: 1.55; } /* an open answer sits 14px under the 36px plus, as home.html's first question (12px closer than the summary's padding) */ :where(body[data-design="v3"]) .faq details[open] > .a { margin-top: -12px; } :where(body[data-design="v3"]) .ink .faq, :where(body[data-design="v3"]) .ink .faq details { border-color: var(--ink-line); } :where(body[data-design="v3"]) .ink .faq .a { color: var(--on-ink-2); } :where(body[data-design="v3"]) .ink .faq summary::after { border-color: var(--ink-line-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23F5F4EF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } :where(body[data-design="v3"]) .ink .faq details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%23F5F4EF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } /* On an industry page of the v3 design (MR 7) a question that wraps is balanced, as the page's section heads, seat and signal titles and deal map triggers are: with the plain wrap, 15 of the 9 pages' 36 questions left one word alone on the last line at 1024 ("Who decides when a health system buys / software?"), 9 at 390 and 1 at 768. Home's rows keep the plain wrap, so no live page changes. The text is the summary's own (an anonymous flex item): it inherits text-wrap */ :where(body[data-design="v3"]) .ind-section .faq summary { text-wrap: balance; } /* On an industry page of the v3 design (MR 7) a seat card's title that can't take one line beside its tag (Can veto, Your champion) takes the card's width, and the tag sits on a line of its own above it, as a signal card's kind and a 90-day card's weeks sit above their titles. Beside the tag at 390, 27 of the 72 titles wrapped, 8 of them ending on one word alone and 2 a word on each line ("Vendor / management"). The title stays first in the DOM (wrap-reverse draws the tag's line above it; flex-end keeps a tag beside a title level with its top). From 768px every title fits beside its tag, so nothing moves there */ :where(body[data-design="v3"]) .ind-section .seat-top { flex-wrap: wrap-reverse; align-items: flex-end; } @media (max-width: 560px) { :where(body[data-design="v3"]) .faq summary { min-height: 76px; padding: 20px 52px 20px 0; font-size: 1.0625rem; } :where(body[data-design="v3"]) .faq .a { padding-right: 0; } :where(body[data-design="v3"]) .faq details[open] > .a { margin-top: -6px; } } /* ---------- the CTA band: the frog on a 280px paper disc (150px on phones), never straight on lime ---------- */ :where(body[data-design="v3"]) .cta-band { padding-block: clamp(80px, 60px + 4.2vw, 120px); } :where(body[data-design="v3"]) .cta-band .wrap { align-items: center; } :where(body[data-design="v3"]) .cta-band h2 { font-size: var(--t-h2); max-width: 18ch; } /* the lede as wide as the mockups' (640px, base.css .lede), so it breaks where theirs does */ :where(body[data-design="v3"]) .cta-band .lede { max-width: 640px; color: var(--ink); } /* home.html and services.html: the lede 24px under the title, the buttons 40px under the lede (the .stack's 20px gap comes on top of each margin) */ @media (min-width: 561px) { :where(body[data-design="v3"]) .cta-band .stack > .lede { margin-top: 4px; } :where(body[data-design="v3"]) .cta-band .stack > .row { margin-top: 20px; } } /* the disc is the frog's box plus its padding; the padding keeps a square image inside the circle only at this width, so the width wins over the inline widths some CTA frogs carry from Sanity */ :where(body[data-design="v3"]) .lime-bg .frog { width: 196px !important; padding: 42px; } @media (max-width: 800px) { :where(body[data-design="v3"]) .cta-band .frog { order: -1; } :where(body[data-design="v3"]) .lime-bg .frog { width: 106px !important; max-width: none; padding: 22px; } } /* ---------- the video: a 36px frame its anchor lands on, a duration chip, a small privacy line with a shield ---------- */ /* html's scroll padding (88px) plus 8px: a link to #video puts the frame's top 24px under the 72px header */ :where(body[data-design="v3"]) .video-frame { border-radius: clamp(18px, 2.5vw, 36px); scroll-margin-top: 8px; } :where(body[data-design="v3"]) .video-poster { gap: .9em; } :where(body[data-design="v3"]) .video-title { font-size: clamp(16px, 2.9cqi, 36px); letter-spacing: -0.02em; } :where(body[data-design="v3"]) .video-btn { width: clamp(52px, 11.9cqi, 148px); } :where(body[data-design="v3"]) .video-poster .video-dur { order: 2; justify-self: start; gap: .5em; padding: .35em .8em; background: var(--ink-3); color: var(--on-ink); font-size: clamp(11px, 1.25cqi, 15px); } :where(body[data-design="v3"]) .video-poster .video-dur .ic { width: 1.1em; height: 1.1em; color: var(--on-ink-2); } /* the frog never sits straight on ink (brand/guidelines/visual.md): a paper disc behind it, which hops with it */ :where(body[data-design="v3"]) .video-frog { width: max(7.6%, 42px); } :where(body[data-design="v3"]) .video-frog::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 152%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--paper); } :where(body[data-design="v3"]) .video-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 24px; font: 400 .875rem/1.45 var(--f-brand); letter-spacing: 0; color: var(--muted); } :where(body[data-design="v3"]) .video-note .ic { width: 15px; height: 15px; margin-top: 2px; } /* ---------- the chapter: one column, its title the label above the body ---------- */ :where(body[data-design="v3"]) .chapter { grid-template-columns: minmax(0, 1fr); } :where(body[data-design="v3"]) .chapter-body { gap: var(--head-gap); } :where(body[data-design="v3"]) .chapter-body > .eyebrow { margin-bottom: calc(24px - var(--head-gap)); } /* ---------- heroes ---------- */ :where(body[data-design="v3"]) .hero { padding-block: clamp(56px, 6.7vw, 96px) clamp(64px, 8.3vw, 120px); } :where(body[data-design="v3"]) .hero .lede { margin-top: 32px; font-size: var(--t-lede); } :where(body[data-design="v3"]) .hero .row { margin-top: 48px; gap: 16px; } /* The home hero beside its drawing (from 1001px): its text column is never narrower than its buttons on one row: the row doesn't wrap, so its width (517px for "Book a scoping call" and "Watch the 1-minute tour") is the column's least, and the h1 keeps 3 lines at 1001px; the drawing takes the rest. To 1279px the gap between them narrows with the screen, 32px at 1001 to 64px (5vw, as before) at 1280, so the drawing keeps about 370px at 1001. The industry hero (.ind-hero-grid, site.css) keeps its own 1:1 columns, gap and facts row. */ @media (min-width: 1001px) { :where(body[data-design="v3"]) .hero-grid:not(.ind-hero-grid) { grid-template-columns: minmax(auto, 1.05fr) minmax(0, 1fr); } :where(body[data-design="v3"]) .hero-grid:not(.ind-hero-grid) .row { flex-wrap: nowrap; } } @media (min-width: 1001px) and (max-width: 1279px) { :where(body[data-design="v3"]) .hero-grid:not(.ind-hero-grid) { column-gap: clamp(32px, 11.51vw - 83.2px, 64px); } } :where(body[data-design="v3"]) .page-hero h1 { font-size: var(--t-h1); max-width: 14ch; } :where(body[data-design="v3"]) .page-hero .lede { max-width: 36rem; } /* services.html's rhythm: 32px from the label to the title and from the title to the lede, then 48px to the buttons (pageHero.buttons, as the home hero's) and 40px to pills that follow them. The text is a .stack, whose 20px gap comes on top of each margin, so each margin is 20px less */ :where(body[data-design="v3"]) .page-hero .stack > h1 { margin-top: 12px; } :where(body[data-design="v3"]) .page-hero .stack > .lede { margin-top: 12px; } :where(body[data-design="v3"]) .page-hero .stack > .row { margin-top: 28px; gap: 16px; } :where(body[data-design="v3"]) .page-hero .stack > .row + nav { margin-top: 20px; } :where(body[data-design="v3"]) .ind-hero h1 { font-size: clamp(2.75rem, 1.6rem + 4vw, 5rem); } /* the headline's size against its column (MR 7 look re-check). At 390 and from 1240 to 1440px the column is 7.7 to 8.3 times that size; at 320 only 6.5 (100vw - 32px between 16px gutters), and beside the counter from 1001 to 1239px 6.7 to 7.4 (site.css .ind-hero-grid's 1:1 columns, each 48vw - 40px between 40px gutters and a 4vw gap): at 1024 energy's "A few signatures make your year." took 4 lines of 1 or 2 words. Under 400px and from 1001 to 1239px the size is now at most the column over 7.6 (59px at 1024, 38px at 320; from 367px it stays 44px), and 8 of the 9 headlines break as at 1440 (the ninth as at 1280) */ @media (max-width: 399px) { :where(body[data-design="v3"]) .ind-hero h1 { font-size: min(2.75rem, (100vw - 32px) / 7.6); } } @media (min-width: 1001px) and (max-width: 1239px) { :where(body[data-design="v3"]) .ind-hero h1 { font-size: min(1.6rem + 4vw, (48vw - 40px) / 7.6); } } /* the label pill above it, in the same column (MR 7's third look re-check). Its text is "GTM playbook · Selling to {buyers}", and pharma's, the longest of the 9 at 57 characters, is 28.07 times its size wide (421px at 15px), plus 46px of padding, dot and gap: 467px against a column of 440px at 1001 and 452px at 1024, so it took 2 lines from 1001 to 1056px, with 127px of empty pill beside the first. From 1001 to 1239px the size is now at most the column less those 46px over 28.5, so the longest label keeps 1 line (13.8px at 1001, 14.2px at 1024, 15px from 1070px) */ @media (min-width: 1001px) and (max-width: 1239px) { :where(body[data-design="v3"]) .ind-hero .eyebrow { font-size: min(var(--t-label), (48vw - 86px) / 28.5); } } /* a two-sentence industry headline's lime sentence on a line of its own, as both telecom mockups draw it (render.mjs heroHeadline wraps the whole sentence in one .hl-line span); a block keeps the h1's text-wrap: balance, a
does not */ :where(body[data-design="v3"]) .ind-hero h1 .hl-line { display: block; } /* the tool strip under the home hero: home.html's 96px band (34px above and below the names), the 7 names 18px/700 in the dimmer --on-ink-3 under the 15px --on-ink-2 lead-in (the scope's --on-ink-3 is the 5.6:1 label grey) */ /* the wide Panel Ops pose (frog-closer.png) drawn at home.html's 212 x 118, not the full 160px its siblings take */ :where(body[data-design="v3"]) .frog-pic img[src$="/frog-closer.png"] { max-height: 118px; } :where(body[data-design="v3"]) .stack-strip { padding-block: 34px; } :where(body[data-design="v3"]) .stack-strip .tool-logo { font-size: 1.125rem; color: var(--on-ink-3); } /* ---------- phones: body buttons full width, 54px, centred ---------- */ @media (max-width: 560px) { /* home-m.html's hero: 40px under the header, the lede 24px under the title, the buttons 32px under the lede (the page hero's .stack adds 20px to each margin) */ :where(body[data-design="v3"]) :is(.hero, .page-hero) { padding-top: 40px; } :where(body[data-design="v3"]) .hero .lede { margin-top: 24px; } :where(body[data-design="v3"]) .hero .row { margin-top: 32px; } :where(body[data-design="v3"]) .page-hero .stack > h1 { margin-top: 4px; } :where(body[data-design="v3"]) .page-hero .stack > .lede { margin-top: 4px; } :where(body[data-design="v3"]) .page-hero .stack > .row { margin-top: 12px; } :where(body[data-design="v3"]) .frog-pic img[src$="/frog-closer.png"] { max-height: 88px; } :where(body[data-design="v3"]) main .btn:not(.btn-sm) { width: 100%; min-height: 54px; justify-content: center; text-align: center; white-space: normal; } } /* ---------- the industry template v2 (MR 6; industry-telecom.html) ---------- The measures (render.mjs measureList) as chips after their label, "We report", as the mockup draws them; a tight industry section's title at the smaller h2 (the vendor types, the FAQ); the deal map's head as a section head */ :where(body[data-design="v3"]) .ind-measures { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 0; border-top: 0; } :where(body[data-design="v3"]) .ind-measures-k { margin: 0 8px 0 0; font-size: 1rem; font-weight: 700; color: var(--text); } :where(body[data-design="v3"]) .ind-measures ol { display: flex; flex-wrap: wrap; gap: 12px; } /* a measure on one line is a 34px pill; a long one that wraps (a v1 measure on a phone) is a rounded box with room above and below its lines, not a pill whose ends crowd its words */ :where(body[data-design="v3"]) .ind-measures li { display: inline-flex; align-items: center; gap: 0; min-height: 34px; padding: 6px 14px; border: 1px solid var(--line-strong); border-top-color: var(--line-strong); border-radius: 17px; font-size: .9375rem; font-weight: 600; line-height: 1.3; } :where(body[data-design="v3"]) .ind-measures li::before { content: none; } :where(body[data-design="v3"]) .ink .ind-measures-k { color: var(--on-ink); } :where(body[data-design="v3"]) .ink .ind-measures li { border-color: var(--ink-line-2); color: var(--on-ink-2); } :where(body[data-design="v3"]) .ind-section.section-tight .section-head h2 { font-size: var(--t-h2-sm); } /* The deal map's head on a v3 industry page (render.mjs: both titles one line, .dm-head-sec) is a section head, as the mockup draws it (MR 6 review): in the page's grid (the wrap's width and gutter, not the frame's narrow column), under the section's own top space only, the label 24px over a section h2 (800, the h2 size and tracking), the lede at the section lede's size; from 901px split as every split head (components.css .head-split: 7:5, from 1240px the lede's 440px at the right). The switch and the pause line up with it, and from a 1400px band the canvas too (below). Only a .dm-head-sec frame is restyled: a v1 map's two-line head on a v3 page (qa-v3-telecom) renders as at 680440a. */ :where(body[data-design="v3"]) .dm-head.dm-head-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: 0 var(--gutter) var(--dm-head-pb); } /* the switch 48px under the head at 1440, 32px on a phone (the mockups' mt48 and mt32; the strip brings the rest) */ :where(body[data-design="v3"]) .dm-head-sec { --dm-head-pb: clamp(7px, 0.76vw + 4px, 15px); } :where(body[data-design="v3"]) .dm-head-sec > .dm-eyebrow { margin: 0 0 24px; line-height: 1.4; } :where(body[data-design="v3"]) .dm-head-sec > .dm-title { margin: 0; font-size: var(--t-h2); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; } :where(body[data-design="v3"]) .dm-head-sec > .dm-lede { max-width: 64ch; margin: 24px 0 0; font-size: var(--t-lede); line-height: 1.5; } :where(body[data-design="v3"]) .dm-frame:has(> .dm-head-sec) .dm-ctl { padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); } @media (min-width: 901px) { :where(body[data-design="v3"]) .dm-head.dm-head-sec { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; } :where(body[data-design="v3"]) .dm-head-sec > .dm-eyebrow { grid-column: 1; grid-row: 1; } :where(body[data-design="v3"]) .dm-head-sec > .dm-title { grid-column: 1; grid-row: 2; } :where(body[data-design="v3"]) .dm-head-sec > .dm-lede { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; max-width: 440px; margin: 0; } } @media (min-width: 1240px) { :where(body[data-design="v3"]) .dm-head.dm-head-sec { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 24px; } } @container dmf (min-width: 1400px) { :where(body[data-design="v3"]) .dm-head.dm-head-sec { display: grid; max-width: calc(var(--max) + 2 * var(--gutter)); padding: 0 var(--gutter) var(--dm-head-pb); } :where(body[data-design="v3"]) .dm-head-sec > .dm-title { margin: 0; font-size: var(--t-h2); line-height: 1.02; } :where(body[data-design="v3"]) .dm-head-sec > .dm-lede { max-width: 440px; margin: 0; font-size: var(--t-lede); line-height: 1.5; } :where(body[data-design="v3"]) .dm-frame:has(> .dm-head-sec) .dm-ctl { padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); } /* the canvas in the page's column, as industry-telecom.html draws the map: design units 90 (the outer edge of the rail's markers) to 1580 (past the Panel Ops chip) fill the column (dealmap.mjs DM_FIT, which lays these maps out for this scale), so the rail starts level with the head and the loop ends inside the column at any band width */ :where(body[data-design="v3"]) .dm-frame:has(> .dm-head-sec) .dm-board { --dm-col: min(100cqw - 2 * var(--gutter), var(--max)); --u: calc(var(--dm-col) / 1490); width: calc(1600 * var(--u)); margin-left: calc((100% - var(--dm-col)) / 2 - 90 * var(--u)); margin-right: 0; } } /* a trigger's hyphenated name (keepHyphens) may break at its hyphen below 360px, so "End-of-support" can't push the page 2px wider than a 320px screen */ @media (max-width: 359px) { :where(body[data-design="v3"]) .dm-trig-name .nowrap { white-space: normal; } }