/** * Clea McLemore — base stylesheet. * * TOKENS ONLY: every color below resolves through a theme.json preset * (--wp--preset--color--*) or bridge custom property (--wp--custom--*). * Contrast ratios are MEASURED values computed at build time against the * palette in theme.json; the QA gate recomputes them (check 06) — see * docs/DESIGN-TOKENS.md for the full table. */ /* ---------- Atmosphere: noise overlay (verdict: KEEP @ 4.5%) ---------- */ body::after { content: ""; position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } body { -webkit-font-smoothing: antialiased; } /* ---------- Site header: out of the way while reading (1.5.38) ---------- The nav was declared sticky, but inside its template part (exactly its own height) it could never stick: it scrolled away, and reaching the navigation meant scrolling back to the top. The whole header is now the sticky element; it slides away as the reader scrolls down and returns the moment they scroll up (assets/js/header-scroll.js). It never hides while focus is inside it or the mobile menu is open. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60; } .wp-site-blocks > header.wp-block-template-part.is-hidden { transform: translateY(-100%); } @media (prefers-reduced-motion: no-preference) { .wp-site-blocks > header.wp-block-template-part { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } } /* ---------- Sticky nav ---------- */ .cm-nav { position: sticky; top: 0; z-index: 10; background: var(--wp--custom--surface--nav-scrim); backdrop-filter: blur(8px); border-bottom: 1px solid var(--wp--custom--border--on-dark); } .cm-nav .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--micro); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; /* parchment-muted on teal-ink: 5.64:1 (AA normal) */ color: var(--wp--preset--color--parchment-muted); } .cm-nav .wp-block-navigation-item__content:hover, .cm-nav .wp-block-navigation-item--current .wp-block-navigation-item__content { color: var(--wp--preset--color--parchment); } .cm-wordmark { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.3125rem; color: var(--wp--preset--color--parchment) !important; } /* ---------- Kickers & rules ---------- */ .cm-kicker, .cm-kicker-light, .cm-kicker-dark, .cm-case-kicker, .cm-case-sec-kicker { margin: 0 0 10px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .cm-kicker, .cm-kicker-light { color: var(--wp--preset--color--ochre-deep); } .cm-kicker-dark { color: var(--wp--preset--color--amber); } .cm-case-kicker { color: var(--wp--preset--color--parchment-muted); } .cm-case-sec-kicker { color: var(--cm-case-deep); } /* amber on teal-ink: 6.82:1 */ /* ochre-deep on cream: 5.00:1 */ .cm-meta-dark { color: var(--wp--preset--color--parchment-muted); } /* 5.64:1 on teal-ink */ .cm-meta-light { color: var(--wp--preset--color--teal-muted); } /* teal-muted on cream: 4.93:1 */ .cm-rule { width: 130px; height: 1px; background: var(--wp--preset--color--amber); border: none; margin: 48px 0; } /* ---------- Hero ---------- */ .cm-hero { position: relative; overflow: hidden; } .cm-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 70% 15%, var(--wp--custom--surface--keycap-dark), transparent 60%); pointer-events: none; } .cm-hero > * { position: relative; } /* ---------- Keyboard home-row motif ---------- */ /* ---------- Case grid ---------- */ .cm-case-grid { color: var(--wp--preset--color--parchment); } .cm-case-card { display: block; border-left: 1px solid var(--wp--custom--border--on-dark-strong); padding: 8px 22px 8px 20px; color: inherit; text-decoration: none; } .cm-case-card:last-child { border-right: 1px solid var(--wp--custom--border--on-dark-strong); } .cm-case-card:hover { background: var(--wp--custom--surface--hover-wash-dark); } .cm-case-numeral { font-family: var(--wp--preset--font-family--serif); font-size: 2.75rem; line-height: 1; margin-bottom: 22px; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--parchment-muted); } .cm-case-card.is-featured .cm-case-numeral { color: var(--wp--preset--color--amber); } .cm-case-title { font-size: var(--wp--preset--font-size--caption); font-weight: 500; margin-bottom: 8px; color: var(--wp--preset--color--parchment); } .cm-case-subline { font-size: var(--wp--preset--font-size--micro); line-height: 1.6; /* parchment-muted on teal-ink: 5.64:1 (source 55% alpha = 4.99:1; bumped) */ color: var(--wp--preset--color--parchment-muted); } /* ---------- Stat rails (tabular numerals per verdicts) ---------- */ .cm-stat-rail { display: grid; gap: 0; } .cm-stat-rail.on-dark { border-left: 1px solid var(--wp--custom--border--on-dark-strong); } .cm-stat-rail.on-light { border-left: 1px solid var(--wp--custom--border--on-light-strong); } .cm-stat { padding: 26px 0 26px 32px; } .cm-stat-rail.on-dark .cm-stat { border-bottom: 1px solid var(--wp--custom--border--on-dark); } .cm-stat-rail.on-light .cm-stat { border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-stat:last-child { border-bottom: none !important; } .cm-stat-numeral { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--numeral); line-height: 1; font-variant-numeric: tabular-nums; } .cm-stat-rail.on-dark .cm-stat-numeral { color: var(--wp--preset--color--amber); } /* 6.82:1 */ .cm-stat-rail.on-light .cm-stat-numeral { color: var(--wp--preset--color--forest); } /* forest on cream: 5.39:1 */ .cm-stat-label { font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 10px; } .cm-stat-rail.on-dark .cm-stat-label { color: var(--wp--preset--color--parchment-muted); } .cm-stat-rail.on-light .cm-stat-label { color: var(--wp--preset--color--teal-muted); } /* ---------- Light register (cream engagement panel, parchment pages) ---------- */ .cm-panel-light { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--teal-ink); border: 1px solid var(--wp--custom--border--on-light-strong); } .cm-panel-light h2, .cm-panel-light h3 { color: var(--wp--preset--color--teal-ink); } .cm-panel-light em { color: var(--wp--preset--color--forest); font-style: italic; } .cm-panel-light a { color: var(--wp--preset--color--forest); } .cm-panel-light a:hover { color: var(--wp--preset--color--teal-ink); } .cm-body-on-light { color: var(--wp--preset--color--teal-soft); } /* 7.04:1 on cream */ .cm-register-light { background: var(--wp--preset--color--parchment); color: var(--wp--preset--color--teal-ink); } .cm-register-light h1, .cm-register-light h2, .cm-register-light h3, .cm-register-light h4 { color: var(--wp--preset--color--teal-ink); } .cm-register-light a { color: var(--wp--preset--color--forest); } /* 6.66:1 on parchment */ .cm-register-light a:hover { color: var(--wp--preset--color--teal-ink); } /* ---------- Dark register (explicit) ---------- The inverse of .cm-register-light, for sections that must stay dark once the sitewide default flips to light (see LESSONS-LEDGER Session 9): 404, Search, and the footer were dark "for free" by inheriting the old default; nothing scoped them. Give them the same explicit treatment .cm-register-light already gives light sections, just mirrored, so the flip cannot silently invert them. */ .cm-register-dark { background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment-soft); } .cm-register-dark h1, .cm-register-dark h2, .cm-register-dark h3, .cm-register-dark h4 { color: var(--wp--preset--color--parchment); } .cm-register-dark a { color: var(--wp--preset--color--amber); } .cm-register-dark a:hover { color: var(--wp--preset--color--parchment); } /* .cm-archive-date appears in BOTH registers: light on a post's related list, dark on the search results page. Its light value (teal-muted) is 2.11:1 on teal-ink, so the dark register re-scopes it, exactly as it already re-scopes heading and link colour. Found by axe, 0.91.0, when the light-side fix broke the dark side. */ .cm-register-dark .cm-archive-date { color: var(--wp--preset--color--parchment-muted); } /* ---------- Offers ---------- */ .cm-offer { border-top: 2px solid var(--wp--preset--color--amber); padding-top: 26px; } .cm-offer .cm-offer-lead { color: var(--wp--preset--color--teal-ink); font-weight: 500; } .cm-offer p { font-size: var(--wp--preset--font-size--caption); line-height: 1.7; color: var(--wp--preset--color--teal-soft); } /* ---------- Section borders ---------- */ .cm-section-rule { border-top: 1px solid var(--wp--custom--border--on-dark); } /* ---------- Body copy on dark ---------- */ .cm-body-on-dark { color: var(--wp--preset--color--parchment-soft); } /* 9.18:1 on teal-ink */ /* ---------- Footer ---------- */ .cm-footer { border-top: 1px solid var(--wp--custom--border--on-dark); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--parchment-muted); } .cm-footer a { color: var(--wp--preset--color--parchment-soft); } .cm-footer a:hover { color: var(--wp--preset--color--parchment); } /* ---------- Accessibility ---------- */ /* Visually-hidden utility (0.24.1). Block themes do not inherit core's .screen-reader-text; the evaluation table's needs it. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip-path: none; white-space: normal; } /* Skip link: provided by WordPress core for block themes (wp-block-template-skip-link) — a theme-authored duplicate meant screen readers announced it twice. Removed 0.4.5. */ :focus-visible { outline: 2px solid var(--wp--preset--color--cream); outline-offset: 3px; } .cm-register-light :focus-visible, .cm-case-main :focus-visible, .cm-panel-light :focus-visible, .cm-case-hero.is-light :focus-visible { outline-color: var(--wp--preset--color--teal-ink); } /* ---------- Mobile ---------- */ @media (max-width: 760px) { .cm-case-grid { grid-template-columns: 1fr 1fr !important; row-gap: 36px; } .cm-case-card { border-right: none !important; } .cm-stat-rail { border-left: none !important; } .cm-stat { padding-left: 0; } } /* ---- Mono register (alternate front page) -------------------------- SUPERSEDED 0.24.1. The cm-mono-* / cm-home-* rules that lived here were replaced by the Home v2 rail+stage system (search "Home v2" below, ~line 780), which carries the same grayscale + signal-cyan design under the cm-hv2-* namespace. Nothing is missing; this block is intentionally empty. Its stale closing brace is removed. Retained warnings, still true of the hv2 rules: - graphite carries BLACK text only (white on graphite = 3.45, AA fail) - every light register must re-scope heading colour or headings vanish (found 8.4: parchment h2 on mono-paper, 1.02:1) */ /* ---------- Case-study system (one structure, per-case accent pair) ---- Each case page wraps in .cm-case plus a modifier that sets the accent custom properties. Ratios per pair are in docs/DESIGN-TOKENS.md and verified by gate 06 against theme.json. Forest never appears on the dark register (1.94:1 — recorded failure; see duty tiers). */ .cm-case { --cm-case-accent: var(--wp--preset--color--amber); /* on dark */ --cm-case-deep: var(--wp--preset--color--ochre-deep); /* on light */ } .cm-case--crucible { --cm-case-accent: var(--wp--preset--color--crucible); --cm-case-deep: var(--wp--preset--color--crucible-deep); } .cm-case--odyssey { --cm-case-accent: var(--wp--preset--color--forest); --cm-case-deep: var(--wp--preset--color--forest); } .cm-case--atlas { --cm-case-accent: var(--wp--preset--color--gold); --cm-case-deep: var(--wp--preset--color--navy); } .cm-case--cell { --cm-case-accent: var(--wp--preset--color--rose); --cm-case-deep: var(--wp--preset--color--plum); } .cm-case--inbox { --cm-case-accent: var(--wp--preset--color--ib-accent); --cm-case-deep: var(--wp--preset--color--ib-deep); } /* added 0.24.1: Case 02 shipped without one */ .cm-case--studio { --cm-case-accent: var(--wp--preset--color--amber); --cm-case-deep: var(--wp--preset--color--ochre-deep); } /* Compliance-First owns its own register from 0.36.0. It previously borrowed the Facilitation Guide accent and paired it with forest, so the enterprise case wore two greens and matched Change Crucible in the hero rail. Aubergine is used by no other case and reads institutional rather than playful. */ .cm-case--compliance { --cm-case-accent: var(--wp--preset--color--cl-accent); --cm-case-deep: var(--wp--preset--color--cl-deep); } .cm-case-hero { position: relative; overflow: hidden; } .cm-case-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 65% 15%, var(--wp--custom--surface--keycap-dark), transparent 60%); pointer-events: none; } .cm-case-hero > * { position: relative; } .cm-case-hero h1 { font-size: clamp(2.625rem, 0.5rem + 5.3333vw, 4.75rem); line-height: 1.03; letter-spacing: -0.01em; } .cm-case-hero h1 em { color: var(--cm-case-accent); font-style: italic; } .cm-case-hero .cm-rule { background: var(--cm-case-accent); margin: 44px 0; } .cm-case-meta { display: flex; gap: 44px; flex-wrap: wrap; } .cm-case-meta-label { font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--parchment-muted); margin-bottom: 6px; } .cm-case-meta-value { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--parchment); } /* Light-hero variant (Key Odyssey): same structure on parchment */ .cm-case-hero.is-light { background: var(--wp--preset--color--parchment); } .cm-case-hero.is-light h1, .cm-case-hero.is-light .cm-case-meta-value { color: var(--wp--preset--color--teal-ink); } .cm-case-hero.is-light h1 em { color: var(--cm-case-deep); } .cm-case-hero.is-light .cm-rule { background: var(--cm-case-deep); } .cm-case-hero.is-light .cm-case-kicker, .cm-case-hero.is-light .cm-case-meta-label { color: var(--wp--preset--color--ink-muted); } .cm-case-hero.is-light::before { display: none; } .cm-integrity-note { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--wp--custom--border--on-dark-strong); background: var(--wp--custom--surface--keycap-dark); padding: 16px 22px; } .cm-integrity-note .cm-note-tag { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--ochre-deep); letter-spacing: 0.1em; flex: none; } .cm-integrity-note p { margin: 0; font-size: var(--wp--preset--font-size--caption); line-height: 1.6; color: var(--wp--preset--color--teal-soft); } .cm-case-main { background: var(--wp--preset--color--parchment); color: var(--wp--preset--color--teal-ink); } .cm-case-main h2, .cm-case-main h3, .cm-case-main h4 { color: var(--wp--preset--color--teal-ink); } .cm-case-main p { font-size: var(--wp--preset--font-size--caption); line-height: 1.8; color: var(--wp--preset--color--ink-soft); } /* Measure (0.26.1). Body copy at 15px across the full 680px column ran ~91 characters; comfortable reading is 45-75. Prose narrows, media does not, so figures and tables keep the full column width. */ .cm-case-main { --cm-measure: 68ch; } .cm-case-main p, .cm-case-main li { max-width: var(--cm-measure); } /* Single figures share the text measure so the page has ONE left and right edge (0.26.4). A figure 170px wider than its paragraph reads as a mistake; if an image should be wide it must be much wider, not slightly. Evidence grids keep the full column: a multi-item band is a distinct element, and its cells are already small. */ .cm-case-inline-fig { max-width: var(--cm-measure); } .cm-case-inline-fig.is-tall { max-width: min(var(--cm-measure), 470px); } .cm-case-main .cm-ana-body, .cm-case-main .cm-obj-body, .cm-case-main .cm-eval-body, .cm-case-main .cm-dcard-body, .cm-case-main figcaption { max-width: none; } .cm-case-main .cm-case-fine { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--teal-soft); } .cm-case-section { border-top: 1px solid var(--wp--custom--border--on-light); padding-top: 56px; margin-top: 56px; } .cm-sample-frame { border: 1px solid var(--wp--custom--border--on-light-strong); background: var(--wp--preset--color--cream); padding: 40px; text-align: center; } .cm-sample-frame p { color: var(--wp--preset--color--teal-soft); } .cm-sample-frame .wp-block-button__link { border-color: var(--cm-case-deep); color: var(--cm-case-deep); } .cm-sample-frame .wp-block-button__link:hover { background: var(--cm-case-deep); color: var(--wp--preset--color--parchment); } .cm-case-next { border-top: 1px solid var(--wp--custom--border--on-dark); padding-top: 40px; } .cm-case-next a { color: var(--cm-case-accent); } .cm-case-next a:hover { color: var(--wp--preset--color--parchment); } /* ---------- Interaction states (second design pass) ---------- Color/border transitions may run for everyone (no positional motion); anything that MOVES lives inside the no-preference gate below. */ a, .wp-element-button, .wp-block-navigation-item__content, .cm-case-card, .cm-keycap, .cm-footer a, .cm-utility-bar a { } /* Keycaps: the wired hover the dead transition was waiting for */ /* Selection: the brand in a detail nobody documents */ ::selection { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--teal-ink); } .cm-register-light ::selection, .cm-case-main ::selection { background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment); } /* Nav submenus (dropdowns): styled before anyone needs them */ .cm-nav .wp-block-navigation__submenu-container { background: var(--wp--custom--surface--nav-scrim) !important; border: 1px solid var(--wp--custom--border--on-dark); padding: 8px 0; min-width: 220px; } .cm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 18px; color: var(--wp--preset--color--parchment-muted); } .cm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--parchment); background: var(--wp--custom--surface--hover-wash-dark); } .cm-nav .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--parchment-muted); } /* Search input: on-brand on the dark register */ .wp-block-search__input { background: transparent; border: 1px solid var(--wp--custom--border--on-dark-strong); border-radius: 0; color: var(--wp--preset--color--parchment); padding: 12px 16px; font-size: var(--wp--preset--font-size--caption); } .wp-block-search__input::placeholder { color: var(--wp--preset--color--parchment-muted); } .wp-block-search__input:focus { border-color: var(--wp--preset--color--amber); outline: none; } .wp-block-search__button { border-radius: 0; border: 1px solid var(--wp--preset--color--amber); background: transparent; color: var(--wp--preset--color--amber); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 22px; } .wp-block-search__button:hover { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--teal-ink); } /* Positional motion: gated */ /* ---------- Blog affordances (0.5.0: byline, author box, share, nav) ---------- */ .cm-byline { display: flex; gap: 12px; margin: 18px 0 6px; font-size: var(--wp--preset--font-size--micro); align-items: center; flex-wrap: wrap; } /* object-position was never set, so cover centred the crop. On a full-length portrait the centre of the frame is the torso, which is why the face was cut off in a 36px circle. Biasing to the upper third puts a head there for almost any portrait; a square, face centred upload is still better and the Writing page has a field for one. */ .cm-byline .cm-byline-avatar img { display: block; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center 22%; filter: grayscale(1); } .cm-byline-name { font-weight: 600; letter-spacing: 0.04em; } .cm-byline .wp-block-post-date { letter-spacing: 0.14em; text-transform: uppercase; } .cm-byline.on-dark { margin: 10px 0 4px; } .cm-reading-time { color: inherit; } .cm-reading-time::before { content: "\00b7"; margin: 0 6px 0 8px; } /* Added 0.98.0 with the Updated badge, which otherwise ran straight into the reading time: "3 MIN READUPDATED SEPTEMBER 17". Same separator the rest of the line uses. */ .cm-byline-updated::before { content: "\00b7"; margin: 0 6px 0 8px; color: var(--wp--preset--color--ink-muted); } .cm-post-hero-image img, .cm-essay-image img { border: 1px solid var(--wp--custom--border--on-light-strong); display: block; } .cm-essay-image { margin-bottom: 18px; } .cm-essay-item { padding: 40px 0; border-bottom: 1px solid var(--wp--custom--border--on-dark); } .cm-essay-item:last-child { border-bottom: none; } /* ---- Writing / blog magazine layout (0.59.0) ---- */ /* Light, airy, inviting: a featured story leads, then a clean grid. */ /* ---- Writing / blog: the same house the home hero and cases live in ---- Inherits the site's signature moves instead of inventing its own: the mono index number (Expertise, process stages), the amber .cm-rule that opens every case hero, the accent-topped card of the work grid, and the arrow-reveal of the Work-with-me CTA. */ .cm-writing-head { max-width: 680px; margin: 0 0 clamp(2.5rem, 0.5rem + 5.3333vw, 4.5rem); } .cm-writing-title { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.2rem, 0.5rem + 3.3333vw, 3rem); line-height: 1.02; color: var(--wp--preset--color--teal-ink); margin: 0.2em 0 0.35em; letter-spacing: -0.015em; } .cm-writing-title em { font-style: italic; color: var(--wp--preset--color--ochre-deep); } .cm-writing-lede { font-size: var(--wp--preset--font-size--lede, 1.2rem); line-height: 1.6; color: var(--wp--preset--color--teal-soft); margin: 0; } .cm-writing-head .cm-rule { margin: 26px 0 0; } /* Lead story: given real gravity. Image dominant, headline at display scale, an amber rule and an index like a case hero. */ /* ---------- The lead essay ---------- Text sits BELOW the image, not on it. An overlay forces the artwork dark so white type can survive, and that pushed the whole blog to a near-black field: severe, and wrong for a section meant to be inviting. Moving the text off the image removes the constraint entirely, so the artwork can stay on the site's warm register. The lead still breaks the column, which is what makes it a lead. */ .cm-featured { position: relative; display: block; width: min(100vw - 48px, 1180px); margin: 0 0 clamp(3rem, 0.5rem + 6.3333vw, 5.5rem) calc(50% - min(50vw - 24px, 590px)); border: 1px solid var(--wp--custom--border--on-light); border-top: 4px solid var(--cm-accent-bright, var(--wp--preset--color--amber)); border-radius: 14px; overflow: hidden; background: var(--wp--preset--color--parchment); } /* aspect-ratio:auto: the figure was declaring 16/9 while the image inside renders 21/9, so the figure stood ~150px taller than its own picture and the gap read as a layout bug. The image defines the height. */ .cm-featured-image { border-radius: 0; overflow: hidden; aspect-ratio: auto; display: block; } .cm-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .cm-featured:hover .cm-featured-image img, .cm-featured:focus-within .cm-featured-image img { transform: scale(1.02); } .cm-featured-body { padding: clamp(1.5rem, 0.5rem + 2vw, 2.5rem); background: var(--wp--preset--color--parchment); } .cm-featured .cm-card-kicker { display: flex; align-items: center; gap: 12px; color: var(--cm-accent, var(--wp--preset--color--ochre-deep)); margin: 0 0 10px; } .cm-featured .cm-featured-heading { margin: 0 0 12px; max-width: 24ch; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.75rem, 0.5rem + 2.1667vw, 2.75rem); line-height: 1.12; letter-spacing: -0.015em; } .cm-featured .cm-featured-heading a { color: var(--wp--preset--color--teal-ink); text-decoration: none; } .cm-featured .cm-featured-excerpt { color: var(--wp--preset--color--teal-soft); max-width: 62ch; margin: 0 0 12px; } .cm-featured .cm-card-date { color: var(--wp--preset--color--ink-muted); } @media (max-width: 820px) { .cm-featured { width: auto; margin-left: 0; } .cm-featured-image img { aspect-ratio: 3 / 2; } .cm-featured-body { padding: 22px; } .cm-featured-body.is-dark { position: static; background: none; color: inherit; padding: 22px; } .cm-featured .cm-featured-heading a { color: var(--wp--preset--color--teal-ink); } .cm-featured .cm-featured-excerpt { color: var(--wp--preset--color--teal-soft); } .cm-featured .cm-card-date { color: var(--wp--preset--color--ink-muted); } } .cm-featured-heading a, .cm-featured-heading { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.9rem, 0.5rem + 2.7333vw, 2.8rem); line-height: 1.06; color: var(--wp--preset--color--teal-ink); text-decoration: none; letter-spacing: -0.015em; margin: 0.15em 0 0.4em; display: block; } .cm-featured-excerpt { font-size: 1.12rem; line-height: 1.65; color: var(--wp--preset--color--teal-soft); margin: 0 0 1.1em; max-width: 34em; } .cm-featured .cm-card-date { display: flex; align-items: center; gap: 18px; } .cm-featured .cm-card-date::after { content: "Read the essay \2192"; color: var(--wp--preset--color--ochre-deep); letter-spacing: 0.1em; text-transform: uppercase; opacity: 1; font-size: 1em; } /* The grid: each post is a card in the work-grid language, numbered from 02 so the lead story is 01 and the page reads as one index. */ .cm-card-grid { gap: clamp(1.5rem, 0.5rem + 2.3333vw, 2rem); margin-top: 0; counter-reset: cm-post 1; } /* The wp:post-template grid layout (columnCount:3) is WordPress-core generated CSS with no responsive behavior of its own; every other grid in this file gets a narrow-viewport override, this one never did. !important is deliberate: it overrides WordPress's own generated grid-column rule, whose specificity/load order relative to this stylesheet is not something the theme controls. The compound .cm-card-grid.is-layout-grid form matches (or exceeds) the specificity of core's own generated selector, in case two `!important` declarations ever tie and specificity breaks it. */ @media (max-width: 900px) { .cm-card-grid, .cm-card-grid.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { .cm-card-grid, .cm-card-grid.is-layout-grid { grid-template-columns: 1fr !important; } } .cm-card { display: flex; flex-direction: column; counter-increment: cm-post; background: var(--wp--preset--color--home-white); border: 1px solid var(--wp--custom--border--on-light); border-top: 3px solid var(--wp--preset--color--teal-ink); border-radius: 12px; padding: 0 0 22px; overflow: hidden; } .cm-card:nth-child(3n+1) { border-top-color: var(--wp--preset--color--amber); } .cm-card:nth-child(3n+2) { border-top-color: var(--wp--preset--color--forest); } .cm-card-image { overflow: hidden; } .cm-card-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; } /* Warm placeholder for a post with no featured image yet (post-thumb block): a light parchment field, never the dark case-study register, since an essay card reading like a case study is the exact weight this was built to avoid. */ .cm-thumb-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; text-decoration: none; background: color-mix(in srgb, var(--wp--preset--color--cream) 55%, var(--wp--preset--color--parchment)); } .cm-featured-image.cm-thumb-placeholder { border-radius: 10px; } .cm-thumb-placeholder-orn { width: 8px; height: 8px; background: var(--wp--preset--color--amber); transform: rotate(45deg); } .cm-thumb-placeholder-label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; color: var(--wp--preset--color--ochre-deep); text-align: center; padding: 0 16px; } .cm-thumb-placeholder:hover .cm-thumb-placeholder-orn, .cm-thumb-placeholder:focus-visible .cm-thumb-placeholder-orn { background: var(--wp--preset--color--ochre-deep); } .cm-card-kicker, .cm-featured .cm-card-kicker { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); margin: 0 0 0.5em; } .cm-card > .cm-card-kicker { display: flex; align-items: center; gap: 12px; padding: 20px 22px 0; } .cm-card > .cm-card-kicker::before { content: counter(cm-post, decimal-leading-zero); color: var(--wp--preset--color--ink-muted); letter-spacing: 0.08em; } .cm-card-heading { margin: 0.35em 0 0.4em; padding: 0 22px; } .cm-card-heading a, .cm-card-heading { font-family: var(--wp--preset--font-family--serif); font-size: 1.32rem; line-height: 1.2; color: var(--wp--preset--color--teal-ink); text-decoration: none; display: block; } .cm-card-heading a { padding: 0; margin: 0; } .cm-card-excerpt { font-size: 0.96rem; line-height: 1.55; color: var(--wp--preset--color--teal-soft); margin: 0 0 1em; padding: 0 22px; } .cm-card-date { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.08em; color: var(--wp--preset--color--ink-muted); margin-top: auto; padding: 0 22px; display: flex; justify-content: space-between; align-items: center; } .cm-card-date::after { content: "\2192"; color: var(--wp--preset--color--ochre-deep); opacity: 0; font-size: 1.1em; } .cm-writing-pagination { margin-top: clamp(3rem, 0.5rem + 5.3333vw, 4.5rem); padding-top: 24px; border-top: 1px solid var(--wp--custom--border--on-light-strong); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.08em; text-transform: uppercase; } .cm-writing-pagination a { color: var(--wp--preset--color--teal-ink); text-decoration: none; } @media (max-width: 781px) { .cm-featured { grid-template-columns: 1fr; padding: 20px; } } @media (prefers-reduced-motion: no-preference) { .cm-card, .cm-featured { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease; } .cm-card:hover, .cm-card:focus-within, .cm-featured:hover, .cm-featured:focus-within { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16, 51, 38, 0.18); } .cm-card-image img, .cm-featured-image img { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); } .cm-card:hover .cm-card-image img, .cm-featured:hover .cm-featured-image img { transform: scale(1.035); } .cm-card-heading a, .cm-featured-heading a { transition: color 0.2s ease; } .cm-card-heading a:hover, .cm-featured-heading a:hover { color: var(--wp--preset--color--ochre-deep); } .cm-card-date::after { transition: opacity 0.2s ease, transform 0.2s ease; transform: translateX(-4px); } .cm-card:hover .cm-card-date::after, .cm-card:focus-within .cm-card-date::after { opacity: 1; transform: none; } } /* ---------- The reading room (blog pass, 0.5.0) ---------- Scoped prose styling so long-form content carries the same craft as the portfolio surfaces. .cm-prose wraps essay/case body content on light registers. Serif reading face at a book measure; every core content element styled. teal-soft on parchment: 8.68:1 (gate 06). */ .cm-prose { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--lede); line-height: 1.78; color: var(--wp--preset--color--teal-soft); } .cm-prose > * { max-width: 680px; margin-left: auto; margin-right: auto; } .cm-prose p { margin: 0 0 1.4em; max-width: 68ch; } .cm-prose a { color: var(--wp--preset--color--forest); text-decoration: underline; text-decoration-color: var(--wp--custom--border--on-light-strong); text-underline-offset: 3px; } .cm-prose a:hover { color: var(--wp--preset--color--teal-ink); text-decoration-color: currentColor; } .cm-prose h2, .cm-prose h3 { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); margin: 2.6em auto 1.1em; } .cm-prose blockquote { border-left: 2px solid var(--wp--preset--color--amber); margin: 2em auto; padding: 4px 0 4px 28px; font-style: italic; font-size: 1.375rem; line-height: 1.55; color: var(--wp--preset--color--teal-ink); } .cm-prose blockquote cite { display: block; margin-top: 12px; font-family: var(--wp--preset--font-family--sans); font-style: normal; font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--teal-muted); } .cm-prose ul, .cm-prose ol { padding-left: 1.4em; margin: 0 auto 1.4em; } .cm-prose li { margin-bottom: 0.5em; } .cm-prose li::marker { color: var(--wp--preset--color--ochre-deep); } .cm-prose code { font-family: var(--wp--preset--font-family--mono); font-size: 0.82em; background: var(--wp--preset--color--cream); padding: 2px 7px; color: var(--wp--preset--color--teal-ink); } .cm-prose pre { background: var(--wp--preset--color--teal-ink); padding: 24px 28px; overflow-x: auto; margin: 2em auto; } .cm-prose pre code { background: none; padding: 0; color: var(--wp--preset--color--parchment-soft); font-size: var(--wp--preset--font-size--caption); line-height: 1.7; } .cm-prose figure { margin: 2.2em auto; } .cm-prose figure img { display: block; width: 100%; height: auto; border: 1px solid var(--wp--custom--border--on-light); } .cm-prose figcaption { margin-top: 12px; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--teal-muted); } .cm-prose table { border-collapse: collapse; width: 100%; margin: 2em auto; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--caption); } .cm-prose th { text-align: left; font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); border-bottom: 2px solid var(--wp--preset--color--amber); padding: 10px 14px 8px 0; } .cm-prose td { border-bottom: 1px solid var(--wp--custom--border--on-light); padding: 10px 14px 10px 0; color: var(--wp--preset--color--teal-soft); } .cm-prose hr { width: 130px; height: 1px; background: var(--wp--preset--color--amber); border: none; margin: 3em auto; } .cm-prose strong { color: var(--wp--preset--color--teal-ink); font-weight: 500; } /* Featured image atop an essay */ .cm-essay-featured img { display: block; width: 100%; height: auto; border: 1px solid var(--wp--custom--border--on-light); } /* Prev / next essay navigation */ .cm-essay-nav { border-top: 1px solid var(--wp--custom--border--on-light); margin-top: 72px; padding-top: 28px; display: flex; justify-content: space-between; gap: 32px; font-family: var(--wp--preset--font-family--sans); } .cm-essay-nav a { color: var(--wp--preset--color--forest); font-size: var(--wp--preset--font-size--caption); } .cm-essay-nav a:hover { color: var(--wp--preset--color--teal-ink); } .cm-essay-nav .wp-block-post-navigation-link__label { display: none; } /* Standfirst: the one line that states the argument before a reader commits. Sits between headline and byline, which is where editorial pages put it, and is drawn from the excerpt so there is nothing extra to maintain. */ .cm-standfirst { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.15rem, 0.5rem + 1.4333vw, 1.45rem); line-height: 1.45; color: var(--wp--preset--color--teal-soft); max-width: 58ch; margin: 18px 0 26px; } .cm-standfirst p { margin: 0; } .cm-standfirst .wp-block-post-excerpt__more-text { display: none; } /* ---------- Per-category accents ---------- One variable pair, rebound per category on the body. Everything that used to be hardcoded ochre or amber on an essay now follows the category, so a piece in Why It Failed and a piece in AI at Work do not look like the same page with different words. Text values are verified at 4.5:1 or better on parchment; bright values carry no text and are free to be loud. */ :root { --cm-accent: var(--wp--preset--color--ochre-deep); --cm-accent-bright: var(--wp--preset--color--amber); } /* Bound on any element, not only the body. A single post or archive sets it on the body because the whole page is one category; the index sets it per card, because the grid holds several at once. */ .cm-accent-ai-adoption { --cm-accent: var(--wp--preset--color--crucible-deep); --cm-accent-bright: var(--wp--preset--color--signal); } .cm-accent-instructional-design { --cm-accent: var(--wp--preset--color--ib-deep); --cm-accent-bright: var(--wp--preset--color--ib-accent); } .cm-accent-change-management { --cm-accent: var(--wp--preset--color--ko-accent); --cm-accent-bright: var(--wp--preset--color--rose); } .cm-accent-measuring-training { --cm-accent: var(--wp--preset--color--ochre-deep); --cm-accent-bright: var(--wp--preset--color--gold); } .cm-accent-rollout-failures { --cm-accent: var(--wp--preset--color--sci-accent); --cm-accent-bright: var(--wp--preset--color--sci-glow); } .cm-accent-learning-technology { --cm-accent: var(--wp--preset--color--itq-accent); --cm-accent-bright: var(--wp--preset--color--itq-glow); } .cm-accent-field-notes { --cm-accent: var(--wp--preset--color--cl-deep); --cm-accent-bright: var(--wp--preset--color--cl-accent); } .cm-accent-tech-news { --cm-accent: var(--wp--preset--color--itq-accent); --cm-accent-bright: var(--wp--preset--color--itq-glow); } /* Surfaces that follow the category */ body[class*="cm-accent-"] .cm-kicker { color: var(--cm-accent); } /* Corrected 1.0.1: these three targeted classes that do not exist. .cm-essay-h2, .cm-archive-kicker and .cm-takeaways-title were all invented from memory rather than read off the rendered page, so the accent never reached an essay's section headings, the takeaways heading, or an archive title. Verified against live markup this time. */ body[class*="cm-accent-"] .cm-prose h2.wp-block-heading { color: var(--cm-accent); } body[class*="cm-accent-"] .cm-takeaways > h2, body[class*="cm-accent-"] .is-style-short-version > h2, body[class*="cm-accent-"] .cm-takeaways > h3, body[class*="cm-accent-"] .is-style-short-version > h3, body[class*="cm-accent-"] .cm-takeaways > p:first-child, body[class*="cm-accent-"] .is-style-short-version > p:first-child { color: var(--cm-accent); } body[class*="cm-accent-"] .cm-statband-label { color: var(--cm-accent); } body[class*="cm-accent-"] .cm-statband { border-block-color: var(--cm-accent-bright); } body[class*="cm-accent-"] .cm-takeaways, body[class*="cm-accent-"] .is-style-short-version { border-left-color: var(--cm-accent-bright); } body[class*="cm-accent-"] .cm-share-label { color: var(--cm-accent); } body[class*="cm-accent-"] .cm-essay-terms a { color: var(--cm-accent); } body[class*="cm-accent-"] .cm-age-notice { border-left-color: var(--cm-accent-bright); } body[class*="cm-accent-"] .cm-byline-updated { color: var(--cm-accent); } body[class*="cm-accent-"] .cm-writing-title { color: var(--cm-accent); } /* A coloured edge along the top of the featured image, which is the first thing the eye lands on and previously carried no colour. */ body[class*="cm-accent-"] .wp-block-post-featured-image { border-top: 5px solid var(--cm-accent-bright); } /* ---------- Stat band (essays) ---------- The figures in these essays are the most persuasive thing on the page and were buried inside sentences. This gives them the width and scale they already have on the case study pages. Breaks the reading column deliberately: that change of rhythm is the point. */ .cm-statband { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; width: min(100vw - 48px, 1100px); margin: 52px 0 52px calc(50% - min(50vw - 24px, 550px)); background: var(--wp--custom--border--on-light); border-block: 1px solid var(--wp--custom--border--on-light); } .cm-statband[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cm-statband[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cm-statband-item { background: var(--wp--preset--color--parchment); padding: 30px 26px 26px; } .cm-statband-value { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.6rem, 0.5rem + 5.3333vw, 4.1rem); line-height: 0.95; color: var(--wp--preset--color--teal-ink); margin: 0 0 12px; letter-spacing: -0.02em; } .cm-statband-label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; color: var(--wp--preset--color--ochre-deep); margin: 0; } @media (max-width: 720px) { .cm-statband, .cm-statband[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; margin-left: 0; } .cm-statband[data-count="3"] > :last-child { grid-column: 1 / -1; } } .cm-statband-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; margin-bottom: 12px; } .cm-statband-editor-hint { font-size: 0.75rem; color: GrayText; margin: 0 0 10px; } /* ---------- Index cards take their own category colour ---------- */ .cm-card .cm-card-image { display: block; overflow: hidden; } .cm-card .cm-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .cm-card { position: relative; } .cm-card .cm-card-image { border-top: 4px solid var(--cm-accent-bright, var(--wp--preset--color--amber)); } .cm-card:hover .cm-card-heading a, .cm-card:focus-within .cm-card-heading a { color: var(--cm-accent, var(--wp--preset--color--ochre-deep)); } .cm-card .cm-thumb-placeholder-label { color: var(--cm-accent, var(--wp--preset--color--ochre-deep)); } /* ---------- Essay opening ---------- Three problems, visible in a render and not in the markup: a short amber dash floated alone between the byline and the image, reading as an orphaned ornament rather than a divider; the lead image sat inside a bordered box at text width, so it looked like a screenshot pasted into a document instead of a lead image; and the whole opening carried more air than the page could justify before anything was said. The image now breaks the column, as a lead image does on any page worth the comparison, and keeps only the accent edge. */ /* max-width:none is the operative line. A constrained layout caps every child at the content size, so setting width alone did nothing and the lead rendered at exactly the prose measure, 680px, at every viewport. Measured before the fix: hero and body identical to the pixel. */ /* Breaking out of a narrow column, done the way that cannot be overridden. Two earlier attempts failed for different reasons and both are worth recording. A negative margin-left calc was correct arithmetic, minus 186px at this measure, but the constrained layout sets margin-inline on its children and won. Auto margins then did nothing, because auto resolves to zero once a child is wider than its container, so the figure sat pinned at the container's left edge and pushed the document to 1262px in an 1100px window. A transform is not a layout property, so nothing in the block layout can take it away. */ .cm-essay-featured { position: relative; left: 50%; transform: translateX(-50%); width: min(100vw - 48px, 1100px); max-width: none; margin-top: 44px; } @media (max-width: 900px) { .cm-essay-featured { position: static; left: auto; transform: none; width: auto; margin-top: 28px; } } .cm-essay-featured img { display: block; width: 100%; height: auto; border: 0; } body[class*="cm-accent-"] .cm-essay-featured { border-top: 5px solid var(--cm-accent-bright); } body[class*="cm-accent-"] .cm-essay-featured .wp-block-post-featured-image { border-top: 0; } @media (max-width: 900px) { .cm-essay-featured { width: auto; margin-left: 0; margin-top: 28px; } } /* ---------- Essay type scale ---------- Measured before this: h1 39px, standfirst 23px, body 20px, section heading 12px. The headline was twice the body where an article wants nearer three times, it barely moved between 1100 and 1440 because its clamp was almost flat, and section headings were SMALLER than the text they headed, which inverts the hierarchy outright. The mono caps are kept for the kicker, where a single use reads as a brand signature. Section headings move to the serif at a size that places them clearly under the headline and clearly over the body. */ /* The post title carried WordPress's has-h-2-font-size preset class, which lands with !important and pinned the headline at 40px at every viewport no matter what the theme asked for. Removing the preset from the template is the fix; fighting an !important with another one just moves the argument. */ .cm-post-title { font-size: clamp(2.6rem, 1rem + 3.4vw, 4.25rem); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 0; } /* Named cm-post-title, not cm-essay-title: that class was already taken by the essay cards on the Portfolio page at 1.75rem, and the later declaration won, which dropped the article headline to 28px, below its own section headings. Second time this stylesheet has been bitten by a duplicate selector; the first was the home wordmark. */ .cm-prose h2.wp-block-heading { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.5rem, 0.9rem + 1.1vw, 1.875rem); line-height: 1.22; letter-spacing: -0.01em; text-transform: none; margin: 2.6em 0 0.6em; } .cm-prose h3.wp-block-heading { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.14em; text-transform: uppercase; margin: 2.2em 0 0.5em; } /* The takeaways box was a filled panel with a heavy rule, which reads as content-marketing furniture. A quiet rule and a change of type carry the same job without the box. */ /* ---------- Freshness signals (news cadence) ---------- */ .cm-byline-updated { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); } .cm-age-notice { max-width: 62ch; margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--wp--preset--color--amber); background: var(--wp--preset--color--cream); font-size: var(--wp--preset--font-size--caption); line-height: 1.55; color: var(--wp--preset--color--teal-soft); } /* ---------- Empty states ---------- A section with nothing in it still has to look deliberate. The old version was a single unstyled sentence, which reads as a page that failed to load rather than one that is simply early. */ .cm-empty-state { max-width: 620px; margin: 8px 0 0; padding: 36px 0 8px; border-top: 1px solid var(--wp--custom--border--on-light); } .cm-empty-state-lead { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.25rem, 0.5rem + 1.7333vw, 1.55rem); line-height: 1.3; color: var(--wp--preset--color--teal-ink); margin: 0 0 12px; } .cm-empty-state-body { font-size: var(--wp--preset--font-size--caption); line-height: 1.65; color: var(--wp--preset--color--teal-soft); margin: 0 0 20px; } .cm-empty-state-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; } .cm-empty-state-links a { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--forest); text-decoration: underline; text-underline-offset: 3px; } .cm-empty-state-links a:hover, .cm-empty-state-links a:focus-visible { color: var(--wp--preset--color--teal-ink); } /* ---------- News-voice prose furniture ---------- Two devices a reported-register article needs and an essay does not: a takeaways box that gives a skimmer the argument before they commit to the whole piece, and a pull quote that breaks a long column and hands a sharer something quotable. Both are plain core blocks with a class, so they are editable in the block editor with no custom block to learn: a Group with .cm-takeaways, and core's own Pullquote. */ .cm-prose .cm-takeaways, .cm-prose .is-style-short-version { background: none; border-left: 2px solid var(--wp--preset--color--amber); padding: 6px 0 6px 26px; margin: 0 auto 2.4em; max-width: 680px; } .cm-prose .cm-takeaways > *:first-child, .cm-prose .is-style-short-version > *:first-child { margin-top: 0; } .cm-prose .cm-takeaways > *:last-child, .cm-prose .is-style-short-version > *:last-child { margin-bottom: 0; } .cm-prose .cm-takeaways h2, .cm-prose .is-style-short-version h2, .cm-prose .cm-takeaways h3, .cm-prose .is-style-short-version h3 { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); margin: 0 0 14px; border: 0; padding: 0; } .cm-prose .cm-takeaways ul, .cm-prose .is-style-short-version ul { margin: 0; padding-left: 1.2em; } .cm-prose .cm-takeaways li, .cm-prose .is-style-short-version li { font-size: var(--wp--preset--font-size--caption); line-height: 1.6; color: var(--wp--preset--color--teal-ink); margin-bottom: 0.6em; } .cm-prose .cm-takeaways li:last-child, .cm-prose .is-style-short-version li:last-child { margin-bottom: 0; } .cm-prose .wp-block-pullquote { border: 0; border-top: 1px solid var(--wp--custom--border--on-light-strong); border-bottom: 1px solid var(--wp--custom--border--on-light-strong); padding: 30px 0; margin: 2.6em auto; max-width: 680px; text-align: left; } .cm-prose .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; } .cm-prose .wp-block-pullquote p { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.25rem, 0.5rem + 1.7333vw, 1.6rem); line-height: 1.4; color: var(--wp--preset--color--teal-ink); margin: 0; max-width: none; } .cm-prose .wp-block-pullquote cite { display: block; margin-top: 14px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); } /* Archive list items: date kicker + rule between entries */ .cm-archive-item { border-top: 1px solid var(--wp--custom--border--on-dark); padding: 36px 0; } .cm-archive-date { font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--teal-muted); } /* ---------- Editability-tier retrofit (0.6.0) ---------- Text now lives in native blocks carrying the same classNames; these rules make native

/

render identically to the old wp:html markup, and the stretched-link keeps whole-card clicks. */ p.cm-case-numeral, p.cm-case-subline, p.cm-stat-numeral, p.cm-stat-label, p.cm-case-meta-label, p.cm-case-meta-value, p.cm-archive-date { margin: 0; } p.cm-stat-label { margin-top: 10px; } p.cm-case-numeral { margin-bottom: 22px; } h3.cm-case-title { font-family: var(--wp--preset--font-family--sans); margin: 0 0 8px; } .cm-case-card { position: relative; } .cm-case-card .cm-case-title a { color: inherit; text-decoration: none; } .cm-case-card .cm-case-title a::after { content: ""; position: absolute; inset: 0; } .cm-integrity-note p.cm-note-tag { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--ochre-deep); letter-spacing: 0.1em; flex: none; margin: 0; } /* ---------- Blog parity (0.8.0) ---------- */ .cm-post-meta-line { letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--wp--preset--font-size--micro); } .cm-essay-terms { margin-top: 40px; letter-spacing: 0.14em; text-transform: uppercase; } .cm-essay-terms a { color: var(--wp--preset--color--ochre-deep); } .cm-essay-terms a:hover { color: var(--wp--preset--color--teal-ink); } .cm-related-essays { border-top: 1px solid var(--wp--custom--border--on-light); margin-top: 40px; padding-top: 28px; } /* ---------- Share row + author box (0.72.0: wired up, byline, author box, share) ---------- */ .cm-share-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--wp--custom--border--on-light); } .cm-share-label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--teal-muted); } .cm-share-row a { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--forest); text-decoration: underline; text-underline-offset: 3px; } .cm-share-row a:hover, .cm-share-row a:focus-visible { color: var(--wp--preset--color--teal-ink); } .cm-author-box { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; margin-top: 40px; padding: 28px; border: 1px solid var(--wp--custom--border--on-light); border-radius: 4px; background: color-mix(in srgb, var(--wp--preset--color--cream) 40%, var(--wp--preset--color--parchment)); } .cm-author-box-portrait img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 50%; filter: grayscale(1); } .cm-author-box-name { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.0625rem; margin: 0 0 6px; color: var(--wp--preset--color--teal-ink); } .cm-author-box-bio { margin: 0; font-size: var(--wp--preset--font-size--caption); line-height: 1.6; color: var(--wp--preset--color--teal-soft); } .cm-author-box-bio a { color: var(--wp--preset--color--forest); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } .cm-author-box-bio a:hover, .cm-author-box-bio a:focus-visible { color: var(--wp--preset--color--teal-ink); } /* ---------- Contact: form + credibility rail ---------- A form floating alone answers "how do I reach her" and nothing else. The rail answers the three things a prospective client is actually weighing before they type: is this for someone like me, what am I committing to by pressing send, and has she done this in my world. */ .cm-contact-note { display: grid; grid-template-columns: 56px 1fr; gap: 14px 16px; align-items: start; margin: 0 0 32px; padding-bottom: 28px; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-contact-note-photo img { display: block; width: 56px; height: 56px; object-fit: cover; object-position: center 22%; border-radius: 50%; filter: grayscale(1); } .cm-contact-note-text { grid-column: 2; margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: 1rem; line-height: 1.6; color: var(--wp--preset--color--teal-ink); } .cm-contact-note-sign { grid-column: 2; margin: 8px 0 0; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.0625rem; color: var(--wp--preset--color--ochre-deep); } .cm-contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; } .cm-contact-rail { padding-top: 6px; border-left: 1px solid var(--wp--custom--border--on-light); padding-left: 32px; } .cm-contact-rail-kicker { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); margin: 0 0 12px; } .cm-contact-rail-kicker + * { margin-top: 0; } .cm-contact-rail-list, .cm-contact-rail-steps { margin: 0 0 30px; padding-left: 1.1em; } .cm-contact-rail-list li, .cm-contact-rail-steps li { font-size: var(--wp--preset--font-size--caption); line-height: 1.55; color: var(--wp--preset--color--teal-soft); margin-bottom: 10px; } .cm-contact-rail-steps { list-style: decimal; } .cm-contact-rail-steps li::marker { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--ochre-deep); } .cm-contact-rail-sectors { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.0625rem; line-height: 1.5; color: var(--wp--preset--color--teal-ink); margin: 0; } @media (max-width: 900px) { .cm-contact-layout { grid-template-columns: 1fr; gap: 36px; } .cm-contact-rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--wp--custom--border--on-light); padding-top: 28px; } } /* ---------- Subscribe (Kit, server-side) ---------- */ .cm-subscribe { margin-top: 40px; padding: 32px 0 0; border-top: 1px solid var(--wp--custom--border--on-light); } .cm-subscribe-heading { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.3rem, 0.5rem + 1.7333vw, 1.6rem); line-height: 1.3; color: var(--wp--preset--color--teal-ink); margin: 6px 0 8px; } .cm-subscribe-blurb { font-size: var(--wp--preset--font-size--caption); line-height: 1.6; color: var(--wp--preset--color--teal-soft); margin: 0 0 18px; max-width: 520px; } .cm-subscribe-row { display: flex; gap: 10px; max-width: 520px; } .cm-subscribe-row input[type="email"] { flex: 1; min-width: 0; padding: 12px 14px; font: inherit; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--teal-ink); background: var(--wp--preset--color--home-white); border: 1px solid var(--wp--custom--border--on-light-strong); border-radius: 0; } .cm-subscribe-row input[type="email"]:focus-visible { outline: 2px solid var(--wp--preset--color--teal-ink); outline-offset: 2px; } .cm-subscribe-button { flex: none; padding: 12px 20px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--teal-ink); background: var(--wp--preset--color--amber); border: 1px solid var(--wp--preset--color--amber); cursor: pointer; } .cm-subscribe-button:hover, .cm-subscribe-button:focus-visible { background: var(--wp--preset--color--parchment); border-color: var(--wp--preset--color--teal-ink); } .cm-subscribe-fine { font-size: 0.75rem; line-height: 1.5; color: var(--wp--preset--color--teal-muted); margin: 12px 0 0; max-width: 520px; } .cm-subscribe-notice { font-size: var(--wp--preset--font-size--caption); padding: 10px 14px; margin: 0 0 14px; max-width: 520px; border-left: 3px solid var(--wp--preset--color--amber); background: color-mix(in srgb, var(--wp--preset--color--cream) 45%, var(--wp--preset--color--parchment)); color: var(--wp--preset--color--teal-ink); } .cm-subscribe-notice.is-error { border-left-color: var(--wp--preset--color--ochre-deep); } @media (max-width: 480px) { .cm-subscribe-row { flex-direction: column; } .cm-subscribe-button { width: 100%; } } .cm-related-essays .cm-related-item { margin: 10px 0 0; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--caption); } .cm-related-item .cm-archive-date::before { content: "·"; margin: 0 6px 0 8px; } .cm-related-item a { color: var(--wp--preset--color--forest); text-decoration: underline; text-underline-offset: 3px; } .cm-related-item a:hover { color: var(--wp--preset--color--teal-ink); } /* ---------- Enterprise pass (0.10.0) ---------- */ /* Registered block styles: house looks as picker choices */ .wp-block-quote.is-style-amber-rule { border-left: 2px solid var(--wp--preset--color--amber); padding: 4px 0 4px 28px; font-style: italic; } .wp-block-separator.is-style-amber-hairline { width: 130px; height: 1px; border: none; background: var(--wp--preset--color--amber); } .wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; border: 1px solid var(--wp--preset--color--amber); color: var(--wp--preset--color--amber); } .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--teal-ink); } .wp-block-group.is-style-panel-cream { background: var(--wp--preset--color--cream); padding: var(--wp--preset--spacing--50); border: 1px solid var(--wp--custom--border--on-light); } /* Logical properties: the six directional rules, RTL-safe */ .cm-prose blockquote { border-left: 0; border-inline-start: 2px solid var(--wp--preset--color--amber); padding-inline-start: 28px; } .cm-prose th { text-align: start; padding-inline-end: 14px; } .cm-prose td { padding-inline-end: 14px; } .wp-block-quote.is-style-amber-rule { border-left: 0; border-inline-start: 2px solid var(--wp--preset--color--amber); } .cm-prose ul, .cm-prose ol { padding-left: 0; padding-inline-start: 1.4em; } /* Print: essays and case studies on paper — enterprise courtesy */ @media print { .cm-nav, .cm-utility-bar, .cm-footer, .cm-essay-nav, .cm-related-essays, .wp-block-search, .cmc-exit-bar, header.wp-block-template-part, footer.wp-block-template-part { display: none !important; } body { background: #fff !important; color: #000 !important; } .cm-prose, .cm-prose p, .cm-prose td { color: #000 !important; } .cm-prose a { color: #000 !important; text-decoration: underline; } .cm-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; } .cm-prose pre { background: #fff !important; border: 1px solid #000; } .cm-prose pre code { color: #000 !important; } } /* ---------- Home page (0.11.0 port) ---------------------------------- SUPERSEDED 0.24.1 by the Home v2 rail+stage block (~line 780). The 0.11.0 rules were removed with the cm-home-* namespace; this block is intentionally empty and its stale closing brace is removed. The card contrast rule that lived here survives as .cm-hv2-card h1,h2,h3 (home-ink 15.9:1 on home-paper, 18.9:1 on home-white). */ /* ---------- Books page (0.68.0: serene literary redesign) ---------- Her page as a POET, deliberately quieter and more literary than the technical portfolio it sits inside: a centered fine-press hero, a diamond hairline between sections instead of a hard rule, and a double-rule cover frame that reads as a finished genre whether or not a real cover has been uploaded yet (gate 14: no placeholder apologises for what is missing). */ .cm-books { padding-top: var(--wp--preset--spacing--80); padding-bottom: var(--wp--preset--spacing--80); } .cm-books-hero { margin-bottom: 88px; text-align: center; } .cm-books-hero .cm-kicker { text-align: center; } .cm-books-orn { display: block; width: 7px; height: 7px; margin: 0 auto 22px; background: var(--wp--preset--color--amber); transform: rotate(45deg); } .cm-books-title { font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: clamp(2.2rem, 0.5rem + 4.3333vw, 3.4rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 auto 26px; max-width: 760px; } .cm-books-lede { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: var(--wp--preset--font-size--lede); line-height: 1.6; color: var(--wp--preset--color--teal-soft); max-width: 560px; margin: 0 auto; } .cm-books-div { display: flex; align-items: center; gap: 18px; margin: 0 0 80px; } .cm-books-div::before, .cm-books-div::after { content: ""; flex: 1; height: 1px; background: var(--wp--custom--border--on-light); } .cm-books-div span { display: block; width: 7px; height: 7px; background: var(--wp--preset--color--amber); transform: rotate(45deg); flex: none; } .cm-book { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: center; padding: 0; margin-bottom: 80px; border-top: none; } .cm-book:last-of-type { margin-bottom: 0; } .cm-book.is-flipped { grid-template-columns: 1fr 260px; } .cm-book.is-flipped .cm-book-cover { order: 2; } .cm-book-cover { margin: 0; aspect-ratio: 2 / 3; background: var(--wp--preset--color--teal-ink); display: flex; flex-direction: column; justify-content: space-between; padding: 34px 26px; border: 1px solid var(--wp--preset--color--teal-ink); outline: 1px solid var(--wp--custom--border--on-light-strong); outline-offset: 8px; } .cm-book-cover img { width: 100%; height: 100%; object-fit: cover; } .cm-book-spine { color: var(--wp--preset--color--parchment); font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.4375rem; line-height: 1.3; } /* Type-only cover, the state before an image is uploaded via the media picker. A finished composition in its own right, not a notice. Same double-rule frame in both states, so the frame never changes: only the interior does once a real cover is uploaded (see .has-cover below). */ .cm-book-rule { display: block; width: 26px; height: 1px; margin: 18px auto 14px; background: var(--wp--preset--color--amber); } .cm-book-author { color: var(--wp--preset--color--parchment-soft); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.18em; text-transform: uppercase; text-align: center; } .cm-book-title { font-weight: 400; font-size: clamp(1.5rem, 0.5rem + 1.9333vw, 1.9rem); line-height: 1.28; margin: 0 0 18px; color: var(--wp--preset--color--teal-ink); } .cm-book-blurb { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--lede); line-height: 1.85; color: var(--wp--preset--color--teal-soft); margin: 0 0 26px; } .cm-book-blurb::first-letter { font-size: 2.2em; line-height: 0.8; float: left; padding: 6px 8px 0 0; color: var(--wp--preset--color--ochre-deep); } a.cm-book-buy { display: inline-block; background: var(--wp--preset--color--amber); color: var(--wp--preset--color--teal-ink); border: 1px solid var(--wp--preset--color--amber); padding: 13px 22px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; font-weight: 600; } a.cm-book-buy:hover, a.cm-book-buy:focus-visible { background: var(--wp--preset--color--parchment); border-color: var(--wp--preset--color--parchment); color: var(--wp--preset--color--teal-ink); } .cm-books-praise { text-align: center; margin-bottom: 80px; } .cm-books-praise .cm-kicker { text-align: center; } .cm-books-praise .wp-block-quote { margin: 0 auto; max-width: 640px; border: 0; padding: 0; text-align: center; } .cm-books-praise .wp-block-quote p { font-size: var(--wp--preset--font-size--h-3); line-height: 1.5; margin: 0 0 16px; } .cm-books-praise .wp-block-quote cite { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); } .cm-books-author { margin-top: 0; } /* ---------- About testimonial (0.33.0) ---------- Outside proof on a page that was otherwise pure self-description. Sits full width under the two columns so it reads as a closing note rather than a sidebar ornament. Constrained to a measure the eye can hold in one pass; a testimonial that wraps four times stops being a quote. */ .cm-about-praise { max-width: 780px; margin: 56px auto 0; padding-top: 40px; border-top: 1px solid var(--wp--custom--border--on-light); text-align: center; } .cm-about-praise .cm-kicker { margin: 0 0 18px; } .cm-about-praise .wp-block-quote { margin: 0; border-left: 0; border-inline-start: 0; border-top: 0; padding: 0; text-align: center; } .cm-about-praise .wp-block-quote p { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--lede); line-height: 1.6; font-style: normal; margin: 0 0 20px; } .cm-about-praise .wp-block-quote cite { display: block; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--caption); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); } @media (max-width: 780px) { .cm-about-praise { margin-top: 40px; padding-top: 32px; } } .cm-books-bio { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--lede); line-height: 1.75; color: var(--wp--preset--color--teal-soft); max-width: 680px; } /* Author hero (0.60.0): the portrait beside a warm introduction, so the Books page reads as HER author page, not just a shelf of two titles. */ /* Author band, elevated (0.60.0): this page IS the author page, so the about-the-author section is treated as a feature, not a footnote. A warm bordered card, the portrait given presence, real credentials, and routes to the work and to a conversation. */ .cm-books-author { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 0.5rem + 3.3333vw, 4rem); align-items: start; padding: clamp(2.5rem, 0.5rem + 4.3333vw, 3.75rem); border: 1px solid var(--wp--custom--border--on-light); border-radius: 4px; background: color-mix(in srgb, var(--wp--preset--color--cream) 40%, var(--wp--preset--color--parchment)); } .cm-author-creds { margin: 26px 0 22px; padding: 22px 0 0; border-top: 1px solid var(--wp--custom--border--on-light); display: grid; gap: 14px; } .cm-author-cred { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: baseline; } .cm-author-cred dt { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); margin: 0; } .cm-author-cred dd { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--wp--preset--color--teal-soft); } .cm-author-links { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; } .cm-author-portrait { margin: 0; } .cm-author-portrait img { display: block; width: 100%; height: auto; border-radius: 2px; filter: grayscale(1); box-shadow: 0 12px 32px color-mix(in srgb, var(--wp--preset--color--teal-ink) 16%, transparent); } .cm-author-name { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 0.5rem + 1.5333vw, 1.7rem); line-height: 1.2; color: var(--wp--preset--color--teal-ink); margin: 0.3em 0 0.15em; } .cm-author-role { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); margin: 0 0 1.1em; } .cm-books-author .cm-books-bio { margin: 0; } @media (max-width: 781px) { .cm-books-author { grid-template-columns: 1fr; } .cm-author-portrait { max-width: 240px; } } @media (prefers-reduced-motion: no-preference) { .cm-author-portrait img { transition: filter 0.4s ease; } .cm-books-author:hover .cm-author-portrait img { filter: grayscale(0); } } @media (max-width: 780px) { .cm-book, .cm-book.is-flipped { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; } .cm-book.is-flipped .cm-book-cover { order: 0; } .cm-book-cover { max-width: 240px; outline-offset: 6px; margin: 0 auto; } .cm-books-hero { margin-bottom: 56px; } .cm-books-div { margin-bottom: 56px; } .cm-books-praise { margin-bottom: 56px; } } /* ---------- Testimonials (0.51.0) ---------- */ .cm-praise-grid { display: grid; gap: 22px; } .cm-praise-grid.is-multi { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .cm-praise-grid blockquote { margin: 0; } /* ---------- Related work (0.53.0) ---------- Inside the closing band, before the conversation route. Each item names the capabilities the two works share, so the link explains itself. */ /* ---------- Case closing band, action row ---------- The two buttons and the contact route sit on one baseline. Each used to be its own paragraph, which stacked them at the far left of a 1332px band, and the contact link was emitted after the related list so it appeared orphaned below it. */ .cm-case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 26px 0 0; } .cm-case-actions .cm-book-buy { margin: 0; } .cm-case-actions-contact { margin-left: 4px; } @media (max-width: 620px) { .cm-case-actions { flex-direction: column; align-items: flex-start; gap: 12px; } .cm-case-actions-contact { margin-left: 0; } } .cm-case-related { margin: 30px 0 18px; padding-top: 22px; border-top: 1px solid var(--wp--custom--border--on-dark); } .cm-case-related-kicker { margin: 0 0 12px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--amber); } .cm-case-related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px 28px; } .cm-case-related-list li { display: flex; flex-direction: column; gap: 3px; } .cm-case-related-list a { color: var(--wp--preset--color--parchment); text-decoration: none; font-family: var(--wp--preset--font-family--serif); font-size: 1.1875rem; } .cm-case-related-list a:hover, .cm-case-related-list a:focus-visible { color: var(--wp--preset--color--parchment); text-decoration: underline; text-underline-offset: 3px; } .cm-case-related-why { font-size: 0.8125rem; color: var(--wp--preset--color--parchment-muted); } /* ---------- Canvas frame (0.53.0) ---------- */ .cm-canvas-lede { max-width: 720px; margin: 10px 0 28px; font-family: var(--wp--preset--font-family--serif); font-size: 1.3125rem; line-height: 1.45; color: var(--wp--preset--color--parchment-soft); } .cm-canvas-after { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--wp--custom--border--on-dark); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 28px; } .cm-canvas-after-col p { margin: 6px 0 0; } .cm-canvas-after .cm-kicker { margin-bottom: 8px; } /* ---------- Credentials (0.51.0) ---------- Scannable, beneath the About rail. States only what the prose already claims; a credential appearing here that is not in the paragraph would be a second source. */ .cm-credentials { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--wp--custom--border--on-light-strong); display: grid; gap: 10px; } .cm-cred { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; } .cm-cred dt { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); } .cm-cred dd { margin: 0; font-size: var(--wp--preset--font-size--caption); line-height: 1.55; color: var(--wp--preset--color--teal-soft); } @media (max-width: 480px) { .cm-cred { grid-template-columns: 1fr; gap: 3px; } } /* ---------- Footer inner + legal pages (0.51.0) ---------- */ .cm-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; } .cm-footer-name { margin: 0; } .cm-footer-links { display: flex; gap: 22px; flex-wrap: wrap; } .cm-footer-links a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .cm-footer-links a:hover, .cm-footer-links a:focus-visible { border-bottom-color: currentColor; } .cm-legal-body h2 { margin: 34px 0 10px; font-family: var(--wp--preset--font-family--serif); font-size: 1.5rem; line-height: 1.2; } .cm-legal-body h2:first-child { margin-top: 0; } .cm-legal-body p, .cm-legal-body li { line-height: 1.7; } /* inherits the body size, like all site prose */ .cm-legal-body ul { padding-left: 1.2em; } /* ---------- Engagement process (0.51.0) ---------- The case spine, pointed at the buyer. Numbered 01 to 05 because these ARE index numbers, which is the one place padding belongs. */ .cm-process { max-width: 1140px; margin: 54px auto 0; padding-top: 44px; border-top: 1px solid var(--wp--custom--border--on-light-strong); } .cm-process-lede { max-width: 720px; margin: 10px 0 30px; font-family: var(--wp--preset--font-family--serif); font-size: 1.3125rem; line-height: 1.45; color: var(--wp--preset--color--teal-ink); } .cm-process-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; } .cm-process-steps li { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 2px solid var(--wp--preset--color--amber); } .cm-process-n { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; color: var(--wp--preset--color--ochre-deep); } .cm-process-label { font-family: var(--wp--preset--font-family--serif); font-size: 1.25rem; line-height: 1.2; color: var(--wp--preset--color--teal-ink); } .cm-process-body { font-size: 0.875rem; line-height: 1.65; color: var(--wp--preset--color--teal-soft); } .cm-process-proof { margin: 30px 0 0; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--teal-muted); } @media (max-width: 1000px) { .cm-process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .cm-process-steps { grid-template-columns: 1fr; gap: 16px; } } /* ---------- Essays band (0.51.0) ---------- Evidence of reasoning, on the dark register so it reads as a distinct movement between About (who) and Offers (what). One essay renders as a single wide card; three or more fall into a grid. */ .cm-essays-head { max-width: 760px; margin: 0 auto 34px; text-align: center; } .cm-essays-h2 { margin: 10px 0 14px; font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--h-2); line-height: 1.16; color: var(--wp--preset--color--parchment); } .cm-essays-h2 em { color: var(--wp--preset--color--cream); font-style: italic; } .cm-essays-note { margin: 0; font-size: var(--wp--preset--font-size--caption); line-height: 1.7; color: var(--wp--preset--color--parchment-soft); } /* amber on forest measures 3.52:1, under the 4.5 minimum. cream clears at 5.39 and keeps the warm register the band is going for. */ .cm-essays-band .cm-kicker-light { color: var(--wp--preset--color--cream); } .cm-essays-grid { max-width: 1140px; margin: 0 auto; display: grid; /* min() rather than a bare 340px: a hard floor cannot shrink, so at 390px with the band's side padding the track stayed 340 wide and pushed the page 4px sideways. min(340px, 100%) keeps the two-column behaviour on wider screens and collapses cleanly on a phone. */ grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 22px; } .cm-essays-grid > .cm-essay:only-child { max-width: 760px; margin: 0 auto; } .cm-essay { padding: 28px 30px 26px; border: 1px solid var(--wp--custom--border--on-dark); border-top: 3px solid var(--wp--preset--color--amber); background: var(--wp--custom--surface--keycap-dark); } .cm-essay-kicker { margin: 0 0 12px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--cream); } .cm-essay-title { margin: 0 0 6px; font-family: var(--wp--preset--font-family--serif); font-size: 1.75rem; line-height: 1.2; } .cm-essay-title a { color: var(--wp--preset--color--parchment); text-decoration: none; } .cm-essay-title a:hover, .cm-essay-title a:focus-visible { color: var(--wp--preset--color--amber); } .cm-essay-title a:focus-visible { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 3px; } .cm-essay-sub { margin: 0 0 14px; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.125rem; color: var(--wp--preset--color--cream); } .cm-essay-summary { margin: 0 0 18px; font-size: var(--wp--preset--font-size--caption); line-height: 1.75; color: var(--wp--preset--color--cream); } .cm-essay-read { margin: 0; } @media (max-width: 600px) { .cm-essay { padding: 22px 20px; } .cm-essay-title { font-size: 1.5rem; } } /* ---------- Evidence matrix (0.37.0) ---------- A reviewer arrives with a question. The card grid answers it only by being read end to end; this answers it in one screen. Layout: CSS grid rather than table-layout, so the capability column can hold a full explanatory line while the eight work columns stay equal and narrow. display:grid on a table strips implicit row/cell roles in some engines, so the roles are restated explicitly in markup rather than relying on the browser to preserve them. The mark carries the case register colour AND a shape, never colour alone, so it survives 1.4.1 and a monochrome print. */ .cm-matrix-band { padding-top: 0; } /* 1.5.22: one alignment axis. The head, the table and the ask all start at the same left edge; the note holds a readable measure instead of a centred 90-character line. */ .cm-matrix-head { max-width: 1140px; margin: 0 auto 30px; text-align: left; } .cm-matrix-head .cm-matrix-h2, .cm-matrix-head .cm-matrix-note { max-width: 62ch; } .cm-matrix-h2 { margin: 10px 0 14px; font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--h-2); line-height: 1.16; } .cm-matrix-h2 em { color: var(--wp--preset--color--ochre-deep); font-style: italic; } .cm-matrix-note { margin: 0; font-size: var(--wp--preset--font-size--caption); line-height: 1.7; color: var(--wp--preset--color--teal-soft); } .cm-matrix-wrap { max-width: 1140px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; /* A containing block, so the absolutely positioned cells inside resolve against this element and are clipped by its own overflow. Without it they resolved higher up, escaped the scroller entirely and pushed the document to 586px in a 390px window: the page scrolled sideways while every ancestor measured a correct 390. */ position: relative; } .cm-matrix-wrap:focus-visible { outline: 2px solid var(--wp--preset--color--ochre-deep); outline-offset: 3px; } /* Below this the capability label collapses to unreadable. Measured, not guessed: at 900px a fluid layout gives the label 134px, which wraps "Objectives at a performance level" to five lines. */ /* 1.5.22: nine columns with names under each marker need 980px; narrower screens scroll the table while the capability column stays pinned. */ .cm-matrix { width: 100%; min-width: 980px; border-collapse: collapse; caption-side: top; } .cm-matrix thead tr, .cm-matrix tbody tr { display: grid; /* The column count comes from the data (--cm-cols, set on the table). Hard-coded at 8, a ninth work wrapped onto its own line. */ grid-template-columns: minmax(250px, 1.9fr) repeat(var(--cm-cols, 8), minmax(0, 1fr)); align-items: stretch; } .cm-matrix tbody tr { border-top: 1px solid var(--wp--custom--border--on-light); } .cm-matrix tbody tr:last-child { border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-matrix-corner { border: 0; } .cm-matrix-col { padding: 0 0 10px; text-align: center; vertical-align: bottom; font-weight: 400; } .cm-matrix-col a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 4px; text-decoration: none; color: inherit; } .cm-matrix-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--wp--preset--color--parchment); background: var(--wp--preset--color--teal-soft); } .cm-matrix-col.is-cc .cm-matrix-n { background: var(--wp--preset--color--forest); } .cm-matrix-col.is-ib .cm-matrix-n { background: var(--wp--preset--color--ib-deep); } .cm-matrix-col.is-itq .cm-matrix-n { background: var(--wp--preset--color--itq-accent); } .cm-matrix-col.is-ko .cm-matrix-n { background: var(--wp--preset--color--ko-accent); } .cm-matrix-col.is-sf .cm-matrix-n { background: var(--wp--preset--color--sf-navy); } .cm-matrix-col.is-cs .cm-matrix-n { background: var(--wp--preset--color--ochre-deep); } .cm-matrix-col.is-cl .cm-matrix-n { background: var(--wp--preset--color--cl-deep); } .cm-matrix-col.is-sci .cm-matrix-n { background: var(--wp--preset--color--sci-accent); } .cm-matrix-col.is-fg .cm-matrix-n { background: var(--wp--preset--color--fg-accent); } .cm-matrix-col a:focus-visible { outline: 2px solid var(--wp--preset--color--ochre-deep); outline-offset: 2px; } /* 1.5.22: the name sits on the column itself, horizontal, under its colour-matched marker. The key above the table is gone: no decoding. */ .cm-matrix-colname { display: block; max-width: 100px; font-size: 0.8125rem; line-height: 1.3; text-align: center; color: var(--wp--preset--color--teal-ink); } .cm-matrix-col a:hover .cm-matrix-colname { text-decoration: underline; text-underline-offset: 3px; } .cm-matrix-tag { display: block; margin-top: -4px; font-family: var(--wp--preset--font-family--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--teal-muted); } /* Pinned while the columns scroll on narrow screens, so a row never loses its name. Background matches the band and the row's hover tint. */ .cm-matrix-cap { position: sticky; left: 0; z-index: 2; background: var(--wp--preset--color--parchment); padding: 16px 22px 16px 0; text-align: left; font-weight: 400; vertical-align: top; } .cm-matrix-capname { display: block; font-family: var(--wp--preset--font-family--serif); font-size: 1.0625rem; line-height: 1.3; color: var(--wp--preset--color--teal-ink); } .cm-matrix-capnote { display: block; margin-top: 5px; font-size: 0.8125rem; line-height: 1.55; color: var(--wp--preset--color--teal-muted); } .cm-matrix-cell { display: grid; place-items: center; padding: 16px 0; } .cm-matrix-mark { width: 15px; height: 15px; border-radius: 2px; background: var(--wp--preset--color--teal-soft); transform: rotate(45deg); } .cm-matrix-cell.is-cc .cm-matrix-mark { background: var(--wp--preset--color--forest); } .cm-matrix-cell.is-ib .cm-matrix-mark { background: var(--wp--preset--color--ib-deep); } .cm-matrix-cell.is-itq .cm-matrix-mark { background: var(--wp--preset--color--itq-accent); } .cm-matrix-cell.is-ko .cm-matrix-mark { background: var(--wp--preset--color--ko-accent); } .cm-matrix-cell.is-sf .cm-matrix-mark { background: var(--wp--preset--color--sf-navy); } .cm-matrix-cell.is-cs .cm-matrix-mark { background: var(--wp--preset--color--ochre-deep); } .cm-matrix-cell.is-cl .cm-matrix-mark { background: var(--wp--preset--color--cl-deep); } .cm-matrix-cell.is-sci .cm-matrix-mark { background: var(--wp--preset--color--sci-accent); } .cm-matrix-cell.is-fg .cm-matrix-mark { background: var(--wp--preset--color--fg-accent); } /* A row a reader is tracking across eight narrow columns is easy to lose. Hover and keyboard focus within the row tint it, which is the cheapest correct answer to the cross-referencing problem a wide matrix creates. */ .cm-matrix tbody tr:hover, .cm-matrix tbody tr:focus-within { background: var(--wp--preset--color--cream); } .cm-matrix tbody tr:hover .cm-matrix-cap, .cm-matrix tbody tr:focus-within .cm-matrix-cap { background: var(--wp--preset--color--cream); } /* 1.5.22: every mark is a door to its proof. A 40px target around the 15px diamond; on hover or keyboard focus a label names the work and where the link lands. The label sits right-aligned in the last columns so the scroller never clips it. */ .cm-matrix-go { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; text-decoration: none; } .cm-matrix-go:focus-visible { outline: 2px solid var(--wp--preset--color--ochre-deep); outline-offset: 1px; } .cm-matrix-go::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; padding: 5px 9px; border-radius: 4px; font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; letter-spacing: 0.02em; background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment); opacity: 0; pointer-events: none; } .cm-matrix-go:hover::after, .cm-matrix-go:focus-visible::after { opacity: 1; } .cm-matrix-cell:nth-last-child(-n+3) .cm-matrix-go::after { left: auto; right: 0; transform: none; } @media (prefers-reduced-motion: no-preference) { .cm-matrix-go .cm-matrix-mark { transition: transform 0.2s ease-out; } .cm-matrix-go::after { transition: opacity 0.15s ease-out; } .cm-matrix-go:hover .cm-matrix-mark, .cm-matrix-go:focus-visible .cm-matrix-mark { transform: rotate(45deg) scale(1.25); } } /* The first time the matrix is seen, the first row's marks pulse twice so a reader learns they are links (motion.js; never under reduced motion). */ @media (prefers-reduced-motion: no-preference) { @keyframes cm-mark-hint { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.5); } } .cm-matrix tr.is-hinting .cm-matrix-go .cm-matrix-mark { animation: cm-mark-hint 0.8s ease-in-out 2; } } /* Anchors the matrix links to land below the sticky header. */ .cm-case-sec-kicker[id], [id="accessibility"] { scroll-margin-top: 110px; } /* The ask sits between the matrix and its legend: close enough to the evidence to be about the evidence, quiet enough not to read as a pitch. Measure held tight so it scans as a note, not a banner. */ .cm-matrix-ask { max-width: 1140px; margin: 30px auto 0; /* Same left edge as the matrix; the text keeps a readable measure. */ box-sizing: border-box; padding-right: max(0px, calc(100% - 68ch)); padding-top: 26px; border-top: 1px solid var(--wp--custom--border--on-light); font-size: var(--wp--preset--font-size--caption); line-height: 1.75; color: var(--wp--preset--color--teal-soft); text-align: left; } .cm-matrix-ask .cm-work-read { display: inline-block; margin-top: 12px; } .cm-matrix-legend { max-width: 1140px; margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 26px; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--teal-muted); } .cm-matrix-legend-item { display: inline-flex; align-items: center; gap: 9px; } .cm-matrix-mark.is-legend { background: var(--wp--preset--color--teal-soft); } .cm-matrix-n.is-legend { width: 22px; height: 22px; font-size: 0.6875rem; } @media (max-width: 900px) { .cm-matrix { min-width: 700px; } .cm-matrix thead tr, .cm-matrix tbody tr { grid-template-columns: minmax(150px, 1.6fr) repeat(var(--cm-cols, 8), minmax(0, 1fr)); } .cm-matrix-capnote { display: none; } .cm-matrix-colname { max-height: 132px; font-size: 0.6875rem; } .cm-matrix-n { width: 26px; height: 26px; font-size: 0.6875rem; } .cm-matrix-cap { padding-right: 12px; } } @media (max-width: 600px) { .cm-matrix { min-width: 600px; } .cm-matrix thead tr, .cm-matrix tbody tr { grid-template-columns: minmax(128px, 1.7fr) repeat(var(--cm-cols, 8), minmax(0, 1fr)); } .cm-matrix-capname { font-size: 0.875rem; } .cm-matrix-mark { width: 11px; height: 11px; } .cm-matrix-n { width: 21px; height: 21px; font-size: 0.625rem; } .cm-matrix-colname { max-height: 112px; font-size: 0.625rem; } } /* ---------- Evidence galleries (0.13.0 — the restored photographs) ---------- */ .cm-evidence { margin-top: var(--wp--preset--spacing--70); padding-top: var(--wp--preset--spacing--60); border-top: 1px solid var(--wp--custom--border--on-light); } .cm-evidence-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 20px; } .cm-evidence-item { margin: 0; } .cm-evidence-item img { width: 100%; height: auto; display: block; border: 1px solid var(--wp--custom--border--on-light); } /* Uniform grid cells (0.25.3). --cm-fig-ar is set per grid in PHP from the tallest figure present, so every cell is the same height and nothing is cropped. Falls back to natural flow if the var is absent. */ .cm-evidence-grid[style*="--cm-fig-ar"] .cm-evidence-item img { aspect-ratio: var(--cm-fig-ar); height: auto; object-fit: contain; background: var(--case-light, var(--wp--preset--color--cream)); } .cm-evidence-item .wp-element-caption { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.06em; color: var(--wp--preset--color--teal-soft); margin-top: 10px; } @media (max-width: 720px) { .cm-evidence-grid { grid-template-columns: 1fr; } } /* ---------- Capabilities page (0.15.0 — the restored one-pager) ---------- */ .cm-case--capabilities .cm-cap-contact { font-family: var(--wp--preset--font-family--mono); letter-spacing: 0.04em; color: var(--wp--preset--color--teal-soft); } .cm-case--capabilities .cm-cap-contact a { color: var(--wp--preset--color--forest); } /* 6.66:1 on parchment */ .cm-case--capabilities .cm-cap-contact a:hover, .cm-case--capabilities .cm-cap-contact a:focus-visible { color: var(--wp--preset--color--teal-ink); } .cm-case--capabilities .cm-cap-lede { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: var(--wp--preset--font-size--caption); line-height: 1.55; color: var(--wp--preset--color--teal-ink); max-width: 680px; } /* Light-register overrides for the dark-register offer cards reused here. */ .cm-case--capabilities .cm-offer .cm-offer-lead { color: var(--wp--preset--color--teal-ink); } .cm-case--capabilities .cm-offer p { color: var(--wp--preset--color--teal-soft); } /* 8.69:1 on parchment */ .cm-case--capabilities .cm-cap-panel { border: 1px solid var(--wp--custom--border--on-light-strong); } .cm-cap-index { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; } .cm-cap-index li { font-size: var(--wp--preset--font-size--caption); line-height: 1.7; color: var(--wp--preset--color--teal-soft); } .cm-cap-index a { color: var(--wp--preset--color--forest); font-weight: 500; } .cm-cap-index a:hover, .cm-cap-index a:focus-visible { color: var(--wp--preset--color--teal-ink); } .cm-cap-num { font-family: var(--wp--preset--font-family--serif); color: var(--wp--preset--color--forest); font-variant-numeric: tabular-nums; margin-right: 6px; } .cm-case--capabilities .cm-cap-foot { border-top: 1px solid var(--wp--custom--border--on-light); padding-top: 24px; } /* ---------- Live demo cards, image-led (0.16.0 — owner: "where are the preview images?") ---------- */ .cm-demo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: var(--wp--preset--spacing--60); } .cm-demo-card { display: flex; flex-direction: column; text-decoration: none; color: var(--wp--preset--color--parchment); background: var(--wp--custom--surface--hover-wash-dark); border: 1px solid var(--wp--custom--border--on-dark); padding: 0 0 18px; } .cm-demo-card figure { margin: 0 0 14px; overflow: hidden; aspect-ratio: 909 / 540; border-bottom: 1px solid var(--wp--custom--border--on-dark); } .cm-demo-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .cm-demo-title { display: block; padding: 0 16px; font-weight: 600; font-size: var(--wp--preset--font-size--caption); letter-spacing: 0.01em; } .cm-demo-sub { display: block; padding: 4px 16px 0; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--parchment-soft); line-height: 1.6; } .cm-demo-cta { display: block; margin-top: auto; padding: 14px 16px 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--amber); } .cm-demo-card:hover, .cm-demo-card:focus-visible { border-color: var(--wp--preset--color--amber); } .cm-demo-card:hover .cm-demo-cta, .cm-demo-card:focus-visible .cm-demo-cta { color: var(--wp--preset--color--parchment); } @media (max-width: 1000px) { .cm-demo-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cm-demo-grid { grid-template-columns: 1fr; } } /* ---------- Case-grid previews (owner: "same treatment, one screenshot per case") ---------- */ /* Frames match the screenshots' native 909x540 (measured 8.6): four of case thumbs render with zero crop. The CC share card (1200x630) contains on its own teal field instead of losing its designed edges. */ .cm-case-card .cm-case-thumb { margin: 0 0 16px; aspect-ratio: 909 / 540; overflow: hidden; border: 1px solid var(--wp--custom--border--on-dark); } .cm-case-card .cm-case-thumb.is-card-art { background: var(--wp--preset--color--teal-ink); } .cm-case-card .cm-case-thumb.is-card-art img { object-fit: contain; } .cm-case-card .cm-case-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ---------- Header CTA (0.17.0 nav IA) ---------- */ a.cm-nav-cta { display: inline-block; background: var(--wp--preset--color--amber); color: var(--wp--preset--color--teal-ink); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 10px 18px; white-space: nowrap; } a.cm-nav-cta:hover, a.cm-nav-cta:focus-visible { background: var(--wp--preset--color--parchment); color: var(--wp--preset--color--teal-ink); } /* a.cm-nav-cta, to match the rule above: at .cm-nav-cta it lost on specificity and never applied, so phones had the button squeezed into the header on every page (found 1.5.39). */ @media (max-width: 700px) { a.cm-nav-cta { display: none; } } /* ---------- Case-page showcase structure (0.17.0, Phase D) ---------- */ .cm-case-launch { margin: 28px 0 0; } .cm-a11y-note { margin: 26px 0 0; max-width: 64ch; padding: 4px 0 4px 16px; border-left: 3px solid var(--wp--preset--color--teal-ink); font-size: var(--wp--preset--font-size--caption); line-height: 1.6; color: var(--wp--preset--color--ink-muted); } .cm-a11y-note strong { color: var(--wp--preset--color--teal-ink); } /* Evidence figures sit at the reading measure, not full-bleed: a screenshot is an illustration inside the narrative, not a takeover. Dense UI shots stay legible because they are also openable via the demo itself one click up. */ .cm-case-inline-fig { margin: 28px auto 8px; max-width: 100%; border: 1px solid var(--wp--custom--border--on-light); } .cm-case-inline-fig img { width: 100%; height: auto; display: block; } .cm-case-inline-fig.is-lead { margin: 36px 0 0; } /* Tall figures (0.25.2). A near-square or portrait screenshot at the full 680px content width renders 670-800px tall and swallows the viewport, so the class caps width and lets height follow the aspect ratio. Set in PHP from the file's intrinsic size, not guessed here. */ .cm-case-inline-fig.is-tall { max-width: min(100%, 470px); margin-inline: auto; } .cm-case-inline-fig.is-tall.is-lead { margin: 36px auto 0; } .cm-case-inline-fig.is-narrow { max-width: 860px; margin-left: auto; margin-right: auto; } .cm-case-inline-fig.is-narrow.is-lead { margin-bottom: 44px; } /* Poster link: the screenshot IS the launch control for the live demo. */ .cm-fig-launch { display: block; position: relative; text-decoration: none; } .cm-fig-cue { position: absolute; inset-inline-start: 0; inset-block-end: 0; display: block; padding: 12px 18px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--parchment); background: var(--case-accent-deep, var(--wp--preset--color--teal-ink)); } .cm-fig-launch:hover img, .cm-fig-launch:focus-visible img { filter: brightness(1.04); } .cm-fig-launch:focus-visible { outline: 3px solid var(--case-accent, var(--wp--preset--color--amber)); outline-offset: 3px; } .cm-case-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 0 32px; margin: 36px 0 8px; border-left: none; } .cm-case-statrow .cm-stat { border-bottom: none !important; border-left: 1px solid var(--wp--custom--border--on-light-strong); padding-left: 18px; } .cm-case-band { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--parchment); padding: 72px var(--wp--preset--spacing--70); margin-top: var(--wp--preset--spacing--70); } .cm-case-band.is-navy { background: var(--wp--preset--color--navy); } .cm-case-band-line { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--caption); font-style: italic; max-width: 680px; margin: 0 0 20px; } @media (max-width: 720px) { .cm-case-statrow { grid-template-columns: 1fr; gap: 18px; } } /* ---------- Hero work mosaic (0.17.0 — owner: the mark should BE the work) ---------- */ /* Two-tile composition on a strict grid (design review, 8.7): one dominant, one supporting, 24px module, aligned right edges, single shadow spec. The claim column is PROTECTED — separate grid tracks, overflow contained, and the stack point raised so mid-width viewports can never run tiles into type. */ /* Single column since the mosaic was cut in 0.26.0 (0.28.6). The two-column grid survived the removal, so the claim sat in a 48% column with the other half empty. The claim now uses the full width and caps at its own measure. */ .cm-hero-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; overflow: hidden; } /* 0.28.8: the 34ch cap added in 0.28.6 was meant for the prose and landed on the whole hero block, squeezing the headline, the chip row and the CTA into a 34-character column. Measure belongs on the paragraphs; the block spans the hero, and each text element caps itself. */ .cm-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: center; } .cm-hero-claim { max-width: none; } /* Hero rebuild (0.29.0). Order of weight now matches order of importance: a quiet kicker names the field, the headline carries the idea, and the lede, which is the actual differentiator, is the loudest body text on the page instead of the faintest. */ .cm-hero-kicker { margin: 0 0 18px; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--amber); max-width: 34ch; } .cm-hero-lede { margin: 22px 0 0; font-family: var(--wp--preset--font-family--sans); font-size: clamp(1.1875rem, 0.5rem + 0.9333vw, 1.4375rem); line-height: 1.5; font-weight: 400; color: var(--wp--preset--color--parchment); max-width: 46ch; } .cm-hero-cta { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; } .cm-hero-primary, .cm-hero-secondary { display: inline-block; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 15px 24px; border: 1px solid var(--wp--preset--color--amber); } .cm-hero-primary { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--teal-ink); } .cm-hero-secondary { background: transparent; color: var(--wp--preset--color--amber); } .cm-hero-primary:hover, .cm-hero-secondary:hover { background: var(--wp--preset--color--parchment); border-color: var(--wp--preset--color--parchment); color: var(--wp--preset--color--teal-ink); } .cm-hero-primary:focus-visible, .cm-hero-secondary:focus-visible { outline: 3px solid var(--wp--preset--color--parchment); outline-offset: 3px; } /* The proof panel. Every reference hero shows the product; this one shows an artifact that genuinely opens, framed as a browser so "runs in the browser" is legible before the caption is read. */ .cm-hero-proof { margin: 0; } .cm-hero-proof-link { display: block; position: relative; text-decoration: none; border: 1px solid var(--wp--custom--border--on-dark-strong); background: var(--wp--preset--color--teal-ink); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42); } .cm-hero-chrome { display: flex; gap: 7px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--wp--custom--border--on-dark); } .cm-hero-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--wp--custom--border--on-dark-strong); } .cm-hero-proof-link img { display: block; width: 100%; height: auto; } .cm-hero-proof-cue { position: absolute; inset-inline-start: 0; inset-block-end: 0; padding: 11px 16px; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--teal-ink); background: var(--wp--preset--color--amber); } .cm-hero-proof-link:focus-visible { outline: 3px solid var(--wp--preset--color--amber); outline-offset: 4px; } .cm-hero-proof figcaption { margin: 14px 0 0; font-size: var(--wp--preset--font-size--micro); line-height: 1.6; color: var(--wp--preset--color--parchment-soft); max-width: 44ch; } @media (max-width: 900px) { .cm-hero-split { grid-template-columns: minmax(0, 1fr); gap: 40px; } } /* ========================================================================== Alternate heroes (0.29.0). Both invert the dark register into light, and both take their colour from tokens already measured for the case pages, so nothing new enters the system. Ratios are recorded per rule. ========================================================================== */ /* ---- A. Daylight: the parchment surface of the case pages, brought front */ .cm-hero--daylight { background: var(--wp--preset--color--parchment); } .cm-hero--daylight::before { display: none; } .cm-hero--daylight h1 { color: var(--wp--preset--color--teal-ink); } /* 12.90:1 */ .cm-hero--daylight h1 em { color: var(--wp--preset--color--ochre-deep); } /* 6.17:1 */ .cm-hero--daylight .cm-hero-kicker { color: var(--wp--preset--color--ochre-deep); } .cm-hero--daylight .cm-hero-lede { color: var(--wp--preset--color--ink-soft); } /* 6.65:1 */ .cm-hero--daylight .cm-hero-chips { border-left-color: var(--wp--custom--border--on-light); } .cm-hero--daylight .cm-hero-chips span { color: var(--wp--preset--color--sf-bronze); background: none; } .cm-hero--daylight .cm-hero-primary { background: var(--wp--preset--color--teal-ink); border-color: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment); } .cm-hero--daylight .cm-hero-secondary { color: var(--wp--preset--color--teal-ink); border-color: var(--wp--preset--color--teal-ink); } .cm-hero--daylight .cm-hero-primary:hover, .cm-hero--daylight .cm-hero-secondary:hover { background: var(--wp--preset--color--amber); border-color: var(--wp--preset--color--amber); color: var(--wp--preset--color--teal-ink); } .cm-hero--daylight .cm-hero-proof-link { border-color: var(--wp--custom--border--on-light); background: var(--wp--preset--color--cream); box-shadow: 0 26px 60px rgba(16, 51, 38, 0.18); } .cm-hero--daylight .cm-hero-chrome { border-bottom-color: var(--wp--custom--border--on-light); } .cm-hero--daylight .cm-hero-chrome i { background: var(--wp--preset--color--parchment-soft); } .cm-hero--daylight .cm-hero-proof figcaption { color: var(--wp--preset--color--ink-soft); } /* ---- B. Spectrum: the case registers ARE the hero */ .cm-hero--spectrum { background: var(--wp--preset--color--ko-sky); } .cm-hero--spectrum::before { display: none; } .cm-hero--spectrum h1 { color: var(--wp--preset--color--teal-ink); } /* 12.33:1 */ .cm-hero--spectrum h1 em { color: var(--wp--preset--color--ib-deep); } .cm-hero--spectrum .cm-hero-kicker { color: var(--wp--preset--color--ib-deep); } /* 6.19:1 */ .cm-hero--spectrum .cm-hero-lede { color: var(--wp--preset--color--ink-soft); } /* 6.36:1 */ .cm-hero--spectrum .cm-hero-claim { max-width: 46ch; } .cm-hero--spectrum .cm-hero-chips { border-left-color: var(--wp--custom--border--on-light); } .cm-hero--spectrum .cm-hero-chips span { color: var(--wp--preset--color--sf-bronze); background: none; } .cm-spectrum-lead { margin: 46px 0 14px; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); } /* 1.5.24: the tile count comes from the data (--cm-tiles on the list). Hard-coded at 6, IT Quest's tile wrapped onto a row of its own. */ .cm-spectrum { display: grid; grid-template-columns: repeat(var(--cm-tiles, 6), minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; align-items: stretch; } .cm-spectrum-item { display: flex; } .cm-spectrum-item a { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 190px; padding: 22px 20px 24px; text-decoration: none; color: var(--wp--preset--color--parchment); } /* opacity removed: it composited these numerals to 3.2-4.2:1 against their own band colours, under the 4.5:1 minimum (axe, 0.91.0). */ .cm-spectrum-n { font-family: var(--wp--preset--font-family--serif); font-size: 1.875rem; line-height: 1; } .cm-spectrum-label { margin-top: auto; font-family: var(--wp--preset--font-family--serif); font-size: 1.375rem; line-height: 1.2; } .cm-spectrum-kind { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; } .cm-spectrum-item.is-cc a { background: var(--wp--preset--color--forest); } /* 6.30:1 */ .cm-spectrum-item.is-ib a { background: var(--wp--preset--color--ib-deep); } /* 6.47:1 */ .cm-spectrum-item.is-itq a { background: var(--wp--preset--color--itq-accent); } /* 6.81:1 */ .cm-spectrum-item.is-ko a { background: var(--wp--preset--color--ko-accent); } /* 5.09:1 */ .cm-spectrum-item.is-sf a { background: var(--wp--preset--color--sf-navy); } /* 5.56:1 */ .cm-spectrum-item.is-cs a { background: var(--wp--preset--color--ochre-deep); } /* 6.17:1 */ .cm-spectrum-item.is-cl a { background: var(--wp--preset--color--cl-deep); } /* 6.30:1 */ .cm-spectrum-item a:hover, .cm-spectrum-item a:focus-visible { color: var(--wp--preset--color--parchment); } .cm-spectrum-item a:focus-visible { outline: 3px solid var(--wp--preset--color--teal-ink); outline-offset: -5px; } @media (max-width: 900px) { .cm-spectrum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cm-spectrum-item:last-child:nth-child(odd) { grid-column: 1 / -1; } .cm-spectrum-item a { min-height: 150px; } } @media (max-width: 560px) { .cm-spectrum { grid-template-columns: minmax(0, 1fr); } .cm-spectrum-item a { min-height: 0; flex-direction: row; align-items: baseline; gap: 12px; } .cm-spectrum-label { margin-top: 0; } } /* ---- D. Daylight Spectrum: B's field and proof panel, C's register rail. The rail is compact here because the artifact already holds the eye. It sits flush to the foot of the hero so it reads as the index the page opens into, not as a second hero competing with the first. */ .cm-hero--indexed .cm-hero-split { align-items: start; padding-bottom: 64px; } .cm-hero--indexed .cm-spectrum { margin-inline: calc(var(--wp--preset--spacing--70) * -1); } .cm-spectrum.is-compact .cm-spectrum-item a { min-height: 74px; padding: 16px 18px; flex-direction: row; align-items: center; gap: 11px; } .cm-spectrum.is-compact .cm-spectrum-label { text-wrap: balance; } .cm-spectrum.is-compact .cm-spectrum-n { font-size: 1.0625rem; } .cm-spectrum.is-compact .cm-spectrum-label { margin-top: 0; font-size: 1.0625rem; } @media (max-width: 900px) { .cm-hero--indexed .cm-hero-split { padding-bottom: 44px; } .cm-spectrum.is-compact .cm-spectrum-item a { padding: 15px 18px; } } /* Composed stack (design pass, 8.7): dominant + supporting on a strict 24px grid, shared right edge, single shadow spec, amber rule the lone accent. No absolute positioning — the mosaic cannot leave its column or touch the claim at any viewport. */ .cm-hero-mosaic { display: grid; gap: 24px; justify-items: end; } .cm-hero-tile { margin: 0; border: 1px solid var(--wp--preset--color--parchment-soft); background: var(--wp--preset--color--teal-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow: hidden; } .cm-hero-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* Native ratios (1261/671 hero shot, 909/540 screenshots): zero crop. a and c share the right edge, b anchors the left, nothing overhangs. */ .cm-hero-tile.is-a { width: 100%; aspect-ratio: 1261 / 671; } .cm-hero-tile.is-b { width: 62%; aspect-ratio: 909 / 540; border-top: 2px solid var(--wp--preset--color--amber); } /* ---------- Capabilities as a document (0.17.0 — "revise to make it top tier") ---------- */ .cm-cap-field { background: var(--wp--preset--color--teal-muted); padding: 72px var(--wp--preset--spacing--70); } .cm-cap-sheet { background: var(--wp--preset--color--parchment); max-width: 1140px; margin: 0 auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); border-top: 3px solid var(--wp--preset--color--teal-ink); } .cm-cap-sheet .cm-case-hero.is-light { padding-top: 72px; padding-bottom: 40px; } .cm-cap-print { background: transparent; border: 1px solid var(--wp--custom--border--on-light-strong); color: var(--wp--preset--color--teal-ink); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 20px; cursor: pointer; margin-top: 18px; } .cm-cap-print:hover, .cm-cap-print:focus-visible { background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment); } @media print { .cm-cap-field { background: #fff !important; padding: 0; } .cm-cap-sheet { box-shadow: none; border-top: none; max-width: none; } .cm-cap-print { display: none !important; } .cm-case--capabilities a { color: #000 !important; } .cm-case--capabilities .cm-cap-panel { break-inside: avoid; } } /* ---------- Contact form (pipeline ported from Congregate, 0.17.0) ---------- */ /* Premium form composition (0.62.0): the form is a designed card on the cream page, not a loose stack. Fields lift off it in white; name and email pair on one row on wide screens; the whole thing has a calm, considered rhythm. */ .cm-form { display: grid; gap: 20px; margin-top: 20px; max-width: 620px; padding: clamp(1.75rem, 0.5rem + 3.3333vw, 2.75rem); background: color-mix(in srgb, var(--wp--preset--color--cream) 30%, var(--wp--preset--color--parchment)); border: 1px solid var(--wp--custom--border--on-light-strong); border-radius: 18px; box-shadow: 0 8px 30px color-mix(in srgb, var(--wp--preset--color--teal-ink) 8%, transparent); } /* Name and email share a row on wider screens for a tighter, designed feel. */ @media (min-width: 560px) { .cm-form .cm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } } .cm-field { display: grid; gap: 8px; } /* The label shifts to the accent when its own field is focused, so the eye is always told which field is live. A short transition makes it feel intentional rather than abrupt. */ .cm-field label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--teal-soft); } .cm-field:focus-within label { color: var(--wp--preset--color--ochre-deep); } .cm-form input[type="text"], .cm-form input[type="email"], .cm-form select, .cm-form textarea { background: var(--wp--preset--color--mono-white); border: 1px solid var(--wp--custom--border--on-light-strong); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--teal-ink) 6%, transparent); font: inherit; color: var(--wp--preset--color--teal-ink); width: 100%; } .cm-form input:hover, .cm-form select:hover, .cm-form textarea:hover { border-color: var(--wp--preset--color--teal-soft); } /* Focus lifts the field: a soft ring in the case accent, a hair brighter background, so typing feels like the field has "received" you. */ .cm-form input:focus, .cm-form select:focus, .cm-form textarea:focus { border-color: var(--wp--preset--color--ochre-deep); outline: none; background: var(--wp--preset--color--mono-white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--amber) 28%, transparent); } .cm-form input::placeholder, .cm-form textarea::placeholder { color: var(--wp--preset--color--teal-soft); opacity: 0.75; } /* The button: a quiet lift on hover, a real press on click, and a loading state that swaps the label for a calm pulsing dot while the form submits. */ .cm-form button { justify-self: start; position: relative; background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment); border: 0; border-radius: 8px; padding: 15px 30px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--teal-ink) 30%, transparent); } .cm-form button:hover, .cm-form button:focus-visible { background: var(--wp--preset--color--forest); box-shadow: 0 4px 14px color-mix(in srgb, var(--wp--preset--color--forest) 34%, transparent); } .cm-form button:active { transform: translateY(1px); box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--teal-ink) 30%, transparent); } .cm-form button:focus-visible { outline: 2px solid var(--wp--preset--color--ochre-deep); outline-offset: 3px; } .cm-form button[data-cm-loading] { color: transparent; pointer-events: none; } .cm-form button[data-cm-loading]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--parchment); } @media (prefers-reduced-motion: no-preference) { /* Contact form motion (0.57.0), gated with the rest of the theme's motion. */ .cm-field label { transition: color 0.2s ease; } .cm-form input[type="text"], .cm-form input[type="email"], .cm-form select, .cm-form textarea { transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .cm-form button { transition: background-color 0.2s ease, transform 0.08s ease, box-shadow 0.2s ease; } .cm-form button[data-cm-loading]::after { animation: cm-btn-pulse 0.9s ease-in-out infinite; } @keyframes cm-btn-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } } } .cm-hp { position: absolute !important; left: -9999px !important; top: auto; height: 1px; overflow: hidden; } /* Contact qualification (0.56.0). The "(optional)" hint sits quietly beside a label so required fields read as the real asks. Conditional qualifier fields are visible by default (so the form works with no JS); when JS is active it hides the ones that do not match, and the rest ease in. */ .cm-optional { color: var(--wp--preset--color--teal-soft); text-transform: none; letter-spacing: 0; font-weight: 400; } .cm-form [data-cm-show][hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { @keyframes cm-field-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .cm-form[data-cm-enhanced] .cm-when { animation: cm-field-in 0.32s ease both; } } .cm-notice { border: 1px solid var(--wp--preset--color--ochre-deep); color: var(--wp--preset--color--ochre-deep); padding: 14px 16px; margin: 20px 0 24px; } .cm-notice--ok { border-color: var(--wp--preset--color--forest); color: var(--wp--preset--color--forest); } /* ---------- Navigation UX (0.17.2) ---------- */ /* The masthead stays teal on every page, because a wordmark that changes colour per section stops being a wordmark. What it CAN do is carry the section's accent as an edge, so the colour starts at the very top of the page instead of halfway down at the kicker. */ /* The container carries the colour, deliberately. WordPress core ships .wp-block-navigation .wp-block-navigation-item__content twice in one selector, a specificity hack of (0,3,0) that sets color:inherit and beats any single-class theme rule. The theme set parchment-muted on .cm-nav .wp-block-navigation-item__content at (0,2,0) and lost, so every nav link inherited the bar it sits on: teal-ink text on a teal-ink background, 1.00:1, an invisible main navigation. Setting the colour on the container makes core's inherit resolve to something readable instead of fighting it. */ .cm-nav { position: sticky; top: 0; z-index: 60; background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment-muted); border-bottom: 1px solid var(--wp--custom--border--on-dark); } .cm-nav .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--wp--preset--color--parchment-muted); } .cm-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover, .cm-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--parchment); } .cm-nav a[aria-current="page"].wp-block-navigation-item__content { color: var(--wp--preset--color--amber); } body[class*="cm-accent-"] .cm-nav { border-bottom: 3px solid var(--cm-accent-bright); } /* The site title renders as

, so the colour lives on the wrapper and the anchor inherits it. On case and canvas pages the header sits inside .cm-register-light, whose `a` rule is declared later at equal specificity and repainted this anchor forest on a dark bar (1.93:1). a[href] outranks it. Found by axe, 0.91.0. */ .cm-wordmark a[href] { color: inherit; } .cm-nav a[aria-current="page"], .cm-nav .current-menu-item > a { color: var(--wp--preset--color--amber); } .cm-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .cm-subnav { display: flex; flex-wrap: wrap; gap: 0 28px; padding: 6px var(--wp--preset--spacing--70); border-bottom: 1px solid var(--wp--custom--border--on-dark); } .cm-subnav a { color: var(--wp--preset--color--teal-soft); text-decoration: none; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; display: inline-block; padding: 12px 0; border-bottom: 2px solid transparent; } .cm-subnav a:hover, .cm-subnav a:focus-visible { color: var(--wp--preset--color--amber); border-bottom-color: var(--wp--preset--color--amber); } #live-demos, #case-studies, #engagement, #about, #offers { scroll-margin-top: 86px; } /* ---------- Home v2: rail + stage (owner mock, 8.7) ---------- */ .cm-homev2 { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 14px; padding: 14px; background: var(--wp--preset--color--home-paper); min-height: 100vh; } .cm-hv2-rail { display: flex; flex-direction: column; gap: 14px; } .cm-hv2-card { background: var(--wp--preset--color--home-white); border-radius: 16px; padding: 26px; color: var(--wp--preset--color--home-ink); border-top: 3px solid var(--wp--preset--color--teal-ink); } .cm-hv2-card h1, .cm-hv2-card h2, .cm-hv2-card h3 { color: var(--wp--preset--color--home-ink); } /* The one element that must read as the same brand on every page: the wordmark. 0.85.0 added this as a SEPARATE rule two lines above the real one, at equal specificity, so the later sans rule silently won and the change never applied; a screenshot was misread as proof. Folded into the one rule, and verified by computed style rather than by eye. */ .cm-hv2-idrow { display: flex; justify-content: space-between; align-items: flex-start; } .cm-hv2-wordmark { margin: 0; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400; font-size: 2.125rem; line-height: 1.05; letter-spacing: -0.01em; } .cm-hv2-menu { width: 46px; height: 46px; border-radius: 14px; background: var(--wp--preset--color--home-black); display: grid; place-content: center; gap: 5px; } .cm-hv2-menu span { display: block; width: 18px; height: 2px; background: var(--wp--preset--color--home-white); } .cm-hv2-menu:hover, .cm-hv2-menu:focus-visible { background: var(--wp--preset--color--teal-ink); } .cm-hv2-metarow { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 34px; } .cm-hv2-meta { margin: 0; font-size: var(--wp--preset--font-size--caption); font-weight: 600; line-height: 1.5; } .cm-hv2-social { display: flex; gap: 14px; } .cm-hv2-social a { display: inline-flex; color: var(--wp--preset--color--home-ink); } .cm-hv2-social svg { width: 19px; height: 19px; fill: currentColor; } /* home-ink to teal-ink was 1.37:1 between the two states: the rule existed, gate 22 passed it, and nothing visible happened. Amber is 9.34:1 against the rest state and is the accent the rest of the page already uses. */ .cm-hv2-social a:hover, .cm-hv2-social a:focus-visible { color: var(--wp--preset--color--ochre-deep); transform: translateY(-2px); } .cm-hv2-about { background: var(--wp--preset--color--home-wash); border-top-color: var(--wp--preset--color--amber); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .cm-hv2-tag { margin: 0; font-size: 1.3125rem; font-weight: 600; line-height: 1.45; max-width: 17em; } .cm-hv2-pill { flex: none; background: var(--wp--preset--color--home-white); border: 1px solid var(--wp--custom--border--on-light-strong); border-radius: 999px; padding: 8px 16px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--home-ink); } /* The cards are the page's main objects and did nothing on hover, which is most of why it read as static. A small lift and a warmer border is enough; the page is a welcome mat, not a dashboard. */ .cm-hv2-card:hover, .cm-hv2-card:focus-within { transform: translateY(-3px); border-color: var(--wp--preset--color--amber); box-shadow: 0 10px 28px rgba(16, 51, 38, 0.10); } .cm-hv2-pill:hover, .cm-hv2-pill:focus-visible { background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--home-white); border-color: var(--wp--preset--color--teal-ink); } .cm-hv2-expertise { flex: 1; } .cm-hv2-exphead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .cm-hv2-exphead h2, .cm-hv2-explabel { margin: 0; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.875rem; } .cm-hv2-explist { list-style: none; margin: 0; padding: 0; } .cm-hv2-explist li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-hv2-explist .cm-hv2-exp-group { display: block; border-bottom: 0; padding: 18px 0 6px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); } .cm-hv2-explist .cm-hv2-exp-group:first-child { padding-top: 0; } .cm-hv2-ext { font-size: 0.8em; color: var(--wp--preset--color--ink-muted); margin-left: 4px; } .cm-hv2-explist li:last-child { border-bottom: 0; } .cm-hv2-explist a { display: block; padding: 17px 0; text-decoration: none; color: var(--wp--preset--color--home-ink); font-size: var(--wp--preset--font-size--caption); font-weight: 500; } .cm-hv2-explist li { position: relative; } .cm-hv2-explist a:hover, .cm-hv2-explist a:focus-visible { color: var(--wp--preset--color--teal-ink); } .cm-hv2-explist li:hover span, .cm-hv2-explist li:focus-within span { color: var(--wp--preset--color--amber); } .cm-hv2-explist li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--wp--preset--color--amber); } .cm-hv2-explist li:hover::after, .cm-hv2-explist li:focus-within::after { width: 100%; } .cm-hv2-explist span { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--home-gray); } /* The final Expertise item is the call to action: a warmer accent and a quiet arrow mark it as the next step, without breaking the minimal list. */ .cm-hv2-exp-cta a { color: var(--wp--preset--color--ochre-deep); font-weight: 500; } .cm-hv2-exp-cta a::after { content: " \2192"; opacity: 0; margin-left: 4px; } @media (prefers-reduced-motion: no-preference) { .cm-hv2-exp-cta a::after { transition: opacity 0.2s ease, margin-left 0.2s ease; } } .cm-hv2-exp-cta:hover a::after, .cm-hv2-exp-cta:focus-within a::after { opacity: 1; margin-left: 8px; } /* No fixed height. A grid item stretches to its row by default, but an explicit height overrides that, so a 92vh stage next to a taller rail left 188px of bare page background under the photo (measured at 1440x900: rail 1002px, stage 828px). The rail sets the row height and the stage now fills it. min-height keeps it from collapsing when the rail is short. */ .cm-hv2-stage { display: grid; grid-template-columns: 1fr 1.05fr; border-radius: 16px; overflow: hidden; min-height: min(92vh, 620px); } .cm-hv2-panel { background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--home-white); display: flex; flex-direction: column; padding: clamp(2.75rem, 0.5rem + 3.8333vw, 5rem); } .cm-hv2-figure { position: relative; overflow: hidden; background: var(--wp--preset--color--teal-ink); } .cm-hv2-figure .cm-hv2-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: grayscale(1); } .cm-hv2-stage:hover .cm-hv2-photo { transform: scale(1.03); filter: grayscale(0.82); } .cm-hv2-claim { margin: 0; color: var(--wp--preset--color--home-white); font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: clamp(2.875rem, 0.5rem + 4.3333vw, 5.5rem); line-height: 0.98; letter-spacing: -0.025em; max-width: 7em; } .cm-hv2-accent { color: var(--wp--preset--color--amber); } .cm-hv2-role { margin: auto 0 16px; color: var(--wp--preset--color--parchment); font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: clamp(1.25rem, 0.5rem + 1.3333vw, 1.75rem); } .cm-hv2-stats { margin: 0; color: var(--wp--preset--color--amber); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); letter-spacing: 0.14em; text-transform: uppercase; line-height: 2; } @media (max-width: 940px) { .cm-homev2 { grid-template-columns: 1fr; } /* Hero FIRST on a phone. Source order puts the rail (name, tagline, seven links) before the stage, which buried the strongest line on the site under ~1000px of chrome on mobile. */ .cm-hv2-stage { order: -1; grid-template-columns: 1fr; height: auto; } .cm-hv2-panel { min-height: 60vh; } .cm-hv2-figure { min-height: 60vh; } .cm-hv2-overlay { padding: 28px; } } /* ---------- Per-case colour registers ---------- ONE source of truth for case colour. Each page wears its artifact's palette; the older per-case accent variables are now aliases of these, so nine existing usages inherit correctly. Every pair below was contrast-proven before it shipped. Static by design: hover changes colour only, nothing moves. */ body { --case-dark: var(--wp--preset--color--teal-ink); --case-on-dark: var(--wp--preset--color--parchment); --case-light: var(--wp--preset--color--parchment); --case-on-light: var(--wp--preset--color--teal-ink); --case-accent: var(--wp--preset--color--amber); --case-accent-deep: var(--wp--preset--color--ochre-deep); } body.cm-reg-itq { --case-dark: var(--wp--preset--color--itq-deep); --case-on-dark: var(--wp--preset--color--itq-paper); --case-light: var(--wp--preset--color--itq-paper); --case-on-light: var(--wp--preset--color--itq-ink); --case-accent: var(--wp--preset--color--itq-glow); --case-accent-deep: var(--wp--preset--color--itq-accent); } body.cm-reg-ko { --case-dark: var(--wp--preset--color--ko-deep); --case-on-dark: var(--wp--preset--color--ko-sky); --case-light: var(--wp--preset--color--ko-sky); --case-on-light: var(--wp--preset--color--ko-ink); --case-accent: var(--wp--preset--color--amber); --case-accent-deep: var(--wp--preset--color--ko-accent); } body.cm-reg-sf { --case-dark: var(--wp--preset--color--sf-navy); --case-on-dark: var(--wp--preset--color--sf-cream); --case-light: var(--wp--preset--color--sf-cream); --case-on-light: var(--wp--preset--color--sf-navy); --case-accent: var(--wp--preset--color--sf-gold); --case-accent-deep: var(--wp--preset--color--sf-bronze); } body.cm-reg-sci { --case-dark: var(--wp--preset--color--sci-deep); --case-on-dark: var(--wp--preset--color--sci-paper); --case-light: var(--wp--preset--color--sci-paper); --case-on-light: var(--wp--preset--color--sci-ink); --case-accent: var(--wp--preset--color--sci-glow); --case-accent-deep: var(--wp--preset--color--sci-accent); } body.cm-reg-fg { --case-dark: var(--wp--preset--color--teal-ink); --case-on-dark: var(--wp--preset--color--fg-paper); --case-light: var(--wp--preset--color--fg-paper); --case-on-light: var(--wp--preset--color--teal-ink); --case-accent: var(--wp--preset--color--amber); --case-accent-deep: var(--wp--preset--color--fg-accent); } body.cm-reg-ib { --case-dark: var(--wp--preset--color--ib-navy); --case-on-dark: var(--wp--preset--color--parchment); --case-light: var(--wp--preset--color--parchment); --case-on-light: var(--wp--preset--color--ib-navy); --case-accent: var(--wp--preset--color--ib-accent); --case-accent-deep: var(--wp--preset--color--ib-deep); } /* 0.38.0 — the three missing registers. body.cm-reg-cc was in the PHP map with no CSS behind it, so every rule keyed on body[class*="cm-reg-"] fired on the Change Crucible page with var(--case-dark) and friends undefined. An undefined custom property is invalid at computed-value time, so those declarations fell back to inherit and the hero lost its ground. Course Studio and Compliance-First had no register at all, which is why the two newest cases were the only ones not wearing their own palette. Every pair below is in the gate's contrast table. */ body.cm-reg-cc { --case-dark: var(--wp--preset--color--teal-ink); --case-on-dark: var(--wp--preset--color--parchment); --case-light: var(--wp--preset--color--parchment); --case-on-light: var(--wp--preset--color--teal-ink); --case-accent: var(--wp--preset--color--crucible); --case-accent-deep: var(--wp--preset--color--crucible-deep); } body.cm-reg-cs { --case-dark: var(--wp--preset--color--teal-ink); --case-on-dark: var(--wp--preset--color--parchment); --case-light: var(--wp--preset--color--parchment); --case-on-light: var(--wp--preset--color--teal-ink); --case-accent: var(--wp--preset--color--amber); --case-accent-deep: var(--wp--preset--color--ochre-deep); } body.cm-reg-cl { --case-dark: var(--wp--preset--color--cl-ink); --case-on-dark: var(--wp--preset--color--parchment); --case-light: var(--wp--preset--color--parchment); --case-on-light: var(--wp--preset--color--teal-ink); --case-accent: var(--wp--preset--color--cl-accent); --case-accent-deep: var(--wp--preset--color--cl-deep); } body[class*="cm-reg-"] { --cm-case-accent: var(--case-accent); --cm-case-deep: var(--case-accent-deep); } /* Muted band text (0.24.1). ink-muted was measured on parchment (4.77:1) and reused on register backgrounds it was never measured against; on sf-cream it fell to 3.94:1, an AA failure for 12-13px text. Each register now names its own muted value, all >= 4.5:1 on its own --case-light. */ body.cm-reg-itq { --case-muted: var(--wp--preset--color--itq-muted); } /* 6.22:1 on itq-paper */ /* 1.5.30: the game's screenshots are mint; framed in violet on lavender they fought as three pastels. The paper is now a cool neutral and the frames neutral hairlines; violet stays in the accents. */ body.cm-reg-itq .cm-case-inline-fig { border-color: var(--wp--custom--border--on-light); } body.cm-reg-ko { --case-muted: var(--wp--preset--color--ko-muted); } /* 4.94:1 on ko-sky */ body.cm-reg-sf { --case-muted: var(--wp--preset--color--sf-muted); } /* 5.34:1 on sf-cream */ body.cm-reg-sci { --case-muted: var(--wp--preset--color--sci-muted); } /* 5.53:1 on sci-paper*/ body.cm-reg-fg { --case-muted: var(--wp--preset--color--fg-muted); } /* 5.32:1 on fg-paper */ body.cm-reg-ib { --case-muted: var(--wp--preset--color--ink-muted); } /* 4.77:1 on parchment*/ body.cm-reg-cc { --case-muted: var(--wp--preset--color--ink-muted); } /* 4.77:1 on parchment*/ body.cm-reg-cs { --case-muted: var(--wp--preset--color--ink-muted); } /* 4.77:1 on parchment*/ body.cm-reg-cl { --case-muted: var(--wp--preset--color--ink-muted); } /* 4.77:1 on parchment*/ body[class*="cm-reg-"] .cm-case-hero { background: var(--case-dark); color: var(--case-on-dark); } body[class*="cm-reg-"] .cm-case-hero h1, body[class*="cm-reg-"] .cm-case-hero p { color: var(--case-on-dark); } body[class*="cm-reg-"] .cm-case-main { background: var(--case-light); color: var(--case-on-light); } body[class*="cm-reg-"] .cm-case-main h1, body[class*="cm-reg-"] .cm-case-main h2, body[class*="cm-reg-"] .cm-case-main h3, body[class*="cm-reg-"] .cm-case-main h4, body[class*="cm-reg-"] .cm-case-main p, body[class*="cm-reg-"] .cm-case-main li { color: var(--case-on-light); } body[class*="cm-reg-"] .cm-case-band { background: var(--case-dark); color: var(--case-on-dark); } body[class*="cm-reg-"] .cm-case-band h2, body[class*="cm-reg-"] .cm-case-band h3, body[class*="cm-reg-"] .cm-case-band p { color: var(--case-on-dark); } body[class*="cm-reg-"] .cm-case-sec-kicker, body[class*="cm-reg-"] .cm-kicker { color: var(--case-accent-deep); } body[class*="cm-reg-"] .cm-case-band .cm-kicker, body[class*="cm-reg-"] .cm-case-hero .cm-case-kicker { color: var(--case-accent); } body[class*="cm-reg-"] .cm-stat-rail.on-light .cm-stat-numeral { color: var(--case-accent-deep); } body[class*="cm-reg-"] .cm-stat-rail.on-dark .cm-stat-numeral { color: var(--case-accent); } body[class*="cm-reg-"] .cm-stat-rail.on-dark .cm-stat-numeral { color: var(--case-accent); } body[class*="cm-reg-"] .cm-case-inline-fig { border-color: var(--case-accent-deep); } body[class*="cm-reg-"] .cm-case-main a:not(.cm-book-buy) { color: var(--case-on-light); text-decoration-color: var(--case-accent-deep); } body[class*="cm-reg-"] .cm-evidence { background: var(--case-light); color: var(--case-on-light); } /* ---------- Alternating bands + merged work grid (8.7) ---------- The old page ran one unbroken dark field top to bottom and said the same thing twice in two near-identical grids. Now: dark hero, light work band, dark engagement, light about and offers. Static by design: hover changes colour only, nothing moves. */ .cm-band-light { background: var(--wp--preset--color--parchment); color: var(--wp--preset--color--teal-ink); padding: 72px var(--wp--preset--spacing--70); } .cm-band-light h1, .cm-band-light h2, .cm-band-light h3, .cm-band-light h4 { color: var(--wp--preset--color--teal-ink); } .cm-band-light p { color: var(--wp--preset--color--teal-ink); } .cm-work-head { max-width: 680px; margin: 0 auto 40px; text-align: center; } .cm-work-h2 { margin: 0 0 12px; font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--h-2); line-height: 1.2; } .cm-work-note { margin: 0; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--teal-ink); } .cm-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px; max-width: 1140px; margin: 0 auto; } /* Odd card out (0.31.1). Five cases in a two-column grid left the last one alone beside an empty cell. It now spans the row, which reads as a deliberate wide card rather than a gap, and self-corrects at any count: with an even number the rule never fires. */ .cm-work-card:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (min-width: 1000px) { /* The card has exactly two children, the shot and the body, so a plain two-column grid seats them side by side: image left, text centred right. The shot keeps the 909/540 frame every other card uses. Forcing it to height:100% made it stretch to whatever the text column needed and object-fit cropped the sides off the diagram. */ .cm-work-card:last-child:nth-child(odd) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; } .cm-work-card:last-child:nth-child(odd) .cm-work-shot { margin: 0; } .cm-work-card:last-child:nth-child(odd) .cm-work-body { padding: 30px 34px; } } /* Eight boxes (1.5.26: seven works and the invitation): two wide, then three and three, every row full. Wide screens only. */ @media (min-width: 1000px) { .cm-work-grid.is-eight { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cm-work-grid.is-eight > * { grid-column: span 2; } .cm-work-grid.is-eight > :nth-child(1), .cm-work-grid.is-eight > :nth-child(2) { grid-column: span 3; } } /* Seven works (1.5.20): two wide, three narrow, two wide. Every card keeps the same anatomy (image above, text below); only the widths change, so the seventh reads as part of the set instead of a horizontal card bolted on. Applies only at exactly seven (class set in work-grid.php) and only on wide screens; narrower screens keep the auto-fit grid above. */ @media (min-width: 1000px) { .cm-work-grid.is-seven { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cm-work-grid.is-seven > .cm-work-card, .cm-work-grid.is-seven > .cm-work-card:last-child:nth-child(odd) { grid-column: span 3; display: flex; flex-direction: column; } .cm-work-grid.is-seven > .cm-work-card:nth-child(3), .cm-work-grid.is-seven > .cm-work-card:nth-child(4), .cm-work-grid.is-seven > .cm-work-card:nth-child(5) { grid-column: span 2; } .cm-work-grid.is-seven > .cm-work-card:last-child:nth-child(odd) .cm-work-body { padding: 20px 22px 22px; } } .cm-work-card { background: var(--wp--preset--color--home-white); border: 1px solid var(--wp--custom--border--on-light); border-top: 3px solid var(--wp--preset--color--teal-ink); display: flex; flex-direction: column; } .cm-work-card.is-ko { border-top-color: var(--wp--preset--color--ko-accent); } .cm-work-card.is-itq { border-top-color: var(--wp--preset--color--itq-accent); } .cm-work-card.is-sf { border-top-color: var(--wp--preset--color--sf-navy); } .cm-work-card.is-cc { border-top-color: var(--wp--preset--color--forest); } .cm-work-card.is-ib { border-top-color: var(--wp--preset--color--ib-deep); } .cm-work-card.is-cs { border-top-color: var(--wp--preset--color--ochre-deep); } .cm-work-card.is-cl { border-top-color: var(--wp--preset--color--cl-deep); } .cm-work-shot { display: block; aspect-ratio: 909 / 540; overflow: hidden; position: relative; background: var(--wp--preset--color--teal-ink); } /* 1.5.26: each card's own colour rises from the bottom edge of its image (the same colour as its top edge, hero tile and matrix column) and fades out two-thirds of the way up. Screenshots stay in full colour and readable at the top; the colour ties each card to its case and the grid together. Hover or keyboard focus fades the gradient away. */ .cm-work-card.is-cc { --cm-wash: var(--wp--preset--color--forest); } .cm-work-card.is-ib { --cm-wash: var(--wp--preset--color--ib-deep); } .cm-work-card.is-ko { --cm-wash: var(--wp--preset--color--ko-accent); } .cm-work-card.is-sf { --cm-wash: var(--wp--preset--color--sf-navy); } .cm-work-card.is-cs { --cm-wash: var(--wp--preset--color--ochre-deep); } .cm-work-card.is-cl { --cm-wash: var(--wp--preset--color--cl-deep); } .cm-work-card.is-itq { --cm-wash: var(--wp--preset--color--itq-accent); } .cm-work-shot::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Eased, not linear: the colour falls off on a curve, so it never smears into the interface as a muddy band. */ background: linear-gradient(to top, color-mix(in srgb, var(--cm-wash, var(--wp--preset--color--teal-ink)) 82%, transparent) 0%, color-mix(in srgb, var(--cm-wash, var(--wp--preset--color--teal-ink)) 62%, transparent) 14%, color-mix(in srgb, var(--cm-wash, var(--wp--preset--color--teal-ink)) 38%, transparent) 28%, color-mix(in srgb, var(--cm-wash, var(--wp--preset--color--teal-ink)) 17%, transparent) 42%, color-mix(in srgb, var(--cm-wash, var(--wp--preset--color--teal-ink)) 5%, transparent) 54%, transparent 64%); } /* 1.5.28 rollover: a clean colour takeover. The image becomes its case colour at 95 percent over a softly blurred ghost of the screenshot, and the case's thesis (its published headline) rises in Newsreader 500 with a Public Sans label and a circled arrow. Two families, as in the card body. White on every case colour measured from rendered pixels. */ .cm-work-shot::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: color-mix(in srgb, var(--cm-wash, var(--wp--preset--color--teal-ink)) 95%, transparent); } .cm-work-reveal { position: absolute; inset: 22px 24px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; color: var(--wp--preset--color--home-white); opacity: 0; pointer-events: none; } .cm-work-reveal-kind { font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } .cm-work-reveal-thesis { font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.375rem; line-height: 1.16; letter-spacing: -0.005em; max-width: 18ch; padding-right: 50px; text-wrap: balance; } .cm-work-grid.is-eight > :nth-child(-n+2) .cm-work-reveal-thesis, .cm-work-grid.is-seven > :nth-child(-n+2) .cm-work-reveal-thesis { font-size: 1.875rem; max-width: 17ch; } .cm-work-reveal-go { position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; } .cm-work-card:hover .cm-work-shot::before, .cm-work-card:focus-within .cm-work-shot::before, .cm-work-card:hover .cm-work-reveal, .cm-work-card:focus-within .cm-work-reveal { opacity: 1; } .cm-work-card:hover .cm-work-shot::after, .cm-work-card:focus-within .cm-work-shot::after { opacity: 0; } .cm-work-card:hover .cm-work-shot img, .cm-work-card:focus-within .cm-work-shot img { filter: blur(2px); } @media (hover: none) { .cm-work-reveal, .cm-work-shot::before { display: none; } } /* The closing invitation box: same frame as a work card, a gradient panel in place of a screenshot. */ .cm-work-cta { background: var(--wp--preset--color--home-white); border: 1px solid var(--wp--custom--border--on-light); border-top: 3px solid var(--wp--preset--color--amber); display: flex; flex-direction: column; } .cm-work-cta-panel { aspect-ratio: 909 / 540; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px; text-decoration: none; background: linear-gradient(150deg, var(--wp--preset--color--teal-ink) 0%, var(--wp--preset--color--forest) 55%, var(--wp--preset--color--amber) 140%); color: var(--wp--preset--color--parchment); } .cm-work-cta-n { font-family: var(--wp--preset--font-family--serif); font-size: 1.875rem; line-height: 1; } .cm-work-cta-line { font-family: var(--wp--preset--font-family--serif); font-size: 1.75rem; line-height: 1.15; max-width: 12ch; } .cm-work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .cm-work-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .cm-work-title { margin: 0 0 8px; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--caption); font-weight: 600; } .cm-work-title a { color: var(--wp--preset--color--teal-ink); text-decoration: none; } .cm-work-title a:hover, .cm-work-title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; } .cm-work-blurb { margin: 0 0 18px; font-size: var(--wp--preset--font-size--caption); line-height: 1.6; color: var(--wp--preset--color--teal-ink); } .cm-work-actions { margin: auto 0 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .cm-work-play { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--teal-ink); border: 1px solid var(--wp--preset--color--amber); padding: 9px 16px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; font-weight: 600; } .cm-work-play:hover, .cm-work-play:focus-visible { background: var(--wp--preset--color--teal-ink); border-color: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment); } .cm-work-read { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--ochre-deep); padding-bottom: 2px; } .cm-work-read:hover, .cm-work-read:focus-visible { color: var(--wp--preset--color--teal-ink); border-bottom-color: var(--wp--preset--color--teal-ink); } #work { scroll-margin-top: 86px; } /* Band variants: explicit dark (no accidental transparency) and the warm wash step that separates two adjacent light bands. */ .cm-band-dark { background: var(--wp--preset--color--forest); } .cm-band-light.is-wash { background: var(--wp--preset--color--home-wash); } /* Focus visibility per register (VP walkthrough, 8.7): the cream outline disappears on the light registers and light bands. Focus must be visible on every surface a keyboard can reach. */ .cm-hv2-pills { display: flex; gap: 8px; flex-direction: column; align-items: flex-end; } .cm-hv2-pill.is-accent { background: var(--wp--preset--color--amber); border-color: var(--wp--preset--color--amber); } /* 1.5.52: the about card carries the positioning statement, twice the old tagline's length, and a three-word button. Stacked, the statement takes the card's width and the button stays one pill on one line. */ .cm-hv2-about { flex-direction: column; align-items: flex-start; gap: 18px; } .cm-hv2-about .cm-hv2-tag { max-width: none; font-size: 1.1875rem; line-height: 1.42; } .cm-hv2-about .cm-hv2-pills { align-items: flex-start; } .cm-hv2-about .cm-hv2-pill { white-space: nowrap; } .cm-band-light :focus-visible, .cm-homev2 :focus-visible, .cm-register-light :focus-visible { outline-color: var(--wp--preset--color--teal-ink); } body[class*="cm-reg-"] .cm-case-main :focus-visible, body[class*="cm-reg-"] .cm-evidence :focus-visible { outline-color: var(--case-on-light); } /* ---------- Motion, the Disney way (8.8, owner reversed the static law). Principles, not decoration: STAGING (entrances settle content into place, ease-out, like physical objects decelerating), FOLLOW-THROUGH (cards lift and their shadow deepens under the cursor), ANTICIPATION/RESPONSE (buttons acknowledge the press), SECONDARY ACTION (the underline draws, the numeral answers). One hero moment per page; quiet responses everywhere else. Everything lives inside this gate; reduced-motion visitors get the page instantly, fully visible. ---------- */ @media (prefers-reduced-motion: no-preference) { @keyframes cm-settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .cm-hero h1, .cm-case-hero h1 { animation: cm-settle 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .cm-hero .cm-rule, .cm-case-hero .cm-rule { transform-origin: left; animation: cm-settle 0.7s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; } .cm-case-hero .cm-case-meta { animation: cm-settle 0.7s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; } .cm-hv2-rail .cm-hv2-card { animation: cm-settle 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .cm-hv2-rail .cm-hv2-card:nth-child(2) { animation-delay: 0.1s; } .cm-hv2-rail .cm-hv2-card:nth-child(3) { animation-delay: 0.2s; } .cm-js [data-reveal], .cm-js .cm-reveal, .cm-js .is-style-cm-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cm-js [data-reveal].is-revealed, .cm-js .cm-reveal.is-revealed, .cm-js .is-style-cm-reveal.is-revealed { opacity: 1; transform: none; } /* Without .cm-js nothing is hidden (0.28.1). The class is set by a tiny inline script in the head, so a script failure leaves the page fully readable instead of blanking 128 elements. */ .cm-fig-launch img { transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .cm-hero-primary, .cm-hero-secondary { transition: background 0.22s ease-out, color 0.22s ease-out, border-color 0.22s ease-out; } .cm-spectrum-item a { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .cm-spectrum-item a:hover { transform: translateY(-6px); } /* Restored 0.24.1 — original 0.17.0 values. Blur variant animates the element itself. Stagger: the CONTAINER stays visible and its CHILDREN carry the hidden start, revealed 90ms apart by motion.js (see the 'stagger' branch there). Without these two rules the stagger cascade fired against already-visible children. */ .cm-js [data-reveal="blur"] { filter: blur(6px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cm-js [data-reveal="blur"].is-revealed { filter: none; } .cm-js [data-reveal="stagger"] { opacity: 1; transform: none; } .cm-js [data-reveal="stagger"] > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* The class form, so a query loop that can only carry a className gets the same behaviour. Both selectors are inside the reduced-motion guard, so a visitor who asks for less motion sees the cards simply present, never faded out and waiting on JavaScript. */ .cm-js .cm-stagger, .cm-js .is-style-cm-stagger { opacity: 1; transform: none; } .cm-js .cm-stagger > *, .cm-js .is-style-cm-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cm-js .cm-stagger > *.is-revealed, .cm-js .is-style-cm-stagger > *.is-revealed { opacity: 1; transform: none; } .cm-js [data-reveal="stagger"] > *.is-revealed { opacity: 1; transform: none; } .cm-work-card { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .cm-work-card:hover, .cm-work-card:focus-within { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16, 51, 38, 0.18); } .cm-work-shot img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease-out; } .cm-work-shot::before { transition: opacity 0.4s ease-out; } .cm-work-shot::after { transition: opacity 0.4s ease-out; } .cm-work-reveal { transition: opacity 0.3s ease-out 0.08s; } .cm-work-reveal-kind, .cm-work-reveal-thesis { transform: translateY(10px); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .cm-work-reveal-kind { transition-delay: 0.08s; } .cm-work-reveal-thesis { transition-delay: 0.14s; } .cm-work-reveal-go { transform: translateX(-10px); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.22s; } .cm-work-card:hover .cm-work-reveal-kind, .cm-work-card:focus-within .cm-work-reveal-kind, .cm-work-card:hover .cm-work-reveal-thesis, .cm-work-card:focus-within .cm-work-reveal-thesis, .cm-work-card:hover .cm-work-reveal-go, .cm-work-card:focus-within .cm-work-reveal-go { transform: none; } .cm-work-cta { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .cm-work-cta:hover, .cm-work-cta:focus-within { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16, 51, 38, 0.18); } .cm-work-card:hover .cm-work-shot img { transform: scale(1.035); } .cm-book-buy, .cm-work-play, .cm-nav-cta, .cm-hv2-pill { transition: background 0.22s ease-out, color 0.22s ease-out, border-color 0.22s ease-out, transform 0.15s ease-out; } .cm-book-buy:active, .cm-work-play:active, .cm-nav-cta:active, .cm-hv2-pill:active { transform: scale(0.97); } .cm-hv2-explist li::after { transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .cm-hv2-explist a, .cm-hv2-explist span, .cm-hv2-social a, .cm-subnav a, .cm-work-read, .cm-work-title a, .cm-footer a, .cm-nav a { transition: color 0.2s ease-out, border-color 0.2s ease-out; } /* Movement only, and only for readers who have not asked for less of it. The colour changes above stay put for everyone. */ .cm-hv2-social a { transition: color 0.18s ease-out, transform 0.18s ease-out; } .cm-hv2-card { transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out; } .cm-hv2-figure .cm-hv2-photo { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s ease-out; } .cm-card { transition: transform 0.22s ease-out, box-shadow 0.22s ease-out; } .cm-card .cm-card-heading a { transition: color 0.18s ease-out; } .cm-featured-image img { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } html { scroll-behavior: smooth; } } .cm-hero-cta { margin: 30px 0 0; } /* Hero category + credibility chips (marketing/HR pass, 8.8) */ .cm-hero-category { margin: 14px 0 0; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--lede); font-weight: 600; color: var(--wp--preset--color--parchment); max-width: 24em; } .cm-hero-chips { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } /* Credentials, not form fields, and a COLUMN rather than a pretend row. Each line runs 245 to 300px at mono micro inside a 530px column, so three will never share a line however they are styled; laying them out as wrapping boxes just produced three outlined rectangles of different widths, which is the shape of an input, not of a claim. A single rule down the left binds them into one credential block. */ .cm-hero-chips { margin: 26px 0 0; display: flex; flex-direction: column; gap: 0; border-left: 2px solid var(--wp--custom--border--on-dark-strong); padding-left: 18px; } .cm-hero-chips span { border: 0; background: none; color: var(--wp--preset--color--parchment-soft); padding: 5px 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; } .cm-engage-list { list-style: none; margin: 18px 0 0; padding: 0; } .cm-engage-list li { position: relative; padding: 8px 0 8px 30px; font-size: var(--wp--preset--font-size--caption); line-height: 1.6; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-engage-list li:last-child { border-bottom: 0; } .cm-engage-list li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 12px; height: 7px; border-left: 2px solid var(--wp--preset--color--forest); border-bottom: 2px solid var(--wp--preset--color--forest); transform: rotate(-45deg); } .cm-engage-cta { margin: 22px 0 0; } .cm-case-band-contact { margin: 14px 0 0; } .cm-case-band .cm-work-read { color: var(--wp--preset--color--parchment-soft); border-bottom-color: var(--wp--preset--color--parchment-soft); } .cm-case-band .cm-work-read:hover, .cm-case-band .cm-work-read:focus-visible { color: var(--wp--preset--color--parchment); border-bottom-color: var(--wp--preset--color--parchment); } body[class*="cm-reg-"] .cm-case-band .cm-work-read { color: var(--case-on-dark); border-bottom-color: var(--case-accent); } .cm-case-main .cm-engage-list li::before { border-color: var(--case-accent-deep, var(--wp--preset--color--forest)); } /* Skip link: first tab stop, invisible until focused (feature audit 8.8) */ .cm-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--wp--preset--color--amber); color: var(--wp--preset--color--teal-ink); padding: 12px 20px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; } .cm-skip:focus-visible { left: 0; } .cm-book-sample { margin-left: 16px; } /* ---------- Print (case pages join capabilities, 8.8): teachers print things. Registers flatten to ink on white, chrome and actions drop, figures keep their frames. ---------- */ @media print { body, body[class*="cm-reg-"] main, .cm-case-hero, .cm-case-main, .cm-case-band, .cm-evidence, .cm-band-light, .cm-band-dark { background: #fff !important; color: #000 !important; } .cm-case-hero h1, .cm-case-main h1, .cm-case-main h2, .cm-case-main h3, .cm-case-main p, .cm-case-band p, .cm-case-hero p { color: #000 !important; } header, footer, nav, .cm-subnav, .cm-utility-bar, .cm-book-buy, .cm-work-play, .cm-work-read, .cm-case-band-contact, .cm-skip, .cm-hero-cta, .cm-sample-link { display: none !important; } .cm-case-inline-fig { border: 1px solid #000; page-break-inside: avoid; } .cm-stat-rail { border-left: 2px solid #000; } .cm-stat-numeral { color: #000 !important; } a { text-decoration: none; color: #000; } } .cm-book-cover.has-cover { background: none; border: 1px solid var(--wp--custom--border--on-light-strong); outline: 1px solid var(--wp--custom--border--on-light-strong); outline-offset: 8px; padding: 0; } .cm-book-cover-img { display: block; width: 100%; height: auto; } /* ---------- Case bands (0.24.0 — the instructional-design layer) ---------- Structure for the bands every case now carries: analysis grid, learning objectives, process-model callout, design cards, Kirkpatrick evaluation. Markup comes from inc/case-bands.php, so these rules have exactly one caller each. Colour goes through the per-case register vars (--case-accent / --case-accent-deep) with theme fallbacks, so a case keeps its own palette without a per-case rule. ---------- */ .cm-ana-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--wp--custom--border--on-light); border: 1px solid var(--wp--custom--border--on-light); margin: 32px 0 8px; } /* Three cells in a two-column grid left the fourth empty, and the band's field colour showed through as a bare grey rectangle. A lone odd last cell spans the row. */ .cm-ana-grid > .cm-ana-cell:nth-child(odd):last-child { grid-column: 1 / -1; } .cm-ana-cell { background: var(--case-light, var(--wp--preset--color--parchment)); padding: 30px 28px; } .cm-ana-label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--case-muted, var(--wp--preset--color--ink-muted)); margin: 0 0 12px; } .cm-case-main .cm-ana-body { margin: 0; font-size: var(--wp--preset--font-size--caption); line-height: 1.7; } .cm-obj { margin: 36px 0 8px; } .cm-obj-head { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--case-accent-deep, var(--wp--preset--color--ochre-deep)); margin: 0 0 14px; } .cm-obj-table { border-top: 1px solid var(--wp--custom--border--on-light); margin: 0; } .cm-ana-cell dt, .cm-ana-cell dd, .cm-obj-row dt, .cm-obj-row dd { margin: 0; } .cm-obj-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-obj-level { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--case-muted, var(--wp--preset--color--ink-muted)); margin: 0; } .cm-case-main .cm-obj-body { margin: 0; } .cm-process-note { border-left: 2px solid var(--case-accent, var(--wp--preset--color--amber)); padding: 4px 0 4px 24px; margin: 40px 0 8px; } .cm-process-label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--case-muted, var(--wp--preset--color--ochre-deep)); margin: 0 0 10px; } .cm-case-main .cm-process-body { margin: 0; max-width: 40em; } .cm-dcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--wp--custom--border--on-light); border: 1px solid var(--wp--custom--border--on-light); margin: 32px 0 8px; } .cm-dcard { background: var(--case-light, var(--wp--preset--color--parchment)); padding: 32px 26px; } .cm-dcard-n { font-family: var(--wp--preset--font-family--serif); font-size: 2.125rem; line-height: 1; color: var(--case-accent-deep, var(--wp--preset--color--ochre-deep)); margin: 0 0 14px; } .cm-case-main h4.cm-dcard-title { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--caption); font-weight: 600; margin: 0 0 10px; } .cm-case-main .cm-dcard-body { margin: 0; font-size: var(--wp--preset--font-size--caption); line-height: 1.7; } .cm-eval { border-top: 1px solid var(--wp--custom--border--on-light); margin: 32px 0 8px; width: 100%; border-collapse: collapse; } .cm-eval caption { text-align: start; } .cm-eval th, .cm-eval td { text-align: start; vertical-align: top; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-eval thead th { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--case-muted, var(--wp--preset--color--ink-muted)); font-weight: 400; padding-bottom: 14px; } .cm-eval tbody th { width: 150px; font-weight: 400; } .cm-eval td:last-child, .cm-eval th:last-child { width: 120px; padding-right: 0; } .cm-eval-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px; gap: 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-eval-level { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--caption); line-height: 1.3; color: var(--case-accent-deep, var(--wp--preset--color--forest)); margin: 0; } .cm-case-main .cm-eval-body { margin: 0; } .cm-eval-flag { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--case-muted, var(--wp--preset--color--ink-muted)); margin: 0; } .cm-case-main .cm-eval-flag.is-built { color: var(--case-accent-deep, var(--wp--preset--color--forest)); font-weight: 600; } /* 0.37.0: a third evaluation state. Only Case 06 was delivered into a real organisation, so only it can say a level was measured rather than designed. It carries the case accent and a rule, so the distinction survives a scan and does not rely on reading the word. */ .cm-case-main .cm-eval-flag.is-measured { color: var(--case-accent-deep, var(--wp--preset--color--cl-deep)); font-weight: 700; border-bottom: 2px solid currentColor; padding-bottom: 1px; } .cm-case-main h3.cm-case-claim { font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: clamp(1.625rem, 0.5rem + 2.3333vw, 2.375rem); line-height: 1.16; letter-spacing: -0.01em; max-width: 20em; margin: 0 0 20px; text-wrap: balance; } .cm-evidence-grid.is-cols-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; } .cm-evidence-item a { display: block; } @media (max-width: 900px) { .cm-dcards, .cm-evidence-grid.is-cols-3 { grid-template-columns: 1fr; } } @media (max-width: 760px) { .cm-ana-grid { grid-template-columns: 1fr; } .cm-obj-row { grid-template-columns: 1fr; gap: 8px; } .cm-eval-row { grid-template-columns: 1fr; gap: 8px; } /* 0.24.1: the old `.cm-eval-flag { order: -1 }` moved the status flag visually to the top while it stayed last in the DOM, so sighted and screen-reader users got different row orders. The table now stacks in DOM order instead. */ .cm-eval, .cm-eval thead, .cm-eval tbody, .cm-eval tr, .cm-eval th, .cm-eval td { display: block; width: auto; } .cm-eval thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cm-eval tbody tr { padding: 18px 0; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-eval tbody th, .cm-eval tbody td { padding: 0 0 6px; border-bottom: 0; } } /* Bands in print: keep the evidence, drop the decoration. */ @media print { .cm-ana-grid, .cm-dcards { background: none !important; border-color: #000 !important; gap: 0; } .cm-ana-cell, .cm-dcard { background: #fff !important; border: 1px solid #000; break-inside: avoid; } .cm-obj-row, .cm-eval-row { break-inside: avoid; border-bottom-color: #000 !important; } .cm-process-note { border-left: 2px solid #000 !important; break-inside: avoid; } .cm-eval-flag, .cm-eval-level, .cm-dcard-n, .cm-obj-level, .cm-ana-label, .cm-process-label { color: #000 !important; } /* The evidence matrix prints as data. Marks are painted backgrounds and print engines drop those by default, which would leave an empty grid, so on paper the mark becomes an outlined square instead. */ .cm-matrix-wrap { overflow: visible !important; } .cm-matrix { min-width: 0 !important; } .cm-matrix-capnote, .cm-matrix-note { display: none !important; } .cm-matrix-mark { background: #000 !important; border: 1px solid #000 !important; } .cm-matrix-cell:not(.is-on) .cm-matrix-mark { background: transparent !important; } .cm-matrix-n { background: transparent !important; color: #000 !important; border: 1px solid #000 !important; } .cm-matrix tbody tr { border-top: 1px solid #999 !important; } } /* ---------- IT Quest: "Try it yourself" (1.5.30) ---------- Two scenarios from the game, one decision each. Sans for the mock screens and controls, serif for the question, as in the card body. Verdicts say Right or Not quite in words, never colour alone. Every pairing measured: 4.95:1 at the lowest (red on the page paper). */ .cm-itq-try { max-width: 760px; margin: 40px auto 8px; padding: 30px 32px 26px; background: var(--wp--preset--color--home-white); border: 1px solid var(--wp--custom--border--on-light); border-top: 3px solid var(--wp--preset--color--itq-accent); } .cm-case-main .cm-itq-try-intro { margin: 0 0 20px; color: var(--wp--preset--color--teal-ink); font-size: var(--wp--preset--font-size--caption); } .cm-itq-mock { border: 1px solid var(--wp--custom--border--on-light); border-radius: 10px; padding: 18px 20px; background: var(--wp--preset--color--itq-paper); font-family: var(--wp--preset--font-family--sans); color: var(--wp--preset--color--teal-ink); } .cm-case-main .cm-itq-try p, .cm-case-main .cm-itq-try li { max-width: none; } .cm-case-main .cm-itq-mock p { margin: 0; font-size: 0.9375rem; } .cm-case-main .cm-itq-mail-subject { font-weight: 600; font-size: 1.0625rem; } .cm-case-main .cm-itq-mail-meta { margin-top: 6px !important; font-size: 0.8125rem; line-height: 1.5; color: var(--wp--preset--color--teal-muted); } .cm-itq-mail-body { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--wp--custom--border--on-light); line-height: 1.6; } .cm-itq-mail-link { margin-top: 12px !important; color: var(--wp--preset--color--ib-deep); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .cm-itq-mock.is-prompt { max-width: 340px; margin: 0 auto; border-radius: 18px; text-align: center; } .cm-case-main .cm-itq-prompt-app { font-size: 0.8125rem; color: var(--wp--preset--color--teal-muted); } .cm-case-main .cm-itq-prompt-title { margin-top: 8px !important; font-weight: 600; font-size: 1.25rem; } .cm-itq-prompt-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 14px 0 0; text-align: left; font-size: 0.875rem; } .cm-itq-prompt-facts dt { color: var(--wp--preset--color--teal-muted); } .cm-itq-prompt-facts dd { margin: 0; } .cm-case-main .cm-itq-prompt-note { margin-top: 14px !important; font-size: 0.8125rem; font-style: italic; color: var(--wp--preset--color--teal-muted); } .cm-case-main .cm-itq-try .cm-itq-q { margin: 24px 0 14px; font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.375rem; line-height: 1.25; color: var(--wp--preset--color--teal-ink); } .cm-itq-q:focus { outline: none; } .cm-itq-answers { display: flex; gap: 12px; } .cm-itq-answer { flex: 1; min-height: 48px; padding: 12px 18px; border: 1.5px solid var(--wp--preset--color--teal-ink); border-radius: 10px; background: var(--wp--preset--color--home-white); color: var(--wp--preset--color--teal-ink); font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: 1rem; cursor: pointer; } .cm-itq-answer:hover:not(:disabled) { background: var(--wp--preset--color--itq-paper); } .cm-itq-answer:focus-visible, .cm-itq-next:focus-visible { outline: 3px solid var(--wp--preset--color--itq-accent); outline-offset: 2px; } .cm-itq-answer:disabled { cursor: default; } .cm-itq-answer[aria-pressed="true"] { background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--home-white); } .cm-itq-feedback { margin-top: 18px; padding: 16px 20px; border-left: 4px solid var(--wp--preset--color--teal-ink); background: var(--wp--preset--color--itq-paper); color: var(--wp--preset--color--teal-ink); font-size: 0.9375rem; line-height: 1.6; } .cm-case-main .cm-itq-feedback p { margin: 0 0 10px; font-size: 0.9375rem; } .cm-itq-feedback.is-right { border-left-color: var(--wp--preset--color--forest); } .cm-itq-feedback.is-wrong { border-left-color: var(--wp--preset--color--ko-accent); } .cm-case-main .cm-itq-verdict { font-weight: 600; font-size: 1rem; } .cm-itq-verdict:focus { outline: none; } .cm-itq-feedback.is-right .cm-itq-verdict-mark { color: var(--wp--preset--color--forest); } .cm-itq-feedback.is-wrong .cm-itq-verdict-mark { color: var(--wp--preset--color--ko-accent); } .cm-itq-flags { margin: 0; padding: 0; list-style: none; } .cm-itq-flags li { position: relative; padding-left: 26px; margin-top: 6px; } .cm-itq-flags li::before { content: "!"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; background: var(--wp--preset--color--ko-accent); color: var(--wp--preset--color--home-white); } .cm-itq-flags.is-safe li::before { content: "\2713"; background: var(--wp--preset--color--forest); } .cm-itq-try-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; min-height: 44px; } .cm-itq-count { font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--teal-muted); } .cm-itq-next { padding: 12px 20px; border: 0; background: var(--wp--preset--color--amber); color: var(--wp--preset--color--teal-ink); font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .cm-case-main .cm-itq-summary { margin: 16px 0 0; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.125rem; color: var(--wp--preset--color--teal-ink); } .cm-itq-try:not(.is-ready) .cm-itq-answers, .cm-itq-try:not(.is-ready) .cm-itq-try-foot { display: none; } .cm-itq-try:not(.is-ready) .cm-itq-msg + .cm-itq-msg { margin-top: 28px; } @media (max-width: 600px) { .cm-itq-try { padding: 22px 18px 20px; } .cm-itq-answers { flex-direction: column; } } /* ---------- Compliance: the audit chain (1.5.32) ---------- The case's strongest evidence as a figure: four steps in order (an ordered list, because the order is the meaning) and what the chain produced. On the page's own hero ink: parchment 16.49:1; the lilac accent (6.48:1) on numerals and arrows. Both measured. */ .cm-chain { margin: 36px 0 8px; padding: 34px 36px 30px; background: var(--wp--preset--color--cl-ink); color: var(--wp--preset--color--parchment); } .cm-case-main .cm-chain-title { display: block; margin: 0 0 26px; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.5rem; line-height: 1.2; color: var(--wp--preset--color--parchment); } .cm-chain-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .cm-chain-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 28px 0 0; margin: 0; } .cm-chain-step + .cm-chain-step { padding-left: 28px; border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--cl-accent) 35%, transparent); } .cm-chain-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -9px; top: 30px; z-index: 1; font-size: 1.1rem; line-height: 1; color: var(--wp--preset--color--cl-accent); background: var(--wp--preset--color--cl-ink); padding: 2px 0; } .cm-chain-n { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--wp--preset--color--cl-accent); } .cm-chain-name { font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; } .cm-chain-fact { font-size: 0.875rem; line-height: 1.55; } .cm-case-main .cm-chain-result { margin: 28px 0 0; padding-top: 22px; max-width: none; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--cl-accent) 35%, transparent); font-size: 1rem; color: var(--wp--preset--color--parchment); } .cm-chain-big { font-family: var(--wp--preset--font-family--serif); font-size: 2.25rem; line-height: 1; color: var(--wp--preset--color--cl-accent); margin-right: 4px; } /* Case pages colour their list items and paragraphs dark ink; inside the dark panel the text must be set explicitly (found by the scan: 1.27:1). */ .cm-case-main .cm-chain li, .cm-case-main .cm-chain p, .cm-case-main .cm-chain .cm-chain-name, .cm-case-main .cm-chain .cm-chain-fact, body[class*="cm-reg-"] .cm-case-main .cm-chain li, body[class*="cm-reg-"] .cm-case-main .cm-chain p { color: var(--wp--preset--color--parchment); max-width: none; } .cm-case-main .cm-chain .cm-chain-n, .cm-case-main .cm-chain .cm-chain-big { color: var(--wp--preset--color--cl-accent); } @media (max-width: 900px) { .cm-chain { padding: 26px 22px; } .cm-chain-steps { grid-template-columns: 1fr; gap: 22px; } .cm-chain-step, .cm-chain-step + .cm-chain-step { padding: 0 0 0 20px; border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--cl-accent) 35%, transparent); } .cm-chain-step:not(:last-child)::after { content: "\2193"; right: auto; left: -7px; top: auto; bottom: -20px; } } /* ---------- Insights news desk (1.5.36 redesign) ---------- From TechCrunch and Reuters, in the site's own system. A full-width masthead band (plum since 1.5.37) under the dark site header (TechCrunch's dark nav over a colour band); a lead set large beside its image with a ranked Most read panel (Reuters' lead, TechCrunch's Most Popular); a row of three picture cards; the Latest list as hairline rows. The band's colour runs edge to edge through border-image outset, which paints past the column without creating a horizontal scrollbar. */ .cm-news { max-width: 1200px; margin: 0 auto; } /* The band and the article header sit flush under the site header: the default 24px gap between template parts is removed on these two only. */ .wp-site-blocks > main#cm-main.cm-writing, .single-post .wp-site-blocks > main#cm-main { margin-block-start: 0; } /* 1.5.37: plum, chosen by the owner over forest. Forest under the dark-green site header read as more of the same; plum is 161 degrees round the colour wheel from it (complementary, so the two look deliberate together), is used by no category, and carries parchment at 10.25:1. */ .cm-news-band { position: relative; margin: 0 0 44px; padding: 56px 0 0; color: var(--wp--preset--color--parchment); background: var(--wp--preset--color--plum); border-image: linear-gradient(var(--wp--preset--color--plum), var(--wp--preset--color--plum)) fill 0 / 0 / 0 100vmax; } /* Headings on dark grounds: the site's register rules colour every h1 and h2 dark ink, so these are set explicitly (the first render had the wordmark and the ranked heading dark on dark). */ .cm-news .cm-news-band .cm-news-word, body[class] .cm-news .cm-news-band .cm-news-word, .cm-news .cm-news-ranked .cm-news-ranked-h, body[class] .cm-news .cm-news-ranked .cm-news-ranked-h, .cm-news .cm-rail-card.is-work .cm-rail-h, body[class] .cm-news .cm-rail-card.is-work .cm-rail-h { color: var(--wp--preset--color--parchment); } .cm-news-word { margin: 0; font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: clamp(3.5rem, 9vw, 7.5rem); line-height: 0.9; letter-spacing: -0.035em; color: var(--wp--preset--color--parchment); } .cm-news-tag { max-width: 62ch; margin: 18px 0 30px; font-size: 1.0625rem; line-height: 1.55; color: var(--wp--preset--color--parchment); } .cm-news-tag em { font-family: var(--wp--preset--font-family--serif); font-size: 1.375rem; } .cm-news-tag span { display: block; margin-top: 4px; opacity: 0.92; } .cm-news-cats { display: flex; gap: 2px 28px; flex-wrap: wrap; padding: 14px 0 16px; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--parchment) 35%, transparent); } .cm-news .cm-news-cats a { position: relative; padding: 4px 0; font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: 0.9375rem; color: var(--wp--preset--color--parchment); text-decoration: none; } .cm-news-cats a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--wp--preset--color--amber); transform: scaleX(0); transform-origin: left; } .cm-news-cats a:hover::after, .cm-news-cats a:focus-visible::after, .cm-news-cats a.is-current::after { transform: scaleX(1); } .cm-news-cats a:focus-visible { outline: 2px solid var(--wp--preset--color--parchment); outline-offset: 4px; } .cm-story { display: flex; flex-direction: column; gap: 14px; } .cm-story-media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--wp--preset--color--cream); } .cm-story-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cm-story-body { display: flex; flex-direction: column; gap: 8px; } .cm-story-cat { align-self: flex-start; font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .cm-news .cm-story a.cm-story-cat { color: var(--cm-story-text, var(--wp--preset--color--ochre-deep)); } /* over the global link colour */ .cm-story-cat:hover { text-decoration: underline; text-underline-offset: 3px; } .cm-story-title { margin: 0; font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.3125rem; line-height: 1.16; letter-spacing: -0.005em; text-wrap: balance; } .cm-story-title a { color: var(--wp--preset--color--teal-ink); text-decoration: none; } .cm-story-title a:hover, .cm-story-title a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .cm-story-dek { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--teal-muted); } .cm-story-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 2px 0 0; font-size: 0.8125rem; color: var(--wp--preset--color--teal-muted); } .cm-story-meta > span:not(.cm-story-author)::before, .cm-story-author::after { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 9px 3px; border-radius: 50%; background: currentColor; vertical-align: middle; } .cm-story-author { font-weight: 600; color: var(--wp--preset--color--teal-ink); } /* Lead: Reuters' proportion, the headline carrying the page. */ .cm-news-lead-row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; padding-bottom: 44px; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-story.is-lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; } .cm-story.is-lead .cm-story-body { order: -1; padding-top: 4px; } .cm-story.is-lead .cm-story-title { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.015em; } .cm-story.is-lead .cm-story-dek { font-size: 1.0625rem; color: var(--wp--preset--color--teal-ink); opacity: 0.86; } .cm-story.is-lead.is-noimg { grid-template-columns: minmax(0, 1fr); } /* Most read: TechCrunch's ranked block, on the site's dark ink. */ .cm-news-ranked { align-self: start; padding: 26px 26px 22px; background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment); } .cm-news-ranked-h { margin: 0 0 14px; font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.75rem; line-height: 1.05; color: var(--wp--preset--color--parchment); } .cm-news-ranked-list { margin: 0; padding: 0; list-style: none; counter-reset: cm-rank; } .cm-news-ranked-list li { counter-increment: cm-rank; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px; padding: 13px 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--parchment) 22%, transparent); } .cm-news-ranked-list li::before { content: counter(cm-rank); font-family: var(--wp--preset--font-family--serif); font-size: 1.625rem; line-height: 1; color: var(--wp--preset--color--amber); } .cm-news .cm-news-ranked a { color: var(--wp--preset--color--parchment); text-decoration: none; font-weight: 500; line-height: 1.35; } .cm-news .cm-news-ranked a:hover, .cm-news .cm-news-ranked a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .cm-news-ranked a:focus-visible { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 2px; } .cm-news-ranked-foot { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--parchment) 22%, transparent); font-size: 0.875rem; color: var(--wp--preset--color--parchment); } .cm-news .cm-news-ranked-foot a { color: var(--wp--preset--color--amber); font-weight: 600; } /* The card row: three columns, rail cards completing it when stories run short. */ .cm-news-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 40px 0 44px; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-story.is-card .cm-story-title { font-size: 1.375rem; } .cm-news-cards > .cm-rail-card { align-self: stretch; display: flex; flex-direction: column; justify-content: center; } .cm-news-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; padding-top: 40px; } .cm-news-body.is-rail-only { grid-template-columns: minmax(0, 1fr); } .cm-news-body.is-rail-only .cm-news-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .cm-news-h2 { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 2px solid var(--wp--preset--color--teal-ink); font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 2rem; color: var(--wp--preset--color--teal-ink); } .cm-story.is-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-story.is-row .cm-story-media { aspect-ratio: 16 / 10; } .cm-story.is-row .cm-story-title { font-size: 1.3125rem; } .cm-story.is-row.is-noimg { grid-template-columns: minmax(0, 1fr); } .cm-news-rail { display: flex; flex-direction: column; gap: 24px; } .cm-rail-card { padding: 26px 26px 28px; background: var(--wp--preset--color--home-white); border: 1px solid var(--wp--custom--border--on-light); border-top: 3px solid var(--wp--preset--color--amber); } .cm-rail-card p { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--teal-muted); } .cm-rail-h { margin: 0 0 10px; font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; color: var(--wp--preset--color--teal-ink); } .cm-rail-cta { align-self: flex-start; display: inline-block; padding: 12px 18px; background: var(--wp--preset--color--amber); font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .cm-news .cm-rail-card a.cm-rail-cta { color: var(--wp--preset--color--teal-ink); } /* over the global link colour: 6.82:1 on amber */ .cm-rail-cta:focus-visible, .cm-rail-link:focus-visible { outline: 2px solid var(--wp--preset--color--ochre-deep); outline-offset: 3px; } .cm-rail-link { display: block; margin-top: 14px; font-size: 0.875rem; color: var(--wp--preset--color--teal-ink); } .cm-rail-card.is-work { background: var(--wp--preset--color--teal-ink); border-color: var(--wp--preset--color--teal-ink); border-top-color: var(--wp--preset--color--amber); } .cm-rail-card.is-work .cm-rail-h, .cm-rail-card.is-work p, .cm-news .cm-rail-card.is-work .cm-rail-link { color: var(--wp--preset--color--parchment); } .cm-news-empty { padding: 40px 0; color: var(--wp--preset--color--teal-muted); } @media (prefers-reduced-motion: no-preference) { .cm-news-cats a::after { transition: transform 0.25s ease-out; } .cm-story-media img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cm-story:hover .cm-story-media img { transform: scale(1.03); } } @media (max-width: 1080px) { .cm-news-lead-row { grid-template-columns: minmax(0, 1fr); } .cm-news-ranked { max-width: none; } } @media (max-width: 860px) { .cm-news-band { padding-top: 40px; } .cm-story.is-lead { grid-template-columns: minmax(0, 1fr); gap: 20px; } .cm-story.is-lead .cm-story-body { order: 0; } .cm-news-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cm-news-body { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .cm-news-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .cm-news-cats a { white-space: nowrap; } .cm-news-cards { grid-template-columns: minmax(0, 1fr); } .cm-story.is-row { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; } .cm-story.is-row .cm-story-title { font-size: 1.0625rem; } } /* Search (1.5.39): in the banner beside the categories, and a results page in the desk's own design. The field's text and placeholder are parchment on plum; focus shows as an amber ring on the whole field. */ .cm-news-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--parchment) 35%, transparent); } .cm-news-bar .cm-news-cats { border-top: 0; flex: 1 1 auto; min-width: 0; max-width: 100%; } /* min-width: 0, or the row grows to its links instead of scrolling within itself */ .cm-news-search { display: flex; align-items: center; margin: 10px 0; padding: 2px 4px 2px 16px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--parchment) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--wp--preset--color--parchment) 8%, transparent); } .cm-news-search:focus-within { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 2px; } .cm-news-search input[type="search"] { width: 210px; padding: 9px 4px; border: 0; background: transparent; color: var(--wp--preset--color--parchment); font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; } .cm-news-search input[type="search"]::placeholder { color: var(--wp--preset--color--parchment); opacity: 0.85; } .cm-news-search input[type="search"]:focus { outline: none; } .cm-news-search button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wp--preset--color--parchment); cursor: pointer; } .cm-news-search button:hover, .cm-news-search button:focus-visible { background: color-mix(in srgb, var(--wp--preset--color--parchment) 16%, transparent); } .cm-news-band.is-compact { padding-top: 40px; margin-bottom: 28px; } .cm-news-band.is-compact .cm-news-word { font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; } .cm-news-band.is-compact .cm-news-tag { margin: 12px 0 22px; } .cm-search-results { max-width: 820px; } .cm-search-empty { max-width: 640px; padding: 12px 0 24px; } .cm-search-empty p { color: var(--wp--preset--color--teal-muted); line-height: 1.6; } .cm-news .cm-search-empty a.cm-rail-cta { color: var(--wp--preset--color--teal-ink); } @media (max-width: 600px) { .cm-news-bar { flex-direction: column; align-items: stretch; gap: 0; } .cm-news-search { margin: 4px 0 14px; width: 100%; box-sizing: border-box; } /* An input keeps its default width (about twenty characters) unless told otherwise: it pushed the field to 452px on a 390px screen. */ .cm-news-search input[type="search"] { width: 100%; flex: 1 1 auto; min-width: 0; } } /* Topic hubs (1.5.41): a category page as the site's page on its topic. */ .cm-hub-term { margin: 0 0 10px; font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--parchment); } body[class] .cm-news .cm-news-band .cm-hub-term { color: var(--wp--preset--color--parchment); } .cm-hub-start { padding-top: 8px; } .cm-hub-start .cm-news-cards { padding-top: 24px; } .cm-hub-proof { max-width: 760px; margin: 8px 0 44px; } .cm-hub-proof.is-in-row { max-width: none; margin: 0; align-self: start; } .cm-hub-proof.is-span-2 { grid-column: span 2; } @media (max-width: 860px) { .cm-hub-proof.is-span-2 { grid-column: auto; } } .cm-hub-all { max-width: 820px; } .cm-hub-faq { max-width: 760px; padding-top: 32px; } .cm-hub-qa { padding: 20px 0; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-hub-qa h3 { margin: 0 0 8px; font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.3125rem; line-height: 1.25; color: var(--wp--preset--color--teal-ink); } .cm-hub-qa p { margin: 0; line-height: 1.65; color: var(--wp--preset--color--teal-ink); } .cm-cat-learning-technology { --cm-story-text: var(--wp--preset--color--itq-accent); --cm-story-bright: var(--wp--preset--color--itq-glow); } /* Topic, then type (1.5.43): "Technology That Lands · News". */ .cm-story-labels { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; } .cm-story-labels .cm-story-type { font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--teal-muted); text-decoration: none; } .cm-news .cm-story-labels a.cm-story-type { color: var(--wp--preset--color--teal-muted); } .cm-story-labels a.cm-story-type:hover { text-decoration: underline; text-underline-offset: 3px; } /* The separator is drawn, not typed (house style bans dot characters in copy). */ .cm-story-labels a.cm-story-type::before, .cm-kicker-type::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 8px 3px; border-radius: 50%; background: currentColor; vertical-align: middle; } /* Offers (1.5.44): one source, shown on Capabilities and Portfolio. */ .cm-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; } .cm-offer-card { padding: 28px 28px 24px; background: var(--wp--preset--color--home-white); border: 1px solid var(--wp--custom--border--on-light); border-top: 3px solid var(--wp--preset--color--amber); scroll-margin-top: 110px; } .cm-offer-card .cm-offer-name { margin: 0 0 10px; font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.625rem; line-height: 1.15; color: var(--wp--preset--color--teal-ink); } .cm-offer-price { margin: 0 0 18px; color: var(--wp--preset--color--teal-muted); font-size: 0.9375rem; } .cm-offer-price strong { font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.75rem; color: var(--wp--preset--color--teal-ink); } .cm-offer-pricenote { display: block; margin-top: 2px; font-size: 0.875rem; } .cm-offer-facts { margin: 0; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px 16px; } .cm-offer-facts dt { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--teal-muted); padding-top: 3px; } .cm-offer-facts dd { margin: 0; line-height: 1.55; color: var(--wp--preset--color--teal-ink); } .cm-offer-proof { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--wp--custom--border--on-light); font-size: 0.875rem; line-height: 1.55; color: var(--wp--preset--color--teal-ink); } .cm-offer-proof span { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--teal-muted); margin-right: 6px; } .cm-offers-note { max-width: 70ch; margin: 22px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--teal-muted); } .cm-offers-edu { display: block; margin-top: 6px; color: var(--wp--preset--color--teal-ink); font-weight: 600; } .cm-hub-offer { max-width: 820px; margin: 12px 0 44px; padding: 28px 30px; background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment); border-top: 3px solid var(--wp--preset--color--amber); } .cm-hub-offer .cm-from-kicker { color: var(--wp--preset--color--parchment); } body[class] .cm-news .cm-hub-offer .cm-hub-offer-name { margin: 8px 0 6px; font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.75rem; color: var(--wp--preset--color--parchment); } .cm-hub-offer-outcome { margin: 0 0 12px; line-height: 1.55; color: var(--wp--preset--color--parchment); } .cm-hub-offer-price { margin: 0 0 18px; color: var(--wp--preset--color--parchment); } .cm-hub-offer-price strong { font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.5rem; margin-left: 4px; } .cm-hub-offer-note { font-size: 0.875rem; } .cm-hub-offer-time { margin-left: 4px; font-size: 0.875rem; } .cm-hub-offer-time.is-alone { margin-left: 0; } .cm-hub-offer-time.is-alone::before { display: none; } .cm-hub-offer-time::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 3px 0; border-radius: 50%; background: currentColor; vertical-align: middle; } .cm-hub-offer-links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .cm-news .cm-hub-offer a.cm-rail-cta { color: var(--wp--preset--color--teal-ink); } .cm-news .cm-hub-offer a.cm-rail-link { margin: 0; color: var(--wp--preset--color--parchment); } @media (max-width: 860px) { .cm-offers { grid-template-columns: minmax(0, 1fr); } .cm-offer-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .cm-offer-facts dd { margin-bottom: 8px; } } /* Services page (1.5.48): the one place prices appear, with their context. */ .cm-services-title { margin: 10px 0 18px; font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: clamp(2.6rem, 5vw, 4.25rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--wp--preset--color--teal-ink); text-wrap: balance; } .cm-services-title em { color: var(--wp--preset--color--ochre-deep); } .cm-services-lede { max-width: 62ch; margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--wp--preset--color--teal-muted); } .cm-services-offers .cm-offers { margin-top: 0; } /* WordPress's constrained layout centres any child narrower than the column (margin-inline: auto !important). A reading-width paragraph under a left-aligned heading must stay on the heading's edge, so it is anchored with the one override that can win, to the COLUMN's left edge (half the difference between the section and its content size), not the section's. */ .cm-services-hero .cm-services-lede, .cm-services-offers .cm-offers-note { margin-left: max(0px, calc((100% - 1100px) / 2)) !important; margin-right: auto !important; } .cm-services-ask .cm-services-ask-p { margin-left: max(0px, calc((100% - 820px) / 2)) !important; margin-right: auto !important; } .cm-services-h2 { margin: 0 0 24px; font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 2rem; line-height: 1.15; color: var(--wp--preset--color--teal-ink); } .cm-begin-steps { list-style: none; margin: 0 0 64px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .cm-services-begin .cm-process { max-width: 1100px; } /* the Portfolio's 1140px column is wider than this page's */ .cm-begin-steps li { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 2px solid var(--wp--preset--color--amber); } .cm-offer-more { margin: 16px 0 0; } /* 1.5.51: the entry offer leads the grid, full width. */ .cm-offer-card.is-entry { grid-column: 1 / -1; border-top-color: var(--wp--preset--color--teal-ink); } .cm-offer-entry { margin: 0 0 6px; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); } /* Credentials under the positioning line, aligned to the column (see the lede). */ .cm-services-hero .cm-credentials { list-style: none; margin: 26px 0 0; margin-left: max(0px, calc((100% - 1100px) / 2)) !important; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1100px; } .cm-credentials li { padding-top: 12px; border-top: 1px solid var(--wp--custom--border--on-light-strong); font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--teal-ink); } /* Client testimonials, shown only when the owner has added them. */ .cm-services-offers .cm-services-h2 { margin-top: 56px; } .cm-client-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .cm-client-quote { margin: 0; padding: 24px 26px; background: var(--wp--preset--color--home-white); border-left: 3px solid var(--wp--preset--color--amber); } .cm-client-quote blockquote { margin: 0; padding: 0; border: 0; } .cm-client-quote blockquote p { margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: 1.1875rem; line-height: 1.45; color: var(--wp--preset--color--teal-ink); } .cm-client-quote figcaption { margin-top: 14px; font-size: 0.875rem; color: var(--wp--preset--color--teal-muted); } @media (max-width: 860px) { .cm-services-hero .cm-credentials { grid-template-columns: minmax(0, 1fr); gap: 10px; } } /* The closing band sits on forest: every colour on it is set explicitly (the register rules colour headings and links for light grounds). */ body[class] .cm-services-ask .cm-services-ask-h { margin: 0 0 14px; font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; color: var(--wp--preset--color--parchment); } .cm-services-ask .cm-services-ask-p { max-width: 58ch; margin: 0 0 28px; font-size: 1.125rem; line-height: 1.6; color: var(--wp--preset--color--parchment); } .cm-services-ask-links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .cm-services-ask a.cm-rail-cta { color: var(--wp--preset--color--teal-ink); } .cm-services-ask a.cm-services-ask-link { color: var(--wp--preset--color--parchment); text-decoration: underline; text-underline-offset: 3px; } .cm-services-ask a:focus-visible { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 3px; } @media (max-width: 860px) { .cm-begin-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* The article kit (1.5.53): writing sections as house styles on core blocks. */ .cm-prose .cm-section-label { margin: 0 0 6px; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); } .cm-prose .is-style-takeaway { margin: 2em 0; padding: 18px 22px; background: var(--wp--preset--color--home-wash); border-left: 3px solid var(--wp--preset--color--amber); } .cm-prose .is-style-takeaway > :last-child { margin-bottom: 0; } .cm-prose .is-style-takeaway > p:not(.cm-section-label) { font-family: var(--wp--preset--font-family--serif); font-size: 1.1875rem; line-height: 1.45; color: var(--wp--preset--color--teal-ink); } /* Checklist: a real list, marked with drawn ticks (not form checkboxes). */ .cm-prose ul.is-style-checklist { list-style: none; padding-left: 0; } .cm-prose ul.is-style-checklist > li { position: relative; padding-left: 30px; } /* A plain tick: recommended actions, not boxes that read as already done. */ .cm-prose ul.is-style-checklist > li::before { content: ""; position: absolute; left: 6px; top: 0.3em; width: 6px; height: 12px; border: solid var(--wp--preset--color--amber); border-width: 0 3px 3px 0; transform: rotate(45deg); } /* Timeline: an ordered list with a rule and markers. */ .cm-prose ol.is-style-timeline { list-style: none; padding-left: 0; margin-left: 6px; border-left: 2px solid var(--wp--custom--border--on-light-strong); } .cm-prose ol.is-style-timeline > li { position: relative; padding: 0 0 18px 24px; } .cm-prose ol.is-style-timeline > li::before { content: ""; position: absolute; left: -7px; top: 0.4em; width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--amber); } .cm-prose ol.is-style-timeline > li > strong:first-child { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ochre-deep); } /* Comparison table: wide tables scroll inside themselves, never the page. */ .cm-prose .wp-block-table.is-style-compare { overflow-x: auto; margin: 2em 0; } .cm-prose .is-style-compare table { min-width: 520px; border-collapse: collapse; font-size: 0.9375rem; } .cm-prose .is-style-compare th, .cm-prose .is-style-compare td { padding: 10px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-prose .is-style-compare thead th { background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment); font-weight: 600; } .cm-prose .is-style-compare tbody td:first-child { font-weight: 600; color: var(--wp--preset--color--teal-ink); } .cm-prose .wp-block-table.is-style-compare:focus-visible { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 3px; } .cm-prose .is-style-compare figcaption { margin-top: 8px; font-size: 0.875rem; color: var(--wp--preset--color--teal-muted); } /* The proof strip inside an article: numbers sized for the reading column, labels aligned along the bottom however a value wraps. Case pages keep their large numerals. */ .cm-prose .cm-statband-item { display: flex; flex-direction: column; } .cm-prose .cm-statband-value { font-size: clamp(2rem, 1.2rem + 2.2vw, 2.9rem); } .cm-prose .cm-statband-label { margin-top: auto; } /* Common questions: native disclosures, no script. */ .cm-prose .is-style-question { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--wp--custom--border--on-light); } .cm-prose .is-style-question > summary { cursor: pointer; font-family: var(--wp--preset--font-family--serif); font-size: 1.1875rem; color: var(--wp--preset--color--teal-ink); } .cm-prose .is-style-question > summary:focus-visible { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 3px; } .cm-prose .is-style-question > :not(summary) { margin: 10px 0 0; } /* In this article: the table of contents. */ .cm-toc { margin: 22px 0 6px; border: 1px solid var(--wp--custom--border--on-light-strong); background: var(--wp--preset--color--home-white); } .cm-toc summary { padding: 12px 16px; cursor: pointer; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--teal-ink); } .cm-toc summary:focus-visible { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 2px; } .cm-toc-count { margin-left: 6px; color: var(--wp--preset--color--teal-muted); text-transform: none; letter-spacing: 0; } .cm-toc ol { margin: 0; padding: 0 16px 14px 36px; } .cm-toc li { margin: 6px 0; line-height: 1.4; } .cm-toc a { color: var(--wp--preset--color--teal-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); } .cm-prose h2[id] { scroll-margin-top: 110px; } /* Guide (1.5.54): on wide screens "In this article" becomes a rail that stays beside the text; below that, the box. Only one is ever displayed. */ .cm-toc-rail { display: none; } @media (min-width: 1280px) { .cm-toc { display: none; } /* The constrained layout sets margin-inline: auto !important on every child; the rail's offset into the left margin needs the override that can win (skill §4.5). 210px wide, 48px clear of the text. */ .cm-toc-rail { display: block; float: left; position: sticky; top: 120px; width: 210px; margin: 8px 0 0 -258px !important; padding: 14px 0 0; border-top: 2px solid var(--cm-accent-bright, var(--wp--preset--color--amber)); } .cm-toc-rail-title { margin: 0 0 10px; font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--teal-muted); } .cm-toc-rail ol { margin: 0; padding: 0; list-style: none; counter-reset: cmrail; } .cm-toc-rail li { margin: 0 0 10px; counter-increment: cmrail; display: grid; grid-template-columns: 22px minmax(0, 1fr); font-size: 0.875rem; line-height: 1.35; } .cm-toc-rail li::before { content: counter(cmrail, decimal-leading-zero); font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; padding-top: 2px; color: var(--wp--preset--color--teal-muted); } .cm-toc-rail a { color: var(--wp--preset--color--teal-muted); text-decoration: none; } .cm-toc-rail a:hover, .cm-toc-rail a:focus-visible { color: var(--wp--preset--color--teal-ink); text-decoration: underline; text-underline-offset: 3px; } .cm-toc-rail a[aria-current] { color: var(--wp--preset--color--teal-ink); font-weight: 600; } } /* Field Note (1.5.54): the article's results under the header. */ .cm-results-band { margin: 0 auto; padding: 0 var(--wp--preset--spacing--70); } .cm-results-band .cm-statband { margin-top: 0; margin-bottom: 44px; } /* News Brief: a compact header in the reading column. */ .cm-brief-head { padding-top: 56px; } .cm-brief-head .cm-article-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--cm-accent-bright, var(--wp--preset--color--amber)); } .cm-brief-head .cm-kicker { margin: 0; color: var(--cm-accent, var(--wp--preset--color--teal-ink)); } body[class] .cm-brief-head .cm-brief-title { margin: 18px 0 0; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.08; color: var(--wp--preset--color--teal-ink); } /* The offer at the end of an article. */ .cm-article-offer { margin: 36px 0; } body[class] .cm-hub-offer .cm-hub-offer-name { margin: 8px 0 6px; font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 1.75rem; color: var(--wp--preset--color--parchment); } .cm-hub-offer a.cm-rail-cta { color: var(--wp--preset--color--teal-ink); } .cm-hub-offer a.cm-rail-link { margin: 0; color: var(--wp--preset--color--parchment); } @media (max-width: 600px) { .cm-brief-head { padding-top: 32px; } .cm-brief-head .cm-article-top { flex-wrap: wrap; } } /* Category colours for news-desk stories and the category bar (1.5.33), generated from cleamclemore_category_accent()'s map; gate 58 keeps the two in step. */ .cm-cat-ai-adoption { --cm-story-text: var(--wp--preset--color--crucible-deep); --cm-story-bright: var(--wp--preset--color--signal); } .cm-cat-instructional-design { --cm-story-text: var(--wp--preset--color--ib-deep); --cm-story-bright: var(--wp--preset--color--ib-accent); } .cm-cat-change-management { --cm-story-text: var(--wp--preset--color--ko-accent); --cm-story-bright: var(--wp--preset--color--rose); } .cm-cat-measuring-training { --cm-story-text: var(--wp--preset--color--ochre-deep); --cm-story-bright: var(--wp--preset--color--gold); } .cm-cat-rollout-failures { --cm-story-text: var(--wp--preset--color--sci-accent); --cm-story-bright: var(--wp--preset--color--sci-glow); } .cm-cat-field-notes { --cm-story-text: var(--wp--preset--color--cl-deep); --cm-story-bright: var(--wp--preset--color--cl-accent); } .cm-cat-tech-news { --cm-story-text: var(--wp--preset--color--itq-accent); --cm-story-bright: var(--wp--preset--color--itq-glow); } .cm-news-pager { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; } .cm-news-pager a { font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--teal-ink); } .cm-news-pager a.is-next { margin-left: auto; } /* ---------- Article page (1.5.36 redesign) ---------- TechCrunch's header, full bleed: the image fills the left half of the screen, the category's colour the right, with a hairline top row (the category, and the share icons) and a large headline anchored to the bottom. A cut-out image (a transparent PNG or WebP, detected once and cached) is shown whole on a soft stage instead of being cropped like a photograph. Every category text colour is verified 4.5:1 or better on parchment, so parchment on it holds too. */ .cm-article-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(440px, 40vw, 600px); margin: 0 0 56px; background: var(--cm-accent, var(--wp--preset--color--teal-ink)); } .cm-article-head:not(:has(.cm-article-media img)) { grid-template-columns: minmax(0, 1fr); min-height: 380px; } /* WordPress's flow spacing between blocks does not belong inside a split header: it pushed the panel 24px down and the image 5px (measured). */ .cm-article-head > *, .cm-article-panel > * { margin-block-start: 0 !important; } .cm-article-media { position: relative; margin: 0 !important; padding: 0 !important; border: 0 !important; min-height: 100%; background: var(--wp--preset--color--cream); } .cm-article-media > a, .cm-article-media > img { margin: 0 !important; } .cm-article-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* 1.5.56: wide images (wider than 3:2) are shown whole, never cropped, on the cream they are drawn on; on a phone the image box takes the image's own shape. The !important beats the inline object-fit WordPress writes. */ body.cm-media-wide .cm-article-media { background: var(--cm-media-bg, var(--wp--preset--color--cream)); } /* the image's own edge colour */ body.cm-media-wide .cm-article-media img { object-fit: contain !important; } @media (max-width: 860px) { body.cm-media-wide .cm-article-media { min-height: 0 !important; aspect-ratio: var(--cm-media-ratio, 2); } } body.cm-media-cutout .cm-article-media { background: radial-gradient(120% 90% at 50% 100%, var(--wp--preset--color--cream) 0%, var(--wp--preset--color--parchment) 70%); } /* !important: the featured-image block writes object-fit:cover inline on the image, which beats any stylesheet rule without it. Without this the cut-out rule never applied (found by computed style, 1.5.37). */ body.cm-media-cutout .cm-article-media img { object-fit: contain !important; padding: clamp(24px, 4vw, 64px); box-sizing: border-box; } .cm-article-panel { display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 52px) clamp(24px, 4.4vw, 72px) clamp(36px, 4vw, 60px); } .cm-article-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--parchment) 45%, transparent); } .cm-article-top .cm-kicker { margin: 0; } .cm-article-panel .cm-post-title { margin: auto 0 0; padding-top: 48px; max-width: 19ch; font-size: clamp(2.2rem, 1rem + 2.3vw, 3.4rem); /* 1.5.56: long titles in about three lines, not four */ line-height: 1.02; letter-spacing: -0.02em; color: var(--wp--preset--color--parchment); text-wrap: balance; } .cm-article-top .cm-share-row { margin: 0; padding: 0; border: 0; } .cm-article-top .cm-share-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* The category colour rule paints kicker and label in the accent, which is the panel's own colour: matched here. */ body[class*="cm-accent-"] .cm-article-panel .cm-kicker, body[class*="cm-accent-"] .cm-article-panel .cm-share-label, .cm-article-head .cm-article-panel .cm-kicker, .cm-article-head .cm-article-panel .cm-share-label { color: var(--wp--preset--color--parchment); } @media (max-width: 860px) { .cm-article-head { grid-template-columns: minmax(0, 1fr); min-height: 0; margin-bottom: 36px; } .cm-article-media { min-height: 0; aspect-ratio: 16 / 10; } .cm-article-panel .cm-post-title { padding-top: 32px; max-width: none; } } .cm-share-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .cm-share-row .cm-share-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: var(--wp--preset--color--teal-ink); cursor: pointer; text-decoration: none; } .cm-share-row .cm-share-btn:hover { background: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--parchment); } .cm-share-row .cm-share-btn:focus-visible { outline: 2px solid var(--wp--preset--color--ochre-deep); outline-offset: 2px; } .cm-share-row .cm-share-btn.is-copied { background: var(--wp--preset--color--forest); border-color: var(--wp--preset--color--forest); color: var(--wp--preset--color--parchment); } .cm-article-panel .cm-share-row .cm-share-btn { color: var(--wp--preset--color--parchment); } .cm-article-panel .cm-share-row .cm-share-btn:hover { background: var(--wp--preset--color--parchment); color: var(--cm-accent, var(--wp--preset--color--teal-ink)); } .cm-article-panel .cm-share-row .cm-share-btn:focus-visible { outline-color: var(--wp--preset--color--parchment); } .cm-from-portfolio { margin: 48px 0 8px; padding: 26px 28px 24px; background: var(--wp--preset--color--home-white); border: 1px solid var(--wp--custom--border--on-light); border-top: 3px solid var(--cm-accent-bright, var(--wp--preset--color--amber)); } .cm-from-portfolio p { margin: 0; max-width: none; } .cm-from-kicker { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--teal-muted); } .cm-from-portfolio .cm-from-name { margin-top: 10px; font-weight: 600; font-size: 0.9375rem; color: var(--wp--preset--color--teal-ink); } .cm-from-portfolio .cm-from-thesis { margin-top: 4px; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.5rem; line-height: 1.25; color: var(--wp--preset--color--teal-ink); } .cm-from-link { display: inline-block; margin-top: 16px; font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--teal-ink); } @media (max-width: 860px) { .cm-article-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; } .cm-article-media img { min-height: 0; aspect-ratio: 16 / 10; } .cm-article-panel { padding: 28px 22px 26px; gap: 22px; } }